feat[dev]: ✨ implement sd-flipcard component

[yoezlem]

User Story

As a user of the Solid Design System, I want to utilize a Flashcard component with flip animation to add dynamic and interactive content to pages, providing a visually engaging way to present and interact with information.

Documentation

https://www.figma.com/file/JZZL5QPXQVKVGt4CHBlNlz/Flashcard?type=design&node-id=1301-7360&mode=design&t=eaEgzwqpgma861CK-0

Hand-off

https://www.figma.com/file/JZZL5QPXQVKVGt4CHBlNlz/Flashcard?type=design&node-id=6-4&mode=design&t=eaEgzwqpgma861CK-0

Components detailed requirements

Props

Status	Name	Type	Default	Description
[ ]	frontVariant	primary / primary-100 / gradient light-top / gradient light-bottom / gradient dark-top / gradient dark-bottom	primary	The sd-flashcards theme variant
[ ]	backVariant	primary / primary-100 / gradient light-top / gradient light-bottom / gradient dark-top / gradient dark-bottom	primary	The sd-flashcards theme variant
[ ]	ratio	3:4 / 16:9	3:4	the ratio for the layout of the flashcard

CSS-Properties

• [ ] name - description

  Parts (besides the shoelace parts)

• [ ] every other HTML element (depending on the HTML structure) => NOTE: if highlighting the parts in the parts story does not work out of the box, do not spend more effort on it but open a bug ticket to tackle it later.

  Slots

• [ ] front - for the content on the front side of the flashcard
• [ ] back - for the content of the back side of the flashcard
• [ ] mediaFront - An optional media slot which can be as a background. Dependent from gradient variant.
• [ ] mediaBack - An optional media slot which can be as a background. Dependent from gradient variant.

  Stories (besides the default story)

• [ ] Variant - (description)
• [ ] Ratio - (description)

  Samples

• [ ] Clickable Flashcard - Only it is necessary that is allowed to do it semantically (accessible way).

  Methods

  Status	Name	Description
  [ ]	flip-front	Shows the content of the quickfact.
  [ ]	flip-back	Hides the content of the quickfact.

  Events

  Status	Name	Description
  [ ]	sd-flip-front	Shows the content of the quickfact.
  [ ]	sd-flip-back	Hides the content of the quickfact.

Open Questions towards design

• [ ] Question1
• [ ] Question2

Technical Information

• [ ] transition from back/flip is 1000ms
• [x] We have to check if its allowed to add a link inside a button (accessiblity perspective). Generally we have to check nested elements. Please document that.
• [x] we have to make sure that both sides are searchable and available in the DOM. Maybe we can use the summary and details from accordion.

DoR

• [x] Item has business value
• [x] All subtasks have been estimated by the team
• [x] Item is clear and well-defined
• [x] Item dependencies have been identified

DoD

• [x] All subtasks have been closed

DoR

• [x] Item has been estimated by the team
• [x] Item dependencies have been identified and documented

DoD

• [ ] Documentation has been created/updated (if applicable)
• [ ] Migration Guide has been created/updated (if applicable)
• [ ] Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
• [ ] Relevant stories (Features, A11y) are created/updated
• [ ] Implementation works successfully on feature branch

[Vahid1919]

copied from Mario's comment on the main ticket: " make this thing just an element with two slots for frontside and backside, reducing it's logic to only "turning itself". Examples for that are e. g. https://github.com/jeffreyquan/flip-card-wc / https://codepen.io/jeffreyquan/pen/ZEByKRL or maybe https://www.webcomponents.org/element/@adaws/flip-card – in Figma we then inform that this component consists of two sides and we show all current implementations as examples."

[van-nguyen-ht]

@Vahid1919

Figma Branch

[mariohamann]

I just realized, that my comment was not taken into consideration:

• https://github.com/solid-design-system/solid/issues/299#issuecomment-1696941964

@coraliefeil realized as well, that there might be quite some similarities between media-teaser and the content of the flipcard: https://github.com/solid-design-system/solid/issues/299#issuecomment-2033747295

Is there a reason, why this was not done in a more generic way by just providing two slots and make it independent from styling? (Unfortunately I was not part of the refinement.)