Feature/1358 progress bar component

.changeset/large-needles-vanish.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/progress-bar': patch
+---
+
+Added progress bar component

.changeset/yellow-cars-shout.md

@@ -0,0 +1,16 @@
+---
+'@sl-design-system/editorial-suite': minor
+'@sl-design-system/my-digital-book': minor
+'@sl-design-system/sanoma-learning': minor
+'@sl-design-system/itslearning': minor
+'@sl-design-system/bingel-int': minor
+'@sl-design-system/bingel-dc': minor
+'@sl-design-system/clickedu': minor
+'@sl-design-system/magister': minor
+'@sl-design-system/kampus': minor
+'@sl-design-system/neon': minor
+'@sl-design-system/teas': minor
+'@sl-design-system/max': minor
+---
+
+Added progress bar tokens

packages/components/format-date/src/format-date.spec.ts

@@ -5,7 +5,7 @@ import { FormatDate } from './format-date.js';
 
 describe('sl-format-number', () => {
   let el: FormatDate;
-  const date = new Date(Date.UTC(2022, 11, 17, 14, 5, 42));
+  const date = new Date(2022, 11, 17, 14, 5, 42);
 
   describe('defaults', () => {
     beforeEach(async () => {
@@ -111,7 +111,6 @@ describe('sl-format-number', () => {
       el.timeZoneName = 'long';
 
       await el.updateComplete;
-      console.log(el.renderRoot);
       expect(el.renderRoot).to.have.trimmed.text('12/17/2022, Coordinated Universal Time');
     });
 

packages/components/progress-bar/index.ts

@@ -0,0 +1 @@
+export * from './src/progress-bar.js';

packages/components/progress-bar/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@sl-design-system/progress-bar",
+  "version": "0.0.0",
+  "description": "Progress-bar component for the SL Design System",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sl-design-system/components.git",
+    "directory": "packages/components/progress-bar"
+  },
+  "homepage": "https://sanomalearning.design/components/progress-bar",
+  "bugs": {
+    "url": "https://github.com/sl-design-system/components/issues"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": "./index.js",
+    "./package.json": "./package.json",
+    "./register.js": "./register.js"
+  },
+  "files": [
+    "**/*.d.ts",
+    "**/*.js",
+    "**/*.js.map",
+    "custom-elements.json"
+  ],
+  "sideEffects": [
+    "register.js"
+  ],
+  "scripts": {
+    "test": "echo \"Error: run tests from monorepo root.\" && exit 1"
+  },
+  "dependencies": {
+    "@sl-design-system/icon": "^1.0.0"
+  },
+  "devDependencies": {
+    "@lit/localize": "^0.12.1",
+    "@open-wc/scoped-elements": "^3.0.5",
+    "lit": "^3.1.4"
+  },
+  "peerDependencies": {
+    "@lit/localize": "^0.12.1",
+    "@open-wc/scoped-elements": "^3.0.5",
+    "lit": "^3.1.4"
+  }
+}

packages/components/progress-bar/register.ts

@@ -0,0 +1,3 @@
+import { ProgressBar } from './src/progress-bar.js';
+
+customElements.define('sl-progress-bar', ProgressBar);

packages/components/progress-bar/src/progress-bar.scss

@@ -0,0 +1,132 @@
+$variants: success, warning, error;
+
+:host {
+  --_bar-background: var(--sl-color-progressbar-background);
+  --_bar-thickness: var(--sl-size-progressbar);
+  --_border-radius: var(--sl-border-radius-full);
+  --_gap: var(--sl-space-progressbar-vertical-gap);
+  --_helper-color: var(--sl-color-input-helper-text-default);
+  --_helper-color-error: var(--sl-color-progressbar-error-track);
+  --_helper-font: var(--sl-text-input-field-label-hint-md);
+  --_indeterminate-duration: 20s;
+  --_label-color: var(--sl-color-input-field-label-text-default);
+  --_label-font: var(--sl-text-input-field-label-label-md);
+  --_label-gap: var(--sl-space-progressbar-horizontal-gap);
+  --_progress-background: var(--sl-color-progressbar-active-track);
+  --_icon-fill: var(--sl-color-progressbar-active-track);
+
+  @media (prefers-reduced-motion: no-preference) {
+    --_indeterminate-duration: 1.2s;
+  }
+
+  color: var(--_helper-color);
+  display: flex;
+  flex-direction: column;
+  font: var(--_helper-font);
+  gap: var(--_gap);
+}
+
+@each $variant in $variants {
+  :host([variant='#{$variant}']:not([indeterminate])) {
+    --_progress-background: var(--sl-color-progressbar-#{$variant}-track);
+    --_icon-fill: var(--sl-color-progressbar-#{$variant}-track);
+  }
+
+  :host([variant='#{$variant}'][indeterminate]) .progress {
+    --_progress-background: var(--sl-color-progressbar-#{$variant}-track);
+    --_icon-fill: var(--sl-color-progressbar-#{$variant}-track);
+
+    animation: none;
+    inline-size: 100%;
+  }
+
+  :host([variant='#{$variant}'][indeterminate]) {
+    .label sl-icon {
+      --sl-icon-fill-default: var(--sl-color-progressbar-#{$variant}-track);
+    }
+
+    .helper sl-icon {
+      --sl-icon-fill-default: var(--sl-color-progressbar-#{$variant}-track);
+    }
+  }
+}
+
+:host([indeterminate]) .progress {
+  animation: var(--_indeterminate-duration) ease 500ms infinite normal none running indeterminate;
+  position: relative;
+}
+
+:host(:not([indeterminate])) .progress {
+  inline-size: 100%;
+}
+
+:host([variant='error']) ::slotted(*) {
+  color: var(--_helper-color-error);
+}
+
+.label {
+  color: var(--_label-color);
+  display: flex;
+  font: var(--_label-font);
+  gap: var(--_label-gap);
+  justify-content: space-between;
+
+  sl-icon {
+    --sl-icon-fill-default: var(--_icon-fill);
+  }
+}
+
+.helper {
+  display: flex;
+  gap: var(--_label-gap);
+  justify-content: space-between;
+
+  sl-icon {
+    --sl-icon-fill-default: var(--_icon-fill);
+  }
+}
+
+::slotted(*) {
+  color: var(--_helper-color);
+  font: var(--_helper-font);
+}
+
+.container {
+  align-items: stretch;
+  background: var(--_bar-background);
+  block-size: var(--_bar-thickness);
+  border-radius: var(--_border-radius);
+  display: flex;
+  inline-size: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress {
+  background: var(--_progress-background);
+  border-radius: var(--_border-radius);
+  transform-origin: left;
+  transition:
+    400ms transform,
+    400ms width,
+    400ms background-color;
+}
+
+/** Hiding the aria-live element for the UI, but not for the screen readers. */
+#live {
+  block-size: 0;
+  inline-size: 0;
+  overflow: hidden;
+}
+
+@keyframes indeterminate {
+  0% {
+    inline-size: 80%;
+    inset-inline-start: -80%;
+  }
+
+  100% {
+    inline-size: 10%;
+    inset-inline-start: 110%;
+  }
+}

packages/components/progress-bar/src/progress-bar.spec.ts

@@ -0,0 +1,128 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../register.js';
+import { type ProgressBar } from './progress-bar.js';
+
+describe('sl-progress-bar', () => {
+  let el: ProgressBar;
+  let progressBar: HTMLDivElement;
+
+  beforeEach(async () => {
+    el = await fixture(html`<sl-progress-bar> Downloaded 30% of 100% </sl-progress-bar>`);
+
+    progressBar = el.renderRoot.querySelector('div.container') as HTMLDivElement;
+  });
+
+  it('should have no variant by default', () => {
+    expect(el).not.to.have.attribute('variant');
+  });
+
+  it('should have no icon by default', () => {
+    const icon = el.renderRoot.querySelector('sl-icon') as HTMLElement;
+
+    expect(icon).not.to.exist;
+  });
+
+  it('should not have any label by default', () => {
+    expect(el).not.to.have.attribute('label');
+  });
+
+  it('should have 0 value by default', () => {
+    expect(el).not.to.have.attribute('value', '0');
+  });
+
+  it('should have determinate progress bar by default', () => {
+    expect(progressBar).to.have.attribute('aria-valuenow');
+    expect(el).not.to.have.attribute('indeterminate');
+  });
+
+  it('should have a progressbar role', () => {
+    expect(progressBar).to.have.attribute('role', 'progressbar');
+  });
+
+  it('should have the correct attributes', () => {
+    expect(progressBar).to.have.attribute('aria-describedby', 'helper');
+    expect(progressBar).to.have.attribute('aria-valuemin', '0');
+    expect(progressBar).to.have.attribute('aria-valuemax', '100');
+    expect(progressBar).to.have.attribute('aria-valuenow', '0');
+  });
+
+  it('should have aria-live by default', () => {
+    const ariaLive = el.renderRoot.querySelector('#live') as HTMLElement;
+    expect(ariaLive).to.have.attribute('aria-live', 'polite');
+    expect(ariaLive).to.have.rendered.text('state active 0%');
+  });
+
+  it('should be labelled properly when the label is set', async () => {
+    el.label = 'Progress label';
+    await el.updateComplete;
+
+    const label = el.renderRoot.querySelector('div.label') as HTMLElement;
+
+    expect(label).to.have.trimmed.text('Progress label');
+    expect(progressBar).to.have.attribute('aria-labelledby', 'label');
+  });
+
+  it('should have the proper icon when the success variant is set', async () => {
+    el.label = 'Progress label';
+    el.variant = 'success';
+    await el.updateComplete;
+
+    const label = el.renderRoot.querySelector('div.label') as HTMLElement,
+      icon = label?.querySelector('sl-icon') as HTMLElement;
+
+    expect(label).to.exist;
+    expect(label).to.have.trimmed.text('Progress label');
+    expect(icon).to.have.attribute('name', 'circle-check-solid');
+  });
+
+  it('should have the proper icon when the warning variant is set', async () => {
+    el.label = 'Progress label';
+    el.variant = 'warning';
+    await el.updateComplete;
+
+    const label = el.renderRoot.querySelector('div.label') as HTMLElement,
+      icon = label?.querySelector('sl-icon') as HTMLElement;
+
+    expect(label).to.exist;
+    expect(label).to.have.trimmed.text('Progress label');
+    expect(icon).to.have.attribute('name', 'octagon-exclamation-solid');
+  });
+
+  it('should have the proper icon when the error variant is set', async () => {
+    el.label = 'Progress label';
+    el.variant = 'error';
+    await el.updateComplete;
+
+    const label = el.renderRoot.querySelector('div.label') as HTMLElement,
+      icon = label?.querySelector('sl-icon') as HTMLElement;
+
+    expect(label).to.exist;
+    expect(label).to.have.trimmed.text('Progress label');
+    expect(icon).to.have.attribute('name', 'triangle-exclamation-solid');
+  });
+
+  it('should have the icon in the helper text part when there is no label', async () => {
+    const label = el.renderRoot.querySelector('div.label') as HTMLElement;
+    expect(label).not.to.exist;
+
+    el.variant = 'success';
+    await el.updateComplete;
+
+    const helper = el.renderRoot.querySelector('div.helper') as HTMLElement,
+      helperIcon = helper?.querySelector('sl-icon') as HTMLElement;
+
+    expect(helper).to.exist;
+    expect(helperIcon).to.exist;
+  });
+
+  it('should change the aria-live when the value and variant have changed', async () => {
+    el.value = 60;
+    el.variant = 'warning';
+    await el.updateComplete;
+
+    const ariaLive = el.renderRoot.querySelector('#live') as HTMLElement;
+    expect(ariaLive).to.have.attribute('aria-live', 'polite');
+    expect(ariaLive).to.have.rendered.text('state warning 60%');
+  });
+});