fixup! fixup! fixup! fixup! Feat(web): Introduce Card component #DS…

…-1397
lmc-eu · Nov 19, 2024 · 028a33d · 028a33d
1 parent 19f42d2
commit 028a33d
Show file tree

Hide file tree

Showing 10 changed files with 560 additions and 128 deletions.
diff --git a/packages/web/src/scss/components/Card/_Card.scss b/packages/web/src/scss/components/Card/_Card.scss
@@ -26,23 +26,23 @@
     grid-template-areas:
         'media'
         'body'
-        'actions';
+        'footer';
 }
 
 .Card--horizontal {
     grid-template-columns: auto 1fr;
     grid-template-rows: 1fr auto;
     grid-template-areas:
         'media body'
-        'media actions';
+        'media footer';
 }
 
 .Card--horizontalReversed {
     grid-template-columns: 1fr auto;
     grid-template-rows: 1fr auto;
     grid-template-areas:
         'body media'
-        'actions media';
+        'footer media';
 }
 
 :is(.Card--horizontal, .Card--horizontalReversed):has(.CardMedia:not(:only-child)) {
@@ -59,7 +59,7 @@
             transition: box-shadow theme.$transition-duration theme.$transition-timing;
 
             &:hover {
-                box-shadow: theme.$box-shadow-hover;
+                box-shadow: theme.$box-shadow-state-hover;
             }
         }
     }
@@ -77,7 +77,7 @@
             'media media media'
             'media media media'
             '. body .'
-            '. actions .';
+            '. footer .';
     }
 
     &:has(.CardMedia:not(:only-child)) {
@@ -92,7 +92,7 @@
         grid-template-areas:
             'media .'
             'media body'
-            'media actions'
+            'media footer'
             'media .';
     }
 
@@ -108,7 +108,7 @@
         grid-template-areas:
             '. media'
             'body media'
-            'actions media'
+            'footer media'
             '. media';
     }
 

diff --git a/packages/web/src/scss/components/Card/_CardActions.scss b/packages/web/src/scss/components/Card/_CardActions.scss
diff --git a/packages/web/src/scss/components/Card/_CardBody.scss b/packages/web/src/scss/components/Card/_CardBody.scss
@@ -1,15 +1,15 @@
-// 1. Make card text selectable.
+// 1. Make card text selectable when there is a stretched CardLink.
 
 @use 'tools';
 
 .CardBody {
-    @include tools.add-bottom-spacing();
+    @include tools.add-bottom-margin();
 
     grid-area: body;
 }
 
 // 1.
