From 863b8553af0d8fbc722c114890d30c189cdc2161 Mon Sep 17 00:00:00 2001 From: Mario Castigliano Date: Mon, 28 Oct 2024 15:01:38 +0100 Subject: [PATCH] fix: legacy component --- .../pearl-chain.snapshot.spec.snap.js | 94 +++++++++++++++---- .../pearl-chain/pearl-chain.ts | 8 +- .../pearl-chain/pearl-chain.visual.spec.ts | 2 +- .../pearl-chain/readme.md | 2 +- 4 files changed, 81 insertions(+), 25 deletions(-) diff --git a/src/elements-experimental/pearl-chain/__snapshots__/pearl-chain.snapshot.spec.snap.js b/src/elements-experimental/pearl-chain/__snapshots__/pearl-chain.snapshot.spec.snap.js index b62b3a3539..4c53821270 100644 --- a/src/elements-experimental/pearl-chain/__snapshots__/pearl-chain.snapshot.spec.snap.js +++ b/src/elements-experimental/pearl-chain/__snapshots__/pearl-chain.snapshot.spec.snap.js @@ -9,11 +9,14 @@ snapshots["sbb-pearl-chain renders with one leg DOM"] = snapshots["sbb-pearl-chain renders with one leg Shadow DOM"] = `
- + -
+
- +
`; @@ -27,11 +30,21 @@ snapshots["sbb-pearl-chain renders with two legs DOM"] = snapshots["sbb-pearl-chain renders with two legs Shadow DOM"] = `
- + -
+
- +
+ + +
+
`; @@ -45,11 +58,21 @@ snapshots["sbb-pearl-chain renders with departure stop skipped DOM"] = snapshots["sbb-pearl-chain renders with departure stop skipped Shadow DOM"] = `
- + -
+
+
+
+ +
- +
`; @@ -63,11 +86,21 @@ snapshots["sbb-pearl-chain renders with arrival stop skipped DOM"] = snapshots["sbb-pearl-chain renders with arrival stop skipped Shadow DOM"] = `
- + -
+
+
+
+ +
- +
`; @@ -81,11 +114,26 @@ snapshots["sbb-pearl-chain renders with progress leg DOM"] = snapshots["sbb-pearl-chain renders with progress leg Shadow DOM"] = `
- + -
+
+ +
- +
+ + +
+
`; @@ -99,11 +147,21 @@ snapshots["sbb-pearl-chain renders with cancelled instead of progress leg DOM"] snapshots["sbb-pearl-chain renders with cancelled instead of progress leg Shadow DOM"] = `
- + -
+
+
+
+ +
- +
`; diff --git a/src/elements-experimental/pearl-chain/pearl-chain.ts b/src/elements-experimental/pearl-chain/pearl-chain.ts index b0995cdc45..dc9eae65bf 100644 --- a/src/elements-experimental/pearl-chain/pearl-chain.ts +++ b/src/elements-experimental/pearl-chain/pearl-chain.ts @@ -35,9 +35,7 @@ class SbbPearlChainElement extends LitElement { * 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%. */ - @forceType() - @property({ type: Array }) - public accessor legs: (Leg | PtRideLeg)[] = []; + @property({ type: Array }) public accessor legs: (Leg | PtRideLeg)[] = []; /** * Per default, the current location has a pulsating animation. You can @@ -52,7 +50,7 @@ class SbbPearlChainElement extends LitElement { public set now(value: SbbDateLike | undefined) { this._now = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value)); } - public get now(): SbbDateLike | null { + public get now(): Date | null { return this._now; } private _now: Date | null = null; @@ -147,7 +145,7 @@ class SbbPearlChainElement extends LitElement { } protected override render(): TemplateResult { - const now = (this.now as Date) ?? new Date(); + const now = this.now ?? new Date(); const rideLegs: PtRideLeg[] = this.legs?.filter((leg) => isRideLeg(leg)) as PtRideLeg[]; diff --git a/src/elements-experimental/pearl-chain/pearl-chain.visual.spec.ts b/src/elements-experimental/pearl-chain/pearl-chain.visual.spec.ts index 1d8f1fd9f7..675fc2a065 100644 --- a/src/elements-experimental/pearl-chain/pearl-chain.visual.spec.ts +++ b/src/elements-experimental/pearl-chain/pearl-chain.visual.spec.ts @@ -58,7 +58,7 @@ describe(`sbb-pearl-chain`, () => { await setup.withFixture(html` `); diff --git a/src/elements-experimental/pearl-chain/readme.md b/src/elements-experimental/pearl-chain/readme.md index fb12b29ebf..49acceddd9 100644 --- a/src/elements-experimental/pearl-chain/readme.md +++ b/src/elements-experimental/pearl-chain/readme.md @@ -58,4 +58,4 @@ This is helpful if you need a specific state of the component. | ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Per default, the current location has a pulsating animation. You can disable the animation with this property. | | `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | `[]` | Define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | -| `now` | `now` | public | `SbbDateLike \| null` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. | +| `now` | `now` | public | `Date \| null` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |