Checklist improvements (#1071)

.changeset/giant-points-unite.md

@@ -0,0 +1,5 @@
+---
+"@sl-design-system/checklist": patch
+---
+
+New checklist component

package.json

@@ -62,6 +62,21 @@
       ]
     },
     "build:checklist": {
+      "command": "esbuild --minify --bundle packages/checklist/index.ts --outdir=packages/checklist/dist --sourcemap",
+      "dependencies": [
+        "build:checklist:package"
+      ],
+      "files": [
+        "packages/checklist/**/*.scss",
+        "packages/checklist/**/*.ts",
+        "!packages/checklist/**/*.d.ts"
+      ],
+      "output": [
+        "packages/checklist/dist/index.js",
+        "packages/checklist/dist/index.js.map"
+      ]
+    },
+    "build:checklist:package": {
       "command": "node scripts/build-packages.js checklist",
       "clean": "if-file-deleted",
       "dependencies": [

packages/checklist/index.ts

@@ -1 +1,2 @@
+import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';
 export * from './src/checklist.js';

packages/checklist/package.json

@@ -16,28 +16,32 @@
     "url": "https://github.com/sl-design-system/components/issues"
   },
   "type": "module",
-  "main": "./index.js",
-  "module": "./index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./index.d.ts",
   "customElements": "custom-elements.json",
   "exports": {
-    ".": "./index.js",
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./index.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "**/*.d.ts",
     "**/*.js",
-    "**/*.js.map",
-    "custom-elements.json"
+    "**/*.js.map"
   ],
   "sideEffects": true,
   "scripts": {
-    "test": "echo \"Error: run tests from monorepo root.\" && exit 1"
+    "test": "npx http-server -o test.html"
   },
-  "dependencies": {
+  "devDependencies": {
     "@fortawesome/pro-solid-svg-icons": "^6.1.5",
     "@open-wc/scoped-elements": "^3.0.5",
     "@sl-design-system/icon": "0.0.9",
+    "@sl-design-system/skeleton": "0.2.3",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.9",
     "lit": "^3.1.2"
   }
 }

packages/checklist/src/checklist.scss

@@ -1,4 +1,20 @@
+@import '@sl-design-system/sanoma-learning/base';
+@import '@sl-design-system/sanoma-learning/light';
+@import '@sl-design-system/sanoma-learning/dark';
+
 :host {
+  @include sl-theme-base;
+
+  @media (prefers-color-scheme: light) {
+    @include sl-theme-light;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    @include sl-theme-dark;
+  }
+}
+
+:host(:defined) {
   --_background: var(--sl-color-slds-checklist-background);
   --_border-radius: var(--sl-border-radius-slds-checklist);
   --_border: var(--sl-border-width-slds-checklist) solid var(--sl-color-slds-checklist-border);
@@ -37,6 +53,49 @@ p {
   margin-block: 1rem;
 }
 
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  align-items: center;
+  border-block-end: 1px solid var(--_divider-color);
+  display: flex;
+  gap: 1rem;
+  margin-block-start: 0.75rem;
+  padding-block-end: 0.75rem;
+
+  &:first-of-type .title {
+    inline-size: 195px;
+  }
+
+  &:nth-of-type(2) .title {
+    inline-size: 105px;
+  }
+
+  &:nth-of-type(3) .title {
+    inline-size: 91px;
+  }
+
+  &:last-of-type .title {
+    inline-size: 200px;
+  }
+}
+
+sl-skeleton.icon {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  display: inline-flex;
+  inline-size: var(--sl-size-icon-xl);
+}
+
+sl-skeleton.title {
+  block-size: 1rem;
+  display: flex;
+}
+
 details {
   border-block-end: 1px solid var(--_divider-color);
   margin-block-start: 0.75rem;

packages/checklist/src/checklist.stories.ts

@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import '../index.js';
+import './checklist.js';
 
 type Story = StoryObj;
 

packages/checklist/src/checklist.ts

@@ -1,9 +1,11 @@
 import { faCircleCheck, faCircleExclamation } from '@fortawesome/pro-solid-svg-icons';
 import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { Icon } from '@sl-design-system/icon';
+import { Skeleton } from '@sl-design-system/skeleton';
 import { type CSSResultGroup, LitElement, type TemplateResult, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import styles from './checklist.scss.js';
+import theMessageFontFace from './the-message-font-face.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -16,6 +18,8 @@ interface ChecklistItem {
   description: TemplateResult | void;
 }
 
+const SANOMA_LEARNING_TYPEKIT_URL = 'https://use.typekit.net/kes1hoh.css';
+
 Icon.register(faCircleCheck, faCircleExclamation);
 
 /**
@@ -26,7 +30,8 @@ export class Checklist extends ScopedElementsMixin(LitElement) {
   /** @internal */
   static get scopedElements(): ScopedElementsMap {
     return {
-      'sl-icon': Icon
+      'sl-icon': Icon,
+      'sl-skeleton': Skeleton
     };
   }
 
@@ -36,14 +41,17 @@ export class Checklist extends ScopedElementsMixin(LitElement) {
   /** The items in the list. */
   @state() items: ChecklistItem[] = [];
 
-  override firstUpdated(): void {
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    void this.#setupFonts();
+
     // Delay the check to give the application time to initialize.
-    setTimeout(() => void this.check(), 500);
+    setTimeout(() => void this.check(), 2000);
   }
 
   override render(): TemplateResult {
     return html`
-      <link rel="stylesheet" href="https://use.typekit.net/kes1hoh.css" />
       <h1>SL Design System Checklist</h1>
       <p>
         Welcome to the Sanoma Learning Design System. You will find a checklist below of the steps described in our
@@ -53,17 +61,7 @@ export class Checklist extends ScopedElementsMixin(LitElement) {
         🚀.
       </p>
 
-      ${this.items.map(
-        item => html`
-          <details .open=${!!item.description}>
-            <summary @click=${(event: Event) => event.preventDefault()}>
-              <sl-icon .name=${item.description ? 'fas-circle-exclamation' : 'fas-circle-check'} size="xl"></sl-icon>
-              ${item.title}
-            </summary>
-            <p>${item.description}</p>
-          </details>
-        `
-      )}
+      ${this.items?.length ? this.renderItems() : this.renderSkeletons()}
 
       <p>
         📚 You can find the documentation for the SL Design System at
@@ -75,23 +73,52 @@ export class Checklist extends ScopedElementsMixin(LitElement) {
     `;
   }
 
+  renderItems(): TemplateResult[] {
+    return this.items.map(
+      item => html`
+        <details .open=${!!item.description}>
+          <summary @click=${(event: Event) => event.preventDefault()}>
+            <sl-icon .name=${item.description ? 'fas-circle-exclamation' : 'fas-circle-check'} size="xl"></sl-icon>
+            <span>${item.title}</span>
+          </summary>
+          <p>${item.description}</p>
+        </details>
+      `
+    );
+  }
+
+  renderSkeletons(): TemplateResult {
+    return html`
+      <ul>
+        ${Array.from({ length: 4 }).map(
+          () => html`
+            <li>
+              <sl-skeleton class="icon"></sl-skeleton>
+              <sl-skeleton class="title"></sl-skeleton>
+            </li>
+          `
+        )}
+      </ul>
+    `;
+  }
+
   /** Perform the checks. */
   async check(): Promise<void> {
     this.items = [
       {
-        title: 'CSS Custom Properties present',
+        title: 'Load CSS Custom Properties',
         description: this.#checkTheme()
       },
       {
-        title: 'Webfonts are available',
+        title: 'Load web fonts',
         description: await this.#checkFonts()
       },
       {
-        title: 'Theme is set up correctly',
+        title: 'Set up theme',
         description: this.#checkIcons()
       },
       {
-        title: 'Button web component is loaded',
+        title: 'Load button web component',
         description: this.#checkButton()
       }
     ];
@@ -111,11 +138,15 @@ export class Checklist extends ScopedElementsMixin(LitElement) {
   }
 
   async #checkFonts(): Promise<TemplateResult | void> {
+    if (this.#checkTheme()) {
+      return html`We cannot check the fonts until the CSS Custom Properties are loaded. Please fix this first.`;
+    }
+
     const styles = getComputedStyle(this),
       required = ['--sl-text-typeset-font-family-body', '--sl-text-typeset-font-family-heading'].map(name =>
         styles.getPropertyValue(name)
       ),
-      available = Array.from((await document.fonts.ready).keys()).map(ff => ff.family);
+      available = await this.#getDocumentFontFamilies();
 
     if (!required.every(family => available.includes(family))) {
       return html`Not all required fonts are available. Your theme uses the font families
@@ -139,8 +170,10 @@ export class Checklist extends ScopedElementsMixin(LitElement) {
   }
 
   #checkTheme(): TemplateResult | void {
-    const base = !!getComputedStyle(this).getPropertyValue('--sl-color-palette-white-base'),
-      lightOrDark = !!getComputedStyle(this).getPropertyValue('--sl-color-surface-solid-primary-foreground');
+    const base = !!getComputedStyle(this.parentElement!).getPropertyValue('--sl-color-palette-white-base'),
+      lightOrDark = !!getComputedStyle(this.parentElement!).getPropertyValue(
+        '--sl-color-surface-solid-primary-foreground'
+      );
 
     if (base && !lightOrDark) {
       return html`The base theme is set up correctly, but the tokens for the light or dark mode are missing. You likely
@@ -152,4 +185,36 @@ export class Checklist extends ScopedElementsMixin(LitElement) {
         section.`;
     }
   }
+
+  async #getDocumentFontFamilies(): Promise<string[]> {
+    const fonts = await document.fonts.ready;
+
+    // Workaround for FF bug https://bugzilla.mozilla.org/show_bug.cgi?id=1729089
+    const families: string[] = [];
+    fonts.forEach(ff => families.push(ff.family));
+
+    return families;
+  }
+
+  async #setupFonts(): Promise<void> {
+    const link = document.querySelector(`link[href="${SANOMA_LEARNING_TYPEKIT_URL}"]`);
+
+    if (!link) {
+      const link = document.createElement('link');
+
+      link.href = SANOMA_LEARNING_TYPEKIT_URL;
+      link.rel = 'stylesheet';
+
+      // Loading web fonts inside of the shadow DOM doesn't work, so we need to add the link to the document head.
+      document.head.appendChild(link);
+    }
+
+    const families = await this.#getDocumentFontFamilies();
+    if (!families.includes('The Message')) {
+      const style = document.createElement('style');
+      style.innerText = theMessageFontFace;
+
+      document.head.appendChild(style);
+    }
+  }
 }

packages/checklist/test.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <head>
+    <title>Checklist</title>
+    <script src="./dist/index.js"></script>
+  </head>
+  <body>
+    <slds-checklist></slds-checklist>
+  </body>
+</html>

packages/themes/sanoma-learning/all.css

@@ -1327,7 +1327,7 @@
     --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-base));
     --sl-color-slds-checklist-link-idle: rgb(var(--sl-color-palette-info-400));
     --sl-color-slds-checklist-foreground: var(--sl-body-foreground);
-    --sl-color-slds-checklist-backgroud: var(--sl-body-background);
+    --sl-color-slds-checklist-background: var(--sl-body-background);
     --sl-color-accordion-active-background: var(--sl-body-background);
     --sl-color-accordion-disabled-header: var(--sl-body-background);
     --sl-color-accordion-disabled-background: var(--sl-body-background);
@@ -2137,7 +2137,7 @@
     --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-300));
     --sl-color-slds-checklist-icon-danger: rgb(var(--sl-color-palette-danger-300));
     --sl-color-slds-checklist-foreground: var(--sl-body-foreground);
-    --sl-color-slds-checklist-backgroud: var(--sl-body-background);
+    --sl-color-slds-checklist-background: var(--sl-body-background);
     --sl-color-tab-content-foreground: var(--sl-body-foreground);
     --sl-color-tab-content-background: var(--sl-body-background);
     --sl-color-tab-active-foreground: var(--sl-body-foreground);

packages/themes/sanoma-learning/dark.css

@@ -493,7 +493,7 @@
   --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-300));
   --sl-color-slds-checklist-icon-danger: rgb(var(--sl-color-palette-danger-300));
   --sl-color-slds-checklist-foreground: var(--sl-body-foreground);
-  --sl-color-slds-checklist-backgroud: var(--sl-body-background);
+  --sl-color-slds-checklist-background: var(--sl-body-background);
   --sl-color-tab-content-foreground: var(--sl-body-foreground);
   --sl-color-tab-content-background: var(--sl-body-background);
   --sl-color-tab-active-foreground: var(--sl-body-foreground);

packages/themes/sanoma-learning/dark.json

@@ -4862,7 +4862,7 @@
     },
     "slds": {
       "checklist": {
-        "backgroud": {
+        "background": {
           "value": "{body.background}",
           "type": "color",
           "failedToResolve": true