-.CardBody p {
+.Card:has(.CardLink) > .CardBody p {
     position: relative;
     z-index: 1;
 }
diff --git a/packages/web/src/scss/components/Card/_CardFooter.scss b/packages/web/src/scss/components/Card/_CardFooter.scss
@@ -0,0 +1,28 @@
+// 1. Restore interactions for individual actions.
+
+@use '../../tools/dictionaries';
+@use 'theme';
+@use 'tools';
+
+.CardFooter {
+    @include tools.add-bottom-margin();
+
+    z-index: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    grid-area: footer;
+    gap: theme.$footer-gap;
+    pointer-events: none;
+}
+
+// 1.
+.CardFooter :where(a:not(.CardLink), button) {
+    pointer-events: auto;
+}
+
+@include dictionaries.generate-alignments(
+    $class-name: 'CardFooter',
+    $dictionary-values: theme.$footer-alignment-dictionary,
+    $axis: 'x'
+);
diff --git a/packages/web/src/scss/components/Card/_CardMedia.scss b/packages/web/src/scss/components/Card/_CardMedia.scss
@@ -1,60 +1,66 @@
 // 1. We need the specific combination of classes, expanded CardMedia is designed to work only with boxed cards.
 
+@use '@tokens' as tokens;
 @use '../../tools/dictionaries';
 @use 'theme';
 @use 'tools';
 
 .CardMedia {
-    --card-media-border-radius-top-left: #{theme.$border-radius};
-    --card-media-border-radius-top-right: #{theme.$border-radius};
-    --card-media-border-radius-bottom-left: #{theme.$border-radius};
-    --card-media-border-radius-bottom-right: #{theme.$border-radius};
-    --card-media-canvas-width: auto;
-    --card-media-canvas-height: auto;
+    --#{tokens.$css-variable-prefix}card-media-border-radius-top-left: #{theme.$border-radius};
+    --#{tokens.$css-variable-prefix}card-media-border-radius-top-right: #{theme.$border-radius};
+    --#{tokens.$css-variable-prefix}card-media-border-radius-bottom-left: #{theme.$border-radius};
+    --#{tokens.$css-variable-prefix}card-media-border-radius-bottom-right: #{theme.$border-radius};
+    --#{tokens.$css-variable-prefix}card-media-canvas-width: auto;
+    --#{tokens.$css-variable-prefix}card-media-canvas-height: auto;
 
     grid-area: media;
 }
 
 @include dictionaries.generate-sizes($class-name: 'CardMedia', $sizes: theme.$media-sizes);
 
 .CardMedia__canvas {
-    width: var(--card-media-canvas-width);
-    height: var(--card-media-canvas-height);
+    width: var(--#{tokens.$css-variable-prefix}card-media-canvas-width);
+    height: var(--#{tokens.$css-variable-prefix}card-media-canvas-height);
     overflow: hidden;
-    border-radius: var(--card-media-border-radius-top-left) var(--card-media-border-radius-top-right)
-        var(--card-media-border-radius-bottom-right) var(--card-media-border-radius-bottom-left);
+    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 > :is(img, picture > img, video) {
+.CardMedia__canvas :is(img, picture > img, video) {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .Card--vertical > .CardMedia {
-    --card-media-canvas-height: var(--spirit-card-media-size);
+    --#{tokens.$css-variable-prefix}card-media-canvas-height: var(--spirit-card-media-size);
 
-    @include tools.add-bottom-spacing($spacing: theme.$gap-dense);
+    @include tools.add-bottom-margin($margin: theme.$gap-dense);
 }
 
 :is(.Card--horizontal, .Card--horizontalReversed) > .CardMedia {
-    --card-media-canvas-width: var(--spirit-card-media-size);
-    --card-media-canvas-height: 100%;
+    --#{tokens.$css-variable-prefix}card-media-canvas-width: var(--spirit-card-media-size);
+}
+
+:is(.Card--horizontal, .Card--horizontalReversed) > :is(.CardMedia--expanded, .CardMedia--filledHeight) {
+    --#{tokens.$css-variable-prefix}card-media-canvas-height: 100%;
 }
 
 // stylelint-disable selector-max-class -- 1.
 .Card--vertical.Card--boxed > .CardMedia--expanded:not(:last-child) {
-    --card-media-border-radius-bottom-left: 0;
-    --card-media-border-radius-bottom-right: 0;
+    --#{tokens.$css-variable-prefix}card-media-border-radius-bottom-left: 0;
+    --#{tokens.$css-variable-prefix}card-media-border-radius-bottom-right: 0;
 }
 
 .Card--horizontal.Card--boxed > .CardMedia--expanded:not(:last-child) {
-    --card-media-border-radius-top-right: 0;
-    --card-media-border-radius-bottom-right: 0;
+    --#{tokens.$css-variable-prefix}card-media-border-radius-top-right: 0;
+    --#{tokens.$css-variable-prefix}card-media-border-radius-bottom-right: 0;
 }
 
 .Card--horizontalReversed.Card--boxed > .CardMedia--expanded:not(:last-child) {
-    --card-media-border-radius-top-left: 0;
-    --card-media-border-radius-bottom-left: 0;
+    --#{tokens.$css-variable-prefix}card-media-border-radius-top-left: 0;
+    --#{tokens.$css-variable-prefix}card-media-border-radius-bottom-left: 0;
 }
 // stylelint-enable
diff --git a/packages/web/src/scss/components/Card/_CardTitle.scss b/packages/web/src/scss/components/Card/_CardTitle.scss
@@ -2,11 +2,15 @@
 @use 'theme';
 
 .CardTitle {
-    @include typography.generate(theme.$heading-typography);
+    @include typography.generate(theme.$title-typography);
 
-    color: theme.$heading-color;
+    color: theme.$title-color;
 
     &:not(:last-child) {
-        margin-bottom: theme.$heading-margin-bottom;
+        margin-bottom: theme.$title-margin-bottom;
     }
 }
+
+.CardTitle--heading {
+    @include typography.generate(theme.$title-heading-typography);
+}
diff --git a/packages/web/src/scss/components/Card/_theme.scss b/packages/web/src/scss/components/Card/_theme.scss
@@ -16,13 +16,16 @@ $border-radius: tokens.$radius-300;
 
 $background-color: tokens.$background-primary;
 $color: tokens.$text-secondary;
-$box-shadow-hover: tokens.$shadow-100;
+$box-shadow-state-hover: tokens.$shadow-100;
 
 $transition-duration: transitions.$duration-100;
 $transition-timing: transitions.$timing-eased-in-out;
 
 $media-border-radius: tokens.$radius-300;
 $media-sizes: (
+    auto: (
+        size: auto,
+    ),
     small: (
         size: 140px,
     ),
@@ -38,9 +41,10 @@ $eyebrow-typography: tokens.$body-small-semibold;
 $eyebrow-color: tokens.$text-tertiary;
 $eyebrow-margin-bottom: tokens.$space-300;
 
-$heading-typography: tokens.$heading-small-semibold;
-$heading-color: tokens.$text-primary;
-$heading-margin-bottom: tokens.$space-500;
+$title-typography: tokens.$body-large-regular;
+$title-heading-typography: tokens.$heading-small-semibold;
+$title-color: tokens.$text-primary;
+$title-margin-bottom: tokens.$space-500;
 
-$actions-alignment-dictionary: dictionaries.$alignments-x;
-$actions-gap: tokens.$space-700;
+$footer-alignment-dictionary: dictionaries.$alignments-x;
+$footer-gap: tokens.$space-700;
diff --git a/packages/web/src/scss/components/Card/_tools.scss b/packages/web/src/scss/components/Card/_tools.scss
@@ -1,7 +1,7 @@
 @use 'theme';
 
-@mixin add-bottom-spacing($spacing: theme.$gap) {
+@mixin add-bottom-margin($margin: theme.$gap) {
     &:not(:last-child) {
-        margin-bottom: $spacing;
+        margin-bottom: $margin;
     }
 }