Transporter

Author: leanormandon

assets/images/chronopost.svg

@@ -28,6 +28,7 @@
   .checkmark {
     width: 16px;
     height: 16px;
+    background: var(--white);
     border: 1px solid var(--current-checkbox-color);
     border-radius: 2px;
     position: relative;

components/Atoms/Form/checkbox.css

@@ -0,0 +1,16 @@
+import Transporter from './Transporter.twig';
+
+export default {
+  title: 'Design System/Organisms/Card/Transporter'
+};
+
+export const Base = {
+  render: (args) => `<div class='w-[340px]'>${Transporter(args)}</div>`,
+  args: {
+    selected: false,
+    title: 'Nom du transporteur',
+    date: 'JJ/MM',
+    price: '7,80€',
+    img: {alt: 'Logo Chronopost', src: "/images/chronopost.svg"}
+  }
+};

components/Organisms/Card/Transporter/Transporter.stories.js

@@ -0,0 +1,16 @@
+<div class='Transporter {% if selected %}selected{% endif %}'>
+  <label class='Transporter-content'>
+    {% include '../../../Atoms/Form/Radio.twig' with {type:"span", name:"transporter", value:1, checked:selected} %}
+
+    <span>
+        <span class='Transporter-title'>{{ title }}</span>
+        <span class='Transporter-description'>Livraison estimée le {{ date }}</span>
+        <span class='Transporter-bottom'>
+          <span>{{ price }}</span>
+          {% if img.src %}
+            <img src="{{ img.src }}" alt="{{ img.alt|default('Logo transporteur') }}" loading="lazy">
+          {% endif %}
+        </span>
+    </span>
+  </label>
+</div>

components/Organisms/Card/Transporter/Transporter.twig

@@ -0,0 +1,47 @@
+.Transporter {
+  background: var(--theme-lightest);
+  border: 1px solid var(--theme-lightest);
+  border-radius: rem-convert(8px);
+  padding: rem-convert(16px);
+
+  &.selected {
+    background: var(--theme-lighter);
+    border: 1px solid var(--theme-medium);
+  }
+  label  {
+    cursor: pointer;
+  }
+  &-content {
+    display: flex;
+    align-items: flex-start;
+    span {
+      display: block;
+    }
+    > span:last-child {
+      flex-grow: 1;
+    }
+    .Radio {
+      margin-top: 4px;
+      margin-right: 8px;
+    }
+
+    .Transporter-bottom {
+      padding-top: rem-convert(16px);
+      @apply paragraph-4;
+      font-weight: 600;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+  &-title {
+    @apply paragraph-2;
+    font-weight: 600;
+    color: var(--black);
+  }
+  &-description {
+    @apply paragraph-6;
+    font-weight: 400;
+    color: var(--grey);
+  }
+}