fixup! 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 · e2f81e0 · e2f81e0
1 parent 7afadb0
commit e2f81e0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/packages/web/src/scss/components/Card/README.md b/packages/web/src/scss/components/Card/README.md
@@ -316,11 +316,22 @@ wrap your CardTitle text in the CardLink component:
 </h4>
 ```
 
-This establishes a clickable overlay over the whole Card, making it easier for users to interact with the Card.
+This establishes a [clickable overlay][hugo-giraudel-card] over the whole Card, making it easier for users to interact
+with the Card.
 
 ℹ️ Don't worry, any interactive elements inside the Card (like links or buttons) will still work as expected.
 
-ℹ️ The text content of CardBody remains selectable and copyable even when the whole Card is clickable.
+If you need the text content of your CardBody remains [selectable and copyable][heydon-pickering-card], you can use the
+`CardBody--selectable` modifier:
+
+```html
+<div class="CardBody CardBody--selectable">
+  <h4 class="CardTitle">
+    <a href="#" class="CardLink">Card title</a>
+  </h4>
+  <p>Selectable card content</p>
+</div>
+```
 
 ### Linking the Media
 
@@ -399,4 +410,6 @@ When you put it all together:
 [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
-[ondrej-pohl]: https://linkedin.com/in/ondrejpohl
+[heydon-pickering-card]: https://inclusive-components.design/cards/
+[hugo-giraudel-card]: https://kittygiraudel.com/2022/04/02/accessible-cards/
+[ondrej-pohl]: https://youtu.be/SdlgZFKxs40?feature=shared&t=1010
diff --git a/packages/web/src/scss/components/Card/_Card.scss b/packages/web/src/scss/components/Card/_Card.scss
@@ -25,7 +25,8 @@
 }
 
 // 4., 5.
-.Card:has(.CardLink) :where(a:not(.CardLink), button, p, ul, ol, dl) {
+.Card:has(.CardLink) :where(a:not(.CardLink), button),
+.Card:has(.CardLink):has(.CardBody--selectable) :where(p, ul, ol, dl) {
     position: relative;
     z-index: 1;
 }

diff --git a/packages/web/src/scss/components/Card/_CardMedia.scss b/packages/web/src/scss/components/Card/_CardMedia.scss
@@ -49,11 +49,14 @@
 :is(.Card--horizontal, .Card--horizontalReversed) > .CardMedia {
     --#{tokens.$css-variable-prefix}card-media-canvas-width: var(--spirit-card-media-size);
 
+    align-self: start;
     min-width: 0; // 3.
 }
 
 :is(.Card--horizontal, .Card--horizontalReversed) > :is(.CardMedia--expanded, .CardMedia--filledHeight) {
     --#{tokens.$css-variable-prefix}card-media-canvas-height: 100%;
+
+    align-self: stretch;
 }
 
 .Card--vertical > .CardMedia {

diff --git a/packages/web/src/scss/components/Card/index.html b/packages/web/src/scss/components/Card/index.html
@@ -142,11 +142,11 @@ <h4 class="CardTitle CardTitle--heading">
             {{> web/assets/jobBoardLogo }}
           </div>
         </div>
-        <div class="CardBody">
+        <div class="CardBody CardBody--selectable">
           <div class="CardEyebrow">Content options</div>
           <h4 class="CardTitle CardTitle--heading">
             <a href="#" class="CardLink">
-              Image, logo and text
+              Image, logo and selectable text
             </a>
           </h4>
           <!-- User content, no component classes -->