Skip to content

Commit 3ac92cc

Browse files
leanormandonleanormandon
authored
Merge pull request #38 from thelia/reworks/design-system
Reworks/design system
2 parents 2037a67 + 8c6d0bd commit 3ac92cc

27 files changed

+446
-201
lines changed

‎.storybook/preview.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const preview: Preview = {
1414
date: /Date$/i
1515
}
1616
},
17+
layout: 'fullscreen',
1718
backgrounds: {
1819
default: 'white',
1920
values: [
@@ -29,6 +30,10 @@ const preview: Preview = {
2930
name: 'white',
3031
value: '#FFFFFF'
3132
},
33+
{
34+
name: 'theme-lighter',
35+
value: '#FFEDE5'
36+
},
3237
{
3338
name: 'theme-lightest',
3439
value: '#FFF5F1'

‎assets/css/menu.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
:root {
2+
--padding-button-sub: 22px;
3+
--padding-top-menu: 82px;
4+
--padding-x-menu: 55px;
5+
--padding-button-close: 24px;
6+
}
7+
8+
@media screen and (min-width: theme('screens.lg')) {
9+
#Menu {
10+
ul {
11+
button,
12+
ul {
13+
@apply hidden;
14+
}
15+
}
16+
}
17+
}
18+
@media screen and (max-width: theme('screens.lg')) {
19+
#Menu {
20+
@apply hidden fixed inset-0 bg-white text-black;
21+
22+
> ul {
23+
@apply h-full relative;
24+
}
25+
ul {
26+
@apply flex flex-col items-stretch gap-0 pb-[var(--header-nav-height)] pt-[var(--padding-top-menu)] justify-start;
27+
28+
padding-right: calc(var(--padding-x-menu) - var(--padding-button-sub));
29+
padding-left: var(--padding-x-menu);
30+
31+
li {
32+
@apply flex items-center justify-between text-lg font-semibold;
33+
34+
line-height: var(--line-height-paragraph-1);
35+
gap: calc(30px - var(--padding-button-sub));
36+
}
37+
a {
38+
@apply py-[var(--padding-button-sub)];
39+
}
40+
button {
41+
@apply p-[var(--padding-button-sub)];
42+
}
43+
svg {
44+
@apply w-[28px];
45+
}
46+
ul {
47+
@apply hidden fixed bg-white left-0 right-0 top-[var(--padding-top-menu)] bottom-[var(--header-nav-height)] pt-0;
48+
49+
&.is-active {
50+
@apply block;
51+
}
52+
}
53+
}
54+
55+
&.is-open {
56+
@apply block h-full;
57+
}
58+
}
59+
}
60+
61+
[data-menu-close] {
62+
@apply block lg:hidden p-[var(--padding-button-close)] absolute right-0 top-0 z-10;
63+
64+
svg {
65+
@apply w-[32px] text-grey-dark;
66+
}
67+
}
68+
69+
[data-menu-back] {
70+
@apply lg:hidden p-[var(--padding-button-close)] absolute top-0 z-10 -translate-y-1/2;
71+
72+
left: calc(var(--padding-x-menu) - var(--padding-button-close));
73+
top: calc(var(--padding-top-menu) / 2);
74+
75+
svg {
76+
@apply w-[28px];
77+
}
78+
}
79+
80+
[data-menu-back='-1'] {
81+
@apply hidden;
82+
}

‎assets/icons/heart-fill.svg

Lines changed: 5 additions & 1 deletion
Loading

‎assets/icons/thelia.svg

Lines changed: 7 additions & 3 deletions
Loading

‎components/Atoms/Font/font.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,4 +170,8 @@ a {
170170
font-size: var(--font-size-indication-small);
171171
letter-spacing: var(--letter-spacing-indication-small);
172172
}
173+
174+
&-lower {
175+
text-transform: lowercase;
176+
}
173177
}

‎components/Layout/CrossSelling/CrossSelling.stories.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import CrossSelling from './CrossSelling.twig';
22
import { slider } from '../../../assets/js/slider';
3+
import { MAX_SECTION_PRODUCT } from '../../base';
34

