From 7d82059f4f2b8c745b51d2dd3f82ea18b0e1ec3e Mon Sep 17 00:00:00 2001
From: LasseStaus <l.stausgaard@gmail.com>
Date: Thu, 18 Apr 2024 12:39:44 +0200
Subject: [PATCH 1/2] Use clsx in recommendedMaterial as part of css
 conditional rendering

DDFFORM-490
---
 .../Library/recommended-material/RecommendedMaterial.tsx   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/stories/Library/recommended-material/RecommendedMaterial.tsx b/src/stories/Library/recommended-material/RecommendedMaterial.tsx
index 5df24c81d..8b254b23d 100644
--- a/src/stories/Library/recommended-material/RecommendedMaterial.tsx
+++ b/src/stories/Library/recommended-material/RecommendedMaterial.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { ButtonFavourite } from "../Buttons/button-favourite/ButtonFavourite";
 import Cover from "../cover/Cover";
 
@@ -22,9 +23,9 @@ export const RecommendedMaterial: React.FC<RecommendedMaterialProps> = ({
 }) => {
   return (
     <div
-      className={`recommended-material ${
-        partOfGrid && "recommended-material--in-grid "
-      }`}
+      className={clsx("recommended-material", {
+        "recommended-material--in-grid": partOfGrid,
+      })}
     >
       <div className="recommended-material__icon">
         <ButtonFavourite fill={favoriteFill} />

From bf572240af964acb06a0237b89d997f830810b2f Mon Sep 17 00:00:00 2001
From: LasseStaus <l.stausgaard@gmail.com>
Date: Thu, 18 Apr 2024 12:41:23 +0200
Subject: [PATCH 2/2] Update CSS for recommended-material component and
 skeleton.

These changes aim to:
- Ensure that the individual recommended-materials in the grid, will "fill out" their respective part of the grid.

- Skeletons / non-skeletons should be equally large.

- That the content will not jump depending on the cover image frame.

DDFFORM-490
---
 .../recommended-material-skeleton.scss        |  1 +
 .../recommended-material.scss                 | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/stories/Library/recommended-material/recommended-material-skeleton.scss b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
index c1c508903..b870d53fb 100644
--- a/src/stories/Library/recommended-material/recommended-material-skeleton.scss
+++ b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
@@ -16,6 +16,7 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
+    margin-bottom: 12px;
   }
   .ssc-line {
     width: 60%;
diff --git a/src/stories/Library/recommended-material/recommended-material.scss b/src/stories/Library/recommended-material/recommended-material.scss
index e4e8f76b1..7125d1c57 100644
--- a/src/stories/Library/recommended-material/recommended-material.scss
+++ b/src/stories/Library/recommended-material/recommended-material.scss
@@ -1,5 +1,7 @@
-// MATERIAL_LARGE_DESKTOP is equivalent to the one being used in cover.scss
-$MATERIAL_LARGE_DESKTOP: 216px;
+// MATERIAL_LARGE_DESKTOP & MATERIAL_MEDIUM_MOBILE are variables
+// taken from the cover.scss file.
+$cover_height_small: $MATERIAL_MEDIUM_MOBILE;
+$cover_height_large: $MATERIAL_LARGE_DESKTOP;
 $_recommended-material-max-height: 432px;
 $_recommended-material-max-width: 378px;
 $_aspect-ratio-mobile: 285 / 320;
@@ -12,13 +14,15 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
   background-color: $color__global-secondary;
   max-height: $_recommended-material-max-height;
   width: 100%;
+  height: 100%;
   padding: $s-md;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: min-content $cover_height_small min-content;
   row-gap: $s-lg;
   justify-items: center;
   align-items: center;
+  align-content: space-between;
   aspect-ratio: $_aspect-ratio-mobile;
 
   @include media-query__small {
@@ -26,6 +30,9 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
     aspect-ratio: $_aspect-ratio-desktop;
     max-width: $_recommended-material-max-width;
   }
+  @include media-query__medium {
+    grid-template-rows: min-content $cover_height_large min-content;
+  }
 }
 
 .recommended-material__icon {
@@ -53,13 +60,9 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 .recommended-material--in-grid {
   max-width: unset;
   border: 1px solid $color__global-tertiary-1;
+  aspect-ratio: unset;
 
   > .cover {
     height: 100%;
-    max-height: $MATERIAL_LARGE_DESKTOP;
-    @include media-query__medium {
-      height: $MATERIAL_LARGE_DESKTOP;
-      max-height: unset;
-    }
   }
 }