From e2f81e07946941a8da9ecc1708f2b3acb165a643 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam.kudrna@lmc.eu>
Date: Thu, 28 Nov 2024 17:27:15 +0100
Subject: [PATCH] fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup!
 fixup! fixup! fixup! fixup! fixup! fixup! Feat(web): Introduce `Card`
 component #DS-1397

---
 .../web/src/scss/components/Card/README.md    | 19 ++++++++++++++++---
 .../web/src/scss/components/Card/_Card.scss   |  3 ++-
 .../src/scss/components/Card/_CardMedia.scss  |  3 +++
 .../web/src/scss/components/Card/index.html   |  4 ++--
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/scss/components/Card/README.md b/packages/web/src/scss/components/Card/README.md
index 75d3094c55..7145c55b9c 100644
--- 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
index 2ae1576116..08f6101a47 100644
--- 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
index 969519e640..b26002c6e7 100644
--- 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
index 816a6de8b6..f41dfcd463 100644
--- 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 -->