Add Small Reinsurance

components/Organisms/Reinsurance/Reinsurance.stories.js

@@ -0,0 +1,26 @@
+import Reinsurance from './Reinsurance.twig';
+
+export default {
+  title: 'Design System/Organisms/Reinsurance'
+};
+
+export const small = {
+  render: (args) => Reinsurance(args),
+  args: {
+    data: [
+      {
+        strongText: 'Livraison gratuite',
+        text: ' à partir de 50€',
+        icon: 'reinsurance-delivery'
+      },
+      {
+        strongText: 'Expédition',
+        text: ' sous 24h',
+        icon: 'reinsurance-shipping'
+      }
+    ]
+  },
+  argTypes: {
+    data: { type: 'array' }
+  }
+};

components/Organisms/Reinsurance/Reinsurance.twig

@@ -0,0 +1,16 @@
+
+<div class='Reinsurance'>
+  {% for reinsurance in data %}
+    <div>
+      {% if reinsurance.icon %}
+        <span class='Reinsurance-icon'>{{ source("/icons/" ~ reinsurance.icon  ~".svg") }}</span>
+      {% endif %}
+      <span>
+        {% if reinsurance.strongText %}
+          <strong>{{ reinsurance.strongText }}</strong>
+        {% endif %}
+        {{ reinsurance.text }}
+      </span>
+    </div>
+  {% endfor %}
+</div>

components/Organisms/Reinsurance/reinsurance.css

@@ -0,0 +1,35 @@
+.Reinsurance {
+  background: var(--theme-lighter);
+  max-width: rem-convert(400px);
+  padding-top: rem-convert(20px);
+  padding-bottom: rem-convert(20px);
+  padding-left: rem-convert(32px);
+  padding-right: rem-convert(30px);
+  border-radius: rem-convert(4px);
+  @apply paragraph-4;
+  strong {
+    font-weight: 600;
+  }
+  > div {
+    display: flex;
+    align-items: center;
+    gap:  rem-convert(10px);
+    border-bottom: 0.5px solid var(--theme-medium);
+    padding-bottom: rem-convert(14px);
+    padding-top: rem-convert(14px);
+  }
+  > div:first-child {
+    padding-top: 0;
+  }
+  > div:last-child {
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+
+  &-icon {
+    display: inline-block;
+    width: rem-convert(21px);
+    height: rem-convert(21px);
+    color: var(--theme);
+  }
+}