story(sbb-timetable-row): review/refactor

[osminaz]

Feature Description

Feature Description

We want to review/refactor the sbb-timetable-row implementation.

Figma Specs
Timetable results Specs

Timetable-row Specs

Timetable-row Skeleton

Card Specs

References

• Current implementation: https://lyne.sbb.ch/components/sbb-timetable-row

Design Spec

• use/refactor "card mixin" for appereance, spacings, hover, focus and active
• top-padding changes, whenever there is the sbb-card-badge
• card-height < 44px -> no sbb-card-badge allowed
  --> should resolve in (story(sbb-card): initial implementation #1216)
• bottom of the component can have up to 2 lines -> (space-between)
• loading state -> animation
  --> should resolve in (story(sbb-timetable-row): layout and animation #1298)

Technical Spec

• should be a native button -> Emits an event onClick ( -> wrapper: timetable-row-button)

• assumption: timetable-row-button and timetable-button can be summarize in one component

• provide aria attribute for the button: aria-label, aria-haspopup, aria-expanded and aria-controls

• aria-expanded should toggle from false to true onClick

• set the role to "presentation" for the components button-wrapper and the role="row", role="rowHeader" and role="gridcell" for the inner Elements

• provide a state for loading

• We want to use these two components as slots:

  • sbb-card-badge,
  • sbb-pearl-chain

• We want to provide flat Props, which will be orientated to the visual specs:

  • Up:
    • pictogram: string
    • transportNumber: string // could be an icon or a rendered string?
    • direction: string <-- truncate logic
  • Middle:
    • walkTimeBefore?: string, // footPath
    • walkTimeAfter?: string, // footPath
    • leftTime: string, // departureTime - tbd: delay?
    • rightTime: string, // arrivalTime - tbd: delay?
  • bottom:
    • plattform: string tbd: variants?
    • occupancyFirstClass?: "unknown" | "low" | "medium" | "high"
    • occupancySecondClass?: "unknown" | "low" | "medium" | "high"
    • travelHints?: Array
    • duration: string,
    • warning: string

Questions:
slots or props?
Do we want to provide a list of possible icons?

<sbb-timetable-row>
  <sbb-card-badge/>
  <sbb-pearl-chain/>
</sbb-timetable-row>

Markup:

<sbb-timetable-row-button>
  <sbb-card>
      <slot name="cardBadge">
      ...
      ...
      <slot name="pearlChain">
      ...
      ...
   </sbb-card>
</sbb-timetable-row-button>

--> should resolve in (#1299)

Definition of Done

• Component is implemented
• 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