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

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

Hide file tree

Showing 4 changed files with 93 additions and 54 deletions.
diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.visual.spec.ts b/src/elements/flip-card/flip-card-summary/flip-card-summary.visual.spec.ts
@@ -1,7 +1,11 @@
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+import {
+  describeViewports,
+  loadAssetAsBase64,
+  visualDiffDefault,
+} from '../../core/testing/private.js';
 import { waitForImageReady } from '../../core/testing/wait-for-image-ready.js';
 
 import './flip-card-summary.js';
@@ -10,38 +14,61 @@ import '../../title.js';
 import '../../image.js';
 
 const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-image.png');
+const imageBase64 = await loadAssetAsBase64(
+  import.meta.resolve('../../core/testing/assets/lucerne.png'),
+);
+
+const images = [
+  {
+    selector: 'sbb-image',
+    image: html`<sbb-image
+      slot="image"
+      image-src=${imageUrl}
+      border-radius="none"
+      aspect-ratio="free"
+    ></sbb-image>`,
+  },
+  {
+    selector: 'img',
+    image: html`<img
+      slot="image"
+      src=${imageBase64}
+      alt=''
+    ></img>`,
+  },
+];
 
 describe(`sbb-flip-card-summary`, () => {
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
-    for (const imageAlignment of ['after', 'below']) {
-      it(
-        `image-alignment=${imageAlignment}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(html`
-            <div
-              style=${styleMap({
-                position: 'relative',
-                display: 'flex',
-                'flex-flow': 'column wrap',
-                gap: 'var(--sbb-spacing-responsive-xs)',
-                'min-height': '17.5rem',
-                'background-color': 'var(--sbb-color-cloud-alpha-80)',
-              })}
-            >
-              <sbb-flip-card-summary slot="summary" image-alignment=${imageAlignment}>
-                <sbb-title level="4">Summary</sbb-title>
-                <sbb-image
-                  slot="image"
-                  image-src=${imageUrl}
-                  border-radius="none"
-                  aspect-ratio="free"
-                ></sbb-image>
-              </sbb-flip-card-summary>
-            </div>
-          `);
-          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
-        }),
-      );
+    for (const image of images) {
+      describe(`image=${image.selector}`, () => {
+        for (const imageAlignment of ['after', 'below']) {
+          it(
+            `image-alignment=${imageAlignment}`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(html`
+                <div
+                  style=${styleMap({
+                    position: 'relative',
+                    display: 'flex',
+                    'flex-flow': 'column wrap',
+                    gap: 'var(--sbb-spacing-responsive-xs)',
+                    'min-height': '17.5rem',
+                    'background-color': 'var(--sbb-color-cloud-alpha-80)',
+                  })}
+                >
+                  <sbb-flip-card-summary slot="summary" image-alignment=${imageAlignment}>
+                    ${image.image}
+                    <sbb-title level="4">Summary</sbb-title>
+                  </sbb-flip-card-summary>
+                </div>
+              `);
+
+              await waitForImageReady(setup.snapshotElement.querySelector(image.selector)!);
+            }),
+          );
+        }
+      });
     }
   });
 });
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(

diff --git a/src/elements/teaser-hero/teaser-hero.visual.spec.ts b/src/elements/teaser-hero/teaser-hero.visual.spec.ts
@@ -11,7 +11,7 @@ import './teaser-hero.js';
 import '../image.js';
 import '../chip.js';
 
-const imageUrl = import.meta.resolve('../../elements/core/testing/assets/placeholder-image.png');
+const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
 
 describe(`sbb-teaser-hero`, () => {
   describeViewports({ viewports: ['zero', 'micro', 'small', 'medium', 'wide'] }, () => {