fix: review part one

sbb-design-systems · Dec 2, 2024 · 77f0d3c · 77f0d3c
1 parent 51e29b9
commit 77f0d3c
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 279 deletions.
diff --git a/src/elements-experimental/pearl-chain-legacy/pearl-chain-legacy.scss b/src/elements-experimental/pearl-chain-legacy/pearl-chain-legacy.scss
@@ -4,8 +4,9 @@
   background-color: unset;
   background-image: linear-gradient(to right, currentcolor 0%, currentcolor 50%, Canvas 50%);
   background-repeat: repeat-x;
-  background-size: calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);
-  inset-inline-end: var(--sbb-pearl-chain-height);
+  background-size: calc(2 * var(--sbb-pearl-chain-leg-spacing-small))
+    var(--sbb-pearl-chain-leg-height);
+  inset-inline-end: var(--sbb-pearl-chain-leg-height);
 
   @include sbb.if-forced-colors {
     background: unset;
@@ -18,11 +19,11 @@
 @include sbb.box-sizing;
 
 :host {
-  --sbb-pearl-chain-height: var(--sbb-border-width-2x);
-  --sbb-pearl-chain-spacing-small: #{sbb.px-to-rem-build(2)};
+  --sbb-pearl-chain-leg-height: var(--sbb-border-width-2x);
+  --sbb-pearl-chain-leg-spacing-small: #{sbb.px-to-rem-build(2)};
   --sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color);
-  --sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);
-  --sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);
+  --sbb-pearl-chain-leg-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);
+  --sbb-pearl-chain-leg-color-past: var(--sbb-pearl-chain-bullet-color-past);
   --sbb-pearl-chain-leg-width: 100%;
 
   display: block;
@@ -38,7 +39,7 @@
   color: var(--sbb-pearl-chain-color);
   width: 100%;
   padding-block: calc(
-    (var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2
+    (var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-leg-height)) / 2
   );
   padding-inline-end: var(--sbb-pearl-chain-bullet-size-start-end);
 }
@@ -69,8 +70,8 @@
   flex-shrink: 0;
   flex-grow: 0;
   position: relative;
-  height: var(--sbb-pearl-chain-height);
-  border-inline-end: var(--sbb-pearl-chain-spacing-small) solid Canvas;
+  height: var(--sbb-pearl-chain-leg-height);
+  border-inline-end: var(--sbb-pearl-chain-leg-spacing-small) solid Canvas;
   background-color: currentcolor;
   width: var(--sbb-pearl-chain-leg-width);
   display: flex;
