From 6f9b5c9f1945eb0f3d1f43d8f9961bc206e078aa Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Fri, 17 May 2024 08:28:29 +0200 Subject: [PATCH 01/18] feat: add now property instead of data-now --- src/components/calendar/calendar.e2e.ts | 4 ++-- src/components/calendar/calendar.spec.ts | 6 ++--- src/components/calendar/calendar.stories.ts | 4 ++-- src/components/calendar/calendar.ts | 9 ++++--- src/components/calendar/readme.md | 9 ++++--- src/components/clock/clock.spec.ts | 2 +- src/components/clock/clock.stories.ts | 10 ++++---- src/components/clock/clock.ts | 21 +++++++--------- src/components/clock/readme.md | 14 ++++++++--- src/components/core/datetime.ts | 1 - src/components/core/datetime/data-now.ts | 8 ------- .../datepicker-next-day.stories.ts | 2 +- .../datepicker-previous-day.stories.ts | 2 +- .../datepicker-toggle.stories.ts | 4 ++-- .../datepicker-toggle/datepicker-toggle.ts | 7 +++--- .../datepicker/datepicker.stories.ts | 21 ++++++---------- .../datepicker/datepicker/datepicker.ts | 13 +++++----- .../datepicker/datepicker/readme.md | 23 +++++++++--------- src/components/footer/footer.stories.ts | 2 +- .../journey-summary.spec.snap.js | 8 +++---- .../journey-summary/journey-summary.spec.ts | 12 +++++----- .../journey-summary.stories.ts | 4 ++-- .../journey-summary/journey-summary.ts | 9 +++---- src/components/journey-summary/readme.md | 4 ++++ .../pearl-chain-time/pearl-chain-time.spec.ts | 24 +++++++++---------- .../pearl-chain-time.stories.ts | 8 +++---- .../pearl-chain-time/pearl-chain-time.ts | 10 ++++---- src/components/pearl-chain-time/readme.md | 5 ++-- .../pearl-chain/pearl-chain.stories.ts | 18 +++++++------- src/components/pearl-chain/pearl-chain.ts | 8 ++++--- src/components/pearl-chain/readme.md | 5 ++-- src/components/timetable-row/readme.md | 5 ++-- .../timetable-row/timetable-row.spec.ts | 16 ++++++------- .../timetable-row/timetable-row.stories.ts | 22 ++++++++--------- src/components/timetable-row/timetable-row.ts | 10 ++++---- .../pages/home/home--logged-in.stories.ts | 4 ++-- src/storybook/pages/home/home.common.ts | 4 +--- 37 files changed, 166 insertions(+), 172 deletions(-) delete mode 100644 src/components/core/datetime/data-now.ts diff --git a/src/components/calendar/calendar.e2e.ts b/src/components/calendar/calendar.e2e.ts index cacfb4a273..ab6b1cd9ce 100644 --- a/src/components/calendar/calendar.e2e.ts +++ b/src/components/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/components/calendar/calendar.spec.ts b/src/components/calendar/calendar.spec.ts index 845c48e729..da736dc4d7 100644 --- a/src/components/calendar/calendar.spec.ts +++ b/src/components/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/components/calendar/calendar.stories.ts b/src/components/calendar/calendar.stories.ts index 611d4992c6..dd5ec8f1f4 100644 --- a/src/components/calendar/calendar.stories.ts +++ b/src/components/calendar/calendar.stories.ts @@ -84,7 +84,7 @@ const max: InputType = { }, }; -const dataNow: InputType = { +const now: InputType = { control: { type: 'date', }, @@ -124,7 +124,7 @@ const defaultArgTypes: ArgTypes = { min, max, dateFilter, - 'data-now': dataNow, + now, }; const today = new Date(); diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index 1195bbfe88..3028e8c2c7 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/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, @@ -141,6 +141,9 @@ export class SbbCalendarElement extends LitElement { /** A function used to filter out dates. */ @property({ attribute: 'date-filter' }) public dateFilter?: (date: T | null) => boolean; + /** A specific date for the current datetime (timestamp in milliseconds). */ + @property({ attribute: 'now' }) public dataNow?: number; + private _dateAdapter: DateAdapter = defaultDateAdapter as unknown as DateAdapter; /** Event emitted on date selection. */ @@ -796,8 +799,8 @@ export class SbbCalendarElement extends LitElement { } private _now(): T { - if (this.hasAttribute('data-now')) { - const today = new Date(readDataNow(this)); + if (this.dataNow) { + const today = new Date(+this.dataNow); if (defaultDateAdapter.isValid(today)) { return this._dateAdapter.createDate( today.getFullYear(), diff --git a/src/components/calendar/readme.md b/src/components/calendar/readme.md index cb5b981359..a4aa8e3b7e 100644 --- a/src/components/calendar/readme.md +++ b/src/components/calendar/readme.md @@ -20,6 +20,9 @@ It's recommended to set the time to 00:00:00. ``` +To specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). +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,17 +58,13 @@ 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 | | ------------ | ------------- | ------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ | +| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `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). | diff --git a/src/components/clock/clock.spec.ts b/src/components/clock/clock.spec.ts index efe7cf63bc..9263610b04 100644 --- a/src/components/clock/clock.spec.ts +++ b/src/components/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/components/clock/clock.stories.ts b/src/components/clock/clock.stories.ts index 70df338b8b..54fc460d59 100644 --- a/src/components/clock/clock.stories.ts +++ b/src/components/clock/clock.stories.ts @@ -21,14 +21,14 @@ const Template = (args: Args): TemplateResult => html` { if (document.visibilityState === 'hidden') { this._stopClock(); - } else if (!this._hasDataNow()) { + } else if (!this.dataNow) { await this._startClock(); } } @@ -218,7 +219,7 @@ export class SbbClockElement extends LitElement { private _stopClock(): void { clearInterval(this._handMovement); - if (this._hasDataNow()) { + if (this.dataNow) { this._setHandsStartingPosition(); this._clockHandSeconds?.classList.add('sbb-clock__hand-seconds--initial-minute'); this._clockHandHours?.classList.add('sbb-clock__hand-hours--initial-hour'); @@ -253,13 +254,9 @@ export class SbbClockElement extends LitElement { ); } - private _hasDataNow(): boolean { - return this.hasAttribute('data-now'); - } - private _now(): Date { - if (this._hasDataNow()) { - return new Date(readDataNow(this)); + if (this.dataNow) { + return new Date(+this.dataNow); } return new Date(); } @@ -269,7 +266,7 @@ export class SbbClockElement extends LitElement { this._addEventListeners(); - if (this._hasDataNow()) { + if (this.dataNow) { this._stopClock(); } else { await this._startClock(); diff --git a/src/components/clock/readme.md b/src/components/clock/readme.md index 4c5ce98433..bb2d33b9c1 100644 --- a/src/components/clock/readme.md +++ b/src/components/clock/readme.md @@ -7,9 +7,17 @@ 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 specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). This is helpful if you need a specific state of the component. +```html + +``` + + +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| --------- | --------- | ------- | --------------------- | ------- | --------------------------------------------------------------------- | +| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | diff --git a/src/components/core/datetime.ts b/src/components/core/datetime.ts index 37e061731b..e3c9b8f40a 100644 --- a/src/components/core/datetime.ts +++ b/src/components/core/datetime.ts @@ -1,4 +1,3 @@ -export * from './datetime/data-now.js'; export * from './datetime/date-adapter.js'; export * from './datetime/date-helper.js'; export * from './datetime/native-date-adapter.js'; diff --git a/src/components/core/datetime/data-now.ts b/src/components/core/datetime/data-now.ts deleted file mode 100644 index d5e8acac16..0000000000 --- a/src/components/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/components/datepicker/datepicker-next-day/datepicker-next-day.stories.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.stories.ts index 905057091e..bbc454ae8b 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.stories.ts +++ b/src/components/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/components/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts index 6fcbc06c1a..dceb325845 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts @@ -49,7 +49,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html` `; diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts index f70cb24db4..5b0a6d5e73 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts @@ -69,7 +69,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html` @@ -79,7 +79,7 @@ const FormFieldTemplate = ({ negative, ...args }: Args): TemplateResult => html` ${StandaloneTemplate(args)} diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts index 8d6c6e7309..fd4f5e530c 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -6,7 +6,6 @@ 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'; @@ -157,8 +156,8 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) { } private _now(): Date | undefined { - if (this._datePickerElement?.hasAttribute('data-now')) { - const today = new Date(readDataNow(this._datePickerElement)); + if (this._datePickerElement?.dataNow) { + const today = new Date(+this._datePickerElement?.dataNow); today.setHours(0, 0, 0, 0); return today; } @@ -192,7 +191,7 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) { ${ref((el?: Element) => (this._popoverElement = el as SbbPopoverElement))} > => { 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`
@@ -330,7 +323,7 @@ const Template = ({ .dateFilter=${dateFilter} ?wide=${wide} @change=${(event: Event) => changeEventHandler(event)} - data-now=${dataNow} + now=${now} >
@@ -354,7 +347,7 @@ const TemplateFormField = ({ wide, dateFilter, dateHandling, - 'data-now': dataNow, + now, ...args }: Args): TemplateResult => { return html` @@ -376,7 +369,7 @@ const TemplateFormField = ({ .format=${dateHandling.format} ?wide=${wide} @change=${(event: Event) => changeEventHandler(event)} - data-now=${dataNow} + now=${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 | +| ------------ | ------------- | ------- | --------------------------------------------------- | ------- | --------------------------------------------------------------------- | +| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | +| `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. | ## Methods diff --git a/src/components/footer/footer.stories.ts b/src/components/footer/footer.stories.ts index 3c3d391a30..0e230c4767 100644 --- a/src/components/footer/footer.stories.ts +++ b/src/components/footer/footer.stories.ts @@ -190,7 +190,7 @@ const TemplateClockColumns = ({ ...args }): TemplateResult => html`
diff --git a/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js b/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js index 6fa41950fc..c76c84ae77 100644 --- a/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js +++ b/src/components/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/components/journey-summary/journey-summary.spec.ts b/src/components/journey-summary/journey-summary.spec.ts index 93162f8863..d4f9c88c32 100644 --- a/src/components/journey-summary/journey-summary.spec.ts +++ b/src/components/journey-summary/journey-summary.spec.ts @@ -40,35 +40,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; @@ -77,7 +77,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/components/journey-summary/journey-summary.stories.ts b/src/components/journey-summary/journey-summary.stories.ts index 46087dd575..f0951cc987 100644 --- a/src/components/journey-summary/journey-summary.stories.ts +++ b/src/components/journey-summary/journey-summary.stories.ts @@ -67,18 +67,18 @@ 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, }; diff --git a/src/components/journey-summary/journey-summary.ts b/src/components/journey-summary/journey-summary.ts index 643f648592..883096acd3 100644 --- a/src/components/journey-summary/journey-summary.ts +++ b/src/components/journey-summary/journey-summary.ts @@ -8,7 +8,6 @@ import { defaultDateAdapter, durationToTime, removeTimezoneFromISOTimeString, - readDataNow, } from '../core/datetime.js'; import { i18nTripDuration } from '../core/i18n.js'; import type { Leg } from '../core/timetable.js'; @@ -63,6 +62,9 @@ export class SbbJourneySummaryElement extends LitElement { */ @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean; + /** A specific date for the current datetime (timestamp in milliseconds). */ + @property({ attribute: 'now' }) public dataNow?: number; + private _hasContentSlot: boolean = false; private _language = new SbbLanguageController(this); @@ -72,8 +74,7 @@ export class SbbJourneySummaryElement extends LitElement { } private _now(): number { - const dataNow = readDataNow(this); - return isNaN(dataNow) ? Date.now() : dataNow; + return this.dataNow ?? Date.now(); } /** renders the date of the journey or if it is the current or next day */ @@ -136,7 +137,7 @@ export class SbbJourneySummaryElement extends LitElement { .arrivalWalk=${arrivalWalk} .legs=${legs} .disableAnimation=${this.disableAnimation} - data-now=${this._now()} + now=${this._now()} > `; diff --git a/src/components/journey-summary/readme.md b/src/components/journey-summary/readme.md index 471cf86d84..81e88f4bd4 100644 --- a/src/components/journey-summary/readme.md +++ b/src/components/journey-summary/readme.md @@ -16,12 +16,16 @@ If the tripBack prop is passed to the component a second journey-summary, withou ``` +To specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). +This is helpful if you need a specific state of the component. + ## Properties | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- | +| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `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. | diff --git a/src/components/pearl-chain-time/pearl-chain-time.spec.ts b/src/components/pearl-chain-time/pearl-chain-time.spec.ts index 55c8e19f52..41762f2838 100644 --- a/src/components/pearl-chain-time/pearl-chain-time.spec.ts +++ b/src/components/pearl-chain-time/pearl-chain-time.spec.ts @@ -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 specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). This is helpful if you need a specific state of the component. @@ -58,6 +56,7 @@ This is helpful if you need a specific state of the component. | ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `arrivalTime` | `arrival-time` | public | `string \| undefined` | | Prop to render the arrival time - will be formatted as "H:mm" | | `arrivalWalk` | `arrival-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) after arrival | +| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `departureTime` | `departure-time` | public | `string \| undefined` | | Prop to render the departure time - will be formatted as "H:mm" | | `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. | diff --git a/src/components/pearl-chain/pearl-chain.stories.ts b/src/components/pearl-chain/pearl-chain.stories.ts index 8e41921982..ab3bceef95 100644 --- a/src/components/pearl-chain/pearl-chain.stories.ts +++ b/src/components/pearl-chain/pearl-chain.stories.ts @@ -32,12 +32,12 @@ 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 => { @@ -86,7 +86,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 +96,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 +106,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 +116,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 +126,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 +136,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 +146,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/components/pearl-chain/pearl-chain.ts b/src/components/pearl-chain/pearl-chain.ts index 46c5a00606..d8168103bb 100644 --- a/src/components/pearl-chain/pearl-chain.ts +++ b/src/components/pearl-chain/pearl-chain.ts @@ -4,7 +4,7 @@ import { html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { readDataNow, removeTimezoneFromISOTimeString } from '../core/datetime.js'; +import { removeTimezoneFromISOTimeString } from '../core/datetime.js'; import type { Leg, PtRideLeg } from '../core/timetable.js'; import { isRideLeg } from '../core/timetable.js'; @@ -35,9 +35,11 @@ export class SbbPearlChainElement extends LitElement { */ @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean; + /** A specific date for the current datetime (timestamp in milliseconds). */ + @property({ attribute: 'now' }) public dataNow?: number; + private _now(): number { - const dataNow = readDataNow(this); - return isNaN(dataNow) ? Date.now() : dataNow; + return this.dataNow ?? Date.now(); } private _getAllDuration(legs: PtRideLeg[]): number { diff --git a/src/components/pearl-chain/readme.md b/src/components/pearl-chain/readme.md index 4b9532c8ae..26ace5f998 100644 --- a/src/components/pearl-chain/readme.md +++ b/src/components/pearl-chain/readme.md @@ -46,9 +46,7 @@ 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 specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). This is helpful if you need a specific state of the component. @@ -57,5 +55,6 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | ----------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `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%. | diff --git a/src/components/timetable-row/readme.md b/src/components/timetable-row/readme.md index dc8c2d4404..4e5f98f84d 100644 --- a/src/components/timetable-row/readme.md +++ b/src/components/timetable-row/readme.md @@ -39,9 +39,7 @@ _`tripProp` property_ ``` -## Testing - -To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds). +To specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). This is helpful if you need a specific state of the component. @@ -54,6 +52,7 @@ This is helpful if you need a specific state of the component. | `active` | `active` | public | `boolean \| undefined` | | When this prop is true the sbb-card will be in the active state. | | `boarding` | `boarding` | public | `Boarding \| undefined` | | This will be forwarded to the notices section | | `cardActionLabel` | `card-action-label` | public | `string \| undefined` | | Hidden label for the card action. It overrides the automatically generated accessibility text for the component. Use this prop to provide custom accessibility information for the component. | +| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `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 | diff --git a/src/components/timetable-row/timetable-row.spec.ts b/src/components/timetable-row/timetable-row.spec.ts index 8fff9830e8..5b176c559b 100644 --- a/src/components/timetable-row/timetable-row.spec.ts +++ b/src/components/timetable-row/timetable-row.spec.ts @@ -21,13 +21,13 @@ describe(`sbb-timetable-row`, () => { 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,7 @@ describe(`sbb-timetable-row`, () => {

@@ -112,13 +112,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 +144,7 @@ describe(`sbb-timetable-row`, () => { Direction Spiegel, Blinzern

- +
@@ -179,14 +179,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/components/timetable-row/timetable-row.stories.ts b/src/components/timetable-row/timetable-row.stories.ts index 544f6bcf0a..c3d6ba701e 100644 --- a/src/components/timetable-row/timetable-row.stories.ts +++ b/src/components/timetable-row/timetable-row.stories.ts @@ -93,7 +93,7 @@ const defaultArgTypes: ArgTypes = { 'loading-price': loadingPrice, 'accessibility-expanded': accessibilityExpanded, active, - 'data-now': now, + now, boarding, price, }; @@ -105,7 +105,7 @@ 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, @@ -208,7 +208,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 +219,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 +247,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 +257,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 +267,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 +277,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 +287,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 +297,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 +307,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/components/timetable-row/timetable-row.ts b/src/components/timetable-row/timetable-row.ts index d183fd3ac2..168084b96e 100644 --- a/src/components/timetable-row/timetable-row.ts +++ b/src/components/timetable-row/timetable-row.ts @@ -4,7 +4,7 @@ import { html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { SbbLanguageController } from '../core/controllers.js'; -import { readDataNow, removeTimezoneFromISOTimeString, durationToTime } from '../core/datetime.js'; +import { removeTimezoneFromISOTimeString, durationToTime } from '../core/datetime.js'; import { setOrRemoveAttribute } from '../core/dom.js'; import { i18nArrival, @@ -245,6 +245,9 @@ 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 specific date for the current datetime (timestamp in milliseconds). */ + @property({ attribute: 'now' }) public dataNow?: number; + private _language = new SbbLanguageController(this); protected override willUpdate(changedProperties: PropertyValues): void { @@ -256,8 +259,7 @@ export class SbbTimetableRowElement extends LitElement { } private _now(): number { - const dataNow = readDataNow(this); - return isNaN(dataNow) ? Date.now() : dataNow; + return this.dataNow ?? Date.now(); } /** The skeleton render function for the loading state */ @@ -545,7 +547,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/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home--logged-in.stories.ts index 65fae3936d..870afa1ff2 100644 --- a/src/storybook/pages/home/home--logged-in.stories.ts +++ b/src/storybook/pages/home/home--logged-in.stories.ts @@ -122,7 +122,7 @@ const Template = (args: Args): TemplateResult => html` @@ -169,7 +169,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 588d06cb87..34ed7622ec 100644 --- a/src/storybook/pages/home/home.common.ts +++ b/src/storybook/pages/home/home.common.ts @@ -311,9 +311,7 @@ export const footer = (args: Args): TemplateResult => html`
From 0eaf476c6b2c98f734ec1c596e21ac0ece325d9a Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Thu, 23 May 2024 18:25:28 +0200 Subject: [PATCH 02/18] feat: add now mixin --- src/components/calendar/calendar.ts | 28 +++++++------- src/components/calendar/readme.md | 4 +- src/components/clock/clock.stories.ts | 6 +-- src/components/clock/clock.ts | 24 ++++-------- src/components/clock/readme.md | 8 ++-- src/components/core/mixins.ts | 1 + src/components/core/mixins/now-mixin.ts | 37 +++++++++++++++++++ .../datepicker/common/datepicker-button.ts | 4 +- .../datepicker-toggle/datepicker-toggle.ts | 4 +- .../datepicker/datepicker/datepicker.ts | 19 ++++------ .../datepicker/datepicker/readme.md | 4 +- .../journey-summary/journey-summary.ts | 12 ++---- src/components/journey-summary/readme.md | 4 +- .../pearl-chain-time/pearl-chain-time.ts | 12 ++---- src/components/pearl-chain-time/readme.md | 4 +- src/components/pearl-chain/pearl-chain.ts | 16 +++----- src/components/pearl-chain/readme.md | 4 +- src/components/timetable-row/readme.md | 4 +- src/components/timetable-row/timetable-row.ts | 12 ++---- 19 files changed, 103 insertions(+), 104 deletions(-) create mode 100644 src/components/core/mixins/now-mixin.ts diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index 3028e8c2c7..e9e8c72b3e 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -33,6 +33,7 @@ import { i18nYearMonthSelection, } from '../core/i18n.js'; import type { SbbDateLike } from '../core/interfaces.js'; +import { SbbNowMixin } from '../core/mixins.js'; import style from './calendar.scss?lit&inline'; @@ -90,7 +91,7 @@ export type CalendarView = 'day' | 'month' | 'year'; * @event {CustomEvent} dateSelected - Event emitted on date selection. */ @customElement('sbb-calendar') -export class SbbCalendarElement extends LitElement { +export class SbbCalendarElement extends SbbNowMixin(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { dateSelected: 'dateSelected', @@ -141,9 +142,6 @@ export class SbbCalendarElement extends LitElement { /** A function used to filter out dates. */ @property({ attribute: 'date-filter' }) public dateFilter?: (date: T | null) => boolean; - /** A specific date for the current datetime (timestamp in milliseconds). */ - @property({ attribute: 'now' }) public dataNow?: number; - private _dateAdapter: DateAdapter = defaultDateAdapter as unknown as DateAdapter; /** Event emitted on date selection. */ @@ -153,7 +151,7 @@ export class SbbCalendarElement extends LitElement { ); /** The currently active date. */ - @state() private _activeDate: T = this._now(); + @state() private _activeDate: T = this._getNow(); /** The selected date as ISOString. */ @state() private _selected?: string; @@ -237,7 +235,7 @@ export class SbbCalendarElement extends LitElement { if (this._calendarView !== 'day') { this._resetToDayView(); } - this._activeDate = this.selected ?? this._now(); + this._activeDate = this.selected ?? this._getNow(); this._init(); } @@ -609,7 +607,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._getNow(); let firstFocusable = this.shadowRoot!.querySelector('.sbb-calendar__selected') ?? this.shadowRoot!.querySelector( @@ -798,9 +796,9 @@ export class SbbCalendarElement extends LitElement { : this._findNext(days, nextIndex, -verticalOffset); } - private _now(): T { - if (this.dataNow) { - const today = new Date(+this.dataNow); + private _getNow(): T { + if (this.now) { + const today = new Date(+this.now); if (defaultDateAdapter.isValid(today)) { return this._dateAdapter.createDate( today.getFullYear(), @@ -814,7 +812,7 @@ export class SbbCalendarElement extends LitElement { private _resetToDayView(): void { this._resetFocus = true; - this._activeDate = this.selected ?? this._now(); + this._activeDate = this.selected ?? this._getNow(); this._chosenYear = undefined; this._chosenMonth = undefined; this._nextCalendarView = 'day'; @@ -926,7 +924,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._getNow()); return weeks.map((week: Day[], rowIndex: number) => { const firstRowOffset: number = DAYS_PER_ROW - week.length; if (rowIndex === 0 && firstRowOffset) { @@ -1061,8 +1059,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._getNow()) && + this._dateAdapter.getMonth(this._getNow()) === 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._getNow(); return html` this._tableAnimationEnd(e)} diff --git a/src/components/calendar/readme.md b/src/components/calendar/readme.md index a4aa8e3b7e..f30532ce1c 100644 --- a/src/components/calendar/readme.md +++ b/src/components/calendar/readme.md @@ -20,7 +20,7 @@ It's recommended to set the time to 00:00:00. ``` -To specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). +To simulate the current datetime, you can use the `now` property (timestamp in milliseconds). This is helpful if you need a specific state of the component. ## Style @@ -64,10 +64,10 @@ For accessibility purposes, the component is rendered as a native table element | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ | -| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `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 | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `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 | diff --git a/src/components/clock/clock.stories.ts b/src/components/clock/clock.stories.ts index 54fc460d59..db8298c669 100644 --- a/src/components/clock/clock.stories.ts +++ b/src/components/clock/clock.stories.ts @@ -11,7 +11,7 @@ import readme from './readme.md?raw'; import './clock.js'; -const dataNow: InputType = { +const now: InputType = { control: { type: 'date', }, @@ -21,13 +21,13 @@ const Template = (args: Args): TemplateResult => html` { if (document.visibilityState === 'hidden') { this._stopClock(); - } else if (!this.dataNow) { + } else if (!this.now) { await this._startClock(); } } @@ -119,7 +118,7 @@ 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(); + const date = new Date(this.dateNow); this._hours = date.getHours() % 12; this._minutes = date.getMinutes(); this._seconds = date.getSeconds(); @@ -219,7 +218,7 @@ export class SbbClockElement extends LitElement { private _stopClock(): void { clearInterval(this._handMovement); - if (this.dataNow) { + if (this.now) { this._setHandsStartingPosition(); this._clockHandSeconds?.classList.add('sbb-clock__hand-seconds--initial-minute'); this._clockHandHours?.classList.add('sbb-clock__hand-hours--initial-hour'); @@ -254,19 +253,12 @@ export class SbbClockElement extends LitElement { ); } - private _now(): Date { - if (this.dataNow) { - return new Date(+this.dataNow); - } - return new Date(); - } - protected override async firstUpdated(changedProperties: PropertyValues): Promise { super.firstUpdated(changedProperties); this._addEventListeners(); - if (this.dataNow) { + if (this.now) { this._stopClock(); } else { await this._startClock(); diff --git a/src/components/clock/readme.md b/src/components/clock/readme.md index bb2d33b9c1..bf4917b7ba 100644 --- a/src/components/clock/readme.md +++ b/src/components/clock/readme.md @@ -7,7 +7,7 @@ then it briefly pauses at the clock top before starting a new rotation. ``` -To specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). +To simulate the current datetime, you can use the `now` property (timestamp in milliseconds). This is helpful if you need a specific state of the component. ```html @@ -18,6 +18,6 @@ This is helpful if you need a specific state of the component. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------- | --------- | ------- | --------------------- | ------- | --------------------------------------------------------------------- | -| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | +| Name | Attribute | Privacy | Type | Default | Description | +| ----- | --------- | ------- | --------------------- | ------- | --------------------------------------------------------------------- | +| `now` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | diff --git a/src/components/core/mixins.ts b/src/components/core/mixins.ts index 2038021e61..0f9fbc9303 100644 --- a/src/components/core/mixins.ts +++ b/src/components/core/mixins.ts @@ -5,5 +5,6 @@ export * from './mixins/form-associated-mixin.js'; export * from './mixins/hydration-mixin.js'; export * from './mixins/named-slot-list-mixin.js'; export * from './mixins/negative-mixin.js'; +export * from './mixins/now-mixin.js'; export * from './mixins/required-mixin.js'; export * from './mixins/update-scheduler-mixin.js'; diff --git a/src/components/core/mixins/now-mixin.ts b/src/components/core/mixins/now-mixin.ts new file mode 100644 index 0000000000..1c757e48c4 --- /dev/null +++ b/src/components/core/mixins/now-mixin.ts @@ -0,0 +1,37 @@ +import type { LitElement } from 'lit'; +import { property } from 'lit/decorators.js'; + +import type { AbstractConstructor } from './constructor.js'; + +export declare class SbbNowMixinType { + public set now(value: number | string); + public get now(): number; + protected get dateNow(): number; +} + +/** + * Enhance your component with a `now` property. + */ +// eslint-disable-next-line @typescript-eslint/naming-convention +export const SbbNowMixin = >( + superClass: T, +): AbstractConstructor & T => { + abstract class SbbNowElement extends superClass implements Partial { + /** A specific date for the current datetime (timestamp in milliseconds). */ + @property({ type: Number }) + public get now(): number | undefined { + return this._now; + } + public set now(value: number | string) { + this._now = +value; + } + private _now?: number; + + /** Returns the `_now` value if available, otherwise the current datetime (as timestamp in millisecond). */ + protected get dateNow(): number { + return this._now ?? Date.now(); + } + } + + return SbbNowElement as unknown as AbstractConstructor & T; +}; diff --git a/src/components/datepicker/common/datepicker-button.ts b/src/components/datepicker/common/datepicker-button.ts index 070ce9d4a0..c5d08381dc 100644 --- a/src/components/datepicker/common/datepicker-button.ts +++ b/src/components/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.getNow(); const date: Date = this.findAvailableDate( startingDate, this.datePickerElement.dateFilter, @@ -175,7 +175,7 @@ export abstract class SbbDatepickerButton extends SbbNegativeMixin(SbbButtonBase } const currentDateString = - this.datePickerElement?.now().toDateString() === currentDate.toDateString() + this.datePickerElement?.getNow().toDateString() === currentDate.toDateString() ? i18nToday[this._language.current].toLowerCase() : this._dateAdapter.getAccessibilityFormatDate(currentDate); diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts index fd4f5e530c..b253e0ebd9 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -156,8 +156,8 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) { } private _now(): Date | undefined { - if (this._datePickerElement?.dataNow) { - const today = new Date(+this._datePickerElement?.dataNow); + if (this._datePickerElement?.now) { + const today = new Date(+this._datePickerElement?.now); today.setHours(0, 0, 0, 0); return today; } diff --git a/src/components/datepicker/datepicker/datepicker.ts b/src/components/datepicker/datepicker/datepicker.ts index c96a956899..68466f7eca 100644 --- a/src/components/datepicker/datepicker/datepicker.ts +++ b/src/components/datepicker/datepicker/datepicker.ts @@ -10,6 +10,7 @@ import { findInput, findReferencedElement } from '../../core/dom.js'; import { EventEmitter } from '../../core/eventing.js'; import { i18nDateChangedTo, i18nDatePickerPlaceholder } from '../../core/i18n.js'; import type { SbbDateLike, SbbValidationChangeEvent } from '../../core/interfaces.js'; +import { SbbNowMixin } from '../../core/mixins.js'; import { AgnosticMutationObserver } from '../../core/observers.js'; import type { SbbDatepickerButton } from '../common.js'; import type { SbbDatepickerToggleElement } from '../datepicker-toggle.js'; @@ -165,7 +166,7 @@ export const datepickerControlRegisteredEventFactory = (): CustomEvent => * @event {CustomEvent} validationChange - Emits whenever the internal validation state changes. */ @customElement('sbb-datepicker') -export class SbbDatepickerElement extends LitElement { +export class SbbDatepickerElement extends SbbNowMixin(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { didChange: 'didChange', @@ -191,9 +192,6 @@ export class SbbDatepickerElement extends LitElement { /** Reference of the native input connected to the datepicker. */ @property() public input?: string | HTMLElement; - /** A specific date for the current datetime (timestamp in milliseconds). */ - @property({ attribute: 'now' }) public dataNow?: number; - /** * @deprecated only used for React. Will probably be removed once React 19 is available. */ @@ -462,17 +460,14 @@ export class SbbDatepickerElement extends LitElement { * @internal * Returns current date or configured date. */ - public now(): Date { - if (this.dataNow) { - const today = new Date(+this.dataNow); - today.setHours(0, 0, 0, 0); - return today; - } - return this._dateAdapter.today(); + public getNow(): Date { + const today = new Date(this.dateNow); + today.setHours(0, 0, 0, 0); + return today; } private _parse(value: string): Date | undefined { - return this.dateParser ? this.dateParser(value) : this._dateAdapter.parse(value, this.now()); + return this.dateParser ? this.dateParser(value) : this._dateAdapter.parse(value, this.getNow()); } private _format(date: Date): string { diff --git a/src/components/datepicker/datepicker/readme.md b/src/components/datepicker/datepicker/readme.md index cd5a911d1e..e38516b58e 100644 --- a/src/components/datepicker/datepicker/readme.md +++ b/src/components/datepicker/datepicker/readme.md @@ -57,7 +57,7 @@ a `blur` event is fired on the input to ensure compatibility with any framework ## Custom date formats -To specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). +To simulate the current datetime, you can use the `now` property (timestamp in milliseconds). This is helpful if you need a specific state of the component. Using a combination of the `dateParser` and `format` properties, it's possible to configure the datepicker @@ -104,11 +104,11 @@ Whenever the validation state changes (e.g., a valid value becomes invalid or vi | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------------------------------------- | ------- | --------------------------------------------------------------------- | -| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `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 | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed. | ## Methods diff --git a/src/components/journey-summary/journey-summary.ts b/src/components/journey-summary/journey-summary.ts index 883096acd3..a8425f8611 100644 --- a/src/components/journey-summary/journey-summary.ts +++ b/src/components/journey-summary/journey-summary.ts @@ -10,6 +10,7 @@ import { removeTimezoneFromISOTimeString, } from '../core/datetime.js'; import { i18nTripDuration } from '../core/i18n.js'; +import { SbbNowMixin } from '../core/mixins.js'; import type { Leg } from '../core/timetable.js'; import type { SbbTitleLevel } from '../title.js'; @@ -38,7 +39,7 @@ export interface InterfaceSbbJourneySummaryAttributes { * @slot content - Use this slot to add `sbb-button`s or other interactive elements. */ @customElement('sbb-journey-summary') -export class SbbJourneySummaryElement extends LitElement { +export class SbbJourneySummaryElement extends SbbNowMixin(LitElement) { public static override styles: CSSResultGroup = style; /** The trip prop */ @@ -62,9 +63,6 @@ export class SbbJourneySummaryElement extends LitElement { */ @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean; - /** A specific date for the current datetime (timestamp in milliseconds). */ - @property({ attribute: 'now' }) public dataNow?: number; - private _hasContentSlot: boolean = false; private _language = new SbbLanguageController(this); @@ -73,10 +71,6 @@ export class SbbJourneySummaryElement extends LitElement { this._hasContentSlot = Boolean(this.querySelector?.('[slot="content"]')); } - private _now(): number { - return this.dataNow ?? Date.now(); - } - /** renders the date of the journey or if it is the current or next day */ private _renderJourneyStart( departureTime: Date | undefined, @@ -137,7 +131,7 @@ export class SbbJourneySummaryElement extends LitElement { .arrivalWalk=${arrivalWalk} .legs=${legs} .disableAnimation=${this.disableAnimation} - now=${this._now()} + now=${this.dateNow} > `; diff --git a/src/components/journey-summary/readme.md b/src/components/journey-summary/readme.md index 81e88f4bd4..aa045b4432 100644 --- a/src/components/journey-summary/readme.md +++ b/src/components/journey-summary/readme.md @@ -16,7 +16,7 @@ If the tripBack prop is passed to the component a second journey-summary, withou ``` -To specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds). +To simulate the current datetime, you can use the `now` property (timestamp in milliseconds). This is helpful if you need a specific state of the component. @@ -25,9 +25,9 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- | -| `dataNow` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `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 | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | | `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 | diff --git a/src/components/pearl-chain-time/pearl-chain-time.ts b/src/components/pearl-chain-time/pearl-chain-time.ts index 99676e6871..190eab01da 100644 --- a/src/components/pearl-chain-time/pearl-chain-time.ts +++ b/src/components/pearl-chain-time/pearl-chain-time.ts @@ -6,6 +6,7 @@ import { customElement, property } from 'lit/decorators.js'; import { SbbLanguageController } from '../core/controllers.js'; import { removeTimezoneFromISOTimeString } from '../core/datetime.js'; import { i18nArrival, i18nDeparture, i18nTransferProcedures } from '../core/i18n.js'; +import { SbbNowMixin } from '../core/mixins.js'; import type { Leg, PtRideLeg } from '../core/timetable.js'; import { getDepartureArrivalTimeAttribute, isRideLeg } from '../core/timetable.js'; @@ -17,7 +18,7 @@ import '../pearl-chain.js'; * Combined with `sbb-pearl-chain`, it displays walk time information. */ @customElement('sbb-pearl-chain-time') -export class SbbPearlChainTimeElement extends LitElement { +export class SbbPearlChainTimeElement extends SbbNowMixin(LitElement) { public static override styles: CSSResultGroup = style; /** @@ -48,15 +49,8 @@ export class SbbPearlChainTimeElement extends LitElement { */ @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean; - /** A specific date for the current datetime (timestamp in milliseconds). */ - @property({ attribute: 'now' }) public dataNow?: number; - private _language = new SbbLanguageController(this); - private _now(): number { - return this.dataNow ?? Date.now(); - } - protected override render(): TemplateResult { const departure: Date | undefined = this.departureTime ? removeTimezoneFromISOTimeString(this.departureTime) @@ -94,7 +88,7 @@ export class SbbPearlChainTimeElement extends LitElement { class="sbb-pearl-chain__time-chain" .legs=${this.legs} .disableAnimation=${this.disableAnimation} - now=${this._now()} + now=${this.dateNow} > ${arrival ? html`
extends SbbNowMixin(LitElement) { /** Creates the table for the year selection view. */ private _createYearTable(years: number[][], shiftRight = false): TemplateResult { - const now = this._getNow(); + const now = this.now; return html` this._tableAnimationEnd(e)} diff --git a/src/elements/calendar/readme.md b/src/elements/calendar/readme.md index 7f71e6b0ad..bc1f70a4fd 100644 --- a/src/elements/calendar/readme.md +++ b/src/elements/calendar/readme.md @@ -21,7 +21,7 @@ It's recommended to set the time to 00:00:00. ``` To simulate the current datetime, you can use the `now` property, -which accepts a `Date` or a timestamp in milliseconds (as number or string). +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 @@ -63,14 +63,14 @@ For accessibility purposes, the component is rendered as a native table element ## 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). | -| `now` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | -| `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` | | 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.stories.ts b/src/elements/clock/clock.stories.ts index 1a79d8fd1e..fe33f6a5dc 100644 --- a/src/elements/clock/clock.stories.ts +++ b/src/elements/clock/clock.stories.ts @@ -8,7 +8,6 @@ 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'; diff --git a/src/elements/clock/clock.ts b/src/elements/clock/clock.ts index 36a5b901b6..61fb800821 100644 --- a/src/elements/clock/clock.ts +++ b/src/elements/clock/clock.ts @@ -86,7 +86,7 @@ export class SbbClockElement extends LitElement { /** Move the minutes hand every minute. */ private _handMovement?: ReturnType; - protected override willUpdate(changedProperties: PropertyValues) { + protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); if (changedProperties.has('now')) { diff --git a/src/elements/clock/readme.md b/src/elements/clock/readme.md index bcde509722..dfdfe8381a 100644 --- a/src/elements/clock/readme.md +++ b/src/elements/clock/readme.md @@ -7,18 +7,18 @@ then it briefly pauses at the clock top before starting a new rotation. ``` -To simulate the current datetime, you can use the `now` property, -which accepts a `Date` or a timestamp in milliseconds (as number or string). +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 | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | +| 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/datepicker/common/datepicker-button.ts b/src/elements/datepicker/common/datepicker-button.ts index c5d08381dc..9e1f7c81b8 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.getNow(); + this.datePickerElement.getValueAsDate() ?? this.datePickerElement.now; const date: Date = this.findAvailableDate( startingDate, this.datePickerElement.dateFilter, @@ -175,7 +175,7 @@ export abstract class SbbDatepickerButton extends SbbNegativeMixin(SbbButtonBase } const currentDateString = - this.datePickerElement?.getNow().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-toggle/datepicker-toggle.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts index 7b941d12c3..2da8c280d6 100644 --- a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -1,5 +1,5 @@ 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'; @@ -129,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 { @@ -155,21 +156,16 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) { this._calendarElement.resetPosition(); } - private _now(): Date | undefined { - if (this._datePickerElement?.now) { - const today = new Date(this._datePickerElement.now); - 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 e53362a74c..e9b8d96f45 100644 --- a/src/elements/datepicker/datepicker/datepicker.stories.ts +++ b/src/elements/datepicker/datepicker/datepicker.stories.ts @@ -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 | nothing => { + return milliseconds ? milliseconds / 1000 : nothing; }; // Story interaction executed after the story renders @@ -316,14 +309,19 @@ const Template = ({ min, max, wide, dateFilter, now, ...args }: Args): TemplateR
- + changeEventHandler(event)} - now=${now} + now=${convertMillisecondsToSeconds(now)} >
@@ -362,14 +360,18 @@ const TemplateFormField = ({ - + changeEventHandler(event)} - now=${now} + now=${convertMillisecondsToSeconds(now)} >
* @event {CustomEvent} validationChange - Emits whenever the internal validation state changes. */ @customElement('sbb-datepicker') -export class SbbDatepickerElement extends SbbNowMixin(LitElement) { +export class SbbDatepickerElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { didChange: 'didChange', @@ -192,6 +190,17 @@ export class SbbDatepickerElement extends SbbNowMixin(LitElement) { /** Reference of the native input connected to the datepicker. */ @property() public input?: string | HTMLElement; + /** 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) { + const date = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); + this._now = date ? new Date(date.setHours(0, 0, 0, 0)) : null; + } + public get now(): T { + return this._now ?? this._dateAdapter.today(); + } + private _now?: T | null; + /** * @deprecated only used for React. Will probably be removed once React 19 is available. */ @@ -245,13 +254,6 @@ export class SbbDatepickerElement extends SbbNowMixin(LitElement) { this._inputElement = findInput(this, this.input); } } - - private _datepickerPropChanged(newValue: any, oldValue: any): void { - if (newValue !== oldValue) { - this._datePickerUpdated.emit(); - } - } - private _registerInputElement( newValue: HTMLInputElement | null, oldValue: HTMLInputElement | null, @@ -308,6 +310,14 @@ export class SbbDatepickerElement extends SbbNowMixin(LitElement) { } } + /** + * @internal + * Whether a custom now is configured. + */ + public hasCustomNow(): boolean { + return !!this._now; + } + private _onInputPropertiesChange(mutationsList?: MutationRecord[]): void { this._inputUpdated.emit({ disabled: this._inputElement?.disabled, @@ -367,8 +377,12 @@ export class SbbDatepickerElement extends SbbNowMixin(LitElement) { if (changedProperties.has('input')) { this._findInput(this.input!, changedProperties.get('input')!); } - if (changedProperties.has('wide') || changedProperties.has('dateFilter')) { - this._datepickerPropChanged(this.wide, changedProperties.get('wide')); + if ( + changedProperties.has('wide') || + changedProperties.has('dateFilter') || + changedProperties.has('now') + ) { + this._datePickerUpdated.emit(); } } @@ -456,18 +470,8 @@ export class SbbDatepickerElement extends SbbNowMixin(LitElement) { return value; } - /** - * @internal - * Returns current date or configured date. - */ - public getNow(): Date { - const today = new Date(this.dateNow); - today.setHours(0, 0, 0, 0); - return today; - } - private _parse(value: string): Date | undefined { - return this.dateParser ? this.dateParser(value) : this._dateAdapter.parse(value, this.getNow()); + return this.dateParser ? this.dateParser(value) : this._dateAdapter.parse(value, this.now); } private _format(date: Date): string { diff --git a/src/elements/datepicker/datepicker/readme.md b/src/elements/datepicker/datepicker/readme.md index b338cb1fee..cff41db728 100644 --- a/src/elements/datepicker/datepicker/readme.md +++ b/src/elements/datepicker/datepicker/readme.md @@ -58,7 +58,7 @@ a `blur` event is fired on the input to ensure compatibility with any framework ## Custom date formats To simulate the current datetime, you can use the `now` property, -which accepts a `Date` or a timestamp in milliseconds (as number or string). +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. Using a combination of the `dateParser` and `format` properties, it's possible to configure the datepicker @@ -103,14 +103,14 @@ Whenever the validation state changes (e.g., a valid value becomes invalid or vi ## 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. | -| `now` | `now` | public | `number \| undefined` | | A specific date for the current datetime (timestamp in milliseconds). | -| `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 | `T` | | 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 From c76945bb9b89ec2a984df85ab736b35ade8816c2 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Thu, 30 May 2024 22:23:02 +0200 Subject: [PATCH 08/18] fix: clock now config --- src/elements/footer/footer.stories.ts | 8 ++------ src/storybook/pages/home/home.common.ts | 6 ++---- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/elements/footer/footer.stories.ts b/src/elements/footer/footer.stories.ts index 5c82efa6be..07251de440 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` @@ -310,9 +310,7 @@ export const footer = (args: Args): TemplateResult => html` Subscribe - + Date: Mon, 3 Jun 2024 11:27:25 +0200 Subject: [PATCH 09/18] fix: don't convert to zero time --- src/elements/calendar/calendar.spec.ts | 6 +++--- src/elements/calendar/calendar.ts | 5 ++--- src/elements/core/datetime/date-adapter.ts | 2 +- src/elements/datepicker/common/datepicker-button.ts | 1 + src/elements/datepicker/datepicker/datepicker.ts | 9 ++++----- 5 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/elements/calendar/calendar.spec.ts b/src/elements/calendar/calendar.spec.ts index 785a79c6f7..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.ts b/src/elements/calendar/calendar.ts index a6183dbe65..5894a79e61 100644 --- a/src/elements/calendar/calendar.ts +++ b/src/elements/calendar/calendar.ts @@ -122,13 +122,12 @@ export class SbbCalendarElement extends LitElement { /** 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) { - const date = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); - this._now = date ? new Date(date.setHours(0, 0, 0, 0)) : null; + this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); } public get now(): T { return this._now ?? this._dateAdapter.today(); } - private _now?: T | null; + private _now: T | null = null; /** The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */ @property() diff --git a/src/elements/core/datetime/date-adapter.ts b/src/elements/core/datetime/date-adapter.ts index a49498aa4a..2fe93f34d7 100644 --- a/src/elements/core/datetime/date-adapter.ts +++ b/src/elements/core/datetime/date-adapter.ts @@ -133,7 +133,7 @@ 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 date The date to format. diff --git a/src/elements/datepicker/common/datepicker-button.ts b/src/elements/datepicker/common/datepicker-button.ts index 9e1f7c81b8..386859607e 100644 --- a/src/elements/datepicker/common/datepicker-button.ts +++ b/src/elements/datepicker/common/datepicker-button.ts @@ -174,6 +174,7 @@ export abstract class SbbDatepickerButton extends SbbNegativeMixin(SbbButtonBase return; } + // TODO: use toIsoString() instead of toDateString() const currentDateString = this.datePickerElement?.now.toDateString() === currentDate.toDateString() ? i18nToday[this._language.current].toLowerCase() diff --git a/src/elements/datepicker/datepicker/datepicker.ts b/src/elements/datepicker/datepicker/datepicker.ts index bede966376..f2d08a2f18 100644 --- a/src/elements/datepicker/datepicker/datepicker.ts +++ b/src/elements/datepicker/datepicker/datepicker.ts @@ -192,14 +192,13 @@ export class SbbDatepickerElement extends LitElement { /** 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) { - const date = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); - this._now = date ? new Date(date.setHours(0, 0, 0, 0)) : null; + public set now(value: SbbDateLike | undefined) { + this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); } - public get now(): T { + public get now(): Date { return this._now ?? this._dateAdapter.today(); } - private _now?: T | null; + private _now: Date | null = null; /** * @deprecated only used for React. Will probably be removed once React 19 is available. From 96c2e02d2a371d744f18dcda62f6fd6e95753139 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 3 Jun 2024 12:53:49 +0200 Subject: [PATCH 10/18] fix: fix experimental components --- .../journey-summary.spec.snap.js | 8 +-- .../journey-summary/journey-summary.spec.ts | 14 ++--- .../journey-summary.stories.ts | 14 +++-- .../journey-summary/journey-summary.ts | 16 ++++-- .../pearl-chain-time/pearl-chain-time.spec.ts | 26 ++++----- .../pearl-chain-time.stories.ts | 10 ++-- .../pearl-chain-time/pearl-chain-time.ts | 17 ++++-- .../pearl-chain/pearl-chain.stories.ts | 10 ++-- .../pearl-chain/pearl-chain.ts | 53 ++++++++++++------- .../timetable-row/timetable-row.spec.ts | 17 +++--- .../timetable-row/timetable-row.stories.ts | 5 +- .../timetable-row/timetable-row.ts | 22 +++++--- src/elements/core/mixins.ts | 1 - src/elements/core/mixins/now-mixin.ts | 42 --------------- tsconfig.json | 3 ++ 15 files changed, 140 insertions(+), 118 deletions(-) delete mode 100644 src/elements/core/mixins/now-mixin.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 c76c84ae77..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 4190e02ddc..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 28f4b71646..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'; @@ -83,8 +83,13 @@ const defaultArgs: Args = { 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 88e988d6eb..d1bdad0105 100644 --- a/src/elements-experimental/journey-summary/journey-summary.ts +++ b/src/elements-experimental/journey-summary/journey-summary.ts @@ -1,7 +1,7 @@ import { SbbLanguageController } from '@sbb-esta/lyne-elements/core/controllers.js'; import { defaultDateAdapter } from '@sbb-esta/lyne-elements/core/datetime.js'; import { i18nTripDuration } from '@sbb-esta/lyne-elements/core/i18n.js'; -import { SbbNowMixin } from '@sbb-esta/lyne-elements/core/mixins.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'; @@ -36,7 +36,7 @@ export interface InterfaceSbbJourneySummaryAttributes { * @slot content - Use this slot to add `sbb-button`s or other interactive elements. */ @customElement('sbb-journey-summary') -export class SbbJourneySummaryElement extends SbbNowMixin(LitElement) { +export class SbbJourneySummaryElement extends LitElement { public static override styles: CSSResultGroup = style; /** The trip prop */ @@ -60,6 +60,16 @@ export class SbbJourneySummaryElement extends SbbNowMixin(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 | null { + return this._now; + } + private _now: Date | null = null; + private _hasContentSlot: boolean = false; private _language = new SbbLanguageController(this); @@ -128,7 +138,7 @@ export class SbbJourneySummaryElement extends SbbNowMixin(LitElement) { .arrivalWalk=${arrivalWalk} .legs=${legs} .disableAnimation=${this.disableAnimation} - now=${this.dateNow} + .now=${this.now} >
`; 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 6add400a66..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 - +