From 94c25b1b84250ea39f07ea3c6efa38a1c9c74e39 Mon Sep 17 00:00:00 2001 From: Davide Mininni <101575400+DavideMininni-Fincons@users.noreply.github.com> Date: Tue, 4 Jun 2024 10:59:53 +0200 Subject: [PATCH] feat: add 'now' property instead of data-now attribute (#2674) Closes #2654 BREAKING CHANGE: The half-public data-now attribute has become a public `now` property that can be used to set time or date-based components into a specific state, especially for testing purposes. - `sbb-calendar`, `sbb-datepicker`, `sbb-timetable-row`, `sbb-journey-summary`, `sbb-pearl-chain`, `sbb-pearl-chain-time`: change the attribute `data-now` to `now`. The property `now` can be a Date or Unix timestamp. If you had a timestamp in milliseconds before, please divide by 1000 to get seconds. - `sbb-clock`: change the attribute `data-now` to `now`. The property `now` has to be in the format "HH:MM:SS". --------- Co-authored-by: Jeremias Peier --- .../journey-summary.spec.snap.js | 8 +-- .../journey-summary/journey-summary.spec.ts | 14 ++-- .../journey-summary.stories.ts | 18 +++-- .../journey-summary/journey-summary.ts | 20 ++++-- .../journey-summary/readme.md | 19 ++++-- .../pearl-chain-time/pearl-chain-time.spec.ts | 26 +++---- .../pearl-chain-time.stories.ts | 18 +++-- .../pearl-chain-time/pearl-chain-time.ts | 20 ++++-- .../pearl-chain-time/readme.md | 6 +- .../pearl-chain/pearl-chain.stories.ts | 28 ++++---- .../pearl-chain/pearl-chain.ts | 52 ++++++++------ .../pearl-chain/readme.md | 6 +- .../timetable-row/readme.md | 6 +- .../timetable-row/timetable-row.spec.ts | 17 +++-- .../timetable-row/timetable-row.stories.ts | 27 ++++---- .../timetable-row/timetable-row.ts | 25 ++++--- src/elements/calendar/calendar.e2e.ts | 4 +- src/elements/calendar/calendar.spec.ts | 6 +- src/elements/calendar/calendar.stories.ts | 13 ++-- src/elements/calendar/calendar.ts | 42 ++++++------ src/elements/calendar/readme.md | 24 +++---- src/elements/clock/clock.spec.ts | 2 +- src/elements/clock/clock.stories.ts | 51 ++++++++------ src/elements/clock/clock.ts | 68 +++++++++++-------- src/elements/clock/readme.md | 15 +++- src/elements/core/datetime.ts | 1 - src/elements/core/datetime/data-now.ts | 8 --- src/elements/core/datetime/date-adapter.ts | 6 +- src/elements/core/interfaces/types.ts | 2 + .../datepicker/common/datepicker-button.ts | 5 +- .../datepicker-next-day.stories.ts | 2 +- .../datepicker-previous-day.stories.ts | 2 +- .../datepicker-toggle.stories.ts | 6 +- .../datepicker-toggle/datepicker-toggle.ts | 23 +++---- .../datepicker/datepicker.stories.ts | 45 ++++++------ .../datepicker/datepicker/datepicker.ts | 55 +++++++-------- src/elements/datepicker/datepicker/readme.md | 24 +++---- src/elements/footer/footer.stories.ts | 8 +-- .../pages/home/home--logged-in.stories.ts | 4 +- src/storybook/pages/home/home.common.ts | 8 +-- tsconfig.json | 3 + 41 files changed, 395 insertions(+), 342 deletions(-) delete mode 100644 src/elements/core/datetime/data-now.ts diff --git a/src/elements-experimental/journey-summary/__snapshots__/journey-summary.spec.snap.js b/src/elements-experimental/journey-summary/__snapshots__/journey-summary.spec.snap.js index 6fa41950fc..c19e3b9333 100644 --- a/src/elements-experimental/journey-summary/__snapshots__/journey-summary.spec.snap.js +++ b/src/elements-experimental/journey-summary/__snapshots__/journey-summary.spec.snap.js @@ -31,7 +31,7 @@ snapshots["sbb-journey-summary renders"] = - + @@ -55,7 +55,7 @@ snapshots["sbb-journey-summary renders without vias"] = - + @@ -79,7 +79,7 @@ snapshots["sbb-journey-summary renders with second journey"] = - +
@@ -118,7 +118,7 @@ snapshots["sbb-journey-summary renders with second journey"] =
- + diff --git a/src/elements-experimental/journey-summary/journey-summary.spec.ts b/src/elements-experimental/journey-summary/journey-summary.spec.ts index 9a6a19fe9f..b7c3ec04ab 100644 --- a/src/elements-experimental/journey-summary/journey-summary.spec.ts +++ b/src/elements-experimental/journey-summary/journey-summary.spec.ts @@ -10,7 +10,7 @@ import type { import './journey-summary.js'; -const now = new Date('2022-08-29T21:00:00Z').valueOf(); +const now = '2022-08-29T21:00:00Z'; const data: InterfaceSbbJourneySummaryAttributes = { legs: [], @@ -39,35 +39,35 @@ const dataWithoutVia: InterfaceSbbJourneySummaryAttributes = { describe(`sbb-journey-summary`, () => { it('renders', async () => { const root = (await fixture( - html` `, + html` `, )) as SbbJourneySummaryElement; root.trip = data; await waitForLitRender(root); expect(root).dom.to.be.equal(` - + `); await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders without vias', async () => { const root = (await fixture( - html` `, + html` `, )) as SbbJourneySummaryElement; root.trip = dataWithoutVia; await waitForLitRender(root); expect(root).dom.to.be.equal(` - + `); await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with second journey', async () => { const root = (await fixture( - html` `, + html` `, )) as SbbJourneySummaryElement; root.trip = dataWithoutVia; root.tripBack = data; @@ -76,7 +76,7 @@ describe(`sbb-journey-summary`, () => { await waitForLitRender(root); expect(root).dom.to.be.equal(` - + `); await expect(root).shadowDom.to.be.equalSnapshot(); }); diff --git a/src/elements-experimental/journey-summary/journey-summary.stories.ts b/src/elements-experimental/journey-summary/journey-summary.stories.ts index 204f27cae6..b298ff3087 100644 --- a/src/elements-experimental/journey-summary/journey-summary.stories.ts +++ b/src/elements-experimental/journey-summary/journey-summary.stories.ts @@ -1,7 +1,7 @@ import type { InputType } from '@storybook/types'; import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; import isChromatic from 'chromatic/isChromatic'; -import type { TemplateResult } from 'lit'; +import { nothing, type TemplateResult } from 'lit'; import { html } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; @@ -67,24 +67,29 @@ const tripBack: InputType = { const defaultArgTypes: ArgTypes = { 'disable-animation': disableAnimation, - 'data-now': now, 'round-trip': roundTrip, 'header-level': headerLevel, + now, trip, tripBack, }; const defaultArgs: Args = { 'disable-animation': isChromatic(), - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), 'round-trip': false, 'header-level': headerLevel.options![2], + now: new Date('2022-12-05T12:11:00').valueOf(), trip: undefined, tripBack: undefined, }; -const Template = ({ trip, tripBack, ...args }: Args): TemplateResult => html` - +const Template = ({ trip, tripBack, now, ...args }: Args): TemplateResult => html` +
html` `; -const TemplateNoSlot = ({ trip, tripBack, ...args }: Args): TemplateResult => +const TemplateNoSlot = ({ trip, tripBack, now, ...args }: Args): TemplateResult => html``; diff --git a/src/elements-experimental/journey-summary/journey-summary.ts b/src/elements-experimental/journey-summary/journey-summary.ts index f3313513b4..7378fa8a2b 100644 --- a/src/elements-experimental/journey-summary/journey-summary.ts +++ b/src/elements-experimental/journey-summary/journey-summary.ts @@ -1,6 +1,7 @@ import { SbbLanguageController } from '@sbb-esta/lyne-elements/core/controllers.js'; -import { defaultDateAdapter, readDataNow } from '@sbb-esta/lyne-elements/core/datetime.js'; +import { defaultDateAdapter } from '@sbb-esta/lyne-elements/core/datetime.js'; import { i18nTripDuration } from '@sbb-esta/lyne-elements/core/i18n.js'; +import type { SbbDateLike } from '@sbb-esta/lyne-elements/core/interfaces/types'; import type { SbbTitleLevel } from '@sbb-esta/lyne-elements/title.js'; import { format, isValid } from 'date-fns'; import type { CSSResultGroup, TemplateResult } from 'lit'; @@ -59,6 +60,16 @@ export class SbbJourneySummaryElement extends LitElement { */ @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean; + /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */ + @property() + public set now(value: SbbDateLike | undefined) { + this._now = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value)); + } + public get now(): Date { + return this._now ?? new Date(); + } + private _now: Date | null = null; + private _hasContentSlot: boolean = false; private _language = new SbbLanguageController(this); @@ -67,11 +78,6 @@ export class SbbJourneySummaryElement extends LitElement { this._hasContentSlot = Boolean(this.querySelector?.('[slot="content"]')); } - private _now(): number { - const dataNow = readDataNow(this); - return isNaN(dataNow) ? Date.now() : dataNow; - } - /** renders the date of the journey or if it is the current or next day */ private _renderJourneyStart( departureTime: Date | undefined, @@ -132,7 +138,7 @@ export class SbbJourneySummaryElement extends LitElement { .arrivalWalk=${arrivalWalk} .legs=${legs} .disableAnimation=${this.disableAnimation} - data-now=${this._now()} + .now=${this.now} >
`; diff --git a/src/elements-experimental/journey-summary/readme.md b/src/elements-experimental/journey-summary/readme.md index 471cf86d84..821ed040e0 100644 --- a/src/elements-experimental/journey-summary/readme.md +++ b/src/elements-experimental/journey-summary/readme.md @@ -16,17 +16,22 @@ If the tripBack prop is passed to the component a second journey-summary, withou ``` +To simulate the current datetime, you can use the `now` property, +which accepts a `Date` or a timestamp in milliseconds (as number or string). +This is helpful if you need a specific state of the component. + ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- | -| `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | -| `headerLevel` | `header-level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | -| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header. | -| `trip` | `trip` | public | `InterfaceSbbJourneySummaryAttributes` | | The trip prop | -| `tripBack` | `trip-back` | public | `InterfaceSbbJourneySummaryAttributes \| undefined` | | The tripBack prop | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- | +| `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | +| `headerLevel` | `header-level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | +| `now` | `now` | public | `Date` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. | +| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header. | +| `trip` | `trip` | public | `InterfaceSbbJourneySummaryAttributes` | | The trip prop | +| `tripBack` | `trip-back` | public | `InterfaceSbbJourneySummaryAttributes \| undefined` | | The tripBack prop | ## Slots diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.spec.ts b/src/elements-experimental/pearl-chain-time/pearl-chain-time.spec.ts index 0d5d9b730d..d541e79152 100644 --- a/src/elements-experimental/pearl-chain-time/pearl-chain-time.spec.ts +++ b/src/elements-experimental/pearl-chain-time/pearl-chain-time.spec.ts @@ -9,7 +9,7 @@ import type { SbbPearlChainTimeElement } from './pearl-chain-time.js'; import './pearl-chain-time.js'; -const now = new Date('2022-08-16T15:00:00Z').valueOf(); +const now = '2022-08-16T15:00:00Z'; describe(`sbb-pearl-chain-time`, () => { it('should render component with time', async () => { @@ -17,7 +17,7 @@ describe(`sbb-pearl-chain-time`, () => { `); @@ -28,7 +28,7 @@ describe(`sbb-pearl-chain-time`, () => { ]; await waitForLitRender(element); expect(element).dom.to.be.equal(` - + `); expect(element).shadowDom.to.be.equal(` @@ -39,7 +39,7 @@ describe(`sbb-pearl-chain-time`, () => { 12:00 - + `); @@ -67,7 +67,7 @@ describe(`sbb-pearl-chain-time`, () => { ]; await waitForLitRender(element); expect(element).dom.to.be.equal(` - + `); expect(element).shadowDom.to.be.equal(` @@ -95,7 +95,7 @@ describe(`sbb-pearl-chain-time`, () => { 12:00 - + `); @@ -123,7 +123,7 @@ describe(`sbb-pearl-chain-time`, () => { ]; await waitForLitRender(element); expect(element).dom.to.be.equal(` - + `); expect(element).shadowDom.to.be.equal(` @@ -134,7 +134,7 @@ describe(`sbb-pearl-chain-time`, () => { 12:00 - + `); @@ -180,7 +180,7 @@ describe(`sbb-pearl-chain-time`, () => { ]; await waitForLitRender(element); expect(element).dom.to.be.equal(` - + `); expect(element).shadowDom.to.be.equal(` @@ -208,7 +208,7 @@ describe(`sbb-pearl-chain-time`, () => { 12:00 - + ``` -## Testing - -To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds). +To simulate the current datetime, you can use the `now` property, +which accepts a `Date` or a timestamp in milliseconds (as number or string). This is helpful if you need a specific state of the component. @@ -62,3 +61,4 @@ This is helpful if you need a specific state of the component. | `departureWalk` | `departure-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) before departure | | `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | | `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | | define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | +| `now` | `now` | public | `Date` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. | diff --git a/src/elements-experimental/pearl-chain/pearl-chain.stories.ts b/src/elements-experimental/pearl-chain/pearl-chain.stories.ts index 22eea67c4b..c8c2a34a6f 100644 --- a/src/elements-experimental/pearl-chain/pearl-chain.stories.ts +++ b/src/elements-experimental/pearl-chain/pearl-chain.stories.ts @@ -1,7 +1,7 @@ import type { InputType } from '@storybook/types'; import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; import isChromatic from 'chromatic/isChromatic'; -import type { TemplateResult } from 'lit'; +import { nothing, type TemplateResult } from 'lit'; import { html } from 'lit'; import { sbbSpread } from '../../storybook/helpers/spread.js'; @@ -32,16 +32,20 @@ const now: InputType = { const defaultArgTypes: ArgTypes = { 'disable-animation': disableAnimation, - 'data-now': now, + now, }; const defaultArgs: Args = { 'disable-animation': isChromatic(), - 'data-now': new Date('2022-12-01T12:11:00').valueOf(), + now: new Date('2022-12-01T12:11:00').valueOf(), }; -const Template = ({ legs, ...args }: Args): TemplateResult => { - return html``; +const Template = ({ legs, now, ...args }: Args): TemplateResult => { + return html``; }; export const NoStops: StoryObj = { @@ -86,7 +90,7 @@ export const withPosition: StoryObj = { args: { ...defaultArgs, legs: [progressLeg], - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -96,7 +100,7 @@ export const Past: StoryObj = { args: { ...defaultArgs, legs: [pastLeg, pastLeg], - 'data-now': new Date('2023-11-01T12:11:00').valueOf(), + now: new Date('2023-11-01T12:11:00').valueOf(), }, }; @@ -106,7 +110,7 @@ export const DepartureStopSkipped: StoryObj = { args: { ...defaultArgs, legs: [pastLeg, progressLeg, longFutureLeg, redirectedOnDepartureLeg, futureLeg], - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -116,7 +120,7 @@ export const ArrivalStopSkipped: StoryObj = { args: { ...defaultArgs, legs: [pastLeg, progressLeg, longFutureLeg, redirectedOnArrivalLeg, futureLeg], - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -126,7 +130,7 @@ export const FirstStopSkipped: StoryObj = { args: { ...defaultArgs, legs: [redirectedOnDepartureLeg, futureLeg, longFutureLeg], - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -136,7 +140,7 @@ export const LastStopSkipped: StoryObj = { args: { ...defaultArgs, legs: [futureLeg, longFutureLeg, redirectedOnArrivalLeg], - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -146,7 +150,7 @@ export const Mixed: StoryObj = { args: { ...defaultArgs, legs: [pastLeg, progressLeg, longFutureLeg, cancelledLeg, futureLeg], - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; diff --git a/src/elements-experimental/pearl-chain/pearl-chain.ts b/src/elements-experimental/pearl-chain/pearl-chain.ts index e1d9637f58..dee8c6bf77 100644 --- a/src/elements-experimental/pearl-chain/pearl-chain.ts +++ b/src/elements-experimental/pearl-chain/pearl-chain.ts @@ -1,4 +1,5 @@ -import { readDataNow } from '@sbb-esta/lyne-elements/core/datetime.js'; +import { defaultDateAdapter } from '@sbb-esta/lyne-elements/core/datetime.js'; +import type { SbbDateLike } from '@sbb-esta/lyne-elements/core/interfaces/types'; import { differenceInMinutes, isAfter, isBefore } from 'date-fns'; import type { CSSResultGroup, TemplateResult } from 'lit'; import { html, LitElement, nothing } from 'lit'; @@ -36,10 +37,15 @@ export class SbbPearlChainElement extends LitElement { */ @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean; - private _now(): number { - const dataNow = readDataNow(this); - return isNaN(dataNow) ? Date.now() : dataNow; + /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */ + @property() + public set now(value: SbbDateLike | undefined) { + this._now = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value)); } + public get now(): Date | null { + return this._now; + } + private _now: Date | null = null; private _getAllDuration(legs: PtRideLeg[]): number { return legs?.reduce((sum: number, leg) => { @@ -72,34 +78,36 @@ export class SbbPearlChainElement extends LitElement { ); const allDurations = this._getAllDuration(legs); - if (allDurations === 0) return 100; + if (allDurations === 0) { + return 100; + } return (duration / allDurations) * 100; } return 0; } - private _getProgress(start?: Date, end?: Date): number { + private _getProgress(now: Date, start?: Date, end?: Date): number { if (!start || !end) { return 0; } const total = differenceInMinutes(end, start); - const progress = differenceInMinutes(this._now(), start); + const progress = differenceInMinutes(now, start); return total && (progress / total) * 100; } - private _getStatus(end?: Date, start?: Date): Status { - if (start && end && isBefore(start, this._now()) && isAfter(end, this._now())) { + private _getStatus(now: Date, end?: Date, start?: Date): Status { + if (start && end && isBefore(start, now) && isAfter(end, now)) { return 'progress'; - } else if (end && isBefore(end, this._now())) { + } else if (end && isBefore(end, now)) { return 'past'; } return 'future'; } - private _renderPosition(start?: Date, end?: Date): TemplateResult | undefined { - const currentPosition = this._getProgress(start, end); + private _renderPosition(now: Date, start?: Date, end?: Date): TemplateResult | undefined { + const currentPosition = this._getProgress(now, start, end); if (currentPosition < 0 && currentPosition > 100) return undefined; const statusStyle = (): Record => { @@ -118,6 +126,8 @@ export class SbbPearlChainElement extends LitElement { } protected override render(): TemplateResult { + const now = this.now ?? new Date(); + const rideLegs: PtRideLeg[] = this.legs?.filter((leg) => isRideLeg(leg)) as PtRideLeg[]; const departureTime = @@ -157,12 +167,12 @@ export class SbbPearlChainElement extends LitElement { const statusClassDeparture = rideLegs && departureTime && arrivalTime && !departureCancelClass - ? 'sbb-pearl-chain__bullet--' + this._getStatus(arrivalTime, departureTime) + ? 'sbb-pearl-chain__bullet--' + this._getStatus(now, arrivalTime, departureTime) : ''; const statusClassArrival = rideLegs && arrivalTime && !arrivalCancelClass - ? 'sbb-pearl-chain__bullet--' + this._getStatus(arrivalTime) + ? 'sbb-pearl-chain__bullet--' + this._getStatus(now, arrivalTime) : ''; if (this._isAllCancelled(rideLegs)) { @@ -211,14 +221,16 @@ export class SbbPearlChainElement extends LitElement { const legStatus = !cancelled && - this._getStatus(departure, arrival) && - 'sbb-pearl-chain__leg--' + this._getStatus(arrival, departure); + this._getStatus(now, departure, arrival) && + 'sbb-pearl-chain__leg--' + this._getStatus(now, arrival, departure); const legStyle = (): Record => { return { '--sbb-pearl-chain-leg-width': `${duration}%`, - ...(this._getStatus(arrival, departure) === 'progress' && !cancelled - ? { '--sbb-pearl-chain-leg-status': `${this._getProgress(departure, arrival)}%` } + ...(this._getStatus(now, arrival, departure) === 'progress' && !cancelled + ? { + '--sbb-pearl-chain-leg-status': `${this._getProgress(now, departure, arrival)}%`, + } : {}), }; }; @@ -230,8 +242,8 @@ export class SbbPearlChainElement extends LitElement { ${index > 0 && index < rideLegs.length ? html`` : nothing} - ${this._getStatus(arrival, departure) === 'progress' && !cancelled - ? this._renderPosition(departure, arrival) + ${this._getStatus(now, arrival, departure) === 'progress' && !cancelled + ? this._renderPosition(now, departure, arrival) : nothing} `; })} diff --git a/src/elements-experimental/pearl-chain/readme.md b/src/elements-experimental/pearl-chain/readme.md index 4b9532c8ae..5b0cd0cce2 100644 --- a/src/elements-experimental/pearl-chain/readme.md +++ b/src/elements-experimental/pearl-chain/readme.md @@ -46,9 +46,8 @@ The `legs` property is mandatory. ``` -## Testing - -To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds). +To simulate the current datetime, you can use the `now` property, +which accepts a `Date` or a timestamp in milliseconds (as number or string). This is helpful if you need a specific state of the component. @@ -59,3 +58,4 @@ This is helpful if you need a specific state of the component. | ------------------ | ------------------- | ------- | ----------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | | `legs` | `legs` | public | `(Leg \| PtRideLeg)[] \| undefined` | | Define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | +| `now` | `now` | public | `Date \| null` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. | diff --git a/src/elements-experimental/timetable-row/readme.md b/src/elements-experimental/timetable-row/readme.md index dc8c2d4404..ea4ac293c8 100644 --- a/src/elements-experimental/timetable-row/readme.md +++ b/src/elements-experimental/timetable-row/readme.md @@ -39,9 +39,8 @@ _`tripProp` property_ ``` -## Testing - -To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds). +To simulate the current datetime, you can use the `now` property, +which accepts a `Date` or a timestamp in milliseconds (as number or string). This is helpful if you need a specific state of the component. @@ -57,5 +56,6 @@ This is helpful if you need a specific state of the component. | `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | This will be forwarded to the sbb-pearl-chain component - if true the position won't be animated. | | `loadingPrice` | `loading-price` | public | `boolean` | `false` | The loading state - when this is true it will be render skeleton with an idling animation | | `loadingTrip` | `loading-trip` | public | `boolean` | `false` | The loading state - when this is true it will be render skeleton with an idling animation | +| `now` | `now` | public | `Date` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. | | `price` | `price` | public | `Price \| undefined` | | The price Prop, which consists of the data for the badge. | | `trip` | `trip` | public | `ITripItem` | | The trip Prop. | diff --git a/src/elements-experimental/timetable-row/timetable-row.spec.ts b/src/elements-experimental/timetable-row/timetable-row.spec.ts index 4098f3d001..9c07676b8b 100644 --- a/src/elements-experimental/timetable-row/timetable-row.spec.ts +++ b/src/elements-experimental/timetable-row/timetable-row.spec.ts @@ -14,20 +14,20 @@ import { walkTimeTrip, } from './timetable-row.sample-data.js'; -const now = new Date('2022-08-16T15:00:00Z').valueOf(); +const now = '2022-08-16T15:00:00Z'; describe(`sbb-timetable-row`, () => { let element: SbbTimetableRowElement; describe('sbb-timetable-row with defaultTrip', () => { it('renders component with config', async () => { - element = await fixture(html``); + element = await fixture(html``); element.trip = defaultTrip as ITripItem; await waitForLitRender(element); expect(element).dom.to.be.equal(` - + `); @@ -87,7 +87,6 @@ describe(`sbb-timetable-row`, () => {

@@ -112,13 +111,13 @@ describe(`sbb-timetable-row`, () => { describe('sbb-timetable-row with BusTrip', () => { it('renders component with config', async () => { - element = await fixture(html``); + element = await fixture(html``); element.trip = busTrip as ITripItem; await waitForLitRender(element); expect(element).dom.to.be.equal(` - + `); @@ -144,7 +143,7 @@ describe(`sbb-timetable-row`, () => { Direction Spiegel, Blinzern

- +
@@ -179,14 +178,14 @@ describe(`sbb-timetable-row`, () => { describe('sbb-timetable-row loading state', () => { it('renders loading state', async () => { element = await fixture( - html``, + html``, ); element.loadingTrip = true; await waitForLitRender(element); expect(element).dom.to.be.equal(` - + `); diff --git a/src/elements-experimental/timetable-row/timetable-row.stories.ts b/src/elements-experimental/timetable-row/timetable-row.stories.ts index 4c1ae2690c..5a4dc08602 100644 --- a/src/elements-experimental/timetable-row/timetable-row.stories.ts +++ b/src/elements-experimental/timetable-row/timetable-row.stories.ts @@ -2,7 +2,7 @@ import { withActions } from '@storybook/addon-actions/decorator'; import type { InputType } from '@storybook/types'; import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components'; import isChromatic from 'chromatic/isChromatic'; -import type { TemplateResult } from 'lit'; +import { nothing, type TemplateResult } from 'lit'; import { html } from 'lit'; import { sbbSpread } from '../../storybook/helpers/spread.js'; @@ -93,7 +93,7 @@ const defaultArgTypes: ArgTypes = { 'loading-price': loadingPrice, 'accessibility-expanded': accessibilityExpanded, active, - 'data-now': now, + now, boarding, price, }; @@ -105,17 +105,18 @@ const defaultArgs: Args = { 'loading-price': false, 'accessibility-expanded': false, active: false, - 'data-now': new Date('2022-12-01T12:11:00').valueOf(), + now: new Date('2022-12-01T12:11:00').valueOf(), trip: defaultTrip, boarding: undefined, price: undefined, }; -const Template = ({ trip, price, boarding, ...args }: Args): TemplateResult => +const Template = ({ trip, price, boarding, now, ...args }: Args): TemplateResult => html``; @@ -208,7 +209,7 @@ export const Position: StoryObj = { args: { ...defaultArgs, trip: progressTrip, - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -219,7 +220,7 @@ export const PositionDisabledAnimation: StoryObj = { ...defaultArgs, 'disable-animation': true, trip: progressTrip, - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -247,7 +248,7 @@ export const Past: StoryObj = { args: { ...defaultArgs, trip: pastTrip, - 'data-now': new Date('2023-12-01T12:11:00').valueOf(), + now: new Date('2023-12-01T12:11:00').valueOf(), }, }; @@ -257,7 +258,7 @@ export const Disturbance: StoryObj = { args: { ...defaultArgs, trip: disturbanceTrip, - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -267,7 +268,7 @@ export const SkippedDepartureStop: StoryObj = { args: { ...defaultArgs, trip: skippedDepartureStopTrip, - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -277,7 +278,7 @@ export const SkippedArrivalStop: StoryObj = { args: { ...defaultArgs, trip: skippedArrivalStopTrip, - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -287,7 +288,7 @@ export const SkippedLastArrivalStop: StoryObj = { args: { ...defaultArgs, trip: skippedLastArrivalStopTrip, - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -297,7 +298,7 @@ export const SkippedFirstDepartureStop: StoryObj = { args: { ...defaultArgs, trip: skippedFirstDepartureStopTrip, - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; @@ -307,7 +308,7 @@ export const QuayChanged: StoryObj = { args: { ...defaultArgs, trip: quayChangeTrip, - 'data-now': new Date('2022-12-05T12:11:00').valueOf(), + now: new Date('2022-12-05T12:11:00').valueOf(), }, }; diff --git a/src/elements-experimental/timetable-row/timetable-row.ts b/src/elements-experimental/timetable-row/timetable-row.ts index 459ad49a7e..fda1aafd01 100644 --- a/src/elements-experimental/timetable-row/timetable-row.ts +++ b/src/elements-experimental/timetable-row/timetable-row.ts @@ -1,5 +1,5 @@ import { SbbLanguageController } from '@sbb-esta/lyne-elements/core/controllers.js'; -import { readDataNow } from '@sbb-esta/lyne-elements/core/datetime.js'; +import { defaultDateAdapter } from '@sbb-esta/lyne-elements/core/datetime.js'; import { setOrRemoveAttribute } from '@sbb-esta/lyne-elements/core/dom.js'; import { i18nArrival, @@ -19,15 +19,15 @@ import { i18nTripDuration, i18nTripQuayChange, } from '@sbb-esta/lyne-elements/core/i18n.js'; -import type { SbbOccupancy } from '@sbb-esta/lyne-elements/core/interfaces.js'; +import type { SbbDateLike, SbbOccupancy } from '@sbb-esta/lyne-elements/core/interfaces.js'; import { format } from 'date-fns'; -import { html, LitElement, nothing } from 'lit'; import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; +import { html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { durationToTime, removeTimezoneFromISOTimeString } from '../core/datetime.js'; -import { getDepartureArrivalTimeAttribute, isRideLeg } from '../core/timetable.js'; import type { ITripItem, Notice, PtRideLeg, PtSituation } from '../core/timetable.js'; +import { getDepartureArrivalTimeAttribute, isRideLeg } from '../core/timetable.js'; import style from './timetable-row.scss?lit&inline'; @@ -246,6 +246,16 @@ export class SbbTimetableRowElement extends LitElement { /** When this prop is true the sbb-card will be in the active state. */ @property({ type: Boolean }) public active?: boolean; + /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */ + @property() + public set now(value: SbbDateLike | undefined) { + this._now = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value)); + } + public get now(): Date { + return this._now ?? new Date(); + } + private _now: Date | null = null; + private _language = new SbbLanguageController(this); protected override willUpdate(changedProperties: PropertyValues): void { @@ -256,11 +266,6 @@ export class SbbTimetableRowElement extends LitElement { } } - private _now(): number { - const dataNow = readDataNow(this); - return isNaN(dataNow) ? Date.now() : dataNow; - } - /** The skeleton render function for the loading state */ private _renderSkeleton(): TemplateResult { return html` @@ -546,7 +551,7 @@ export class SbbTimetableRowElement extends LitElement { .departureWalk=${departureWalk} .arrivalWalk=${arrivalWalk} ?disable-animation=${this.disableAnimation} - data-now=${this._now()} + .now=${this.now} >
${product && this._getQuayType(product.vehicleMode) && departure?.quayFormatted diff --git a/src/elements/calendar/calendar.e2e.ts b/src/elements/calendar/calendar.e2e.ts index cacfb4a273..2ac392941f 100644 --- a/src/elements/calendar/calendar.e2e.ts +++ b/src/elements/calendar/calendar.e2e.ts @@ -18,7 +18,7 @@ describe(`sbb-calendar with ${fixture.name}`, () => { beforeEach(async () => { element = await fixture( - html``, + html``, { modules: ['./calendar.ts'] }, ); }); @@ -326,7 +326,7 @@ describe(`sbb-calendar with ${fixture.name}`, () => { describe('navigation for year view', () => { beforeEach(async () => { element = await fixture( - html``, + html``, { modules: ['./calendar.ts'] }, ); diff --git a/src/elements/calendar/calendar.spec.ts b/src/elements/calendar/calendar.spec.ts index 845c48e729..d1d81655e0 100644 --- a/src/elements/calendar/calendar.spec.ts +++ b/src/elements/calendar/calendar.spec.ts @@ -8,11 +8,11 @@ import './calendar.js'; describe(`sbb-calendar`, () => { it('renders', async () => { const root = await fixture( - html``, + html``, ); expect(root).dom.to.be.equal( - ``, + ``, ); await expect(root).shadowDom.to.be.equalSnapshot(); }); @@ -54,7 +54,7 @@ describe(`sbb-calendar`, () => { }); testA11yTreeSnapshot( - html``, + html``, undefined, { safari: true }, // We skip safari because it has an inconsistent behavior on ci environment ); diff --git a/src/elements/calendar/calendar.stories.ts b/src/elements/calendar/calendar.stories.ts index 5216711280..c8bd8658b7 100644 --- a/src/elements/calendar/calendar.stories.ts +++ b/src/elements/calendar/calendar.stories.ts @@ -12,7 +12,7 @@ import { defaultDateAdapter } from '../core/datetime.js'; import { SbbCalendarElement } from './calendar.js'; import readme from './readme.md?raw'; -const getCalendarAttr = (min: Date | string, max: Date | string): Record => { +const getCalendarAttr = (min: number | string, max: number | string): Record => { const attr: Record = {}; if (min) { attr.min = defaultDateAdapter.toIso8601(new Date(min)); @@ -23,9 +23,10 @@ const getCalendarAttr = (min: Date | string, max: Date | string): Record html` +const Template = ({ min, max, selected, dateFilter, now, ...args }: Args): TemplateResult => html` html` = 15 ? 8 : 18); const defaultArgs: Args = { wide: false, selected: isChromatic() ? new Date(2023, 0, 20) : today, - dataNow: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined, + now: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined, }; export const Calendar: StoryObj = { diff --git a/src/elements/calendar/calendar.ts b/src/elements/calendar/calendar.ts index 1195bbfe88..5894a79e61 100644 --- a/src/elements/calendar/calendar.ts +++ b/src/elements/calendar/calendar.ts @@ -12,7 +12,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { isArrowKeyOrPageKeysPressed, sbbInputModalityDetector } from '../core/a11y.js'; import { SbbConnectedAbortController, SbbLanguageController } from '../core/controllers.js'; -import { type DateAdapter, readDataNow } from '../core/datetime.js'; +import type { DateAdapter } from '../core/datetime.js'; import { DAYS_PER_ROW, defaultDateAdapter, @@ -119,6 +119,16 @@ export class SbbCalendarElement extends LitElement { } private _max?: T | null; + /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */ + @property() + public set now(value: SbbDateLike | undefined) { + this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); + } + public get now(): T { + return this._now ?? this._dateAdapter.today(); + } + private _now: T | null = null; + /** The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */ @property() public set selected(value: SbbDateLike | undefined) { @@ -150,7 +160,7 @@ export class SbbCalendarElement extends LitElement { ); /** The currently active date. */ - @state() private _activeDate: T = this._now(); + @state() private _activeDate: T = this.now; /** The selected date as ISOString. */ @state() private _selected?: string; @@ -234,7 +244,7 @@ export class SbbCalendarElement extends LitElement { if (this._calendarView !== 'day') { this._resetToDayView(); } - this._activeDate = this.selected ?? this._now(); + this._activeDate = this.selected ?? this.now; this._init(); } @@ -606,7 +616,7 @@ export class SbbCalendarElement extends LitElement { } private _getFirstFocusable(): HTMLButtonElement { - const active = this._selected ? this._dateAdapter.deserialize(this._selected)! : this._now(); + const active = this._selected ? this._dateAdapter.deserialize(this._selected)! : this.now; let firstFocusable = this.shadowRoot!.querySelector('.sbb-calendar__selected') ?? this.shadowRoot!.querySelector( @@ -795,23 +805,9 @@ export class SbbCalendarElement extends LitElement { : this._findNext(days, nextIndex, -verticalOffset); } - private _now(): T { - if (this.hasAttribute('data-now')) { - const today = new Date(readDataNow(this)); - if (defaultDateAdapter.isValid(today)) { - return this._dateAdapter.createDate( - today.getFullYear(), - today.getMonth() + 1, - today.getDate(), - ); - } - } - return this._dateAdapter.today(); - } - private _resetToDayView(): void { this._resetFocus = true; - this._activeDate = this.selected ?? this._now(); + this._activeDate = this.selected ?? this.now; this._chosenYear = undefined; this._chosenMonth = undefined; this._nextCalendarView = 'day'; @@ -923,7 +919,7 @@ export class SbbCalendarElement extends LitElement { /** Creates the table body with the day cells. For the first row, it also considers the possible day's offset. */ private _createDayTableBody(weeks: Day[][]): TemplateResult[] { - const today: string = this._dateAdapter.toIso8601(this._now()); + const today: string = this._dateAdapter.toIso8601(this.now); return weeks.map((week: Day[], rowIndex: number) => { const firstRowOffset: number = DAYS_PER_ROW - week.length; if (rowIndex === 0 && firstRowOffset) { @@ -1058,8 +1054,8 @@ export class SbbCalendarElement extends LitElement { !!this._selected && year === selectedYear && month.monthValue === selectedMonth; const isCurrentMonth = - year === this._dateAdapter.getYear(this._now()) && - this._dateAdapter.getMonth(this._now()) === month.monthValue; + year === this._dateAdapter.getYear(this.now) && + this._dateAdapter.getMonth(this.now) === month.monthValue; return html` extends LitElement { /** Creates the table for the year selection view. */ private _createYearTable(years: number[][], shiftRight = false): TemplateResult { - const now = this._now(); + const now = this.now; return html` this._tableAnimationEnd(e)} diff --git a/src/elements/calendar/readme.md b/src/elements/calendar/readme.md index 07945659ac..2e59c5ba53 100644 --- a/src/elements/calendar/readme.md +++ b/src/elements/calendar/readme.md @@ -20,6 +20,10 @@ It's recommended to set the time to 00:00:00. ``` +To simulate the current date, you can use the `now` property, +which accepts a `Date` or a timestamp in seconds (as number or string). +This is helpful if you need a specific state of the component. + ## Style The component displays one month by default; two months can be displayed setting the `wide` property to `true`. @@ -55,22 +59,18 @@ It's possible to move within the component using the keyboard. For accessibility purposes, the component is rendered as a native table element and each day is a button. -## Testing - -To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds). -This is helpful if you need a specific state of the component. - ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ | -| `dateFilter` | `date-filter` | public | `(date: T \| null) => boolean \| undefined` | | A function used to filter out dates. | -| `max` | `max` | public | `T \| null` | | The maximum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | -| `min` | `min` | public | `T \| null` | | The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | -| `selected` | `selected` | public | `T \| null` | | The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | -| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------- | ------- | ------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- | +| `dateFilter` | `date-filter` | public | `(date: T \| null) => boolean \| undefined` | | A function used to filter out dates. | +| `max` | `max` | public | `T \| null` | | The maximum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | +| `min` | `min` | public | `T \| null` | | The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | +| `now` | `now` | public | `T` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. | +| `selected` | `selected` | public | `T \| null` | | The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | +| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed | ## Methods diff --git a/src/elements/clock/clock.spec.ts b/src/elements/clock/clock.spec.ts index efe7cf63bc..a068cbd2ce 100644 --- a/src/elements/clock/clock.spec.ts +++ b/src/elements/clock/clock.spec.ts @@ -18,7 +18,7 @@ describe(`sbb-clock`, () => { }); it('renders with a fixed time', async () => { - element = await fixture(html``); + element = await fixture(html``); assert.instanceOf(element, SbbClockElement); expect(element).to.have.attribute('data-initialized'); diff --git a/src/elements/clock/clock.stories.ts b/src/elements/clock/clock.stories.ts index c114da8a5d..8e06a76657 100644 --- a/src/elements/clock/clock.stories.ts +++ b/src/elements/clock/clock.stories.ts @@ -1,46 +1,55 @@ import type { InputType } from '@storybook/types'; -import type { Args, Meta, StoryObj } from '@storybook/web-components'; +import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components'; import isChromatic from 'chromatic/isChromatic'; -import type { TemplateResult } from 'lit'; +import { nothing, type TemplateResult } from 'lit'; import { html } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../../storybook/helpers/spread.js'; +import type { SbbTime } from '../core/interfaces/types.js'; import readme from './readme.md?raw'; import './clock.js'; -const dataNow: InputType = { - control: { - type: 'date', - }, +const hours: InputType = { control: { type: 'number', min: 0, max: 23 } }; +const minutes: InputType = { control: { type: 'number', min: 0, max: 59 } }; +// Note: SBB Clock doesn't have the second 59, this is awaited in still position always +const seconds: InputType = { control: { type: 'number', min: 0, max: 58 } }; + +const Template = ({ hours, minutes, seconds, ...args }: Args): TemplateResult => { + const timeString: SbbTime = `${hours}:${minutes}:${seconds}`; + const hasCustomTime = hours !== undefined && minutes !== undefined && seconds !== undefined; + return html``; }; -const Template = (args: Args): TemplateResult => html``; +const defaultArgTypes: ArgTypes = { + hours, + minutes, + seconds, +}; + +const defaultArgs: Args = { + hours: isChromatic() ? 9 : undefined, + minutes: isChromatic() ? 10 : undefined, + seconds: isChromatic() ? 30 : undefined, +}; export const Default: StoryObj = { render: Template, - argTypes: { 'data-now': dataNow }, - args: { 'data-now': undefined }, + argTypes: defaultArgTypes, + args: { ...defaultArgs }, }; export const Paused: StoryObj = { render: Template, - argTypes: { 'data-now': dataNow }, - args: { 'data-now': new Date('2023-01-24T10:10:30+01:00').valueOf() }, + argTypes: defaultArgTypes, + args: { ...defaultArgs, hours: 9, minutes: 10, seconds: 30 }, }; -/** - * Stop the clock for Chromatic visual regression tests - * and set time to given time - */ -if (isChromatic()) { - Default.args = { - 'data-now': new Date('2023-01-24T10:10:30+01:00').valueOf(), - }; -} - const meta: Meta = { decorators: [(story) => html`
${story()}
`], parameters: { diff --git a/src/elements/clock/clock.ts b/src/elements/clock/clock.ts index e02f23c295..61fb800821 100644 --- a/src/elements/clock/clock.ts +++ b/src/elements/clock/clock.ts @@ -1,9 +1,9 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { customElement, property } from 'lit/decorators.js'; import { ref } from 'lit/directives/ref.js'; -import { readDataNow } from '../core/datetime.js'; +import type { SbbTime } from '../core/interfaces.js'; import clockFaceSVG from './assets/sbb_clock_face.svg?raw'; import clockHandleHoursSVG from './assets/sbb_clock_hours.svg?raw'; @@ -53,6 +53,12 @@ const ADD_EVENT_LISTENER_OPTIONS: AddEventListenerOptions = { export class SbbClockElement extends LitElement { public static override styles: CSSResultGroup = style; + /** + * Define a specific time which the clock should show statically. + * @param value HH:MM:ss + */ + @property() public now: SbbTime | null = null; + /** Reference to the hour hand. */ private _clockHandHours!: HTMLElement; @@ -80,10 +86,24 @@ export class SbbClockElement extends LitElement { /** Move the minutes hand every minute. */ private _handMovement?: ReturnType; + protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + + if (changedProperties.has('now')) { + if (this.now) { + this._removeSecondsAnimationStyles(); + this._removeHoursAnimationStyles(); + this._stopClock(); + } else { + this._startClock(); + } + } + } + private async _handlePageVisibilityChange(): Promise { if (document.visibilityState === 'hidden') { - this._stopClock(); - } else if (!this._hasDataNow()) { + await this._stopClock(); + } else if (!this.now) { await this._startClock(); } } @@ -118,10 +138,14 @@ export class SbbClockElement extends LitElement { /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */ private _assignCurrentTime(): void { - const date = this._now(); - this._hours = date.getHours() % 12; - this._minutes = date.getMinutes(); - this._seconds = date.getSeconds(); + const date = this.now ? null : new Date(); + const [hours, minutes, seconds] = date + ? [date.getHours(), date.getMinutes(), date.getSeconds()] + : this.now!.split(':').map((p) => +p); + + this._hours = hours % 12; + this._minutes = minutes; + this._seconds = seconds; } /** Set the starting position for the three hands on the clock face. */ @@ -150,10 +174,6 @@ export class SbbClockElement extends LitElement { (remainingHours - hasRemainingMinutesOrSeconds) * SECONDS_IN_AN_HOUR; } - if (this._clockHandSeconds) { - this._clockHandSeconds.style.animation = ''; - } - this.style.setProperty( '--sbb-clock-hours-animation-start-angle', `${Math.ceil(this._hours * HOURS_ANGLE + this._minutes / 2)}deg`, @@ -215,11 +235,16 @@ export class SbbClockElement extends LitElement { } /** Stops the clock by removing all the animations. */ - private _stopClock(): void { + private async _stopClock(): Promise { clearInterval(this._handMovement); - if (this._hasDataNow()) { + if (this.now) { this._setHandsStartingPosition(); + + // Wait a tick to before animation is added. Otherwise, the animation gets not completely + // removed which can lead to a mispositioned seconds hand. + await new Promise((resolve) => setTimeout(resolve)); + this._clockHandSeconds?.classList.add('sbb-clock__hand-seconds--initial-minute'); this._clockHandHours?.classList.add('sbb-clock__hand-hours--initial-hour'); } else { @@ -253,24 +278,13 @@ export class SbbClockElement extends LitElement { ); } - private _hasDataNow(): boolean { - return this.hasAttribute('data-now'); - } - - private _now(): Date { - if (this._hasDataNow()) { - return new Date(readDataNow(this)); - } - return new Date(); - } - protected override async firstUpdated(changedProperties: PropertyValues): Promise { super.firstUpdated(changedProperties); this._addEventListeners(); - if (this._hasDataNow()) { - this._stopClock(); + if (this.now) { + await this._stopClock(); } else { await this._startClock(); } diff --git a/src/elements/clock/readme.md b/src/elements/clock/readme.md index 4c5ce98433..dfdfe8381a 100644 --- a/src/elements/clock/readme.md +++ b/src/elements/clock/readme.md @@ -7,9 +7,18 @@ then it briefly pauses at the clock top before starting a new rotation. ``` -## Testing - -To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds). +To simulate the current time, you can use the `now` property +which accepts a time string like `HH:MM:SS`. This is helpful if you need a specific state of the component. +```html + +``` + + +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| ----- | --------- | ------- | ----------------- | ------- | -------------------------------------------------------------- | +| `now` | `now` | public | `SbbTime \| null` | `null` | Define a specific time which the clock should show statically. | diff --git a/src/elements/core/datetime.ts b/src/elements/core/datetime.ts index f3698c4475..d9d7ebc4ba 100644 --- a/src/elements/core/datetime.ts +++ b/src/elements/core/datetime.ts @@ -1,3 +1,2 @@ -export * from './datetime/data-now.js'; export * from './datetime/date-adapter.js'; export * from './datetime/native-date-adapter.js'; diff --git a/src/elements/core/datetime/data-now.ts b/src/elements/core/datetime/data-now.ts deleted file mode 100644 index d5e8acac16..0000000000 --- a/src/elements/core/datetime/data-now.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Reads the value of the data-now attribute and converts it to a number. - * `undefined` results in NaN. - * @param element - */ -export const readDataNow = (element: HTMLElement): number => { - return +(element.getAttribute('data-now') ?? undefined)!; -}; diff --git a/src/elements/core/datetime/date-adapter.ts b/src/elements/core/datetime/date-adapter.ts index 9cc5e2e40c..2fe93f34d7 100644 --- a/src/elements/core/datetime/date-adapter.ts +++ b/src/elements/core/datetime/date-adapter.ts @@ -88,7 +88,7 @@ export abstract class DateAdapter { * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601 * string). The default implementation does not allow any deserialization, it simply checks that * the given value is already a valid date object or null. - * @param date Either Date, ISOString, Unix Timestamp (number of seconds since Jan 1, 1970). + * @param value Either Date, ISOString, Unix Timestamp (number of seconds since Jan 1, 1970). * @returns The date if the input is valid, `null` otherwise. * */ public deserialize(value: T | string | number | null | undefined): T | null { @@ -133,10 +133,10 @@ export abstract class DateAdapter { * @param value The date in the format DD.MM.YYYY. * @param now The current date as Date. */ - public abstract parse(value: string | null | undefined, now: Date): T | undefined; + public abstract parse(value: string | null | undefined, now: T): T | undefined; /** Format the given Date as string. - * @param value The date to format. + * @param date The date to format. */ public abstract format(date: T | null | undefined): string; diff --git a/src/elements/core/interfaces/types.ts b/src/elements/core/interfaces/types.ts index 576c7e037f..bf34cbf7b7 100644 --- a/src/elements/core/interfaces/types.ts +++ b/src/elements/core/interfaces/types.ts @@ -2,6 +2,8 @@ export type SbbLanguage = 'de' | 'en' | 'fr' | 'it'; export type SbbDateLike = T | string | number; +export type SbbTime = `${number}:${number}:${number}`; + export type SbbHorizontalFrom = 'zero' | 'micro' | 'small' | 'medium' | 'large' | 'wide' | 'ultra'; export type SbbIconPlacement = 'start' | 'end'; diff --git a/src/elements/datepicker/common/datepicker-button.ts b/src/elements/datepicker/common/datepicker-button.ts index 070ce9d4a0..386859607e 100644 --- a/src/elements/datepicker/common/datepicker-button.ts +++ b/src/elements/datepicker/common/datepicker-button.ts @@ -90,7 +90,7 @@ export abstract class SbbDatepickerButton extends SbbNegativeMixin(SbbButtonBase return; } const startingDate: Date = - this.datePickerElement.getValueAsDate() ?? this.datePickerElement.now(); + this.datePickerElement.getValueAsDate() ?? this.datePickerElement.now; const date: Date = this.findAvailableDate( startingDate, this.datePickerElement.dateFilter, @@ -174,8 +174,9 @@ export abstract class SbbDatepickerButton extends SbbNegativeMixin(SbbButtonBase return; } + // TODO: use toIsoString() instead of toDateString() const currentDateString = - this.datePickerElement?.now().toDateString() === currentDate.toDateString() + this.datePickerElement?.now.toDateString() === currentDate.toDateString() ? i18nToday[this._language.current].toLowerCase() : this._dateAdapter.getAccessibilityFormatDate(currentDate); diff --git a/src/elements/datepicker/datepicker-next-day/datepicker-next-day.stories.ts b/src/elements/datepicker/datepicker-next-day/datepicker-next-day.stories.ts index ac1ee7c89f..a596d80ce7 100644 --- a/src/elements/datepicker/datepicker-next-day/datepicker-next-day.stories.ts +++ b/src/elements/datepicker/datepicker-next-day/datepicker-next-day.stories.ts @@ -44,7 +44,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html` ${BaseTemplate(args, 'datepicker')} diff --git a/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts b/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts index 0dea8faba3..7c74f72cac 100644 --- a/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts +++ b/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts @@ -49,7 +49,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html` `; diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.stories.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.stories.ts index a106cc37c5..8396608b43 100644 --- a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.stories.ts +++ b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.stories.ts @@ -69,7 +69,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html` @@ -78,9 +78,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html` const FormFieldTemplate = ({ negative, ...args }: Args): TemplateResult => html` - + ${StandaloneTemplate(args)} `; diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts index 8d6c6e7309..fa0a2782d3 100644 --- a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -1,12 +1,11 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; -import { html, LitElement, nothing } from 'lit'; +import { html, LitElement } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { ref } from 'lit/directives/ref.js'; import type { SbbCalendarElement } from '../../calendar.js'; import { sbbInputModalityDetector } from '../../core/a11y.js'; import { SbbLanguageController } from '../../core/controllers.js'; -import { readDataNow } from '../../core/datetime.js'; import { hostAttributes } from '../../core/decorators.js'; import { i18nShowCalendar } from '../../core/i18n.js'; import { SbbNegativeMixin } from '../../core/mixins.js'; @@ -130,8 +129,9 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) { if (!calendar || !datepicker) { return; } - calendar.wide = datepicker?.wide; - calendar.dateFilter = datepicker?.dateFilter; + calendar.wide = datepicker.wide; + calendar.now = this._nowOrUndefined(); + calendar.dateFilter = datepicker.dateFilter; } private _datePickerChanged(event: Event): void { @@ -156,21 +156,16 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) { this._calendarElement.resetPosition(); } - private _now(): Date | undefined { - if (this._datePickerElement?.hasAttribute('data-now')) { - const today = new Date(readDataNow(this._datePickerElement)); - today.setHours(0, 0, 0, 0); - return today; - } - return undefined; - } - protected override updated(changedProperties: PropertyValues): void { super.updated(changedProperties); this._popoverElement.trigger = this._triggerElement; } + private _nowOrUndefined(): Date | undefined { + return this._datePickerElement?.hasCustomNow() ? this._datePickerElement.now : undefined; + } + protected override render(): TemplateResult { return html` (this._popoverElement = el as SbbPopoverElement))} > ) => { diff --git a/src/elements/datepicker/datepicker/datepicker.stories.ts b/src/elements/datepicker/datepicker/datepicker.stories.ts index 3e50e22e63..d3a16cf3a7 100644 --- a/src/elements/datepicker/datepicker/datepicker.stories.ts +++ b/src/elements/datepicker/datepicker/datepicker.stories.ts @@ -217,7 +217,7 @@ const borderless: InputType = { }, }; -const dataNow: InputType = { +const now: InputType = { control: { type: 'date', }, @@ -237,8 +237,8 @@ const basicArgTypes: ArgTypes = { wide, dateFilter, dateHandling, + now, 'aria-label': ariaLabel, - 'data-now': dataNow, }; const basicArgs: Args = { @@ -252,8 +252,8 @@ const basicArgs: Args = { wide: false, dateFilter: dateFilter.options![0], dateHandling: dateHandling.options![0], + now: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined, 'aria-label': undefined, - dataNow: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined, }; const formFieldBasicArgsTypes: ArgTypes = { @@ -274,15 +274,8 @@ const formFieldBasicArgs = { borderless: false, }; -const getInputAttributes = (min?: Date | string, max?: Date | string): Record => { - const attr: Record = {}; - if (min) { - attr.min = new Date(min).getTime() / 1000; - } - if (max) { - attr.max = new Date(max).getTime() / 1000; - } - return attr; +const convertMillisecondsToSeconds = (milliseconds: number): number | typeof nothing => { + return milliseconds ? milliseconds / 1000 : nothing; }; // Story interaction executed after the story renders @@ -311,26 +304,24 @@ const changeEventHandler = async (event: Event): Promise => { document.getElementById('container-value')?.append(div); }; -const Template = ({ - min, - max, - wide, - dateFilter, - 'data-now': dataNow, - ...args -}: Args): TemplateResult => { +const Template = ({ min, max, wide, dateFilter, now, ...args }: Args): TemplateResult => { return html`
- + changeEventHandler(event)} - data-now=${dataNow} + now=${convertMillisecondsToSeconds(now)} >
@@ -354,7 +345,7 @@ const TemplateFormField = ({ wide, dateFilter, dateHandling, - 'data-now': dataNow, + now, ...args }: Args): TemplateResult => { return html` @@ -369,14 +360,18 @@ const TemplateFormField = ({ - + changeEventHandler(event)} - data-now=${dataNow} + now=${convertMillisecondsToSeconds(now)} >
## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------- | -| `dateFilter` | `date-filter` | public | `(date: Date \| null) => boolean` | | A function used to filter out dates. | -| `dateParser` | `date-parser` | public | `(value: string) => Date \| undefined \| undefined` | | A function used to parse string value into dates. | -| `format` | `format` | public | `(date: Date) => string \| undefined` | | A function used to format dates into the preferred string format. | -| `input` | `input` | public | `string \| HTMLElement \| undefined` | | Reference of the native input connected to the datepicker. | -| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- | +| `dateFilter` | `date-filter` | public | `(date: Date \| null) => boolean` | | A function used to filter out dates. | +| `dateParser` | `date-parser` | public | `(value: string) => Date \| undefined \| undefined` | | A function used to parse string value into dates. | +| `format` | `format` | public | `(date: Date) => string \| undefined` | | A function used to format dates into the preferred string format. | +| `input` | `input` | public | `string \| HTMLElement \| undefined` | | Reference of the native input connected to the datepicker. | +| `now` | `now` | public | `Date` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. | +| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed. | ## Methods diff --git a/src/elements/footer/footer.stories.ts b/src/elements/footer/footer.stories.ts index ad23d5ef6f..75f19ae01e 100644 --- a/src/elements/footer/footer.stories.ts +++ b/src/elements/footer/footer.stories.ts @@ -1,7 +1,7 @@ import type { InputType } from '@storybook/types'; import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; import isChromatic from 'chromatic/isChromatic'; -import type { TemplateResult } from 'lit'; +import { nothing, type TemplateResult } from 'lit'; import { html } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; @@ -188,11 +188,7 @@ const TemplateClockColumns = ({ ...args }): TemplateResult => html` Subscribe
- + html` @@ -172,7 +172,7 @@ const Template = (args: Args): TemplateResult => html` Details diff --git a/src/storybook/pages/home/home.common.ts b/src/storybook/pages/home/home.common.ts index 960dc02ada..b064c515a0 100644 --- a/src/storybook/pages/home/home.common.ts +++ b/src/storybook/pages/home/home.common.ts @@ -2,6 +2,7 @@ import type { Args } from '@storybook/web-components'; import isChromatic from 'chromatic/isChromatic'; import type { TemplateResult } from 'lit'; import { html } from 'lit'; +import { nothing } from 'lit/html.js'; import '../../../elements/button.js'; import '../../../elements/card.js'; @@ -18,7 +19,6 @@ import '../../../elements/navigation.js'; import '../../../elements/skiplink-list.js'; import '../../../elements/teaser-hero.js'; import '../../../elements/title.js'; -import { sbbSpread } from '../../helpers/spread.js'; export const skiplinkList = (): TemplateResult => html` @@ -310,11 +310,7 @@ export const footer = (args: Args): TemplateResult => html` Subscribe - +