fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup!…

… fixup! fixup! fixup! Feat(web): Introduce `Card` component #DS-1397
lmc-eu · Nov 28, 2024 · 7afadb0 · 7afadb0
1 parent 5a68dcc
commit 7afadb0
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 61 deletions.
diff --git a/packages/web/src/scss/components/Card/README.md b/packages/web/src/scss/components/Card/README.md
@@ -67,7 +67,7 @@ Card can be displayed in a vertical, horizontal, or reversed horizontal layout.
 ```
 
 👉 Keep in mind that, no matter the layout, the Card subcomponents must be arranged in the order
-[specified above](#card).
+[specified above](#card-1).
 
 ### Boxed Cards
 
@@ -84,22 +84,24 @@ Card can be displayed with a border and a box shadow on hover.
 CardArtwork is an optional subcomponent that displays a small image or icon.
 
 ```html
-<div class="CardArtwork CardArtwork--left">
+<div class="CardArtwork CardArtwork--alignmentXLeft">
   <svg width="24" height="24" aria-hidden="true">
     <use xlink:href="/assets/icons/svg/sprite.svg#file" />
   </svg>
 </div>
 ```
 
-### Artwork Alignment
+### Artwork Alignment (Horizontal Layouts Only)
 
 In the vertical Card layout, the artwork can be horizontally aligned to the start, center, or end of the Card.
 Available alignment options are derived from the [AlignmentX][dictionary-alignment] dictionary.
 To align the artwork, use one of the following CSS modifiers:
 
-- `CardArtwork--left`
-- `CardArtwork--center`
-- `CardArtwork--right`
+- `CardArtwork--alignmentXLeft`
+- `CardArtwork--alignmentXCenter`
+- `CardArtwork--alignmentXRight`
+
+These options are only available in horizontal and reversed horizontal layout.
 
 ## CardMedia
 
@@ -267,36 +269,6 @@ following CSS modifiers:
 - `CardFooter--alignmentXCenter`
 - `CardFooter--alignmentXRight`
 
-## Full Example
-
-When you put it all together:
-
-```html
-<article class="Card Card--vertical Card--boxed">
-  <div class="CardMedia CardMedia--auto">
-    <div class="CardMedia__canvas">
-      <img src="…" alt="" />
-    </div>
-  </div>
-  <div class="CardLogo">
-    <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
-      <img src="…" alt="Logo" />
-    </div>
-  </div>
-  <div class="CardBody">
-    <div class="CardEyebrow">Content options</div>
-    <h4 class="CardTitle CardTitle--heading">
-      <a href="#" class="CardLink">Card Title</a>
-    </h4>
-    <p>Card content</p>
-  </div>
-  <footer class="CardFooter CardFooter--alignmentXLeft">
-    <a href="#" class="Button Button--medium Button--primary">Primary</a>
-    <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-  </footer>
-</article>
-```
-
 ## Card Grid
 
 In a typical use case, you will display multiple Cards in a [Grid][grid].
@@ -375,23 +347,55 @@ confused by too many links in the Card.
 ### The “Read More” Use Case
 
 For article previews or similar use cases, you may want to display a limited amount of text content with a “Read More”
-link. For optimum accessibility, you should only provide this in form of a text node, not a button or a link:
+link. For optimum accessibility, you should only provide this in the form of a text node, not a button or a link:
 
 ```html
