Feature Description

We want to refactor the pearl chain to be more idiomatic to web components.

<sbb-pearl-chain>:

After discussion, we decided to exclude arrival and departure properties from sbb-pearl-chain, but we will later create designated components like sbb-pearl-chain-time.

• Should have properties arrival and departure

  • Should be getter/setter, which accept SbbDateLike | null
  • Defaults to null
  • See date parsing logic below
  • If the date cannot be parsed in the setter, assign null
  • If defined and valid, render as <time> elements in the Shadow DOM (similar to how it is now)

• It should handle the logic for the progress of a journey

  • If a leg is in the past, mark it as past
  • If a leg is active, pass in the width of the gray overlay via CSS variable
  • The active marker should be a (pseudo) element in the Shadow DOM and placed relatively to the passed time (match with width of gray overlay). Should not be shown for cancelled legs.
  • Create property marker: 'static' | 'pulsing' = 'static', which controls whether the active state marker should pulse or not (static)
  • If the journey is in the past, mark all legs as past and unsubscribe from setInterval
  • If the journey is in the future or currently active, assign the active marker and related logic/styles

• With the attribute now, it should be possible to override the current time

• When the whole trip is cancelled, only one leg (cancelled) should be displayed. This is left to the consumer and should be documented in the readme.

<sbb-pearl-chain-leg>:

• Should have boolean properties disruption, past and string property skip: 'departure' | 'arrival' = 'departure'
  • TODO: Define/Ask for business logic for possible combinations. In invalid combinations fall back to sensible defaults.
• Should have properties arrival and departure
  • Should be getter/setter, which accept SbbDateLike | null
• Width should be defined with the CSS property --sbb-pearl-chain-leg-weight, which is applied to the flex rule flex: var(--sbb-pearl-chain-leg-weight, 1) var(--sbb-pearl-chain-leg-weight, 1); (see example https://stackblitz.com/edit/js-vjmxgz?file=style.css) (This allows just subtracting the departure Date from the arrival Date and setting this value as --sbb-pearl-chain-leg-weight and flex will automatically calculate width)
• A leg is considered in the past, if the arrival is before "now"

DOM Examples

Without time being displayed

<sbb-pearl-chain>
  <sbb-pearl-chain-leg departure="2024-01-31T16:53:00.000Z" arrival="2024-01-31T17:53:00.000Z"></sbb-pearl-chain-leg>
  <sbb-pearl-chain-leg departure="2024-01-31T17:58:00.000Z" arrival="2024-01-31T19:45:00.000Z" disruption></sbb-pearl-chain-leg>
  <sbb-pearl-chain-leg departure="2024-01-31T19:52:00.000Z" arrival="2024-01-31T19:58:00.000Z"></sbb-pearl-chain-leg>
</sbb-pearl-chain>

With time being displayed

<sbb-pearl-chain departure="2024-01-31T16:53:00.000Z" arrival="2024-01-31T19:58:00.000Z">
  <sbb-pearl-chain-leg departure="2024-01-31T16:53:00.000Z" arrival="2024-01-31T17:53:00.000Z"></sbb-pearl-chain-leg>
  <sbb-pearl-chain-leg departure="2024-01-31T17:58:00.000Z" arrival="2024-01-31T19:45:00.000Z" disruption></sbb-pearl-chain-leg>
  <sbb-pearl-chain-leg departure="2024-01-31T19:52:00.000Z" arrival="2024-01-31T19:58:00.000Z"></sbb-pearl-chain-leg>
</sbb-pearl-chain>

Definition of Done

• Component is implemented
• Documentation is provided
• Tests are implemented
• E2E Tests are implemented
• Storybook stories are implemented
• Navigation via keyboard is tested
• Screen reader output is tested
• High-contrast is tested
• Remaining accessibility is tested
• UX approved