45
export default {
56
title: 'Design System/Layout/CrossSelling'
@@ -18,7 +19,7 @@ const standardProduct = {
1819

1920
const products = [];
2021

21-
for (let i = 0; i < 5; i++) {
22+
for (let i = 0; i < MAX_SECTION_PRODUCT; i++) {
2223
products.push(standardProduct);
2324
}
2425

@@ -33,7 +34,7 @@ export const base = {
3334
button: { href: '#', label: 'Tout voir' }
3435
},
3536
parameters: {
36-
backgrounds: { default: 'grey' }
37+
backgrounds: { default: 'theme-lighter' }
3738
},
3839
argTypes: {}
3940
};

‎components/Layout/CrossSelling/CrossSelling.twig

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<div class='xl:container xl:mx-auto'>
2-
<div class='h2 text-black pb-6'>{{ title }}</div>
2+
<div class='pb-6 text-black h2'>{{ title }}</div>
33
</div>
44

55
<div class='CrossSelling slider'>
6-
{% for product in products %}
7-
{% include '../../Organisms/ProductCard/ProductCard.twig' with product %}
8-
{% endfor %}
6+
{% for product in products %}
7+
{% include '../../Organisms/ProductCard/ProductCard.twig' with product %}
8+
{% endfor %}
99
</div>
1010

11-
<div class='xl:container xl:mx-auto mt-5'>
12-
{% include '../../Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %}
11+
<div class='mt-5 xl:container xl:mx-auto'>
12+
{% include '../../Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %}
1313
</div>

‎components/Layout/Footer/Footer.twig

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{% 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 ' %}
22
{% if withNewsletter %}
3-
{% set footerLinksClasses = footerLinksClasses ~ 'md:col-span-2 lg:col-span-1' %}
4-
{% set footerStoreInfosClasses = footerStoreInfosClasses ~ 'md:border-l md:border-l-grey-lighter lg:border-r lg:border-r-grey-lighter ' %}
5-
{% set footerContainerClasses = 'md:grid-cols-2 lg:grid-cols-3' %}
3+
{% set footerLinksClasses = footerLinksClasses ~ 'md:col-span-2 lg:col-span-1 text-black' %}
4+
{% set footerStoreInfosClasses = footerStoreInfosClasses ~ 'md:border-l md:border-l-grey-lighter lg:border-r lg:border-r-grey-lighter ' %}
5+
{% set footerContainerClasses = 'md:grid-cols-2 lg:grid-cols-3' %}
66
{% else %}
7-
{% 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] ' %}
8-
{% set footerStoreInfosClasses = footerStoreInfosClasses ~ 'md:border-r md:border-r-grey-lighter' %}
9-
{% set footerContainerClasses = 'md:grid-cols-2' %}
7+
{% 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' %}
8+
{% set footerStoreInfosClasses = footerStoreInfosClasses ~ 'md:border-r md:border-r-grey-lighter' %}
9+
{% set footerContainerClasses = 'md:grid-cols-2' %}
1010
{% endif %}
1111

1212
<footer class='Footer bg-theme-lightest px-6 md:px-0 pt-[50px] md:pt-0 pb-[34px] md:pb-[45px] flex flex-col'>
13-
<div class='md:grid {{footerContainerClasses}}'>
14-
{% if withNewsletter %}
15-
<div class='Footer-newsletter mb-[50px] md:mb-0 md:pt-[50px] md:pl-[50px] lg:pt-[100px]'>
16-
<div class='font-semibold paragraph-1'>Newsletter</div>
17-
<div class='mb-4 paragraph-5'>Suivez nos dernières actualités & promotions</div>
18-
{% include '../../Molecules/Button/Button.twig' with {text: 'Je m\'inscris', type: 'primary', isFill: true, classes: "Button--large w-full md:w-auto"} %}
13+
<div class='md:grid {{footerContainerClasses}}'>
14+
{% if withNewsletter %}
15+
<div class='Footer-newsletter mb-[50px] md:mb-0 md:pt-[50px] md:pl-[50px] lg:pt-[100px]'>
16+
<div class='font-semibold paragraph-1'>Newsletter</div>
17+
<div class='mb-4 paragraph-5'>Suivez nos dernières actualités & promotions</div>
18+
{% include '../../Molecules/Button/Button.twig' with {text: 'Je m\'inscris', type: 'primary', isFill: true, classes: "Button--large w-full md:w-auto"} %}
1919
</div>
2020
{% endif %}
2121
<div class='Footer-store-infos mb-[30px] md:py-[50px] md:pl-[40px] md:mb-0 lg:pt-[100px] lg:pb-[90px] {{footerStoreInfosClasses}}'>
@@ -26,13 +26,14 @@
2626
</div>
2727
{% include '../../Molecules/Button/Button.twig' with {text: 'Contactez nous', type: 'primary', icon_right: "email", isFill: true, classes: "w-full md:w-auto Button--secondary Button--large"} %}
2828
</div>
29-
<div class='lg:pt-[100px] {{footerLinksClasses}}'>
30-
<div class='paragraph-5'><a href='#'>Plan du site</a></div>
31-
<div class='paragraph-5'><a href='#'>Mentions légales</a></div>
32-
<div class='paragraph-5'><a href='#'>Données personnelles</a></div>
33-
<div class='paragraph-5'><a href='#'>Cookies</a></div>
34-
<div class='paragraph-5'><a href='#'>Conditions générales de vente</a></div>
35-
</div>
29+
<ul class='lg:pt-[100px] {{footerLinksClasses}}'>
30+
{% set footerLinkClass = 'underline hover:no-underline focus:no-underline hover:opacity-75 focus:opacity-75' %}
31+
<li class='paragraph-5'><a href='#' class="{{footerLinkClass}}">Plan du site</a></li>
32+
<li class='paragraph-5'><a href='#' class="{{footerLinkClass}}">Mentions légales</a></li>
33+
<li class='paragraph-5'><a href='#' class="{{footerLinkClass}}">Données personnelles</a></li>
34+
<li class='paragraph-5'><a href='#' class="{{footerLinkClass}}">Cookies</a></li>
35+
<li class='paragraph-5'><a href='#' class="{{footerLinkClass}}">Conditions générales de vente</a></li>
36+
</ul>
3637
</div>
3738

3839
<div class='md:flex md:justify-between md:items-center md:border-t md:border-t-grey-lighter md:px-[50px] md:pt-[30px]'>
@@ -57,6 +58,6 @@
5758
</div>
5859
</div>
5960

60-
<div class='indication indication-small'>© OpenStudio - 2024</div>
61+
<div class='text-grey indication indication-small'>© OpenStudio - {{ 'now' | date('Y') }}</div>
6162
</div>
6263
</footer>

‎components/Layout/Footer/FooterCheckout.twig

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
<footer class='flex flex-col px-6 xl:px-[120px] py-6 xl:flex-row xl:justify-between FooterCheckout bg-theme-lightest gap-9 sm:gap-3'>
2-
<div class='flex flex-col gap-2 sm:gap-6 sm:flex-row'>
3-
<div class='paragraph-5'><a href='#'>Plan du site</a></div>
4-
<div class='paragraph-5'><a href='#'>Mentions légales</a></div>
5-
<div class='paragraph-5'><a href='#'>Données personnelles</a></div>
6-
<div class='paragraph-5'><a href='#'>Cookies</a></div>
7-
<div class='paragraph-5'><a href='#'>Conditions générales de vente</a></div>
8-
</div>
9-
10-
<div class='paragraph-5'>© OpenStudio - 2024</div>
11-
</div
12-
</footer>
1+
<footer class='flex flex-col px-6 xl:px-[120px] py-6 xl:flex-row xl:justify-between FooterCheckout bg-theme-lightest gap-9 md:gap-3 text-black'>
2+
<ul class='flex flex-col gap-2 md:gap-6 md:flex-row'>
3+
{% set footerLinkClass = 'underline hover:no-underline focus:no-underline hover:opacity-75 focus:opacity-75' %}
4+
<li class='paragraph-5'>
5+
<a href='#' class="{{footerLinkClass}}">Plan du site</a>
6+
</li>
7+
<li class='paragraph-5'>
8+
<a href='#' class="{{footerLinkClass}}">Mentions légales</a>
9+
</li>
10+
<li class='paragraph-5'>
11+
<a href='#' class="{{footerLinkClass}}">Données personnelles</a>
12+
</li>
13+
<li class='paragraph-5'>
14+
<a href='#' class="{{footerLinkClass}}">Cookies</a>
15+
</li>
16+
<li class='paragraph-5'>
17+
<a href='#' class="{{footerLinkClass}}">Conditions générales de vente</a>
18+
</li>
19+
</ul>
20+
<span class='text-grey indication indication-small'>© OpenStudio - 2024</span>
21+
</div</footer>

‎components/Layout/Header/Header.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
export default () => {
2+
Menu();
3+
4+
const btn = document.getElementById('toggleMenu');
5+
6+
btn.addEventListener('click', () =>
7+
document.getElementById('Menu').classList.toggle('is-open')
8+
);
9+
};
10+
11+
export function Menu() {
12+
const menu = document.getElementById('Menu');
13+
if (!menu) return null;
14+
15+
let previous = 0;
16+
17+
const closeBtn = menu.querySelector('[data-menu-close]');
18+
const backBtn = menu.querySelector('[data-menu-back]');
19+
const subBtns = menu.querySelectorAll('[data-menu-item]');
20+
const subs = menu.querySelectorAll('[data-menu-sub]');
21+
22+
closeBtn?.addEventListener('click', () => {
23+
menu.classList.remove('is-open');
24+
backBtn.dataset.menuBack = -1;
25+
subs.forEach((sub) => {
26+
sub.classList.remove('is-active');
27+
});
28+
});
29+
30+
backBtn?.addEventListener('click', () => {
31+
displaySubMenu(previous);
32+
});
33+
34+
subBtns?.forEach((btn) => {
35+
btn.addEventListener('click', () => {
36+
displaySubMenu(btn.dataset.menuItem);
37+
});
38+
});
39+
40+
function displaySubMenu(current) {
41+
subs.forEach((sub) => {
42+
sub.classList.remove('is-active');
43+
44+
if (sub.dataset.menuSub === current) {
45+
previous = sub.dataset.menuPrevious;
46+
sub.classList.add('is-active');
47+
[...subs]
48+
.find((s) => s.dataset.menuSub === previous)
49+
?.classList.add('is-active');
50+
displayBackBtn(previous ?? -1);
51+
}
52+
});
53+
}
54+
55+
function displayBackBtn(previous) {
56+
backBtn.dataset.menuBack = previous;
57+
}
58+
}

‎components/Layout/Header/Header.stories.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Header from './Header.twig';
2+
import HeaderScript from './Header.js';
23
import HeaderCheckout from './HeaderCheckout.twig';
34

45
export default {
@@ -9,6 +10,9 @@ const types = ['generic', 'sticky', 'searchbar'];
910

1011
export const base = {
1112
render: (args) => Header(args),
13+
play: () => {
14+
HeaderScript();
15+
},
1216
args: {
1317
type: 'generic'
1418
},

0 commit comments

Comments
 (0)