diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 26ca677..29ff02a 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -14,6 +14,7 @@ const preview: Preview = { date: /Date$/i } }, + layout: 'fullscreen', backgrounds: { default: 'white', values: [ @@ -29,6 +30,10 @@ const preview: Preview = { name: 'white', value: '#FFFFFF' }, + { + name: 'theme-lighter', + value: '#FFEDE5' + }, { name: 'theme-lightest', value: '#FFF5F1' diff --git a/assets/css/menu.css b/assets/css/menu.css new file mode 100644 index 0000000..b8b31d6 --- /dev/null +++ b/assets/css/menu.css @@ -0,0 +1,82 @@ +:root { + --padding-button-sub: 22px; + --padding-top-menu: 82px; + --padding-x-menu: 55px; + --padding-button-close: 24px; +} + +@media screen and (min-width: theme('screens.lg')) { + #Menu { + ul { + button, + ul { + @apply hidden; + } + } + } +} +@media screen and (max-width: theme('screens.lg')) { + #Menu { + @apply hidden fixed inset-0 bg-white text-black; + + > ul { + @apply h-full relative; + } + ul { + @apply flex flex-col items-stretch gap-0 pb-[var(--header-nav-height)] pt-[var(--padding-top-menu)] justify-start; + + padding-right: calc(var(--padding-x-menu) - var(--padding-button-sub)); + padding-left: var(--padding-x-menu); + + li { + @apply flex items-center justify-between text-lg font-semibold; + + line-height: var(--line-height-paragraph-1); + gap: calc(30px - var(--padding-button-sub)); + } + a { + @apply py-[var(--padding-button-sub)]; + } + button { + @apply p-[var(--padding-button-sub)]; + } + svg { + @apply w-[28px]; + } + ul { + @apply hidden fixed bg-white left-0 right-0 top-[var(--padding-top-menu)] bottom-[var(--header-nav-height)] pt-0; + + &.is-active { + @apply block; + } + } + } + + &.is-open { + @apply block h-full; + } + } +} + +[data-menu-close] { + @apply block lg:hidden p-[var(--padding-button-close)] absolute right-0 top-0 z-10; + + svg { + @apply w-[32px] text-grey-dark; + } +} + +[data-menu-back] { + @apply lg:hidden p-[var(--padding-button-close)] absolute top-0 z-10 -translate-y-1/2; + + left: calc(var(--padding-x-menu) - var(--padding-button-close)); + top: calc(var(--padding-top-menu) / 2); + + svg { + @apply w-[28px]; + } +} + +[data-menu-back='-1'] { + @apply hidden; +} diff --git a/assets/icons/heart-fill.svg b/assets/icons/heart-fill.svg index 5c8659f..98e42b8 100644 --- a/assets/icons/heart-fill.svg +++ b/assets/icons/heart-fill.svg @@ -1 +1,5 @@ - + + + diff --git a/assets/icons/thelia.svg b/assets/icons/thelia.svg index 9cf8de6..29eda00 100644 --- a/assets/icons/thelia.svg +++ b/assets/icons/thelia.svg @@ -1,4 +1,8 @@ - - - + + + diff --git a/components/Atoms/Font/font.css b/components/Atoms/Font/font.css index 8f9bfa3..2ce30d9 100644 --- a/components/Atoms/Font/font.css +++ b/components/Atoms/Font/font.css @@ -170,4 +170,8 @@ a { font-size: var(--font-size-indication-small); letter-spacing: var(--letter-spacing-indication-small); } + + &-lower { + text-transform: lowercase; + } } diff --git a/components/Layout/CrossSelling/CrossSelling.stories.js b/components/Layout/CrossSelling/CrossSelling.stories.js index 76ab54c..fc7517f 100644 --- a/components/Layout/CrossSelling/CrossSelling.stories.js +++ b/components/Layout/CrossSelling/CrossSelling.stories.js @@ -1,5 +1,6 @@ import CrossSelling from './CrossSelling.twig'; import { slider } from '../../../assets/js/slider'; +import { MAX_SECTION_PRODUCT } from '../../base'; export default { title: 'Design System/Layout/CrossSelling' @@ -18,7 +19,7 @@ const standardProduct = { const products = []; -for (let i = 0; i < 5; i++) { +for (let i = 0; i < MAX_SECTION_PRODUCT; i++) { products.push(standardProduct); } @@ -33,7 +34,7 @@ export const base = { button: { href: '#', label: 'Tout voir' } }, parameters: { - backgrounds: { default: 'grey' } + backgrounds: { default: 'theme-lighter' } }, argTypes: {} }; diff --git a/components/Layout/CrossSelling/CrossSelling.twig b/components/Layout/CrossSelling/CrossSelling.twig index 4664f32..ae2d865 100644 --- a/components/Layout/CrossSelling/CrossSelling.twig +++ b/components/Layout/CrossSelling/CrossSelling.twig @@ -1,13 +1,13 @@
-
{{ title }}
+
{{ title }}
- {% for product in products %} - {% include '../../Organisms/ProductCard/ProductCard.twig' with product %} - {% endfor %} + {% for product in products %} + {% include '../../Organisms/ProductCard/ProductCard.twig' with product %} + {% endfor %}
-
- {% include '../../Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %} +
+ {% include '../../Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %}
diff --git a/components/Layout/Footer/Footer.twig b/components/Layout/Footer/Footer.twig index fc1865b..26fbceb 100644 --- a/components/Layout/Footer/Footer.twig +++ b/components/Layout/Footer/Footer.twig @@ -1,21 +1,21 @@ {% set footerLinksClasses = 'flex flex-col gap-2 md:gap-6 md:flex-row lg:flex-col Footer-links mb-[30px] md:mb-0 md:pb-[70px] md:px-[50px] md:pt-[30px] md:border-t md:border-t-grey-lighter lg:border-none ' %} {% if withNewsletter %} - {% set footerLinksClasses = footerLinksClasses ~ 'md:col-span-2 lg:col-span-1' %} - {% set footerStoreInfosClasses = footerStoreInfosClasses ~ 'md:border-l md:border-l-grey-lighter lg:border-r lg:border-r-grey-lighter ' %} - {% set footerContainerClasses = 'md:grid-cols-2 lg:grid-cols-3' %} + {% set footerLinksClasses = footerLinksClasses ~ 'md:col-span-2 lg:col-span-1 text-black' %} + {% set footerStoreInfosClasses = footerStoreInfosClasses ~ 'md:border-l md:border-l-grey-lighter lg:border-r lg:border-r-grey-lighter ' %} + {% set footerContainerClasses = 'md:grid-cols-2 lg:grid-cols-3' %} {% else %} - {% set footerLinksClasses = 'flex flex-col gap-2 md:gap-6 Footer-links mb-[30px] md:mb-0 md:pb-[70px] md:pt-[50px] md:pl-[40px] ' %} - {% set footerStoreInfosClasses = footerStoreInfosClasses ~ 'md:border-r md:border-r-grey-lighter' %} - {% set footerContainerClasses = 'md:grid-cols-2' %} + {% set footerLinksClasses = 'flex flex-col gap-2 md:gap-6 Footer-links mb-[30px] md:mb-0 md:pb-[70px] md:pt-[50px] md:pl-[40px] text-black' %} + {% set footerStoreInfosClasses = footerStoreInfosClasses ~ 'md:border-r md:border-r-grey-lighter' %} + {% set footerContainerClasses = 'md:grid-cols-2' %} {% endif %}
diff --git a/components/Layout/Footer/FooterCheckout.twig b/components/Layout/Footer/FooterCheckout.twig index 7061432..61c45da 100644 --- a/components/Layout/Footer/FooterCheckout.twig +++ b/components/Layout/Footer/FooterCheckout.twig @@ -1,12 +1,21 @@ -