CMN-541: update css in recommender/somethinglikethis

Author: Sine Jespersen

src/stories/Library/recommender/Recommender.stories.tsx

@@ -7,13 +7,24 @@ export default {
   argTypes: {
     title: {
       control: "text",
-      defaultValue:
-        "Kunne du lide “Audrey Hepburn” og mangler du noget at læse?",
+      defaultValue: "Because you have borrowed something you may also like",
     },
     bright: {
       control: { type: "boolean" },
       defaultValue: true,
     },
+    padding: {
+      control: { type: "boolean" },
+      defaultValue: true,
+    },
+    titleLeft: {
+      control: { type: "boolean" },
+      defaultValue: false,
+    },
+    triple: {
+      control: { type: "boolean" },
+      defaultValue: true,
+    },
     recommenderData: {
       control: "object",
       defaultValue: [
@@ -42,9 +53,20 @@ export default {
   },
 } as ComponentMeta<typeof Recommender>;
 
-const Template: ComponentStory<typeof Recommender> = (args) => (
+const RecommenderMC: ComponentStory<typeof Recommender> = (args) => (
+  <Recommender {...args} />
+);
+
+const SomethingSimilarMC: ComponentStory<typeof Recommender> = (args) => (
   <Recommender {...args} />
 );
 
-export const Recommend = Template.bind({});
+export const Recommend = RecommenderMC.bind({});
+export const SomethingSimilar = SomethingSimilarMC.bind({});
 Recommend.args = {};
+SomethingSimilar.args = {
+  padding: false,
+  titleLeft: true,
+  title: "Something similar",
+  triple: false,
+};

src/stories/Library/recommender/Recommender.tsx

@@ -10,16 +10,33 @@ export type RecommenderProps = {
   recommenderData: RecommenderData[];
   title: string;
   bright: boolean;
+  padding: boolean;
+  titleLeft: boolean;
+  triple: boolean;
 };
 
 const Recommender: React.FC<RecommenderProps> = ({
   recommenderData,
   title,
   bright,
+  padding,
+  titleLeft,
+  triple,
 }) => {
   return (
-    <div className={`recommender ${bright ? "recommender--bright" : ""}`}>
-      <h2 className="recommender__title text-header-h1">{title}</h2>
+    <div
+      className={`recommender ${padding ? "recommender--padding-desktop" : ""}
+        ${triple ? "recommender--triple-desktop " : ""} ${
+        bright ? "recommender--bright" : ""
+      }`}
+    >
+      <h2
+        className={`${
+          titleLeft ? "recommender__left-title" : "recommender__title"
+        } text-header-h1`}
+      >
+        {title}
+      </h2>
       <div className="recommender__buttons">
         <button
           type="button"
@@ -36,7 +53,11 @@ const Recommender: React.FC<RecommenderProps> = ({
           By the same author
         </button>
       </div>
-      <ul className="recommender__grid">
+      <ul
+        className={`${
+          triple ? "recommender__triple-grid" : "recommender__grid"
+        }`}
+      >
         {recommenderData.map(({ title: recTitle, filled, authors }) => (
           <li
             className={`recommender-material ${

src/stories/Library/recommender/recommender.scss

@@ -3,15 +3,23 @@
   color: $c-text-primary-white;
   border-color: $c-text-secondary-gray;
 
-  @include breakpoint-m {
-    padding: $s-6xl;
-  }
-
   &--bright {
     background-color: $c-global-primary;
     color: $c-text-primary-black;
     border-color: $c-global-tertiary-1;
+  }
+
+  &--triple-desktop {
+    @include breakpoint-m {
+      .recommender-material {
+        &:last-of-type {
+          display: none;
+        }
+      }
+    }
+  }
 
+  &--padding-desktop {
     @include breakpoint-m {
       padding: $s-6xl;
     }
@@ -25,18 +33,25 @@
       padding-bottom: $s-6xl;
     }
   }
-  &__title--left {
+
+  &__left-title {
     text-align: left;
+    padding-left: $s-md;
+
+    @include breakpoint-m {
+      padding-left: $s-4xl;
+    }
   }
 
   &__buttons {
     display: flex;
     justify-content: end;
     margin-bottom: $s-md;
+    margin-right: $s-md;
     gap: $s-md;
   }
 
-  &__grid {
+  &__triple-grid {
     display: grid;
     grid-template-columns: 50% 50%;
     grid-template-rows: 50% 50%;
@@ -45,6 +60,16 @@
       grid-template-columns: 33.33% 33.33% 33.33%;
     }
   }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: 50% 50%;
+
+    @include breakpoint-m {
+      grid-template-columns: 25% 25% 25% 25%;
+    }
+  }
 }
 
 .recommender-material {
@@ -55,12 +80,6 @@
   position: relative;
   height: 350px;
 
-  @include breakpoint-m {
-    &:last-of-type {
-      display: none;
-    }
-  }
-
   &--bright {
     border: 1px solid $c-global-tertiary-1;
   }