From e8c14fb0faaaa23253534629bd2e52d566d221ac Mon Sep 17 00:00:00 2001 From: lnormandon Date: Fri, 31 May 2024 15:40:07 +0200 Subject: [PATCH] Reinsurance Module --- .../PromotionalBanner/promotionalBanner.css | 5 +- .../Layout/Reinsurance/Reinsurance.stories.js | 37 ++++++++++++++ .../Layout/Reinsurance/Reinsurance.twig | 22 ++++++++ components/Layout/Reinsurance/reinsurance.css | 51 +++++++++++++++++++ .../FilterSelect/FilterSelect.stories.js | 1 + components/variables.css | 2 +- tailwind.config.js | 49 +++++++++++++++++- 7 files changed, 163 insertions(+), 4 deletions(-) create mode 100644 components/Layout/Reinsurance/Reinsurance.stories.js create mode 100644 components/Layout/Reinsurance/Reinsurance.twig create mode 100644 components/Layout/Reinsurance/reinsurance.css diff --git a/components/Layout/PromotionalBanner/promotionalBanner.css b/components/Layout/PromotionalBanner/promotionalBanner.css index 90a506c..6ae8d49 100644 --- a/components/Layout/PromotionalBanner/promotionalBanner.css +++ b/components/Layout/PromotionalBanner/promotionalBanner.css @@ -21,17 +21,18 @@ &-content { color: var(--black); display: flex; - align-items: center; justify-content: center; flex-direction: column; gap: rem-convert(16px); + align-items: flex-start; + @screen md { flex-direction: row; gap: rem-convert(48px); max-width: rem-convert(1110px); + align-items: center; } } - &-button { flex-grow: 1; flex-shrink: 0; diff --git a/components/Layout/Reinsurance/Reinsurance.stories.js b/components/Layout/Reinsurance/Reinsurance.stories.js new file mode 100644 index 0000000..bd7990f --- /dev/null +++ b/components/Layout/Reinsurance/Reinsurance.stories.js @@ -0,0 +1,37 @@ +import Reinsurance from './Reinsurance.twig'; + +export default { + title: 'Design System/Layout/Reinsurance' +}; + +export const base = { + render: (args) => Reinsurance(args), + args: { + data: [ + { + strongText: 'Livraison gratuite', + text: 'Pour toute commande supérieure à 100€', + linkLabel: 'Voir conditions', + link: '#', + icon: 'reinsurance-delivery' + }, + { + strongText: 'Paiement sécurisé', + text: 'Carte bancaire, Paypal', + linkLabel: 'Voir conditions', + link: '#', + icon: 'reinsurance-payment' + }, + { + strongText: 'Satisfait ou remboursé', + text: 'Echange ou remboursement offert sous 30 jours', + linkLabel: 'Voir conditions', + link: '#', + icon: 'reinsurance-satisfied' + } + ] + }, + parameters: { + backgrounds: { default: 'grey' } + } +}; diff --git a/components/Layout/Reinsurance/Reinsurance.twig b/components/Layout/Reinsurance/Reinsurance.twig new file mode 100644 index 0000000..7916229 --- /dev/null +++ b/components/Layout/Reinsurance/Reinsurance.twig @@ -0,0 +1,22 @@ +
+
+ {% for reinsurance in data %} +
+ {% if reinsurance.icon %} + {{ source("/icons/" ~ reinsurance.icon ~".svg") }} + {% endif %} +
+ {% if reinsurance.strongText %} + {{ reinsurance.strongText }} + {% endif %} +
{{ reinsurance.text }}
+ {% if reinsurance.link %} +
+ {{ reinsurance.linkLabel }} +
+ {% endif %} +
+
+ {% endfor %} +
+
diff --git a/components/Layout/Reinsurance/reinsurance.css b/components/Layout/Reinsurance/reinsurance.css new file mode 100644 index 0000000..e5f3802 --- /dev/null +++ b/components/Layout/Reinsurance/reinsurance.css @@ -0,0 +1,51 @@ +.ReinsuranceModule { + background: var(--white); + &-wrapper { + max-width: rem-convert(1082px); + margin-right: auto; + margin-left: auto; + padding: rem-convert(25px) rem-convert(40px); + color: var(--grey); + @screen md { + display: flex; + } + strong { + @apply paragraph-4; + font-weight: 700; + display: block; + color: var(--black); + } + > div { + display: flex; + gap: rem-convert(12px); + border-bottom: 0.5px solid var(--grey-lighter); + padding-bottom: rem-convert(24px); + padding-top: rem-convert(24px); + @screen md { + flex: 1 1 0; + border-bottom: 0; + padding: 0 rem-convert(10px); + border-right: 0.5px solid var(--grey-lighter); + } + } + > div:first-child { + padding-top: 0; + } + > div:last-child { + padding-bottom: 0; + border-right:0; + border-bottom: none; + } + } + &-text { + @apply paragraph-6; + } + + &-icon { + display: inline-block; + width: rem-convert(36px); + height: rem-convert(36px); + color: var(--grey); + flex-shrink: 0; + } +} diff --git a/components/Molecules/Filters/FilterSelect/FilterSelect.stories.js b/components/Molecules/Filters/FilterSelect/FilterSelect.stories.js index 5a8828d..5c7be04 100644 --- a/components/Molecules/Filters/FilterSelect/FilterSelect.stories.js +++ b/components/Molecules/Filters/FilterSelect/FilterSelect.stories.js @@ -27,6 +27,7 @@ export const Color = { render: (args) => FilterSelect(args), play: () => { filterSelectFunction(); + MobileDrawer(); }, args: { id: 'colorFilterSelect', diff --git a/components/variables.css b/components/variables.css index f52fc9b..603ac58 100644 --- a/components/variables.css +++ b/components/variables.css @@ -30,7 +30,7 @@ --validated: #40CAB1; --validated-lightest: #EEFFFC; - --informative: #40CAB1; + --informative: #40B1CA; --informative-lightest: #E9FBFF; --processing: #A504B3; diff --git a/tailwind.config.js b/tailwind.config.js index a821cc6..14578db 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -64,5 +64,52 @@ module.exports = { '4xl': 'var(--font-size-4xl)' } }, - plugins: [] + plugins: [ + function ({ addComponents }) { + addComponents({ + '.container': { + maxWidth: '100%', + '@screen xs': { + maxWidth: '272px' + }, + '@screen sm': { + maxWidth: '340px' + }, + '@screen md': { + maxWidth: '664px' + }, + '@screen lg': { + maxWidth: '864px' + }, + '@screen xl': { + maxWidth: '1206px' + } + }, + '.container-medium': { + maxWidth: '100%', + '@screen xs': { + maxWidth: '272px' + }, + '@screen sm': { + maxWidth: '340px' + }, + '@screen md': { + maxWidth: '540px' + } + }, + '.container-small': { + maxWidth: '100%', + '@screen xs': { + maxWidth: '272px' + }, + '@screen sm': { + maxWidth: '340px' + }, + '@screen md': { + maxWidth: '400px' + } + } + }); + } + ] };