@@ -112,7 +113,7 @@
 .sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,
 .sbb-pearl-chain--progress,
 .sbb-pearl-chain__bullet--past {
-  color: var(--sbb-pearl-chain-color-past);
+  color: var(--sbb-pearl-chain-leg-color-past);
 
   @include sbb.pearl-chain-bullet-past;
 
@@ -131,7 +132,7 @@
 .sbb-pearl-chain--arrival-disruption,
 .sbb-pearl-chain--departure-disruption,
 .sbb-pearl-chain__leg--disruption {
-  color: var(--sbb-pearl-chain-color-disruption);
+  color: var(--sbb-pearl-chain-leg-color-disruption);
 
   @include sbb.pearl-chain-bullet-disruption;
 
@@ -154,7 +155,7 @@
 }
 
 .sbb-pearl-chain__leg--skipped {
-  color: var(--sbb-pearl-chain-color-disruption);
+  color: var(--sbb-pearl-chain-leg-color-disruption);
 
   &::after {
     @include sbb-pearl-chain-dotted;
@@ -179,7 +180,7 @@
   inset-block: 0;
   inset-inline-start: 0;
   background-color: currentcolor;
-  border-radius: var(--sbb-pearl-chain-height);
+  border-radius: var(--sbb-pearl-chain-leg-height);
   z-index: 1;
 
   @include sbb.if-forced-colors {
@@ -192,11 +193,11 @@
 }
 
 .sbb-pearl-chain__leg:last-of-type::after {
-  inset-inline-end: calc(-1 * var(--sbb-pearl-chain-height));
+  inset-inline-end: calc(-1 * var(--sbb-pearl-chain-leg-height));
 }
 
 .sbb-pearl-chain__leg--progress::after {
-  background-color: var(--sbb-pearl-chain-color-past);
+  background-color: var(--sbb-pearl-chain-leg-color-past);
 
   // --sbb-pearl-chain-leg-status: defined in .ts file
   width: var(--sbb-pearl-chain-leg-status);

diff --git a/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.scss b/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.scss
@@ -1,11 +1,12 @@
 @use '../../core/styles' as sbb;
 
-@mixin sbb-pearl-chain-dotted {
+@mixin sbb-pearl-chain-leg-dotted {
   background-color: unset;
   background-image: linear-gradient(to right, currentcolor 0%, currentcolor 50%, Canvas 50%);
   background-repeat: repeat-x;
-  background-size: calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);
-  inset-inline-end: var(--sbb-pearl-chain-height);
+  background-size: calc(2 * var(--sbb-pearl-chain-leg-spacing-small))
+    var(--sbb-pearl-chain-leg-height);
+  inset-inline-end: var(--sbb-pearl-chain-leg-height);
 
   @include sbb.if-forced-colors {
     background: unset;
@@ -18,13 +19,11 @@
 @include sbb.box-sizing;
 
 :host {
-  --sbb-pearl-chain-height: var(--sbb-border-width-2x);
-  --sbb-pearl-chain-spacing-small: #{sbb.px-to-rem-build(2)};
-  --sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color);
-  --sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);
-  --sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);
+  --sbb-pearl-chain-leg-height: var(--sbb-border-width-2x);
+  --sbb-pearl-chain-leg-spacing-small: #{sbb.px-to-rem-build(2)};
+  --sbb-pearl-chain-leg-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);
+  --sbb-pearl-chain-leg-color-past: var(--sbb-pearl-chain-bullet-color-past);
   --sbb-pearl-chain-leg-width: 100%;
-  --sbb-pearl-chain-leg-animation: none;
 
   display: contents;
 
@@ -34,8 +33,11 @@
 .sbb-pearl-chain__leg {
   flex: var(--sbb-pearl-chain-leg-weight, 1) var(--sbb-pearl-chain-leg-weight, 1);
   position: relative;
-  height: var(--sbb-pearl-chain-height);
-  border-inline-end: var(--sbb-pearl-chain-last-leg-margin, var(--sbb-pearl-chain-spacing-small))
+  height: var(--sbb-pearl-chain-leg-height);
+  border-inline-end: var(
+      --sbb-pearl-chain-last-leg-margin,
+      var(--sbb-pearl-chain-leg-spacing-small)
+    )
     solid Canvas;
   background-color: currentcolor;
   width: var(--sbb-pearl-chain-leg-width);
@@ -45,21 +47,17 @@
   @include sbb.if-forced-colors {
     background-color: CanvasText;
 
-    :host([past='']) & {
+    :host([past]) & {
       background-color: GrayText;
     }
   }
 
-  :host([data-last-leg]) & {
-    --sbb-pearl-chain-last-leg-margin: none;
-
-    &::after {
-      inset-inline-end: calc(-1 * var(--sbb-pearl-chain-height));
-    }
+  &::after {
+    inset-inline-end: var(--sbb-pearl-chain-last-leg-inset-inline-end, 0);
   }
 
   :host([past]) & {
-    color: var(--sbb-pearl-chain-color-past);
+    color: var(--sbb-pearl-chain-leg-color-past);
 
     @include sbb.pearl-chain-bullet-past;
 
@@ -69,7 +67,7 @@
   }
 
   :host([disruption]) & {
-    color: var(--sbb-pearl-chain-color-disruption);
+    color: var(--sbb-pearl-chain-leg-color-disruption);
 
     @include sbb.pearl-chain-bullet-disruption;
 
@@ -79,21 +77,25 @@
     }
 
     &::after {
-      @include sbb-pearl-chain-dotted;
+      @include sbb-pearl-chain-leg-dotted;
     }
   }
 
   :host(:is([arrival-skipped], [departure-skipped])) & {
-    color: var(--sbb-pearl-chain-color-disruption);
+    color: var(--sbb-pearl-chain-leg-color-disruption);
 
     &::after {
-      @include sbb-pearl-chain-dotted;
+      @include sbb-pearl-chain-leg-dotted;
     }
   }
 
   :host([data-progress]:not([arrival-skipped], [departure-skipped], [disruption])) & {
+    --sbb-pearl-chain-status-position-normalized: calc(
+      (100% - var(--sbb-pearl-chain-bullet-size-start-end)) * var(--sbb-pearl-chain-status-position)
+    );
+
     &::before {
-      --sbb-pearl-chain-bullet-animation-name: var(--sbb-pearl-chain-leg-animation);
+      --sbb-pearl-chain-bullet-animation-name: var(--sbb-pearl-chain-leg-animation, none);
 
       @include sbb.pearl-chain-bullet-position;
 
@@ -105,7 +107,7 @@
         z-index: 4;
 
         // --sbb-pearl-chain-status-position: defined in .ts file
-        inset-inline-start: var(--sbb-pearl-chain-status-position);
+        inset-inline-start: var(--sbb-pearl-chain-status-position-normalized);
       }
     }
 
@@ -115,10 +117,10 @@
       }
 
       & {
-        background-color: var(--sbb-pearl-chain-color-past);
+        background-color: var(--sbb-pearl-chain-leg-color-past);
 
         // --sbb-pearl-chain-leg-status: defined in .ts file
-        width: var(--sbb-pearl-chain-status-position);
+        width: var(--sbb-pearl-chain-status-position-normalized);
       }
     }
   }
@@ -131,7 +133,7 @@
   inset-block: 0;
   inset-inline-start: 0;
   background-color: currentcolor;
-  border-radius: var(--sbb-pearl-chain-height);
+  border-radius: var(--sbb-pearl-chain-leg-height);
   z-index: 1;
 
   @include sbb.if-forced-colors {
@@ -144,6 +146,7 @@
 }
 
 .sbb-pearl-chain__stop {
+  display: var(--sbb-pearl-chain-leg-stop-display, unset);
   position: relative;
   z-index: 2;
 

diff --git a/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.ts b/src/elements/pearl-chain/pearl-chain-leg/pearl-chain-leg.ts
@@ -1,9 +1,8 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { html, LitElement, nothing } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { forceType } from '../../core/decorators.js';
-import type { SbbDateLike } from '../../core/interfaces.js';
 
 import style from './pearl-chain-leg.scss?lit&inline';
 
@@ -17,23 +16,23 @@ class SbbPearlChainLegElement extends LitElement {
 
   /** Departure time of the leg. */
   @property()
-  public set departure(value: SbbDateLike | null) {
+  public set departure(value: Date | null) {
     this._departure = value;
   }
-  public get departure(): SbbDateLike | null {
+  public get departure(): Date | null {
     return this._departure;
   }
-  private _departure: SbbDateLike | null = null;
+  private _departure: Date | null = null;
 
   /** Arrival time of the leg. */
   @property()
-  public set arrival(value: SbbDateLike | null) {
+  public set arrival(value: Date | null) {
     this._arrival = value;
   }
-  public get arrival(): SbbDateLike | null {
+  public get arrival(): Date | null {
     return this._arrival;
   }
-  private _arrival: SbbDateLike | null = null;
+  private _arrival: Date | null = null;
 
   /** Whether the leg is disrupted. */
   @forceType()
@@ -65,26 +64,22 @@ class SbbPearlChainLegElement extends LitElement {
   @property({ type: Number, attribute: 'arrival-delay' })
   public accessor arrivalDelay: number = 0;
 
-  private _displayStop(): boolean {
-    return !this.hasAttribute('data-first-leg');
-  }
-
-  protected override willUpdate(_changedProperties: PropertyValues): void {
-    super.willUpdate(_changedProperties);
+  protected override willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
 
-    //We need to update parent pearl-chain so that following leg can be styled properly.
-    if (_changedProperties.has('arrivalSkipped')) {
+    // We need to update parent pearl-chain so that following leg can be styled properly.
+    if (changedProperties.has('arrivalSkipped')) {
       const parentPearlChain = this.closest?.('sbb-pearl-chain');
       if (!parentPearlChain) {
         return;
       }
-      parentPearlChain.requestUpdate();
+      parentPearlChain?.requestUpdate();
     }
   }
 
   protected override render(): TemplateResult {
     return html` <div class="sbb-pearl-chain__leg">
-      ${this._displayStop() ? html` <span class="sbb-pearl-chain__stop"></span>` : nothing}
+      <span class="sbb-pearl-chain__stop"></span>
     </div>`;
   }
 }