From 6a3b30f6186cd5d82778797b3a36f9abce3701b7 Mon Sep 17 00:00:00 2001
From: lnormandon <lnormandon@openstudio.fr>
Date: Mon, 3 Jun 2024 17:05:21 +0200
Subject: [PATCH] Subheader category

---
 .../Category/SubheaderCategory.stories.js     | 15 ++++++++
 .../Subheader/Category/SubheaderCategory.twig | 15 ++++++++
 .../SearchResult/SubheaderSearch.stories.js   |  2 +-
 .../SearchResult/SubheaderSearch.twig         |  2 +-
 components/Layout/Subheader/subheader.css     | 34 +++++++++++++++++--
 5 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 components/Layout/Subheader/Category/SubheaderCategory.stories.js
 create mode 100644 components/Layout/Subheader/Category/SubheaderCategory.twig

diff --git a/components/Layout/Subheader/Category/SubheaderCategory.stories.js b/components/Layout/Subheader/Category/SubheaderCategory.stories.js
new file mode 100644
index 0000000..9257165
--- /dev/null
+++ b/components/Layout/Subheader/Category/SubheaderCategory.stories.js
@@ -0,0 +1,15 @@
+import SubheaderCategory from './SubheaderCategory.twig';
+
+export default {
+  title: 'Design System/Layout/Subheader/Category'
+};
+
+export const base = {
+  render: (args) => SubheaderCategory(args),
+  args: {
+    title: 'Nom de la catégorie',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...'
+  },
+  argTypes: {}
+};
diff --git a/components/Layout/Subheader/Category/SubheaderCategory.twig b/components/Layout/Subheader/Category/SubheaderCategory.twig
new file mode 100644
index 0000000..8569c51
--- /dev/null
+++ b/components/Layout/Subheader/Category/SubheaderCategory.twig
@@ -0,0 +1,15 @@
+<div class='Subheader Subheader--category'>
+  <div class='container mx-auto flex flex-col'>
+    <h1 class='Subheader-title'>{{ title }}</h1>
+    <div class='Subheader-description'>
+      {{ description }}
+    </div>
+    <div class='Subheader-link underline'>
+      <a href='#' class='link-large'>Lire la suite</a>
+    </div>
+    <div class='Subheader-info Subheader-info--category'>
+      <div>16 produit(s)</div>
+      {% include '../../../Molecules/Button/Button.twig' with {text: 'Filtrer & trier',icon_left:'filter', variant: 'secondary'} %}
+    </div>
+  </div>
+</div>
diff --git a/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js b/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js
index 43d4fce..c29f21b 100644
--- a/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js
+++ b/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js
@@ -1,7 +1,7 @@
 import SubheaderSearch from './SubheaderSearch.twig';
 
 export default {
-  title: 'Design System/Layout/Subheader/SearchResults'
+  title: 'Design System/Layout/Subheader/Search Results'
 };
 
 export const base = {
diff --git a/components/Layout/Subheader/SearchResult/SubheaderSearch.twig b/components/Layout/Subheader/SearchResult/SubheaderSearch.twig
index fa1404d..9fdeea3 100644
--- a/components/Layout/Subheader/SearchResult/SubheaderSearch.twig
+++ b/components/Layout/Subheader/SearchResult/SubheaderSearch.twig
@@ -5,7 +5,7 @@
       {% include '../../../Molecules/SearchBar/SearchBar.twig' with { label: "Rechercher un lieu de livraison", classes: 'SearchBar--white ',placeholder: "Ex : Ville, Code postal",iconButtonLeft:true, iconButton: "search" } %}
 
     </div>
-    <div class='Subheader-searchInfo'>
+    <div class='Subheader-info'>
       <div>16 produit(s)</div>
       {% include '../../../Molecules/Button/Button.twig' with {text: 'Filtrer & trier',icon_left:'filter', variant: 'secondary'} %}
     </div>
diff --git a/components/Layout/Subheader/subheader.css b/components/Layout/Subheader/subheader.css
index dd21f3b..c21c415 100644
--- a/components/Layout/Subheader/subheader.css
+++ b/components/Layout/Subheader/subheader.css
@@ -33,6 +33,17 @@
       min-height: rem-convert(282px);
     }
   }
+  &--category {
+    min-height: rem-convert(336px);
+    padding: rem-convert(24px);
+    @screen md {
+      min-height: rem-convert(344px);
+      padding: rem-convert(24px 48px);
+    }
+    @screen lg {
+      min-height: rem-convert(284px);
+    }
+  }
   &-centered {
     text-align: center;
     @screen lg {
@@ -41,20 +52,39 @@
   }
   &-title {
     @apply h1;
+    color: var(--black);
   }
 
   &-title--search {
     padding-bottom: rem-convert(16px);
   }
-  &-searchInfo {
+  &-info {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding-top: rem-convert(44px);
+    padding-top: rem-convert(32px);
     @apply paragraph-5;
     @screen md {
+      padding-top: rem-convert(29px);
+    }
+    @screen lg {
       display: none;
     }
+    &--category {
+      padding-top: rem-convert(16px);
+      @screen md {
+        padding-top: rem-convert(16px);
+      }
+    }
+  }
+  &-description {
+    @apply paragraph-4;
+    padding-top: rem-convert(16px);
+    padding-bottom: rem-convert(16px);
+    color: var(--black);
+  }
+  &-link {
+    color: var(--black);
   }
 }