Revert "refactor(timetable, journey): migrate disable-animation mecha…

…nism"
sbb-design-systems · Mar 21, 2024 · 3366c92 · 3366c92
1 parent ba8aafd
commit 3366c92
Show file tree

Hide file tree

Showing 19 changed files with 170 additions and 40 deletions.
diff --git a/src/components/core/styles/mixins/pearl-chain-bullet.scss b/src/components/core/styles/mixins/pearl-chain-bullet.scss
@@ -13,7 +13,7 @@
   --sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);
   --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);
   --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
-  --sbb-pearl-chain-bullet-animation-duration: var(--sbb-disable-animation-time, 1920ms);
+  --sbb-pearl-chain-bullet-animation-duration: 1920ms;
   --sbb-pearl-chain-bullet-animation-easing: ease-out;
   --sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(14.14)};
   --sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3.5)};

diff --git a/src/components/journey-summary/journey-summary.stories.ts b/src/components/journey-summary/journey-summary.stories.ts
@@ -1,5 +1,6 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
+import isChromatic from 'chromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -18,6 +19,12 @@ import './journey-summary';
 import '../button/button';
 import '../button/secondary-button';
 
+const disableAnimation: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const roundTrip: InputType = {
   control: {
     type: 'boolean',
@@ -59,6 +66,7 @@ const tripBack: InputType = {
 };
 
 const defaultArgTypes: ArgTypes = {
+  'disable-animation': disableAnimation,
   'data-now': now,
   'round-trip': roundTrip,
   'header-level': headerLevel,
@@ -67,6 +75,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
+  'disable-animation': isChromatic(),
   'data-now': new Date('2022-12-05T12:11:00').valueOf(),
   'round-trip': false,
   'header-level': headerLevel.options[2],

diff --git a/src/components/journey-summary/journey-summary.ts b/src/components/journey-summary/journey-summary.ts
@@ -54,6 +54,12 @@ export class SbbJourneySummaryElement extends LitElement {
   /** Heading level of the journey header element (e.g. h1-h6). */
   @property({ attribute: 'header-level' }) public headerLevel: SbbTitleLevel = '3';
 
+  /**
+   * Per default, the current location has a pulsating animation. You can
+   * disable the animation with this property.
+   */
+  @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
+
   private _hasContentSlot: boolean = false;
   private _language = new LanguageController(this);
 
@@ -126,6 +132,7 @@ export class SbbJourneySummaryElement extends LitElement {
           .departureWalk=${departureWalk}
           .arrivalWalk=${arrivalWalk}
           .legs=${legs}
+          .disableAnimation=${this.disableAnimation}
           data-now=${this._now()}
         ></sbb-pearl-chain-time>
       </div>

diff --git a/src/components/journey-summary/readme.md b/src/components/journey-summary/readme.md
@@ -20,12 +20,13 @@ If the tripBack prop is passed to the component a second journey-summary, withou
 
 ## Properties
 
-| Name          | Attribute      | Privacy | Type                                                | Default | Description                                                                              |
-| ------------- | -------------- | ------- | --------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------- |
-| `trip`        | `trip`         | public  | `InterfaceSbbJourneySummaryAttributes`              |         | The trip prop                                                                            |
-| `tripBack`    | `trip-back`    | public  | `InterfaceSbbJourneySummaryAttributes \| undefined` |         | The tripBack prop                                                                        |
-| `roundTrip`   | `round-trip`   | public  | `boolean \| undefined`                              |         | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header. |
-| `headerLevel` | `header-level` | public  | `SbbTitleLevel`                                     | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                                |
+| Name               | Attribute           | Privacy | Type                                                | Default | Description                                                                                                    |
+| ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trip`             | `trip`              | public  | `InterfaceSbbJourneySummaryAttributes`              |         | The trip prop                                                                                                  |
+| `tripBack`         | `trip-back`         | public  | `InterfaceSbbJourneySummaryAttributes \| undefined` |         | The tripBack prop                                                                                              |
+| `roundTrip`        | `round-trip`        | public  | `boolean \| undefined`                              |         | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header.                       |
+| `headerLevel`      | `header-level`      | public  | `SbbTitleLevel`                                     | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                                                      |
+| `disableAnimation` | `disable-animation` | public  | `boolean \| undefined`                              |         | Per default, the current location has a pulsating animation. You can disable the animation with this property. |
 
 ## Slots
 

diff --git a/src/components/pearl-chain-time/pearl-chain-time.stories.ts b/src/components/pearl-chain-time/pearl-chain-time.stories.ts
@@ -1,5 +1,6 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
+import isChromatic from 'chromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -33,6 +34,12 @@ const arrivalTime: InputType = {
   },
 };
 
+const disableAnimation: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const now: InputType = {
   control: {
     type: 'date',
@@ -44,13 +51,15 @@ const defaultArgTypes: ArgTypes = {
   'arrival-walk': arrivalWalk,
   'arrival-time': arrivalTime,
   'departure-time': departureTime,
+  'disable-animation': disableAnimation,
   'data-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(),
 };
 

diff --git a/src/components/pearl-chain-time/pearl-chain-time.ts b/src/components/pearl-chain-time/pearl-chain-time.ts
@@ -41,6 +41,12 @@ export class SbbPearlChainTimeElement extends LitElement {
   /** Optional prop to render the walk time (in minutes) after arrival */
   @property({ attribute: 'arrival-walk', type: Number }) public arrivalWalk?: number;
 
+  /**
+   * Per default, the current location has a pulsating animation. You can
+   * disable the animation with this property.
+   */
+  @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
+
   private _language = new LanguageController(this);
 
   private _now(): number {
@@ -84,6 +90,7 @@ export class SbbPearlChainTimeElement extends LitElement {
         <sbb-pearl-chain
           class="sbb-pearl-chain__time-chain"
           .legs=${this.legs}
+          .disableAnimation=${this.disableAnimation}
           data-now=${this._now()}
         ></sbb-pearl-chain>
         ${arrival

diff --git a/src/components/pearl-chain-time/readme.md b/src/components/pearl-chain-time/readme.md
@@ -54,10 +54,11 @@ This is helpful if you need a specific state of the component.
 
 ## Properties
 
-| Name            | Attribute        | Privacy | Type                   | Default | Description                                                                                                                                                                                                                                                                    |
-| --------------- | ---------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `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%. |
-| `departureTime` | `departure-time` | public  | `string \| undefined`  |         | Prop to render the departure time - will be formatted as "H:mm"                                                                                                                                                                                                                |
-| `arrivalTime`   | `arrival-time`   | public  | `string \| undefined`  |         | Prop to render the arrival time - will be formatted as "H:mm"                                                                                                                                                                                                                  |
-| `departureWalk` | `departure-walk` | public  | `number \| undefined`  |         | Optional prop to render the walk time (in minutes) before departure                                                                                                                                                                                                            |
-| `arrivalWalk`   | `arrival-walk`   | public  | `number \| undefined`  |         | Optional prop to render the walk time (in minutes) after arrival                                                                                                                                                                                                               |
+| Name               | Attribute           | Privacy | Type                   | Default | Description                                                                                                                                                                                                                                                                    |
+| ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `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%. |
+| `departureTime`    | `departure-time`    | public  | `string \| undefined`  |         | Prop to render the departure time - will be formatted as "H:mm"                                                                                                                                                                                                                |
+| `arrivalTime`      | `arrival-time`      | public  | `string \| undefined`  |         | Prop to render the arrival time - will be formatted as "H:mm"                                                                                                                                                                                                                  |
+| `departureWalk`    | `departure-walk`    | public  | `number \| undefined`  |         | Optional prop to render the walk time (in minutes) before departure                                                                                                                                                                                                            |
+| `arrivalWalk`      | `arrival-walk`      | public  | `number \| undefined`  |         | Optional prop to render the walk time (in minutes) after arrival                                                                                                                                                                                                               |
+| `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-vertical-item/pearl-chain-vertical-item.scss b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.scss
@@ -181,4 +181,8 @@ slot[name='right']::slotted(*) {
   @include sbb.absolute-center-x;
 
   inset-block-start: var(--sbb-pearl-chain-vertical-item-position);
+
+  :host([disable-animation]) & {
+    animation: unset !important;
+  }
 }
diff --git a/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.ts b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.ts
@@ -36,6 +36,10 @@ export class SbbPearlChainVerticalItemElement extends LitElement {
   @property({ attribute: 'pearl-chain-vertical-item-attributes', type: Object })
   public pearlChainVerticalItemAttributes!: PearlChainVerticalItemAttributes;
 
+  /** If true, the position won't be animated. */
+  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
+  public disableAnimation?: boolean;
+
   protected override render(): TemplateResult {
     const { bulletType, lineType, lineColor, hideLine, minHeight, bulletSize, position } =
       this.pearlChainVerticalItemAttributes || {};

diff --git a/src/components/pearl-chain-vertical-item/readme.md b/src/components/pearl-chain-vertical-item/readme.md
@@ -39,6 +39,7 @@ The slots themselves are unstyled, so that they can be used in various ways.
 | Name                               | Attribute                              | Privacy | Type                               | Default | Description                                                                 |
 | ---------------------------------- | -------------------------------------- | ------- | ---------------------------------- | ------- | --------------------------------------------------------------------------- |
 | `pearlChainVerticalItemAttributes` | `pearl-chain-vertical-item-attributes` | public  | `PearlChainVerticalItemAttributes` |         | The pearlChainVerticalItemAttributes Prop for styling the bullets and line. |
+| `disableAnimation`                 | `disable-animation`                    | public  | `boolean \| undefined`             |         | If true, the position won't be animated.                                    |
 
 ## Slots