feat(sbb-flip-card): first implementation

src/elements/flip-card/flip-card-details/flip-card-details.scss

@@ -5,7 +5,7 @@
 
 :host {
   --sbb-flip-card-details-opacity: 0;
-  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-4x);
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
 
   display: contents;
 }
@@ -19,5 +19,7 @@
     var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
   );
   transform: translateY(var(--sbb-flip-card-details-translate-y));
-  transition: all 250ms ease-out;
+  transition: var(--sbb-flip-card-details-transition-duration) ease-out;
+  transition-delay: var(--sbb-flip-card-details-transition-delay);
+  max-height: var(--sbb-flip-card-details-min-height);
 }

src/elements/flip-card/flip-card-summary/flip-card-summary.scss

@@ -21,7 +21,8 @@
   grid-template-rows: auto 1fr;
   width: 100%;
   height: 100%;
-  transition: all 250ms ease-out;
+  transition: all var(--sbb-flip-card-summary-transition-duration) ease-out;
+  transition-delay: var(--sbb-flip-card-summary-transition-delay);
 
   :host([image-alignment='after']) & {
     @include sbb.mq($from: small) {
@@ -54,6 +55,7 @@
 }
 
 .sbb-flip-card-summary--image-wrapper {
+  max-height: var(--sbb-flip-card-min-height);
   grid-area: 2 / 1 / 3 / 2;
 
   :host([image-alignment='after']) & {

src/elements/flip-card/flip-card-summary/flip-card-summary.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
@@ -25,6 +25,17 @@ export class SbbFlipCardSummaryElement extends LitElement {
   @property({ attribute: 'image-alignment', reflect: true })
   public imageAlignment: SbbFlipCardImageAlignment = 'after';
 
+  protected override willUpdate(_changedProperties: PropertyValues): void {
+    super.willUpdate(_changedProperties);
+
+    if (_changedProperties.has('imageAlignment')) {
+      this.closest?.('sbb-flip-card')?.toggleAttribute(
+        'data-image-after',
+        this.imageAlignment === 'after',
+      );
+    }
+  }
+
   protected override render(): TemplateResult {
     return html`
       <div class="sbb-flip-card-summary">

src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js

@@ -27,7 +27,7 @@ snapshots["A11y tree Chrome"] =
 /* end snapshot A11y tree Chrome */
 
 snapshots["sbb-flip-card DOM"] = 
-`<sbb-flip-card>
+`<sbb-flip-card data-image-after="">
   <sbb-flip-card-summary
     image-alignment="after"
     slot="summary"
@@ -91,7 +91,7 @@ snapshots["sbb-flip-card Shadow DOM"] =
     dir="ltr"
     icon-name="plus-small"
     role="button"
-    size="l"
+    size="s"
     tabindex="0"
   >
   </sbb-secondary-button>

src/elements/flip-card/flip-card/flip-card.scss

@@ -3,16 +3,35 @@
 // Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
 @include sbb.box-sizing;
 
+// TODO: improve component's animation
 :host {
-  --sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80);
+  --sbb-flip-card-background-color: var(--sbb-color-cloud);
   --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-flip-card-min-height: #{sbb.px-to-rem-build(280)};
+  --sbb-flip-card-details-min-height: var(--sbb-flip-card-min-height);
+  --sbb-flip-card-summary-transition-duration: var(--sbb-animation-duration-5x);
+  --sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);
+  --sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-4x);
+  --sbb-flip-card-details-transition-delay: var(--sbb-disable-animation-zero-time);
 
   position: relative;
   display: block;
+
+  @include sbb.mq($from: medium) {
+    --sbb-flip-card-min-height: #{sbb.px-to-rem-build(320)};
+  }
+}
+
+:host(:hover) {
+  --sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80);
 }
 
 :host([data-flipped]) {
   --sbb-flip-card-background-color: var(--sbb-color-midnight);
+  --sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-2x);
+  --sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);
+  --sbb-flip-card-summary-transition-delay: var(--sbb-disable-animation-zero-time);
+  --sbb-flip-card-details-min-height: fit-content;
 
   ::slotted(sbb-flip-card-summary) {
     --sbb-flip-card-summary-opacity: 0;
@@ -25,17 +44,28 @@
   }
 }
 
+:host([data-image-after]) {
+  @include sbb.mq($from: small, $to: medium) {
+    --sbb-flip-card-min-height: #{sbb.px-to-rem-build(240)};
+  }
+
+  @include sbb.mq($from: wide) {
+    --sbb-flip-card-min-height: #{sbb.px-to-rem-build(400)};
+  }
+}
+
 .sbb-flip-card {
   position: relative;
   display: flex;
   height: 100%;
   flex-flow: wrap;
   flex-direction: column;
   gap: var(--sbb-spacing-responsive-xs);
-  min-height: #{sbb.px-to-rem-build(280)}; // TODO: check if correct
+  min-height: var(--sbb-flip-card-min-height);
   background-color: var(--sbb-flip-card-background-color);
   border-radius: var(--sbb-flip-card-border-radius);
-  transition: all 250ms ease-out;
+  transition: var(--sbb-flip-card-summary-transition-duration) ease-out;
+  transition-delay: var(--sbb-flip-card-summary-transition-delay);
 }
 
 .sbb-flip-card--toggle-button {

src/elements/flip-card/flip-card/flip-card.stories.ts

@@ -1,19 +1,18 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
-import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 
 import sampleImages from '../../core/images.js';
 
 import readme from './readme.md?raw';
 
-import './flip-card.js';
-import '../flip-card-summary.js';
-import '../flip-card-details.js';
 import '../../image/image.js';
-import '../../title/title.js';
 import '../../link/link/link.js';
+import '../../title/title.js';
+import '../flip-card-details.js';
+import '../flip-card-summary.js';
+import './flip-card.js';
 
 const imageAlignment: InputType = {
   control: {
@@ -130,7 +129,7 @@ export const LongTitle: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [withActions as Decorator],
+  decorators: [(story) => html`<div style="max-width: 792px;">${story()}</div>`],
   parameters: {
     docs: {
       extractComponentDescription: () => readme,

src/elements/flip-card/flip-card/flip-card.ts

@@ -62,6 +62,7 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
           class="sbb-flip-card--toggle-button"
           icon-name=${this._flipped ? 'cross-small' : 'plus-small'}
           @click=${() => this.toggle()}
+          size="s"
         ></sbb-secondary-button>
       </div>
     `;