fix: legacy component

sbb-design-systems · Oct 28, 2024 · 863b855 · 863b855
1 parent 57259a2
commit 863b855
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 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
@@ -9,11 +9,14 @@ snapshots["sbb-pearl-chain renders with one leg DOM"] =
 
 snapshots["sbb-pearl-chain renders with one leg Shadow DOM"] = 
 `<div class="sbb-pearl-chain">
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
-  <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption">
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--past"
+    style="--sbb-pearl-chain-leg-width:100%;"
+  >
   </div>
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
 </div>
 `;
@@ -27,11 +30,21 @@ snapshots["sbb-pearl-chain renders with two legs DOM"] =
 
 snapshots["sbb-pearl-chain renders with two legs Shadow DOM"] = 
 `<div class="sbb-pearl-chain">
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
-  <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption">
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--past"
+    style="--sbb-pearl-chain-leg-width:8.333333333333332%;"
+  >
   </div>
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--past"
+    style="--sbb-pearl-chain-leg-width:91.66666666666666%;"
+  >
+    <span class="sbb-pearl-chain__stop">
+    </span>
+  </div>
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
 </div>
 `;
@@ -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"] = 
 `<div class="sbb-pearl-chain">
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
-  <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption">
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--past"
+    style="--sbb-pearl-chain-leg-width:8.333333333333332%;"
+  >
+  </div>
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--skipped"
+    style="--sbb-pearl-chain-leg-width:91.66666666666666%;"
+  >
+    <span class="sbb-pearl-chain__stop sbb-pearl-chain__stop--departure-skipped">
+    </span>
   </div>
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
 </div>
 `;
@@ -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"] = 
 `<div class="sbb-pearl-chain">
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
-  <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption">
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--past"
+    style="--sbb-pearl-chain-leg-width:8.333333333333332%;"
+  >
+  </div>
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--skipped"
+    style="--sbb-pearl-chain-leg-width:91.66666666666666%;"
+  >
+    <span class="sbb-pearl-chain__stop">
+    </span>
   </div>
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain--arrival-skipped sbb-pearl-chain__bullet sbb-pearl-chain__bullet--past">
   </span>
 </div>
 `;
@@ -81,11 +114,26 @@ snapshots["sbb-pearl-chain renders with progress leg DOM"] =
 
 snapshots["sbb-pearl-chain renders with progress leg Shadow DOM"] = 
 `<div class="sbb-pearl-chain">
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--progress">
   </span>
-  <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption">
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--progress"
+    style="--sbb-pearl-chain-leg-width:97.36842105263158%;--sbb-pearl-chain-leg-status:66.21621621621621%;"
+  >
+    <span
+      class="sbb-pearl-chain__position"
+      style="--sbb-pearl-chain-status-position:66.21621621621621%;transform:translateX(-100%);"
+    >
+    </span>
   </div>
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--future"
+    style="--sbb-pearl-chain-leg-width:2.631578947368421%;"
+  >
+    <span class="sbb-pearl-chain__stop">
+    </span>
+  </div>
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--future">
   </span>
 </div>
 `;
@@ -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"] = 
 `<div class="sbb-pearl-chain">
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain--departure-skipped sbb-pearl-chain__bullet sbb-pearl-chain__bullet--progress">
   </span>
-  <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption">
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--skipped"
+    style="--sbb-pearl-chain-leg-width:66.66666666666666%;"
+  >
+  </div>
+  <div
+    class="sbb-pearl-chain__leg sbb-pearl-chain__leg--future"
+    style="--sbb-pearl-chain-leg-width:33.33333333333333%;"
+  >
+    <span class="sbb-pearl-chain__stop">
+    </span>
   </div>
-  <span class="sbb-pearl-chain--departure-disruption sbb-pearl-chain__bullet">
+  <span class="sbb-pearl-chain__bullet sbb-pearl-chain__bullet--future">
   </span>
 </div>
 `;

diff --git 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
@@ -58,7 +58,7 @@ describe(`sbb-pearl-chain`, () => {
           await setup.withFixture(html`
             <sbb-pearl-chain
               .legs=${c.legs}
-              .now=${(c.now ?? new Date('2022-12-01T12:11:00').valueOf()) / 1000}
+              now=${(c.now ?? new Date('2022-12-01T12:11:00').valueOf()) / 1000}
               disable-animation
             ></sbb-pearl-chain>
           `);

diff --git 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.                                                                                                                                                           |