fix: improve data attribute usage

sbb-design-systems · Jul 19, 2024 · 84273b7 · 84273b7
1 parent bd1f93b
commit 84273b7
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 6 deletions.
diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.ts b/src/elements/flip-card/flip-card-summary/flip-card-summary.ts
@@ -29,10 +29,7 @@ export class SbbFlipCardSummaryElement extends LitElement {
     super.willUpdate(_changedProperties);
 
     if (_changedProperties.has('imageAlignment')) {
-      this.closest?.('sbb-flip-card')?.toggleAttribute(
-        'data-image-after',
-        this.imageAlignment === 'after',
-      );
+      this.closest?.('sbb-flip-card')?.setAttribute('data-image-alignment', this.imageAlignment);
     }
   }
 

diff --git a/src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js b/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 data-image-after="">
+`<sbb-flip-card data-image-alignment="after">
   <sbb-flip-card-summary
     image-alignment="after"
     slot="summary"

diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
@@ -44,7 +44,7 @@
   }
 }
 
-:host([data-image-after]) {
+:host([data-image-alignment='after']) {
   @include sbb.mq($from: small, $to: medium) {
     --sbb-flip-card-min-height: #{sbb.px-to-rem-build(240)};
   }