Pickup

components/Organisms/Card/Address/AddressCard.stories.js

@@ -18,7 +18,7 @@ const address = {
 };
 
 export const Base = {
-  render: (args) => `<div class='w-[309px]'>${AddressCard(args)}</div>`,
+  render: (args) => `<div class='max-w-[309px]'>${AddressCard(args)}</div>`,
   play: () => {
     addressCard();
   },

components/Organisms/Card/PickupPoint/PickupPoint.js

@@ -0,0 +1,12 @@
+
+export function pickupPoint() {
+  const buttons = document.querySelectorAll('.PickupPoint-hours');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', function () {
+      const parent = this.closest(".PickupPoint");
+      const hoursListing = parent.querySelector('.PickupPoint-hoursListing');
+      hoursListing.classList.toggle("md:hidden");
+    });
+  });
+}

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

@@ -0,0 +1,43 @@
+import PickupPoint from './PickupPoint.twig';
+import { pickupPoint } from './PickupPoint';
+
+export default {
+  title: 'Design System/Organisms/Card/PickupPoint'
+};
+
+const address = {
+  address1: "Adresse première ligne",
+  address2: "Complément d’adresse",
+  zipCode: '00000',
+  city: 'Clermont-Ferrand',
+  country: 'Ville-Sur-Fleuve'
+};
+const hours = [
+  {day: 'lundi', hours: '14h - 19h'},
+  {day: 'mardi', hours: '14h - 20h'},
+  {day: 'Mercredi', hours: '14h - 20h'},
+  {day: 'Jeudi', hours: '14h - 20h'},
+  {day: 'Vendredi', hours: '14h - 20h'},
+  {day: 'Samedi', hours: '14h - 20h'},
+  {day: 'Dimanche', hours: 'Fermé'},
+]
+
+export const Base = {
+  render: (args) => `<div class='max-w-[340px]'>${PickupPoint(args)}</div>`,
+  play: () => {
+    pickupPoint();
+  },
+  args: {
+    selected: false,
+    closed: false,
+    title: 'Nom du point relais',
+    date: 'JJ/MM',
+    address: address,
+    price: '7,80€',
+    img: {alt: 'Logo Mondial Relay', src: "/images/mondialRelay.svg"},
+    hours
+  },
+  argTypes: {
+    date: {control: { type: 'text' }}
+  }
+};

components/Organisms/Card/PickupPoint/PickupPoint.twig

@@ -0,0 +1,36 @@
+<div class='PickupPoint {% if selected %}selected{% endif %}'>
+  <label class='PickupPoint-content'>
+    {% include '../../../Atoms/Form/Radio.twig' with {type:"span", name:"PickupPoint", value:1, checked:selected} %}
+
+    <span>
+        <span class='PickupPoint-title'>{{ title }}</span>
+        <span class='PickupPoint-description'>Livraison estimée le {{ date }}</span>
+        <span class='PickupPoint-opening {% if closed %}closed{% endif %}'>{% if closed %}Fermé{% else %}Ouvert{% endif %} actuellement</span>
+        <span class='PickupPoint-address'>
+          <span>{{ address.address1 }},</span>
+          {% if address.address2 %}<span>{{ address.address2 }},</span>{% endif %}
+          <span>{{ address.zipCode }} {{ address.city }}</span>
+        </span>
+
+    </span>
+  </label>
+  <div class='PickupPoint-bottom'>
+          <button class='PickupPoint-hours'>{{ source("/icons/clock.svg") }}Horaires</button>
+          {% if img.src %}
+            <img src="{{ img.src }}" alt="{{ img.alt|default('Logo Pickup') }}" loading="lazy">
+          {% endif %}
+  </div>
+  <div class='PickupPoint-hoursListing md:hidden'>
+    <table>
+      {% for hour in hours %}
+        <tr>
+          <td>{{ hour.day }}</td>
+          <td>{{ hour.hours }}</td>
+        </tr>
+      {% endfor %}
+    </table>
+  </div>
+  <div class='md:hidden mt-4'>
+    {% include '../../../Molecules/Button/Button.twig' with {text: 'Choisir ce point relais', classes:'Button--fill'} %}
+  </div>
+</div>

components/Organisms/Card/PickupPoint/pickupPoint.css

@@ -0,0 +1,103 @@
+.PickupPoint {
+  background: var(--theme-lightest);
+  border: 1px solid var(--theme-lightest);
+  border-radius: rem-convert(8px);
+  padding: rem-convert(16px);
+
+  &.selected {
+    background: var(--white);
+    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;
+      visibility: hidden;
+      max-width: 0;
+      @screen md {
+        visibility: visible;
+        max-width: initial;
+      }
+    }
+  }
+
+
+  &-hoursListing, &-bottom {
+    @screen md {
+      margin-left: rem-convert(22px);
+    }
+  }
+  &-bottom {
+    padding-top: rem-convert(16px);
+    @apply paragraph-4;
+    font-weight: 600;
+    display: none;
+    @screen md {
+      display: flex;
+    }
+    justify-content: space-between;
+    align-items: center;
+  }
+  &-hoursListing {
+    margin-top: rem-convert(16px);
+    padding-top:  rem-convert(16px);
+    border-top: 1px solid var(--grey-lighter);
+    @apply paragraph-4;
+    td:first-child {
+      padding-right: rem-convert(40px);
+    }
+  }
+  &-hours {
+    display: flex;
+    gap: rem-convert(6px);
+    align-items: center;
+    text-decoration: underline;
+    svg {
+      width: rem-convert(18px);
+      height: rem-convert(18px);
+    }
+  }
+  &-title {
+    @apply paragraph-2;
+    font-weight: 600;
+    color: var(--black);
+  }
+  &-description {
+    @apply paragraph-6;
+    font-weight: 400;
+    color: var(--grey);
+  }
+  &-opening, &-address {
+    padding-top: rem-convert(13px);
+    @apply paragraph-4;
+    font-weight: 400;
+    color: var(--grey-dark);
+  }
+  .PickupPoint-opening {
+    display: flex;
+    align-items: center;
+    &:before {
+      content: '';
+      display: inline-block;
+      width: rem-convert(9px);
+      height: rem-convert(9px);
+      border-radius: 999px;
+      background: var(--success-dark);
+      margin-right: rem-convert(4px);
+    }
+    &.closed:before {
+      background: var(--error-dark);
+    }
+  }
+}

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

@@ -12,5 +12,8 @@ export const Base = {
     date: 'JJ/MM',
     price: '7,80€',
     img: {alt: 'Logo Chronopost', src: "/images/chronopost.svg"}
+  },
+  argTypes: {
+    date: {control: { type: 'text' }}
   }
 };