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 @@ +
+
+

{{ title }}

+
+ {{ description }} +
+ +
+
16 produit(s)
+ {% include '../../../Molecules/Button/Button.twig' with {text: 'Filtrer & trier',icon_left:'filter', variant: 'secondary'} %} +
+
+
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" } %} -
+
16 produit(s)
{% include '../../../Molecules/Button/Button.twig' with {text: 'Filtrer & trier',icon_left:'filter', variant: 'secondary'} %}
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); } }