Subheader category

thelia · Jun 3, 2024 · 6a3b30f · 6a3b30f
1 parent 6b802c4
commit 6a3b30f
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 4 deletions.
diff --git a/components/Layout/Subheader/Category/SubheaderCategory.stories.js 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
@@ -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
@@ -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
@@ -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
@@ -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);
   }
 }