feat: add 'now' property instead of data-now attribute (#2674)

Closes #2654 BREAKING CHANGE: The half-public data-now attribute has become a public `now` property that can be used to set time or date-based components into a specific state, especially for testing purposes. - `sbb-calendar`, `sbb-datepicker`, `sbb-timetable-row`, `sbb-journey-summary`, `sbb-pearl-chain`, `sbb-pearl-chain-time`: change the attribute `data-now` to `now`. The property `now` can be a Date or Unix timestamp. If you had a timestamp in milliseconds before, please divide by 1000 to get seconds. - `sbb-clock`: change the attribute `data-now` to `now`. The property `now` has to be in the format "HH:MM:SS". --------- Co-authored-by: Jeremias Peier <jeremias.peier@sbb.ch>
sbb-design-systems · Jun 4, 2024 · 94c25b1 · 94c25b1
1 parent c296465
commit 94c25b1
Show file tree

Hide file tree

Showing 41 changed files with 395 additions and 342 deletions.
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
@@ -31,7 +31,7 @@ snapshots["sbb-journey-summary renders"] =
         </span>
       </time>
     </div>
-    <sbb-pearl-chain-time data-now="1661806800000">
+    <sbb-pearl-chain-time>
     </sbb-pearl-chain-time>
   </div>
 </div>
@@ -55,7 +55,7 @@ snapshots["sbb-journey-summary renders without vias"] =
         </span>
       </time>
     </div>
-    <sbb-pearl-chain-time data-now="1661806800000">
+    <sbb-pearl-chain-time>
     </sbb-pearl-chain-time>
   </div>
 </div>
@@ -79,7 +79,7 @@ snapshots["sbb-journey-summary renders with second journey"] =
         </span>
       </time>
     </div>
-    <sbb-pearl-chain-time data-now="1661806800000">
+    <sbb-pearl-chain-time>
     </sbb-pearl-chain-time>
   </div>
   <div>
@@ -118,7 +118,7 @@ snapshots["sbb-journey-summary renders with second journey"] =
           </span>
         </time>
       </div>
-      <sbb-pearl-chain-time data-now="1661806800000">
+      <sbb-pearl-chain-time>
       </sbb-pearl-chain-time>
     </div>
   </div>

diff --git 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` <sbb-journey-summary data-now="${now}"></sbb-journey-summary>`,
+      html` <sbb-journey-summary .now="${now}"></sbb-journey-summary>`,
     )) as SbbJourneySummaryElement;
     root.trip = data;
 
     await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(`
-      <sbb-journey-summary data-now="1661806800000">
+      <sbb-journey-summary>
       </sbb-journey-summary>`);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders without vias', async () => {
     const root = (await fixture(
-      html` <sbb-journey-summary data-now="${now}"></sbb-journey-summary>`,
+      html` <sbb-journey-summary .now="${now}"></sbb-journey-summary>`,
     )) as SbbJourneySummaryElement;
     root.trip = dataWithoutVia;
 
     await waitForLitRender(root);
 
     expect(root).dom.to.be.equal(`
-      <sbb-journey-summary data-now="1661806800000">
+      <sbb-journey-summary>
       </sbb-journey-summary>`);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with second journey', async () => {
     const root = (await fixture(
-      html` <sbb-journey-summary data-now="${now}"></sbb-journey-summary>`,
+      html` <sbb-journey-summary .now="${now}"></sbb-journey-summary>`,
     )) 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(`
-      <sbb-journey-summary data-now="1661806800000">
+      <sbb-journey-summary>
       </sbb-journey-summary>`);
     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
