fix(sbb-flip-card): support disabled animation

sbb-design-systems · Aug 13, 2024 · 18a54a2 · 18a54a2
1 parent 79e1634
commit 18a54a2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 23 deletions.
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
@@ -9,10 +9,16 @@
   --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-duration: var(
+    --sbb-disable-animation-zero-time,
+    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);
+  --sbb-flip-card-details-transition-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-flip-card-details-transition-delay: 0s;
 
   position: relative;
   display: block;
@@ -28,9 +34,12 @@
 
 :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-duration: var(
+    --sbb-disable-animation-zero-time,
+    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-summary-transition-delay: 0s;
   --sbb-flip-card-details-min-height: fit-content;
 
   ::slotted(sbb-flip-card-summary) {

diff --git a/src/elements/flip-card/flip-card/flip-card.visual.spec.ts b/src/elements/flip-card/flip-card/flip-card.visual.spec.ts
@@ -21,7 +21,7 @@ const content = (
   imageAlignment: SbbFlipCardImageAlignment = 'after',
   longContent: boolean = false,
 ): TemplateResult =>
-  html` <sbb-flip-card-summary slot="summary" image-alignment=${imageAlignment}>
+  html`<sbb-flip-card-summary slot="summary" image-alignment=${imageAlignment}>
       <sbb-title level="4">${title}</sbb-title>
       <sbb-image
         slot="image"
@@ -30,8 +30,8 @@ const content = (
         aspect-ratio="free"
       ></sbb-image>
     </sbb-flip-card-summary>
-    <sbb-flip-card-details slot="details"
-      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare condimentum.
+    <sbb-flip-card-details slot="details">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare condimentum.
       Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis in nibh.
       ${longContent
         ? `Duis dapibus vitae
@@ -42,25 +42,28 @@ const content = (
       luctus ornare condimentum. Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis
       in nibh. Duis dapibus vitae tortor ullamcorper maximus. In convallis consectetur felis.`
         : nothing}
-      <sbb-link href="https://www.sbb.ch" negative>Link</sbb-link></sbb-flip-card-details
-    >`;
+      <sbb-link href="https://www.sbb.ch" negative>Link</sbb-link>
+    </sbb-flip-card-details>`;
 
 describe(`sbb-flip-card`, () => {
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
     for (const imageAlignment of ['after', 'below']) {
-      for (const state of [visualDiffDefault, visualDiffFocus]) {
-        it(
-          `image-alignment=${imageAlignment} ${state.name}`,
-          state.with(async (setup) => {
-            await setup.withFixture(html`
-              <sbb-flip-card>
-                ${content('Summary', imageAlignment as SbbFlipCardImageAlignment)}
-              </sbb-flip-card>
-            `);
-            await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
-          }),
-        );
-      }
+      describe(`image-alignment=${imageAlignment}`, () => {
+        for (const state of [visualDiffDefault, visualDiffFocus]) {
+          it(
+            state.name,
+            state.with(async (setup) => {
+              await setup.withFixture(html`
+                <sbb-flip-card>
+                  ${content('Summary', imageAlignment as SbbFlipCardImageAlignment)}
+                </sbb-flip-card>
+              `);
+
+              await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+            }),
+          );
+        }
+      });
     }
 
     it(