feat(sbb-flip-card): first implementation

[MarioCastigliano]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the pull request tracker for a Pull Request (PR) that matches the one I want to submit, without success.

Issue

This PR Closes #2669

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)

See Review Guidelines for more information what is checked during review process.

Changes

Changes in this pull request:

• sbb-flip-card has been implemented
• sbb-flip-card-summary has been implemented
• sbb-flip-card-details has been implemented

Browsers

I tested the build on the following browsers:

• Firefox Desktop
• Chrome Desktop
• Edge Desktop
• Safari Desktop
• Chrome Mobile
• Safari Mobile

Screen readers

I tested the build on the following browsers:

• JAWS Firefox Desktop
• JAWS Chrome Desktop
• NVDA Firefox Desktop
• NVDA Chrome Desktop
• VoiceOver Safari Desktop
• VoiceOver Chrome Desktop
• VoiceOver Safari Mobile
• Android Accessibility Suite Chrome Mobile

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

Does this introduce a breaking change?

• Yes
• No

Other information

[kyubisation]

I think adding the two suggestions should solve the height issue.
The animation for this might not be perfect yet, but apparently there is still a discussion ongoing on how this should look anyway.

[florianstuerzinger]

Animation does not yet meet the requirements:

Compared to the specification for the animation (https://www.figma.com/design/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=39138-765544&t=iU5yxm8WRYiYnQdz-4), there are still various deviations. Please ensure the following:

Duration: Please ensure that duration and easing correspond to the specifications.

Title: The opacity of the title should fade to 0% when the card is clicked. So that the content and title do not overlap visually.
Content: The text is initially too far down. The movement should only be 8px.
Content: The text starts with an opacity of 0%
Background: The dark background starts in the position and size of the button and extends over the entire width and height when the card is clicked.
Cover: The hover effect is missing


Extra: Is it possible to animate between the icons on the button?

[florianstuerzinger]

Button size S instead of L

[florianstuerzinger]

Minimum height and above all independent of the content of the open state.

Zero-Micro:

• After, min-height 280px
• Below, min-height 280px

Small:

• After, min-height 240px
• Below, min-height 280px

Medium-Large:

• After, min-height 320px
• Below, min-height 320px

Wide-Ultra:

• After, min-height 400px
• Below, min-height 320px

[kyubisation]

@florianstuerzinger Just a heads-up; The animation will not be perfect yet, but we will continue working on it and can fix that at a later date.

[kyubisation]

LGTM 👍

[kyubisation]

LGTM 👍
Thanks again! 😃

Changes applied