Skip to content

Commit f1f3bb6

Browse files
leanormandonleanormandon
authored
Merge pull request #36 from thelia/feat/organism
Feat/organism
2 parents 7ef8df7 + 9acb561 commit f1f3bb6

File tree

14 files changed

+521
-12
lines changed

14 files changed

+521
-12
lines changed

‎assets/images/mastercard.svg

Lines changed: 13 additions & 0 deletions
Loading

‎assets/images/visa.svg

Lines changed: 14 additions & 0 deletions
Loading

‎components/Molecules/Tooltip/tooltip.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.Tooltip {
2+
display: inline-flex; /* Prevents the div from taking more height than the content */
23
position: relative;
34

45
&-icon {

‎components/Organisms/Card/PickupPoint/PickupPoint.stories.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@ export default {
66
};
77

88
const address = {
9-
address1: "Adresse première ligne",
10-
address2: "Complément d’adresse",
9+
address1: 'Adresse première ligne',
10+
address2: 'Complément d’adresse',
1111
zipCode: '00000',
1212
city: 'Clermont-Ferrand',
1313
country: 'Ville-Sur-Fleuve'
1414
};
1515
const hours = [
16-
{day: 'lundi', hours: '14h - 19h'},
17-
{day: 'mardi', hours: '14h - 20h'},
18-
{day: 'Mercredi', hours: '14h - 20h'},
19-
{day: 'Jeudi', hours: '14h - 20h'},
20-
{day: 'Vendredi', hours: '14h - 20h'},
21-
{day: 'Samedi', hours: '14h - 20h'},
22-
{day: 'Dimanche', hours: 'Fermé'},
23-
]
16+
{ day: 'lundi', hours: '14h - 19h' },
17+
{ day: 'mardi', hours: '14h - 20h' },
18+
{ day: 'Mercredi', hours: '14h - 20h' },
19+
{ day: 'Jeudi', hours: '14h - 20h' },
20+
{ day: 'Vendredi', hours: '14h - 20h' },
21+
{ day: 'Samedi', hours: '14h - 20h' },
22+
{ day: 'Dimanche', hours: 'Fermé' }
23+
];
2424

2525
export const Base = {
2626
render: (args) => `<div class='max-w-[340px]'>${PickupPoint(args)}</div>`,
@@ -34,10 +34,10 @@ export const Base = {
3434
date: 'JJ/MM',
3535
address: address,
3636
price: '7,80€',
37-
img: {alt: 'Logo Mondial Relay', src: "/images/mondialRelay.svg"},
37+
img: { alt: 'Logo Mondial Relay', src: '/images/mondialRelay.svg' },
3838
hours
3939
},
4040
argTypes: {
41-
date: {control: { type: 'text' }}
41+
date: { control: { type: 'text' } }
4242
}
4343
};

‎components/Organisms/Modules/HomeDelivery/HomeDelivery.stories.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import HomeDelivery from './HomeDelivery.twig';
2+
import { homeDelivery } from './HomeDelivery';
3+
4+
export default {
5+
title: 'Design System/Organisms/Modules/HomeDelivery'
6+
};
7+
8+
const address = {
9+
title: 'Domicile',
10+
name: 'Eleanor Shellstrop',
11+
address1: 'Adresse première ligne',
12+
address2: 'Complément d’adresse',
13+
zipCode: '00000',
14+
city: 'Clermont-Ferrand',
15+
country: 'Ville-Sur-Fleuve',
16+
phone: '06 06 06 06 06'
17+
};
18+
19+
export const Base = {
20+
render: (args) => HomeDelivery(args),
21+
play: () => {
22+
HomeDelivery();
23+
},
24+
args: {
25+
selected: false,
26+
noAddress: false,
27+
title: 'Livraison à domicile',
28+
date: 'JJ/MM',
29+
price: '7,80 €',
30+
address
31+
}
32+
};

‎components/Organisms/Modules/HomeDelivery/HomeDelivery.twig

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<div class='HomeDelivery {% if selected %}selected{% endif %}'>
2+
<label class='HomeDelivery-content'>
3+
{% include '../../../Atoms/Form/Radio.twig' with {type:"span", name:"HomeDelivery", value:1, checked:selected} %}
4+
5+
<span>
6+
<div class='flex justify-between'>
7+
<div>
8+
<span class='HomeDelivery-title'>{{ title }}</span>
9+
<span class='HomeDelivery-description'>Livraison estimée le {{ date }}</span>
10+
</div>
11+
<div class="w-12 h-12 text-theme-medium">
12+
{{ source("/icons/reinsurance-homedelivery.svg") }}
13+
</div>
14+
</div>
15+
<div class='flex items-center justify-between mt-6'>
16+
<span class='HomeDelivery-price'>{{ price }}</span>
17+
{% include '../../../Molecules/Tag/Tag.twig' with { icon: "carbone", customText: "0.80kg CO2" } %}
18+
</div>
19+
</span>
20+
</label>
21+
{% if selected %}
22+
<div class='HomeDelivery-bottom bg-theme-lightest'>
23+
{% if noAddress %}
24+
<div class="flex flex-col">
25+
<span class="font-bold paragraph-2">
26+
Vous n'avez pas d'adresse enregistrée
27+
</span>
28+
29+
{% include '../../../Molecules/Button/Button.twig' with {text: 'Ajouter une adresse', classes:'Button--fill mt-4'} %}
30+
</div>
31+
{% else %}
32+
<div>
33+
<div class='flex flex-col gap-2'>
34+
{% include '../../Card/Address/AddressCard.twig' with { address: address } %}
35+
{% include '../../Card/Address/AddressCard.twig' with { address: address, selected: false } %}
36+
</div>
37+
38+
<div class='my-4'>
39+
{% include '../../../Atoms/Form/Checkbox.twig' with { label: "Utiliser cette adresse pour la facturation" } %}
40+
</div>
41+
42+
<div class='flex flex-col gap-2 mt-4 lg:flex-row lg:items-center'>
43+
{% include '../../../Molecules/Button/Button.twig' with {text: 'Choisir cette adresse', classes:'Button--fill lg:w-1/2'} %}
44+
{% include '../../../Molecules/Button/Button.twig' with {text: 'Utiliser une autre adresse', classes:'Button--secondary lg:w-1/2'} %}
45+
</div>
46+
</div>
47+
{% endif %}
48+
</div>
49+
{% endif %}
50+
</div>

‎components/Organisms/Modules/HomeDelivery/homeDelivery.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.HomeDelivery {
2+
background: var(--theme-lightest);
3+
border: 1px solid var(--theme-lightest);
4+
border-radius: rem-convert(8px);
5+
max-width: rem-convert(340px);
6+
7+
@screen lg {
8+
max-width: rem-convert(540px);
9+
}
10+
11+
&.selected {
12+
background: var(--theme-lighter);
13+
border: 1px solid var(--theme-medium);
14+
}
15+
16+
label {
17+
cursor: pointer;
18+
}
19+
20+
&-title {
21+
@apply paragraph-2;
22+
font-weight: 600;
23+
color: var(--black);
24+
}
25+
26+
&-description {
27+
@apply paragraph-6;
28+
font-weight: 400;
29+
color: var(--grey);
30+
}
31+
32+
&-content {
33+
display: flex;
34+
align-items: flex-start;
35+
padding: rem-convert(16px);
36+
span:not(.Tag) {
37+
display: block;
38+
}
39+
> span:last-child {
40+
flex-grow: 1;
41+
}
42+
.Radio {
43+
margin-top: 4px;
44+
margin-right: 8px;
45+
visibility: hidden;
46+
max-width: 0;
47+
@screen md {
48+
visibility: visible;
49+
max-width: initial;
50+
}
51+
}
52+
}
53+
54+
&-bottom {
55+
padding: rem-convert(16px);
56+
@apply paragraph-4;
57+
font-weight: 600;
58+
display: flex;
59+
border-radius: 0 0 rem-convert(8px) rem-convert(8px);
60+
justify-content: space-between;
61+
align-items: center;
62+
}
63+
}

‎components/Organisms/Modules/Payment/Payment.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.Payment {
2+
background: var(--theme-lightest);
3+
border: 1px solid var(--theme-lightest);
4+
border-radius: rem-convert(8px);
5+
max-width: rem-convert(340px);
6+
7+
@screen lg {
8+
max-width: rem-convert(540px);
9+
}
10+
11+
&.selected {
12+
background: var(--theme-lighter);
13+
border: 1px solid var(--theme-medium);
14+
}
15+
16+
label {
17+
cursor: pointer;
18+
}
19+
20+
&-title {
21+
@apply paragraph-2;
22+
font-weight: 600;
23+
color: var(--black);
24+
}
25+
26+
&-content {
27+
display: flex;
28+
align-items: flex-start;
29+
padding: rem-convert(16px);
30+
31+
span {
32+
display: block;
33+
}
34+
> span:last-child {
35+
flex-grow: 1;
36+
}
37+
.Radio {
38+
margin-top: 4px;
39+
margin-right: 8px;
40+
visibility: hidden;
41+
max-width: 0;
42+
@screen md {
43+
visibility: visible;
44+
max-width: initial;
45+
}
46+
}
47+
}
48+
49+
&-bottom {
50+
border-radius: 0 0 rem-convert(8px) rem-convert(8px);
51+
padding: rem-convert(16px);
52+
}
53+
}

‎components/Organisms/Modules/Payment/Payment.stories.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Payment from './Payment.twig';
2+
3+
export default {
4+
title: 'Design System/Organisms/Modules/Payment'
5+
};
6+
7+
export const Base = {
8+
render: (args) => Payment(args),
9+
args: {
10+
selected: false,
11+
title: 'Carte bancaire'
12+
},
13+
argTypes: {}
14+
};

‎components/Organisms/Modules/Payment/Payment.twig

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div class='Payment {% if selected %}selected{% endif %}'>
2+
<label class='Payment-content'>
3+
{% include '../../../Atoms/Form/Radio.twig' with {type:"span", name:"Payment", value:1, checked:selected} %}
4+
5+
<span>
6+
<div class='flex justify-between'>
7+
<span class='Payment-title'>{{ title }}</span>
8+
<div class='h-[22px] flex'>
9+
{{ source("/images/visa.svg") }}
10+
{{ source("/images/mastercard.svg") }}
11+
</div>
12+
</div>
13+
</span>
14+
</label>
15+
{% if selected %}
16+
<div class='Payment-bottom bg-theme-lightest'>
17+
<div class="flex flex-col mx-auto gap-4 lg:max-w-[250px] lg:mt-[30px]">
18+
{% include '../../../Molecules/Fields/FieldInput/FieldInput.twig' with { label: "Numéro de carte", placeholder: "xxxx xxxx xxxx xxxx" } %}
19+
{% include '../../../Molecules/Fields/FieldInput/FieldInput.twig' with { label: "Titulaire de la carte", placeholder: "Ex. Alain Dupont" } %}
20+
21+
<div class='flex'>
22+
<div class="w-2/3 mr-4">
23+
{% include '../../../Molecules/Fields/FieldInput/FieldInput.twig' with { label: "Date d'expiration", placeholder: "MM/AA" } %}
24+
</div>
25+
26+
{% include '../../../Molecules/Fields/FieldInput/FieldInput.twig' with { label: "CVV", placeholder: "xxx", tooltip: "Tooltip CVV" } %}
27+
</div>
28+
29+
<div class="flex gap-2">
30+
<div class="w-8 h-8">{{ source("/icons/lock.svg") }}</div>
31+
<span class="paragraph-6">
32+
Le paiement se fait sur les serveurs de votre banque. Nous n'avons pas accès à vos données bancaires.
33+
</span>
34+
</div>
35+
36+
<div class="flex">
37+
{% include '../../../Atoms/Form/Checkbox.twig' with { label: "Enregistrer cette carte pour vos futurs achats" } %}
38+
</div>
39+
</div>
40+
</div>
41+
{% endif %}
42+
</div>

‎components/Organisms/Modules/StoreDelivery/StoreDelivery.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export function storeDelivery() {
2+
const buttons = document.querySelectorAll('.StoreDelivery-hours');
3+
4+
buttons.forEach((button) => {
5+
button.addEventListener('click', function () {
6+
const parent = this.closest('.StoreDelivery');
7+
const hoursListing = parent.querySelector('.StoreDelivery-hoursListing');
8+
hoursListing.classList.toggle('md:hidden');
9+
});
10+
});
11+
}

‎components/Organisms/Modules/StoreDelivery/StoreDelivery.stories.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import StoreDelivery from './StoreDelivery.twig';
2+
import { storeDelivery } from './StoreDelivery';
3+
4+
export default {
5+
title: 'Design System/Organisms/Modules/StoreDelivery'
6+
};
7+
8+
const address = {
9+
address1: 'Adresse première ligne',
10+
address2: 'Complément d’adresse',
11+
zipCode: '00000',
12+
city: 'Clermont-Ferrand',
13+
country: 'Ville-Sur-Fleuve'
14+
};
15+
16+
const hours = [
17+
{ day: 'lundi', hours: '14h - 19h' },
18+
{ day: 'mardi', hours: '14h - 20h' },
19+
{ day: 'Mercredi', hours: '14h - 20h' },
20+
{ day: 'Jeudi', hours: '14h - 20h' },
21+
{ day: 'Vendredi', hours: '14h - 20h' },
22+
{ day: 'Samedi', hours: '14h - 20h' },
23+
{ day: 'Dimanche', hours: 'Fermé' }
24+
];
25+
26+
export const Base = {
27+
render: (args) => StoreDelivery(args),
28+
play: () => {
29+
storeDelivery();
30+
},
31+
args: {
32+
selected: false,
33+
closed: false,
34+
registeredClient: false,
35+
newClient: false,
36+
title: 'Retrait en magasin',
37+
date: 'JJ/MM',
38+
address: address,
39+
price: 'Gratuit',
40+
img: { alt: 'Logo Mondial Relay', src: '/images/mondialRelay.svg' },
41+
hours
42+
},
43+
argTypes: {
44+
date: { control: { type: 'text' } }
45+
}
46+
};

0 commit comments

Comments
 (0)