diff --git a/assets/js/mobileDrawer.js b/assets/js/mobileDrawer.js
index e1708de..36c782f 100644
--- 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
deleted file mode 100644
index bd618b5..0000000
--- a/components/Molecules/Filters/FilterSelect/FilterSelect.stories.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import FilterSelect from './FilterSelect.twig';
-import filterSelectFunction from './FilterSelect.js';
-import MobileDrawer from '../../../../assets/js/mobileDrawer';
-
-export default {
- title: 'Design System/Molecules/Filters/FilterSelect'
-};
-
-export const Base = {
- render: (args) => FilterSelect(args),
- play: () => {
- filterSelectFunction();
- MobileDrawer();
- },
- args: {
- id: 'filterSelect',
- placeholder: 'Taille',
- isRounded: false,
- options: [
- { value: 1, label: 'S - 34/36' },
- { value: 2, label: 'M - 38/40' },
- { value: 3, label: 'L - 42/44' }
- ]
- }
-};
-
-export const Color = {
- render: (args) => FilterSelect(args),
- play: () => {
- filterSelectFunction();
- MobileDrawer();
- },
- args: {
- id: 'colorFilterSelect',
- options: [
- {
- value: 1,
- label:
- "State Blue"
- },
- {
- value: 2,
- label:
- "Vermillon"
- },
- {
- value: 3,
- label: "Grey"
- }
- ]
- }
-};
diff --git a/components/Molecules/HeaderButton/HeaderButton.stories.js b/components/Molecules/HeaderButton/HeaderButton.stories.js
index 2f96103..1eaa4ec 100644
--- 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) =>
+ `${HeaderButton(args)}
`,
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
index e77ad1b..257c1a3 100644
--- 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 @@
diff --git a/components/Molecules/HeaderButton/headerButton.css b/components/Molecules/HeaderButton/headerButton.css
index b5dca54..c57922e 100644
--- 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
index 90ba1df..4c28667 100644
--- a/components/Organisms/HeaderNav/HeaderNav.twig
+++ b/components/Organisms/HeaderNav/HeaderNav.twig
@@ -1,7 +1,7 @@