Fix Header & header button

thelia · Jul 3, 2024 · 10ecea9 · 10ecea9
1 parent 6e39875
commit 10ecea9
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 79 deletions.
diff --git a/assets/js/mobileDrawer.js b/assets/js/mobileDrawer.js
@@ -33,7 +33,7 @@ export default function MobileDrawer() {
 
       if (diffY > 50) {
         // close drawer after 50px
-        drawer.classList.remove('MobileDrawer-show');
+        closeDrawer(drawer);
       }
     });
   });

diff --git a/components/Molecules/Filters/FilterSelect/FilterSelect.stories.js b/components/Molecules/Filters/FilterSelect/FilterSelect.stories.js
diff --git a/components/Molecules/HeaderButton/HeaderButton.stories.js b/components/Molecules/HeaderButton/HeaderButton.stories.js
@@ -1,14 +1,32 @@
-import HeaderButtons from './HeaderButtons.twig';
+import HeaderButton from './HeaderButton.twig';
 
 export default {
-  title: 'Design System/Molecules/Header Buttons'
+  title: 'Design System/Molecules/Header Button'
 };
 
 export const base = {
-  render: (args) => HeaderButtons(args),
+  render: (args) =>
+    `<div class='block h-[62px] w-[390px] flex'>${HeaderButton(args)}</div>`,
   args: {
-    inactive: false,
-    small: false
+    small: false,
+    text: 'Connexion',
+    subText: '',
+    classes: 'HeaderButton--theme',
+    icon: 'heart-fill'
+  },
+  argTypes: {
+    classes: {
+      options: [
+        'HeaderButton--theme',
+        'HeaderButton--light',
+        'HeaderButton--dark'
+      ],
+      control: { type: 'select' }
+    },
+    icon: {
+      options: ['heart-fill', 'account', 'account-logged', 'cart'],
+      control: { type: 'select' }
+    }
   },
   parameters: {}
 };
diff --git a/components/Molecules/HeaderButton/HeaderButton.twig b/components/Molecules/HeaderButton/HeaderButton.twig
@@ -2,7 +2,6 @@
 {% set inactive = inactive|default(false) %}
 {% set classes = classes|default('') %}
 {% set small = small|default(false) %}
-{% set mobile = mobile|default(false) %}
 {% set subText = subText|default(null) %}
 {% set icon = icon|default(null) %}
 {% set text = text|default('') %}
@@ -14,7 +13,7 @@
 
   <div class='flex flex-col items-start HeaderButton-text'>
     <span class="HeaderButton-text">{{ text }}</span>
-    {% if subText and not mobile %}
+    {% if subText %}
       <span class='HeaderButton-subText'>{{ subText }}</span>
     {% endif %}
   </div>

diff --git a/components/Molecules/HeaderButton/headerButton.css b/components/Molecules/HeaderButton/headerButton.css
@@ -1,16 +1,8 @@
 .HeaderButton {
-  --header-button-bg: var(--theme-light);
-  --header-button-color: var(--black);
-  --header-button-bg-hover: var(--theme-medium);
-
   background: var(--header-button-bg);
   color: var(--header-button-color);
 
-  @apply typo-button-large flex flex-col 2xl:flex-row items-center justify-center h-full gap-1 md:px-5 md:flex-initial flex-1;
-
-  &--small {
-    padding-right: rem-convert(20px);
-  }
+  @apply typo-button-large flex flex-col lg:flex-row items-center justify-center h-full gap-1 md:px-5 md:flex-initial flex-1;
 
   &:hover {
     --header-button-bg: var(--header-button-bg-hover);
@@ -29,19 +21,29 @@
   }
 
   &-text {
-    @apply paragraph-7 font-normal md:hidden 2xl:block;
+    @apply paragraph-7 font-normal;
     font-family: var(--font-family-paragraph-1);
   }
+  &--small {
+    .HeaderButton-text {
+      @apply md:sr-only;
+    }
+  }
   &-subText {
     @apply paragraph-7 font-light;
   }
 
-  &--inactive {
-    --header-button-bg: var(--theme-light);
 
-    &:hover {
-      --header-button-bg: var(--theme-medium);
+  &--theme {
+    --header-button-bg: var(--white);
+    --header-button-color: var(--black);
+    --header-button-bg-hover: var(--grey-lightest);
+    @screen md {
+      --header-button-bg: var(--theme-light);
+      --header-button-color: var(--black);
+      --header-button-bg-hover: var(--theme-medium);
     }
+
   }
 
   &--dark {

diff --git a/components/Organisms/HeaderNav/HeaderNav.twig b/components/Organisms/HeaderNav/HeaderNav.twig
@@ -1,7 +1,7 @@
 <div class='HeaderNav'>
-	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'search', classes: 'HeaderNav-btn HeaderButton--search', text: 'Recherche' } %}
-	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'heart-fill', classes: 'HeaderNav-btn HeaderButton--wishlist', text: 'Wishlist' } %}
-	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'account', classes: 'HeaderNav-btn HeaderButton--account', text: 'Compte' } %}
-	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'cart', text: 'Panier', classes: 'HeaderNav-btn HeaderButton--cart '} %}
-	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'menu', id: "toggleMenu", classes: 'HeaderNav-btn HeaderButton--menu lg:hidden' } %}
+	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'search', classes: 'HeaderNav-btn HeaderButton--light', text: 'Recherche', small: true } %}
+	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'heart-fill', classes: 'HeaderNav-btn HeaderButton--light', text: 'Wishlist', small: true } %}
+	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'account', classes: 'HeaderNav-btn HeaderButton--theme', text: 'Compte', small: true } %}
+	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'cart', text: 'Panier', classes: 'HeaderNav-btn HeaderButton--dark ', small: true} %}
+	{% include '../../Molecules/HeaderButton/HeaderButton.twig' with { icon: 'menu', id: "toggleMenu", classes: 'HeaderNav-btn HeaderButton--light lg:hidden', text: 'Menu', small: true } %}
 </div></header>