diff --git a/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.scss b/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.scss index 9d944f9e5d7..b0311232bbd 100644 --- a/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.scss +++ b/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); } } } diff --git a/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.spec.ts b/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.spec.ts index 8f7032d5d03..9df17a89e0c 100644 --- a/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.spec.ts +++ b/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``); + element = await fixture( + html``, + ); }); it('renders', async () => { diff --git a/src/elements/pearl-chain/pearl-chain/pearl-chain.sample-data.ts b/src/elements/pearl-chain/pearl-chain/pearl-chain.sample-data.ts index 1f3ca4bdd00..1cd1679d423 100644 --- a/src/elements/pearl-chain/pearl-chain/pearl-chain.sample-data.ts +++ b/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` `; - -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); -} diff --git a/src/elements/pearl-chain/pearl-chain/pearl-chain.spec.ts b/src/elements/pearl-chain/pearl-chain/pearl-chain.spec.ts index aaf71268ba4..d91399faa11 100644 --- a/src/elements/pearl-chain/pearl-chain/pearl-chain.spec.ts +++ b/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``); + element = await fixture( + html` + + + `, + ); + assert.instanceOf(element, SbbPearlChainElement); }); }); diff --git a/src/elements/pearl-chain/pearl-chain/pearl-chain.ssr.spec.ts b/src/elements/pearl-chain/pearl-chain/pearl-chain.ssr.spec.ts index 391a424e1c1..9aea1d9c631 100644 --- a/src/elements/pearl-chain/pearl-chain/pearl-chain.ssr.spec.ts +++ b/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``, { - modules: ['./pearl-chain.js'], - }); + root = await ssrHydratedFixture( + html` + `, + { + modules: ['./pearl-chain.js'], + }, + ); }); it('renders', () => { diff --git a/src/elements/pearl-chain/pearl-chain/pearl-chain.stories.ts b/src/elements/pearl-chain/pearl-chain/pearl-chain.stories.ts index 77f0b82dad7..60407c2d499 100644 --- a/src/elements/pearl-chain/pearl-chain/pearl-chain.stories.ts +++ b/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` - ${legs.map((leg: TemplateResult) => { - return leg; - })} + ${legs.map((leg: TemplateResult) => leg)} `; }; diff --git a/src/elements/pearl-chain/pearl-chain/pearl-chain.ts b/src/elements/pearl-chain/pearl-chain/pearl-chain.ts index 9fbcbd17b29..6ac906e7996 100644 --- a/src/elements/pearl-chain/pearl-chain/pearl-chain.ts +++ b/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); diff --git a/src/elements/pearl-chain/pearl-chain/pearl-chain.visual.spec.ts b/src/elements/pearl-chain/pearl-chain/pearl-chain.visual.spec.ts index b55aded18ff..f74ffc153c7 100644 --- a/src/elements/pearl-chain/pearl-chain/pearl-chain.visual.spec.ts +++ b/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; - })} l)} `); }),