fix: review comments

src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.scss

@@ -116,9 +116,6 @@
 
       & {
         background-color: var(--sbb-pearl-chain-color-past);
-
-        // --sbb-pearl-chain-leg-status: defined in .ts file
-        width: var(--sbb-pearl-chain-status-position);
       }
     }
   }

src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.spec.ts

@@ -9,7 +9,12 @@ describe('sbb-pearl-chain-leg', () => {
   let element: SbbPearlChainLegElement;
 
   beforeEach(async () => {
-    element = await fixture(html`<sbb-pearl-chain-leg></sbb-pearl-chain-leg>`);
+    element = await fixture(
+      html`<sbb-pearl-chain-leg
+        departure="2022-08-18T04:00"
+        arrival="2022-08-18T05:00"
+      ></sbb-pearl-chain-leg>`,
+    );
   });
 
   it('renders', async () => {

src/elements/pearl-chain/pearl-chain/pearl-chain.sample-data.ts

@@ -1,9 +1,6 @@
 import { html, type TemplateResult } from 'lit';
 
 import '../pearl-chain-leg.js';
-import { defaultDateAdapter } from '../../core/datetime.js';
-
-import type { SbbDateLike } from '@sbb-esta/lyne-elements/core/interfaces.js';
 
 export const disruptionTemplate: TemplateResult = html`
   <sbb-pearl-chain-leg
@@ -54,26 +51,3 @@ export const longFutureLegTemplate: TemplateResult = html`
     arrival="2024-12-18T12:13:00"
   ></sbb-pearl-chain-leg>
 `;
-
-export function removeTimezone(time: SbbDateLike | null): Date | undefined {
-  const parsedDate = defaultDateAdapter.deserialize(time);
-
-  if (!parsedDate || !defaultDateAdapter.isValid(parsedDate)) {
-    return undefined;
-  }
-
-  const isoTime = parsedDate!.toISOString();
-
-  if (isoTime.includes('Z')) {
-    return new Date(isoTime.replace('Z', ''));
-  }
-
-  if (isoTime.includes('T')) {
-    const dateTime = isoTime.split('T');
-
-    if (dateTime[1] && (dateTime[1].includes('+') || dateTime[1].includes('-'))) {
-      return new Date(`${dateTime[0]}T${dateTime[1].split(/[+-]/)[0]}`);
-    }
-  }
-  return new Date(isoTime);
-}

src/elements/pearl-chain/pearl-chain/pearl-chain.spec.ts

@@ -1,15 +1,29 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { fixture } from '../../core/testing/private.js';
+
 import { SbbPearlChainElement } from './pearl-chain.js';
 
-import { fixture } from '@sbb-esta/lyne-elements/core/testing/private.js';
+import '../pearl-chain-leg.js';
 
 describe(`sbb-pearl-chain`, () => {
   let element: SbbPearlChainElement;
 
   it('renders', async () => {
-    element = await fixture(html`<sbb-pearl-chain></sbb-pearl-chain>`);
+    element = await fixture(
+      html`<sbb-pearl-chain departure="2022-08-18T04:00" arrival="2022-08-18T05:00">
+        <sbb-pearl-chain-leg
+          departure="2022-08-18T04:00"
+          arrival="2022-08-18T04:40"
+        ></sbb-pearl-chain-leg>
+        <sbb-pearl-chain-leg
+          departure="2022-08-18T04:40"
+          arrival="2022-08-18T05:00"
+        ></sbb-pearl-chain-leg>
+      </sbb-pearl-chain>`,
+    );
+
     assert.instanceOf(element, SbbPearlChainElement);
   });
 });

src/elements/pearl-chain/pearl-chain/pearl-chain.ssr.spec.ts

@@ -9,9 +9,13 @@ describe(`sbb-pearl-chain ssr`, () => {
   let root: SbbPearlChainElement;
 
   beforeEach(async () => {
-    root = await ssrHydratedFixture(html`<sbb-pearl-chain></sbb-pearl-chain>`, {
-      modules: ['./pearl-chain.js'],
-    });
+    root = await ssrHydratedFixture(
+      html`<sbb-pearl-chain departure="2022-08-18T04:00" arrival="2022-08-18T05:00">
+      </sbb-pearl-chain>`,
+      {
+        modules: ['./pearl-chain.js'],
+      },
+    );
   });
 
   it('renders', () => {

src/elements/pearl-chain/pearl-chain/pearl-chain.stories.ts

@@ -57,9 +57,7 @@ const defaultArgs: Args = {
 
 const TemplateSlotted = (legs: TemplateResult[], { now, ...args }: Args): TemplateResult => {
   return html`<sbb-pearl-chain ${sbbSpread(args)} now=${now ? now / 1000 : nothing}>
-    ${legs.map((leg: TemplateResult) => {
-      return leg;
-    })}
+    ${legs.map((leg: TemplateResult) => leg)}
   </sbb-pearl-chain>`;
 };
 

src/elements/pearl-chain/pearl-chain/pearl-chain.ts

@@ -12,14 +12,13 @@ import '../../screen-reader-only.js';
 import '../pearl-chain-leg.js';
 import type { SbbPearlChainLegElement } from '../pearl-chain-leg.js';
 
-import { removeTimezone } from './pearl-chain.sample-data.js';
 import style from './pearl-chain.scss?lit&inline';
 
 type Status = 'progress' | 'future' | 'past';
 type Marker = 'static' | 'pulsing';
 
 /**
- * It visually displays journey information. New implementation.
+ * It visually displays journey information.
  */
 export
 @customElement('sbb-pearl-chain')
@@ -66,13 +65,40 @@ class SbbPearlChainElement extends LitElement {
     return Array.from(this.querySelectorAll?.('sbb-pearl-chain-leg') ?? []);
   }
 
+  private _removeTimezone(time: SbbDateLike | null): Date | undefined {
+    const parsedDate = defaultDateAdapter.deserialize(time);
+
+    if (!parsedDate || !defaultDateAdapter.isValid(parsedDate)) {
+      return undefined;
+    }
+
+    const isoTime = parsedDate!.toISOString();
+
+    if (isoTime.includes('Z')) {
+      return new Date(isoTime.replace('Z', ''));
+    }
+
+    if (isoTime.includes('T')) {
+      const dateTime = isoTime.split('T');
+
+      if (dateTime[1] && (dateTime[1].includes('+') || dateTime[1].includes('-'))) {
+        return new Date(`${dateTime[0]}T${dateTime[1].split(/[+-]/)[0]}`);
+      }
+    }
+    return new Date(isoTime);
+  }
+
   private _getAllDuration(legs: SbbPearlChainLegElement[]): number {
     return legs?.reduce((sum: number, leg) => {
-      const arrivalNoTz = removeTimezone(leg.arrival);
-      const departureNoTz = removeTimezone(leg.departure);
+      const arrivalNoTz = this._removeTimezone(leg.arrival);
+      const departureNoTz = this._removeTimezone(leg.departure);
       if (arrivalNoTz && departureNoTz) {
         return (
-          sum + differenceInMinutes(removeTimezone(leg.arrival)!, removeTimezone(leg.departure)!)
+          sum +
+          differenceInMinutes(
+            this._removeTimezone(leg.arrival)!,
+            this._removeTimezone(leg.departure)!,
+          )
         );
       }
       return sum;
@@ -87,8 +113,8 @@ class SbbPearlChainElement extends LitElement {
     legs: SbbPearlChainLegElement[],
     leg: SbbPearlChainLegElement,
   ): number {
-    const arrivalNoTz = removeTimezone(leg.arrival);
-    const departureNoTz = removeTimezone(leg.departure);
+    const arrivalNoTz = this._removeTimezone(leg.arrival);
+    const departureNoTz = this._removeTimezone(leg.departure);
     if (arrivalNoTz && departureNoTz) {
       const duration = differenceInMinutes(arrivalNoTz, departureNoTz);
       const allDurations = this._getAllDuration(legs);

src/elements/pearl-chain/pearl-chain/pearl-chain.visual.spec.ts

@@ -95,9 +95,7 @@ describe(`sbb-pearl-chain`, () => {
               now=${(c.now ?? new Date('2024-12-01T12:11:00').valueOf()) / 1000}
               marker="static"
             >
-              ${c.legs.map((l) => {
-                return l;
-              })}</sbb-pearl-chain
+              ${c.legs.map((l) => l)}</sbb-pearl-chain
             >
           `);
         }),