Reinsurance Module

thelia · May 31, 2024 · e8c14fb · e8c14fb
1 parent a411405
commit e8c14fb
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 4 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,22 @@
+<div class='ReinsuranceModule'>
+  <div class='ReinsuranceModule-wrapper'>
+    {% for reinsurance in data %}
+      <div>
+        {% if reinsurance.icon %}
+          <span class='ReinsuranceModule-icon'>{{ source("/icons/" ~ reinsurance.icon  ~".svg") }}</span>
+        {% endif %}
+        <div>
+          {% if reinsurance.strongText %}
+            <strong>{{ reinsurance.strongText }}</strong>
+          {% endif %}
+          <div class='ReinsuranceModule-text'>{{ reinsurance.text }}</div>
+          {% if reinsurance.link %}
+            <div class='ReinsuranceModule-link'>
+              <a class='link-small' href='{{ reinsurance.link }}'>{{ reinsurance.linkLabel }}</a>
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</div>
diff --git a/components/Layout/Reinsurance/reinsurance.css 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
@@ -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
@@ -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
@@ -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'
+          }
+        }
+      });
+    }
+  ]
 };