-<h4 class="CardTitle">
-  <a href="#" class="CardLink">Card title</a>
-</h4>
-<p><!-- … --></p>
-<!-- DON'T DO THIS -->
-<a href="#" class="link-primary link-underlined">Read more</a>
-<!-- This is correct -->
-<div class="link-primary link-underlined">Read more</div>
+<div class="CardBody">
+  <h4 class="CardTitle">
+    <a href="#" class="CardLink">Card title</a>
+  </h4>
+  <p><!-- … --></p>
+  <!-- DON'T DO THIS -->
+  <a href="#" class="link-primary link-underlined">Read more</a>
+  <!-- This is correct -->
+  <div class="link-primary link-underlined">Read more</div>
+</div>
 ```
 
 This way, the Card will only have a single accessible link which will be announced by screen readers.
 
 ℹ️ A big shout-out to [Ondřej Pohl][ondrej-pohl] for sharing many of these best practices!
 
+## Full Example
+
+When you put it all together:
+
+```html
+<article class="Card Card--vertical Card--boxed">
+  <div class="CardMedia CardMedia--auto">
+    <div class="CardMedia__canvas">
+      <img src="…" alt="" />
+    </div>
+  </div>
+  <div class="CardLogo">
+    <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
+      <img src="…" alt="Logo" />
+    </div>
+  </div>
+  <div class="CardBody">
+    <div class="CardEyebrow">Content options</div>
+    <h4 class="CardTitle CardTitle--heading">
+      <a href="#" class="CardLink">Card Title</a>
+    </h4>
+    <p>Card content</p>
+  </div>
+  <footer class="CardFooter CardFooter--alignmentXLeft">
+    <a href="#" class="Button Button--medium Button--primary">Primary</a>
+    <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+  </footer>
+</article>
+```
+
 [grid]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md
 [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment
 [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#size

diff --git a/packages/web/src/scss/components/Card/_Card.scss b/packages/web/src/scss/components/Card/_Card.scss
@@ -5,13 +5,12 @@
 // 5. Make text content selectable when there is a stretched CardLink.
 
 @use '@tokens' as tokens;
-@use 'sass:map';
 @use '../../tools/breakpoint';
 @use '../../tools/typography';
 @use 'theme';
 
 .Card {
-    --#{tokens.$css-variable-prefix}card-padding: #{theme.$padding-mobile};
+    --#{tokens.$css-variable-prefix}card-padding: #{theme.$padding};
 
     @include typography.generate(theme.$typography);
 
@@ -20,7 +19,7 @@
     min-width: 0; // 3.
     color: theme.$color;
 
-    @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
+    @include breakpoint.up(tokens.$breakpoint-tablet) {
         --#{tokens.$css-variable-prefix}card-padding: #{theme.$padding-tablet};
     }
 }

diff --git a/packages/web/src/scss/components/Card/_CardArtwork.scss b/packages/web/src/scss/components/Card/_CardArtwork.scss
@@ -2,6 +2,7 @@
 @use 'theme';
 
 .CardArtwork {
+    display: grid;
     grid-area: media;
 }
 

diff --git a/packages/web/src/scss/components/Card/_CardLogo.scss b/packages/web/src/scss/components/Card/_CardLogo.scss
@@ -11,11 +11,11 @@
 
 .Card--vertical > .CardLogo {
     grid-area: media;
-    place-self: end end;
+    place-self: end;
     margin-right: theme.$logo-offset-horizontal;
 }
 
-:is(.Card--horizontal, .Card--horizontalReversed) .CardLogo {
+:is(.Card--horizontal, .Card--horizontalReversed) > .CardLogo {
     grid-area: logo;
     justify-self: start;
 

diff --git a/packages/web/src/scss/components/Card/_CardMedia.scss b/packages/web/src/scss/components/Card/_CardMedia.scss
@@ -17,17 +17,17 @@
     --#{tokens.$css-variable-prefix}card-media-canvas-height: auto;
 
     grid-area: media;
+    overflow: hidden;
+    border-radius: var(--#{tokens.$css-variable-prefix}card-media-border-radius-top-left)
+        var(--#{tokens.$css-variable-prefix}card-media-border-radius-top-right)
+        var(--#{tokens.$css-variable-prefix}card-media-border-radius-bottom-right)
+        var(--#{tokens.$css-variable-prefix}card-media-border-radius-bottom-left);
 }
 
 .CardMedia__canvas {
     width: var(--#{tokens.$css-variable-prefix}card-media-canvas-width);
     max-width: 100%; // 3.
     height: var(--#{tokens.$css-variable-prefix}card-media-canvas-height);
-    overflow: hidden;
-    border-radius: var(--#{tokens.$css-variable-prefix}card-media-border-radius-top-left)
-        var(--#{tokens.$css-variable-prefix}card-media-border-radius-top-right)
-        var(--#{tokens.$css-variable-prefix}card-media-border-radius-bottom-right)
-        var(--#{tokens.$css-variable-prefix}card-media-border-radius-bottom-left);
 }
 
 // 1.

diff --git a/packages/web/src/scss/components/Card/_theme.scss b/packages/web/src/scss/components/Card/_theme.scss
@@ -7,7 +7,7 @@ $breakpoints: tokens.$breakpoints;
 $gap: tokens.$space-900;
 $gap-dense: tokens.$space-700;
 
-$padding-mobile: tokens.$space-700;
+$padding: tokens.$space-700;
 $padding-tablet: tokens.$space-900;
 
 $typography: tokens.$body-medium-regular;

diff --git a/packages/web/src/scss/components/Card/index.html b/packages/web/src/scss/components/Card/index.html
@@ -191,7 +191,7 @@ <h4 class="CardTitle CardTitle--heading">
       </article>
 
       <article class="Card Card--vertical Card--boxed">
-        <div class="CardArtwork CardArtwork--left">
+        <div class="CardArtwork CardArtwork--alignmentXLeft">
           <!-- User content, no component classes -->
           <svg width="24" height="24" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#file" />
@@ -438,7 +438,7 @@ <h4 class="CardTitle CardTitle--heading">
       </article>
 
       <article class="Card Card--horizontal Card--boxed">
-        <div class="CardArtwork CardArtwork--left">
+        <div class="CardArtwork CardArtwork--alignmentXLeft">
           <!-- User content, no component classes -->
           <svg width="24" height="24" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#file" />
@@ -459,7 +459,7 @@ <h4 class="CardTitle CardTitle--heading">
       </article>
 
       <article class="Card Card--horizontal Card--boxed">
-        <div class="CardArtwork CardArtwork--left">
+        <div class="CardArtwork CardArtwork--alignmentXLeft">
           <!-- User content, no component classes -->
           <svg width="24" height="24" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#file" />
@@ -552,7 +552,7 @@ <h4 class="CardTitle CardTitle--heading">
       </article>
 
       <article class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardArtwork CardArtwork--left">
+        <div class="CardArtwork CardArtwork--alignmentXLeft">
           <!-- User content, no component classes -->
           <svg width="24" height="24" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#file" />
@@ -573,7 +573,7 @@ <h4 class="CardTitle CardTitle--heading">
       </article>
 
       <article class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardArtwork CardArtwork--left">
+        <div class="CardArtwork CardArtwork--alignmentXLeft">
           <!-- User content, no component classes -->
           <svg width="24" height="24" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#file" />