refactor: refactor timetable base components (#2060)

Co-authored-by: Tommmaso Menga <[email protected]>
sbb-design-systems · Oct 10, 2023 · 871bd8e · 871bd8e
1 parent 5a3424d
commit 871bd8e
Show file tree

Hide file tree

Showing 42 changed files with 540 additions and 438 deletions.
diff --git a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.e2e.ts b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.e2e.ts
@@ -1,18 +1,18 @@
-import { newE2EPage } from '@stencil/core/testing';
 import sampleData from './sbb-timetable-barrier-free.sample-data';
+import { assert, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { SbbTimetableBarrierFree } from './sbb-timetable-barrier-free';
 
 const config = JSON.stringify(sampleData[0]);
 
 describe('sbb-timetable-barrier-free', () => {
-  let element, page;
+  let element: SbbTimetableBarrierFree;
 
   it('renders', async () => {
-    page = await newE2EPage();
-    await page.setContent(
-      `<sbb-timetable-barrier-free config='${config}'></sbb-timetable-barrier-free>`,
+    element = await fixture(
+      html`<sbb-timetable-barrier-free config="${config}"></sbb-timetable-barrier-free>`,
     );
 
-    element = await page.find('sbb-timetable-barrier-free');
-    expect(element).toHaveClass('hydrated');
+    assert.instanceOf(element, SbbTimetableBarrierFree);
   });
 });
diff --git a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.spec.ts b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.spec.ts
@@ -1,21 +1,25 @@
-import { SbbTimetableBarrierFree } from './sbb-timetable-barrier-free';
-import { newSpecPage } from '@stencil/core/testing';
 import sampleData from './sbb-timetable-barrier-free.sample-data';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './sbb-timetable-barrier-free';
 
 const config = JSON.stringify(sampleData[0]);
 
 describe('sbb-timetable-barrier-free', () => {
   it('renders', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbTimetableBarrierFree],
-      html: `<sbb-timetable-barrier-free config='${config}' />`,
-    });
+    const root = await fixture(html`<sbb-timetable-barrier-free config="${config}" />`);
 
-    expect(root).toEqualHtml(`
+    expect(root).dom.to.be.equal(
+      `
         <sbb-timetable-barrier-free
             config="{&quot;icon&quot;:&quot;wheelchair&quot;,&quot;text&quot;:&quot;Independent boarding/alighting possible.&quot;}"
         >
-          <mock:shadow-root>
+
+        </sbb-timetable-barrier-free>
+      `,
+    );
+    expect(root).shadowDom.to.be.equal(
+      `
             <p
                 aria-label="Barrier-free travel. Independent boarding/alighting possible."
                 class="barrier-free barrier-free--second-level"
@@ -37,8 +41,7 @@ describe('sbb-timetable-barrier-free', () => {
                     Independent boarding/alighting possible.
                 </span>
             </p>
-          </mock:shadow-root>
-        </sbb-timetable-barrier-free>
-      `);
+          `,
+    );
   });
 });
diff --git a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.stories.tsx b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.stories.tsx
@@ -2,7 +2,8 @@
 import { h, JSX } from 'jsx-dom';
 import readme from './readme.md?raw';
 import sampleData from './sbb-timetable-barrier-free.sample-data';
-import type { Meta, StoryObj, Args } from '@storybook/html';
+import type { Meta, StoryObj, Args } from '@storybook/web-components';
+import './sbb-timetable-barrier-free';
 
 const Template = (args): JSX.Element => (
   <sbb-timetable-barrier-free config={JSON.stringify(args.config)}></sbb-timetable-barrier-free>

diff --git a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.tsx b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.tsx
@@ -1,58 +1,64 @@
-import { Component, Element, h, JSX, Prop, State } from '@stencil/core';
-
 import icons from '../../global/timetable/icons.json';
 import { i18nBarrierFreeTravel } from '../../global/i18n';
 import {
   documentLanguage,
   HandlerRepository,
   languageChangeHandlerAspect,
 } from '../../global/eventing';
+import { CSSResult, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import Style from './sbb-timetable-barrier-free.scss?lit&inline';
+
+@customElement('sbb-timetable-barrier-free')
+export class SbbTimetableBarrierFree extends LitElement {
+  public static override styles: CSSResult = Style;
 
-@Component({
-  shadow: true,
-  styleUrl: 'sbb-timetable-barrier-free.scss',
-  tag: 'sbb-timetable-barrier-free',
-})
-export class SbbTimetableBarrierFree {
   /**
    * Stringified JSON which defines most of the
    * content of the component. Please check the
    * individual stories to get an idea of the
    * structure.
    */
-  @Prop() public config!: string;
-
-  @State() private _currentLanguage = documentLanguage();
+  @property() public config!: string;
 
-  @Element() private _element!: HTMLElement;
+  @state() private _currentLanguage = documentLanguage();
 
   private _handlerRepository = new HandlerRepository(
-    this._element,
+    this,
     languageChangeHandlerAspect((l) => (this._currentLanguage = l)),
   );
 
-  public connectedCallback(): void {
+  public override connectedCallback(): void {
+    super.connectedCallback();
     this._handlerRepository.connect();
   }
 
-  public disconnectedCallback(): void {
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
     this._handlerRepository.disconnect();
   }
 
-  public render(): JSX.Element {
+  protected override render(): TemplateResult {
     const config = JSON.parse(this.config);
 
     const a11yLabel = `${i18nBarrierFreeTravel[this._currentLanguage]} ${config.text}`;
     const appearanceClass = ' barrier-free--second-level';
 
-    return (
-      <p aria-label={a11yLabel} class={`barrier-free${appearanceClass}`} role="text">
-        <span class="barrier-free__text--visually-hidden">{a11yLabel}</span>
+    return html`
+      <p aria-label=${a11yLabel} class=${`barrier-free${appearanceClass}`} role="text">
+        <span class="barrier-free__text--visually-hidden">${a11yLabel}</span>
         <span aria-hidden="true" class="barrier-free__text" role="presentation">
-          <span class="barrier-free__icon" innerHTML={icons[config.icon]}></span>
-          {config.text}
+          <span class="barrier-free__icon" .innerHTML=${icons[config.icon]}></span>
+          ${config.text}
         </span>
       </p>
-    );
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-timetable-barrier-free': SbbTimetableBarrierFree;
   }
 }
diff --git a/src/components/sbb-timetable-duration/sbb-timetable-duration.e2e.ts b/src/components/sbb-timetable-duration/sbb-timetable-duration.e2e.ts
@@ -1,16 +1,17 @@
-import { newE2EPage } from '@stencil/core/testing';
 import sampleData from './sbb-timetable-duration.sample-data';
+import { assert, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { SbbTimetableDuration } from './sbb-timetable-duration';
 
 const config = JSON.stringify(sampleData[0]);
 
 describe('sbb-timetable-duration', () => {
-  let element, page;
+  let element: SbbTimetableDuration;
 
   it('renders', async () => {
-    page = await newE2EPage();
-    await page.setContent(`<sbb-timetable-duration config='${config}'></sbb-timetable-duration>`);
-
-    element = await page.find('sbb-timetable-duration');
-    expect(element).toHaveClass('hydrated');
+    element = await fixture(
+      html`<sbb-timetable-duration config="${config}"></sbb-timetable-duration>`,
+    );
+    assert.instanceOf(element, SbbTimetableDuration);
   });
 });
diff --git a/src/components/sbb-timetable-duration/sbb-timetable-duration.spec.ts b/src/components/sbb-timetable-duration/sbb-timetable-duration.spec.ts
@@ -1,21 +1,26 @@
-import { SbbTimetableDuration } from './sbb-timetable-duration';
-import { newSpecPage } from '@stencil/core/testing';
 import sampleData from './sbb-timetable-duration.sample-data';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import './sbb-timetable-duration';
 
 const config = JSON.stringify(sampleData[0]);
 
 describe('sbb-timetable-duration', () => {
   it('renders', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbTimetableDuration],
-      html: `<sbb-timetable-duration config='${config}' />`,
-    });
+    const root = await fixture(html`<sbb-timetable-duration config="${config}" />`);
 
-    expect(root).toEqualHtml(`
+    expect(root).dom.to.be.equal(
+      `
         <sbb-timetable-duration
             config="{&quot;hours&quot;:0,&quot;minutes&quot;:37}"
         >
-          <mock:shadow-root>
+
+        </sbb-timetable-duration>
+      `,
+    );
+    expect(root).shadowDom.to.be.equal(
+      `
             <p
                 aria-label=" 37 Minutes."
                 class="duration"
@@ -32,8 +37,7 @@ describe('sbb-timetable-duration', () => {
                     37 Minutes.
                 </span>
             </p>
-          </mock:shadow-root>
-        </sbb-timetable-duration>
-      `);
+          `,
+    );
   });
 });
diff --git a/src/components/sbb-timetable-duration/sbb-timetable-duration.stories.tsx b/src/components/sbb-timetable-duration/sbb-timetable-duration.stories.tsx
@@ -2,7 +2,8 @@
 import { h, JSX } from 'jsx-dom';
 import readme from './readme.md?raw';
 import sampleData from './sbb-timetable-duration.sample-data';
-import type { Meta, StoryObj, Args } from '@storybook/html';
+import type { Meta, StoryObj, Args } from '@storybook/web-components';
+import './sbb-timetable-duration';
 
 const Template = (args): JSX.Element => (
   <sbb-timetable-duration config={JSON.stringify(args.config)}></sbb-timetable-duration>

diff --git a/src/components/sbb-timetable-duration/sbb-timetable-duration.tsx b/src/components/sbb-timetable-duration/sbb-timetable-duration.tsx
@@ -1,43 +1,43 @@
-import { Component, Element, h, JSX, Prop, State } from '@stencil/core';
 import { i18nDurationHour, i18nDurationMinute } from '../../global/i18n';
 import {
   documentLanguage,
   HandlerRepository,
   languageChangeHandlerAspect,
 } from '../../global/eventing';
+import { CSSResult, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import Style from './sbb-timetable-duration.scss?lit&inline';
+
+@customElement('sbb-timetable-duration')
+export class SbbTimetableDuration extends LitElement {
+  public static override styles: CSSResult = Style;
 
-@Component({
-  shadow: true,
-  styleUrl: 'sbb-timetable-duration.scss',
-  tag: 'sbb-timetable-duration',
-})
-export class SbbTimetableDuration {
   /**
    * Stringified JSON which defines most of the
    * content of the component. Please check the
    * individual stories to get an idea of the
    * structure.
    */
-  @Prop() public config!: string;
-
-  @State() private _currentLanguage = documentLanguage();
+  @property() public config!: string;
 
-  @Element() private _element!: HTMLElement;
+  @state() private _currentLanguage = documentLanguage();
 
   private _handlerRepository = new HandlerRepository(
-    this._element,
+    this,
     languageChangeHandlerAspect((l) => (this._currentLanguage = l)),
   );
 
-  public connectedCallback(): void {
+  public override connectedCallback(): void {
+    super.connectedCallback();
     this._handlerRepository.connect();
   }
 
-  public disconnectedCallback(): void {
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
     this._handlerRepository.disconnect();
   }
 
-  public render(): JSX.Element {
+  protected override render(): TemplateResult {
     const config = JSON.parse(this.config);
 
     const hoursLabelShort = i18nDurationHour.multiple.short[this._currentLanguage];
@@ -65,13 +65,20 @@ export class SbbTimetableDuration {
     visualText += ` ${config.minutes} ${minutesLabelShort}`;
     a11yLabel += ` ${config.minutes} ${minutesLabelLong}.`;
 
-    return (
-      <p aria-label={a11yLabel} class="duration" role="text">
+    return html`
+      <p aria-label=${a11yLabel} class="duration" role="text">
         <span aria-hidden="true" class="duration__text--visual" role="presentation">
-          {visualText}
+          ${visualText}
         </span>
-        <span class="duration__text--visually-hidden">{a11yLabel}</span>
+        <span class="duration__text--visually-hidden">${a11yLabel}</span>
       </p>
-    );
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-timetable-duration': SbbTimetableDuration;
   }
 }
diff --git a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.e2e.ts b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.e2e.ts
@@ -1,16 +1,17 @@
-import { newE2EPage } from '@stencil/core/testing';
 import sampleData from './sbb-timetable-occupancy.sample-data';
+import { assert, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { SbbTimetableOccupancy } from './sbb-timetable-occupancy';
 
 const config = JSON.stringify(sampleData[3]);
 
 describe('sbb-timetable-occupancy', () => {
-  let element, page;
+  let element: SbbTimetableOccupancy;
 
   it('renders', async () => {
-    page = await newE2EPage();
-    await page.setContent(`<sbb-timetable-occupancy config='${config}'></sbb-timetable-occupancy>`);
-
-    element = await page.find('sbb-timetable-occupancy');
-    expect(element).toHaveClass('hydrated');
+    element = await fixture(
+      html`<sbb-timetable-occupancy config="${config}"></sbb-timetable-occupancy>`,
+    );
+    assert.instanceOf(element, SbbTimetableOccupancy);
   });
 });
diff --git a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.sample-data.js b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.sample-data.js
@@ -4,12 +4,12 @@ export default [
       {
         class: '1',
         icon: 'utilization-none',
-        occupancy: 'none',
+        occupancy: 'unknown',
       },
       {
         class: '2',
         icon: 'utilization-none',
-        occupancy: 'none',
+        occupancy: 'unknown',
       },
     ],
   },
@@ -18,7 +18,7 @@ export default [
       {
         class: '1',
         icon: 'utilization-none',
-        occupancy: 'none',
+        occupancy: 'unknown',
       },
       {
         class: '2',