story(flip-card): initial implementation (previously Facts-Card)

[kyubisation]

We want to provide a flip-card component. It's purpose is to provide a hint and on interaction, more information.

THIS IS STILL WORK IN PROGRESS.

Figma (Draft): https://www.figma.com/design/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?m=auto&node-id=38417%3A401196&t=wS3QP8WeLivUViQy-1 Aria Pattern: Unclear. Possibilities are https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ or https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/

Design Spec:

• The flip card is per default in its light (summary) state
  • The summary state can have content and an (optional?) image
• On interaction, the flip-card switches to its dark (detail) state
  • The details state can have any kind of content
• In both states the button to switch state in the bottom left corner, for which other content should flow around (possibly achieved via float)

Tech Spec:

<sbb-flip-card>

• TODO: Should click on card or "button" trigger toggle?
• Should have a method toggle() which toggles the state
• Should have a getter for summary and details (To discuss if needed)

<sbb-flip-card-summary>

• Should have an unnamed slot and an image slot

<sbb-flip-card-details>

• Should have an unnamed slot

<sbb-flip-card>
  <sbb-flip-card-summary>
    <sbb-title level="4">Title</sbb-title>
    <sbb-image slot="image" ...></sbb-title>
  </sbb-flip-card-summary>
  <sbb-flip-card-details>
    <sbb-title level="4">Title</sbb-title>
    <p>
      Long explanation....
      <sbb-link href="..." negative>Link to something</sbb-link>
    </p>
  </sbb-flip-card-details>
</sbb-flip-card>