Merge branch 'main' into docs/626-Spinner_Basic_Documentation

sl-design-system · Mar 21, 2024 · ec419d8 · ec419d8
2 parents dabc7fd + c7db7db
commit ec419d8
Show file tree

Hide file tree

Showing 67 changed files with 495 additions and 155 deletions.
diff --git a/.changeset/dry-starfishes-suffer.md b/.changeset/dry-starfishes-suffer.md
diff --git a/.changeset/giant-points-unite.md b/.changeset/giant-points-unite.md
@@ -0,0 +1,5 @@
+---
+"@sl-design-system/checklist": patch
+---
+
+New checklist component
diff --git a/package.json b/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": [

diff --git a/packages/checklist/index.ts b/packages/checklist/index.ts
@@ -1 +1,2 @@
+import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';
 export * from './src/checklist.js';
diff --git a/packages/checklist/package.json b/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"
  }
 }
diff --git a/packages/checklist/src/checklist.scss b/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;

diff --git a/packages/checklist/src/checklist.stories.ts b/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;
 

diff --git a/packages/checklist/src/checklist.ts b/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);
+ }
+ }
 }
diff --git a/packages/checklist/src/the-message-font-face.ts b/packages/checklist/src/the-message-font-face.ts
diff --git a/packages/checklist/test.html b/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>
diff --git a/packages/components/accordion/CHANGELOG.md b/packages/components/accordion/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @sl-design-system/accordion
 
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`38b0ca4`](https://github.com/sl-design-system/components/commit/38b0ca4d72014605418639b69410863eb8e231ad)]:
+ - @sl-design-system/shared@0.2.7
+
 ## 0.0.1
 
 ### Patch Changes

diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sl-design-system/accordion",
- "version": "0.0.1",
+ "version": "0.0.2",
  "description": "Accordion component for the SL Design System",
  "license": "Apache-2.0",
  "publishConfig": {
@@ -39,6 +39,6 @@
  },
  "dependencies": {
  "@open-wc/scoped-elements": "^3.0.5",
- "@sl-design-system/shared": "0.2.6"
+ "@sl-design-system/shared": "0.2.7"
  }
 }