@@ -1,7 +1,7 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import isChromatic from 'chromatic/isChromatic';
-import type { TemplateResult } from 'lit';
+import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -67,24 +67,29 @@ const tripBack: InputType = {
 
 const defaultArgTypes: ArgTypes = {
   'disable-animation': disableAnimation,
-  'data-now': now,
   'round-trip': roundTrip,
   'header-level': headerLevel,
+  now,
   trip,
   tripBack,
 };
 
 const defaultArgs: Args = {
   'disable-animation': isChromatic(),
-  'data-now': new Date('2022-12-05T12:11:00').valueOf(),
   'round-trip': false,
   'header-level': headerLevel.options![2],
+  now: new Date('2022-12-05T12:11:00').valueOf(),
   trip: undefined,
   tripBack: undefined,
 };
 
-const Template = ({ trip, tripBack, ...args }: Args): TemplateResult => html`
-  <sbb-journey-summary .trip=${trip} .tripBack=${tripBack} ${sbbSpread(args)}>
+const Template = ({ trip, tripBack, now, ...args }: Args): TemplateResult => html`
+  <sbb-journey-summary
+    .trip=${trip}
+    .tripBack=${tripBack}
+    now=${now ? now / 1000 : nothing}
+    ${sbbSpread(args)}
+  >
     <div
       style=${styleMap({
         display: 'flex',
@@ -99,10 +104,11 @@ const Template = ({ trip, tripBack, ...args }: Args): TemplateResult => html`
   </sbb-journey-summary>
 `;
 
-const TemplateNoSlot = ({ trip, tripBack, ...args }: Args): TemplateResult =>
+const TemplateNoSlot = ({ trip, tripBack, now, ...args }: Args): TemplateResult =>
   html`<sbb-journey-summary
     .trip=${trip}
     .tripBack=${tripBack}
+    now=${now ? now / 1000 : nothing}
     ${sbbSpread(args)}
   ></sbb-journey-summary>`;
 

diff --git a/src/elements-experimental/journey-summary/journey-summary.ts b/src/elements-experimental/journey-summary/journey-summary.ts
@@ -1,6 +1,7 @@
 import { SbbLanguageController } from '@sbb-esta/lyne-elements/core/controllers.js';
-import { defaultDateAdapter, readDataNow } from '@sbb-esta/lyne-elements/core/datetime.js';
+import { defaultDateAdapter } from '@sbb-esta/lyne-elements/core/datetime.js';
 import { i18nTripDuration } from '@sbb-esta/lyne-elements/core/i18n.js';
+import type { SbbDateLike } from '@sbb-esta/lyne-elements/core/interfaces/types';
 import type { SbbTitleLevel } from '@sbb-esta/lyne-elements/title.js';
 import { format, isValid } from 'date-fns';
 import type { CSSResultGroup, TemplateResult } from 'lit';
@@ -59,6 +60,16 @@ export class SbbJourneySummaryElement extends LitElement {
    */
   @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
 
+  /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
+  @property()
+  public set now(value: SbbDateLike | undefined) {
+    this._now = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value));
+  }
+  public get now(): Date {
+    return this._now ?? new Date();
+  }
+  private _now: Date | null = null;
+
   private _hasContentSlot: boolean = false;
   private _language = new SbbLanguageController(this);
 
@@ -67,11 +78,6 @@ export class SbbJourneySummaryElement extends LitElement {
     this._hasContentSlot = Boolean(this.querySelector?.('[slot="content"]'));
   }
 
-  private _now(): number {
-    const dataNow = readDataNow(this);
-    return isNaN(dataNow) ? Date.now() : dataNow;
-  }
-
   /**  renders the date of the journey or if it is the current or next day */
   private _renderJourneyStart(
     departureTime: Date | undefined,
@@ -132,7 +138,7 @@ export class SbbJourneySummaryElement extends LitElement {
           .arrivalWalk=${arrivalWalk}
           .legs=${legs}
           .disableAnimation=${this.disableAnimation}
-          data-now=${this._now()}
+          .now=${this.now}
         ></sbb-pearl-chain-time>
       </div>
     `;

diff --git a/src/elements-experimental/journey-summary/readme.md b/src/elements-experimental/journey-summary/readme.md
@@ -16,17 +16,22 @@ If the tripBack prop is passed to the component a second journey-summary, withou
 <sbb-journey-summary trip="{trip}"><sbb-button></sbb-button></sbb-journey-summary>
 ```
 
+To simulate the current datetime, you can use the `now` property,
+which accepts a `Date` or a timestamp in milliseconds (as number or string).
+This is helpful if you need a specific state of the component.
+
 <!-- Auto Generated Below -->
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                                                | Default | Description                                                                                                    |
-| ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `disableAnimation` | `disable-animation` | public  | `boolean \| undefined`                              |         | Per default, the current location has a pulsating animation. You can disable the animation with this property. |
-| `headerLevel`      | `header-level`      | public  | `SbbTitleLevel`                                     | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                                                      |
-| `roundTrip`        | `round-trip`        | public  | `boolean \| undefined`                              |         | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header.                       |
-| `trip`             | `trip`              | public  | `InterfaceSbbJourneySummaryAttributes`              |         | The trip prop                                                                                                  |
-| `tripBack`         | `trip-back`         | public  | `InterfaceSbbJourneySummaryAttributes \| undefined` |         | The tripBack prop                                                                                              |
+| Name               | Attribute           | Privacy | Type                                                | Default | Description                                                                                                          |
+| ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
+| `disableAnimation` | `disable-animation` | public  | `boolean \| undefined`                              |         | Per default, the current location has a pulsating animation. You can disable the animation with this property.       |
+| `headerLevel`      | `header-level`      | public  | `SbbTitleLevel`                                     | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                                                            |
+| `now`              | `now`               | public  | `Date`                                              | `null`  | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |
+| `roundTrip`        | `round-trip`        | public  | `boolean \| undefined`                              |         | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header.                             |
+| `trip`             | `trip`              | public  | `InterfaceSbbJourneySummaryAttributes`              |         | The trip prop                                                                                                        |
+| `tripBack`         | `trip-back`         | public  | `InterfaceSbbJourneySummaryAttributes \| undefined` |         | The tripBack prop                                                                                                    |
 
 ## Slots
 

diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.spec.ts b/src/elements-experimental/pearl-chain-time/pearl-chain-time.spec.ts
@@ -9,15 +9,15 @@ 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 () => {
     const element = await fixture<SbbPearlChainTimeElement>(html`
       <sbb-pearl-chain-time
         departure-time="2022-08-16T12:00:00"
         arrival-time="2022-08-16T15:00:00"
-        data-now="${now}"
+        .now="${now}"
       >
       </sbb-pearl-chain-time>
     `);
@@ -28,7 +28,7 @@ describe(`sbb-pearl-chain-time`, () => {
     ];
     await waitForLitRender(element);
     expect(element).dom.to.be.equal(`
-      <sbb-pearl-chain-time arrival-time="2022-08-16T15:00:00" departure-time="2022-08-16T12:00:00" data-now="1660662000000">
+      <sbb-pearl-chain-time arrival-time="2022-08-16T15:00:00" departure-time="2022-08-16T12:00:00">
       </sbb-pearl-chain-time>
     `);
     expect(element).shadowDom.to.be.equal(`
@@ -39,7 +39,7 @@ describe(`sbb-pearl-chain-time`, () => {
           </span>
           12:00
         </time>
-        <sbb-pearl-chain class="sbb-pearl-chain__time-chain" data-now="1660662000000"></sbb-pearl-chain>
+        <sbb-pearl-chain class="sbb-pearl-chain__time-chain"></sbb-pearl-chain>
         <time class="sbb-pearl-chain__time-time" datetime="2022-08-16T15:00:00">
           <span class="sbb-screen-reader-only">
             Arrival:
@@ -56,7 +56,7 @@ describe(`sbb-pearl-chain-time`, () => {
         departure-time="2022-08-16T12:00:00"
         arrival-time="2022-08-16T15:00:00"
         departure-walk="10"
-        data-now="${now}"
+        .now="${now}"
       >
       </sbb-pearl-chain-time>
     `);
@@ -67,7 +67,7 @@ describe(`sbb-pearl-chain-time`, () => {
     ];
     await waitForLitRender(element);
     expect(element).dom.to.be.equal(`
-      <sbb-pearl-chain-time departure-time='2022-08-16T12:00:00' arrival-time='2022-08-16T15:00:00' departure-walk="10" data-now="1660662000000">
+      <sbb-pearl-chain-time departure-time='2022-08-16T12:00:00' arrival-time='2022-08-16T15:00:00' departure-walk="10">
       </sbb-pearl-chain-time>
     `);
     expect(element).shadowDom.to.be.equal(`
@@ -95,7 +95,7 @@ describe(`sbb-pearl-chain-time`, () => {
           </span>
           12:00
         </time>
-        <sbb-pearl-chain class="sbb-pearl-chain__time-chain" data-now="1660662000000"></sbb-pearl-chain>
+        <sbb-pearl-chain class="sbb-pearl-chain__time-chain"></sbb-pearl-chain>
         <time class="sbb-pearl-chain__time-time" datetime="2022-08-16T15:00:00">
           <span class="sbb-screen-reader-only">
             Arrival:
@@ -112,7 +112,7 @@ describe(`sbb-pearl-chain-time`, () => {
         departure-time="2022-08-16T12:00:00"
         arrival-time="2022-08-16T15:00:00"
         arrival-walk="10"
-        data-now="${now}"
+        .now="${now}"
       >
       </sbb-pearl-chain-time>
     `);
@@ -123,7 +123,7 @@ describe(`sbb-pearl-chain-time`, () => {
     ];
     await waitForLitRender(element);
     expect(element).dom.to.be.equal(`
-      <sbb-pearl-chain-time arrival-time="2022-08-16T15:00:00" departure-time="2022-08-16T12:00:00" arrival-walk="10" data-now="1660662000000">
+      <sbb-pearl-chain-time arrival-time="2022-08-16T15:00:00" departure-time="2022-08-16T12:00:00" arrival-walk="10">
       </sbb-pearl-chain-time>
     `);
     expect(element).shadowDom.to.be.equal(`
@@ -134,7 +134,7 @@ describe(`sbb-pearl-chain-time`, () => {
           </span>
           12:00
         </time>
-        <sbb-pearl-chain class="sbb-pearl-chain__time-chain" data-now="1660662000000"></sbb-pearl-chain>
+        <sbb-pearl-chain class="sbb-pearl-chain__time-chain"></sbb-pearl-chain>
         <time class="sbb-pearl-chain__time-time" datetime="2022-08-16T15:00:00">
           <span class="sbb-screen-reader-only">
             Arrival:
@@ -169,7 +169,7 @@ describe(`sbb-pearl-chain-time`, () => {
         arrival-time="2022-08-16T15:00:00"
         departure-walk="20"
         arrival-walk="10"
-        data-now="${now}"
+        .now="${now}"
       >
       </sbb-pearl-chain-time>
     `);
@@ -180,7 +180,7 @@ describe(`sbb-pearl-chain-time`, () => {
     ];
     await waitForLitRender(element);
     expect(element).dom.to.be.equal(`
-      <sbb-pearl-chain-time arrival-time="2022-08-16T15:00:00" departure-time="2022-08-16T12:00:00" departure-walk="20" arrival-walk="10" data-now="1660662000000">
+      <sbb-pearl-chain-time arrival-time="2022-08-16T15:00:00" departure-time="2022-08-16T12:00:00" departure-walk="20" arrival-walk="10">
       </sbb-pearl-chain-time>
     `);
     expect(element).shadowDom.to.be.equal(`
@@ -208,7 +208,7 @@ describe(`sbb-pearl-chain-time`, () => {
           </span>
           12:00
         </time>
-        <sbb-pearl-chain class="sbb-pearl-chain__time-chain" data-now="1660662000000"></sbb-pearl-chain>
+        <sbb-pearl-chain class="sbb-pearl-chain__time-chain"></sbb-pearl-chain>
         <time class="sbb-pearl-chain__time-time" datetime="2022-08-16T15:00:00">
           <span class="sbb-screen-reader-only">
             Arrival:

diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.stories.ts b/src/elements-experimental/pearl-chain-time/pearl-chain-time.stories.ts
@@ -1,7 +1,7 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import isChromatic from 'chromatic/isChromatic';
-import type { TemplateResult } from 'lit';
+import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
@@ -52,19 +52,23 @@ const defaultArgTypes: ArgTypes = {
   'arrival-time': arrivalTime,
   'departure-time': departureTime,
   'disable-animation': disableAnimation,
-  'data-now': now,
+  now,
 };
 
 const defaultArgs: Args = {
   legs: [progressLeg],
   'arrival-time': '2022-12-11T14:11:00',
   'departure-time': '2022-12-11T12:11:00',
   '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 =>
-  html`<sbb-pearl-chain-time .legs=${legs} ${sbbSpread(args)}></sbb-pearl-chain-time>`;
+const Template = ({ legs, now, ...args }: Args): TemplateResult =>
+  html`<sbb-pearl-chain-time
+    .legs=${legs}
+    now=${now ? now / 1000 : nothing}
+    ${sbbSpread(args)}
+  ></sbb-pearl-chain-time>`;
 
 export const minimal: StoryObj = {
   render: Template,
@@ -99,7 +103,7 @@ export const mixed: StoryObj = {
     ...defaultArgs,
     'departure-walk': '0',
     'arrival-walk': '5',
-    'data-now': new Date('2022-12-05T12:11:00').valueOf(),
+    now: new Date('2022-12-05T12:11:00').valueOf(),
     legs: [progressLeg],
   },
 };
@@ -111,7 +115,7 @@ export const extendedEnter: StoryObj = {
     ...defaultArgs,
     'departure-walk': '10',
     'arrival-walk': '5',
-    'data-now': new Date('2022-12-05T12:11:00').valueOf(),
+    now: new Date('2022-12-05T12:11:00').valueOf(),
     legs: [extendedLeg],
   },
 };