Module Pickup Points

components/Molecules/Button/Button.stories.js

@@ -16,6 +16,7 @@ export const classic = {
     variant: 'primary',
     fill: false,
     rectangle: false,
+    sharp: false,
     icon_left: 'none',
     icon_right: 'none'
   },

components/Molecules/Button/Button.twig

@@ -2,6 +2,7 @@
 {% if variant != 'primary' %}{% set classes = classes ~ ' Button--' ~ variant %}{% endif %}
 {% if fill %}{% set classes = classes ~ ' Button--fill'%}{% endif %}
 {% if rectangle %}{% set classes = classes ~ ' Button--rectangle'%}{% endif %}
+{% if sharp %}{% set classes = classes ~ ' Button--sharp'%}{% endif %}
 {% if round %}{% set classes = classes ~ ' Button--round'%}{% endif %}
 
 <button class='Button {{ classes }}' {% if disabled %}disabled{% endif %} type='{{ type|default('button') }}'>

components/Molecules/Button/button.css

@@ -13,7 +13,6 @@
   font-weight: var(--font-weight-button-medium);
 
   & > span.icon {
-    color: var(--white);
     @apply w-5 h-5;
     &-left {
       padding-right: rem-convert(6px);
@@ -147,6 +146,9 @@
   &--rectangle {
     border-radius: rem-convert(7px);
   }
+  &--sharp {
+    border-radius:0;
+  }
 }
 
 

components/Organisms/Card/PickupPoint/PickupPoint.js

@@ -1,12 +1,25 @@
-
-export function pickupPoint() {
+export function pickupPointHours() {
   const buttons = document.querySelectorAll('.PickupPoint-hours');
 
   buttons.forEach((button) => {
     button.addEventListener('click', function () {
-      const parent = this.closest(".PickupPoint");
+      const parent = this.closest('.PickupPoint');
       const hoursListing = parent.querySelector('.PickupPoint-hoursListing');
-      hoursListing.classList.toggle("md:hidden");
+      hoursListing.classList.toggle('md:hidden');
+    });
+  });
+}
+export function pickupPoint() {
+  const inputs = document.querySelectorAll('.PickupPoint input[type="radio"]');
+
+  inputs.forEach((input) => {
+    input.addEventListener('change', function () {
+      const allPickupPoints = document.querySelectorAll('.PickupPoint');
+      allPickupPoints.forEach((pickupPoint) => {
+        pickupPoint.classList.remove('selected');
+      });
+      const parent = this.closest('.PickupPoint');
+      parent.classList.toggle('selected', input.checked);
     });
   });
 }

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

@@ -1,5 +1,5 @@
 import PickupPoint from './PickupPoint.twig';
-import { pickupPoint } from './PickupPoint';
+import { pickupPointHours, pickupPoint } from './PickupPoint';
 import PickupPointDrawer from './PickupPointDrawer.twig';
 import MobileDrawerInit from '../../../../assets/js/mobileDrawer';
 
@@ -27,6 +27,7 @@ const hours = [
 export const Base = {
   render: (args) => `<div class='max-w-[340px]'>${PickupPoint(args)}</div>`,
   play: () => {
+    pickupPointHours();
     pickupPoint();
   },
   args: {

components/Organisms/Card/PickupPoint/PickupPoint.twig

@@ -15,7 +15,7 @@
     </span>
   </label>
   <div class='PickupPoint-bottom'>
-          <button class='PickupPoint-hours'>{{ source("/icons/clock.svg") }}Horaires</button>
+          <button class='PickupPoint-hours underline-with-icon' type='button'>{{ source("/icons/clock.svg") }}Horaires</button>
           {% if img.src %}
             <img src="{{ img.src }}" alt="{{ img.alt|default('Logo Pickup') }}" loading="lazy">
           {% endif %}

components/Organisms/Card/PickupPoint/pickupPoint.css

@@ -1,6 +1,6 @@
 .PickupPoint {
-  background: var(--theme-lightest);
-  border: 1px solid var(--theme-lightest);
+  background: var(--theme-lighter);
+  border: 1px solid var(--theme-lighter);
   border-radius: rem-convert(8px);
   padding: rem-convert(16px);
 
@@ -58,16 +58,6 @@
       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;

components/Organisms/Modules/PickupPointModule/PickupPointModule.stories.js

@@ -0,0 +1,74 @@
+import PickupPointModule from './PickupPointModule.twig';
+import {
+  pickupPoint,
+  pickupPointHours
+} from '../../Card/PickupPoint/PickupPoint';
+
+export default {
+  title: 'Design System/Organisms/Modules/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) => PickupPointModule(args),
+  play: () => {
+    pickupPointHours();
+    pickupPoint();
+  },
+  args: {
+    selected: false,
+    title: 'Retrait en point relais',
+    price: '7,80€',
+    carbone: '0.12kg CO2',
+    pickupServices: [
+      {
+        name: 'Mondial relais',
+        value: 'mondial_relais',
+        img: '/images/mondialRelay.svg'
+      },
+      {
+        name: 'Relais colis',
+        value: 'relais_colis'
+      }
+    ],
+    pickups: [
+      {
+        selected: false,
+        closed: false,
+        title: 'Nom du point relais',
+        date: 'JJ/MM',
+        address,
+        price: '7,80€',
+        img: { alt: 'Logo Mondial Relay', src: '/images/mondialRelay.svg' },
+        hours
+      },
+      {
+        selected: false,
+        closed: true,
+        title: 'Nom du point relais',
+        date: 'JJ/MM',
+        address,
+        price: '7,80€',
+        img: { alt: 'Logo Mondial Relay', src: '/images/mondialRelay.svg' },
+        hours
+      }
+    ]
+  },
+  argTypes: {}
+};

components/Organisms/Modules/PickupPointModule/PickupPointModule.twig

@@ -0,0 +1,55 @@
+<div class='PickupPointModule {% if selected %}selected{% endif %}'>
+  <label class='PickupPointModule-content'>
+    {% include '../../../Atoms/Form/Radio.twig' with {type:"span", name:"PickupPoint", value:1, checked:selected} %}
+  <span>
+      <span class='PickupPointModule-top'>
+      <span>
+        <span class='PickupPointModule-title'>{{ title }}</span>
+        <span class='PickupPointModule-description'>Livraison estimée le {{ date }}</span>
+      </span>
+      <span class="w-12 h-12 text-theme-medium">
+        {{ source("/icons/reinsurance-pickup.svg") }}
+      </span>
+    </span>
+    <div class='flex items-center justify-between mt-6'>
+      <span class='PickupPointModule-price'>{{ price }}</span>
+      {% include '../../../Molecules/Tag/Tag.twig' with { icon: "carbone", customText: carbone } %}
+    </div>
+  </span>
+  </label>
+  <div class='PickupPointModule-searchZone'>
+    <div>
+      {% include '../../../Molecules/Fields/FieldInput/FieldInput.twig' with { label: "Rechercher un lieu de livraison", placeholder: "Ex : Ville, Code postal", iconButton: "search" } %}
+    </div>
+    <div>
+      <button class='underline-with-icon text-black' type='button'>{{ source("/icons/pin-circle.svg") }}Sélectionner sur la carte</button>
+    </div>
+    <div class='flex gap-1 md:gap-5'>
+      {% include '../../../Molecules/Button/Button.twig' with {classes: 'PickupPointModule-buttonView', text: 'Vue carte', sharp:true, icon_left: 'list', variant: 'secondary'} %}
+      {% include '../../../Molecules/Button/Button.twig' with {classes: 'PickupPointModule-buttonView', text: 'Vue carte', sharp:true, icon_left: 'pin-circle'} %}
+    </div>
+    <div class='paragraph-6 mt-5'>3 points relais trouvés</div>
+    <div class='mt-3 text-black xl:flex gap-10'>
+      {% for pickupService in pickupServices %}
+        <label class="Checkbox">
+          <input type="checkbox"
+                 name='pickup'
+                 value='{{ pickupService.value }}'
+          >
+          <div class="checkmark">
+            <span>{{ source("/icons/checkbox.svg") }}</span>
+          </div>
+          <span>{{ pickupService.name }}</span>
+          {% if pickupService.img %}
+            <span><img src='{{ pickupService.img }}' alt='Logo {{ pickupService.name }}'></span>
+          {% endif %}
+        </label>
+      {% endfor %}
+    </div>
+    <div class='mt-6 flex flex-col gap-2'>
+      {% for pickup in pickups %}
+      {% include '../../Card/PickupPoint/PickupPoint.twig' with pickup %}
+      {% endfor %}
+    </div>
+  </div>
+</div>

components/Organisms/Modules/PickupPointModule/pickupPointModule.css

@@ -0,0 +1,76 @@
+.PickupPointModule {
+  max-width: rem-convert(340px);
+  @screen md {
+    max-width: rem-convert(444px);
+  }
+  @screen xl {
+    max-width: rem-convert(540px);
+  }
+  background: var(--theme-lightest);
+  border: 1px solid var(--theme-lightest);
+  border-radius: rem-convert(8px);
+
+  &-searchZone {
+    display: none;
+  }
+  &.selected {
+    border: 1px solid var(--theme-medium);
+    .PickupPointModule-content {
+      background: var(--theme-lighter);
+      border-top-left-radius: rem-convert(8px);
+      border-top-right-radius: rem-convert(8px);
+    }
+    .PickupPointModule-searchZone {
+      display: block;
+      padding: rem-convert(16px);
+      padding-top: rem-convert(30px);
+      @screen md {
+        padding: rem-convert(40px);
+
+      }
+    }
+  }
+
+  &-content {
+    display: flex;
+    align-items: flex-start;
+    padding: rem-convert(16px);
+    & > span:last-child {
+      flex-grow: 1;
+    }
+    .Radio {
+      margin-top: 4px;
+      margin-right: 8px;
+    }
+    span:not(.PickupPointModule-top):not(.Tag) {
+      display: block;
+    }
+    .PickupPointModule-top {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  &-title {
+    @apply paragraph-1;
+    font-weight: 600;
+    color: var(--black);
+  }
+
+  &-description {
+    @apply paragraph-6;
+    color: var(--grey);
+    margin-top: rem-convert(4px);
+  }
+
+  &-price {
+    @apply paragraph-4;
+    font-weight: 600;
+    color: var(--black);
+  }
+  &-buttonView {
+    @screen maxMd {
+      @apply Button--small Button--fill;
+    }
+  }
+}

components/base.css

@@ -41,3 +41,16 @@ svg {
     }
   }
 }
+
+.underline-with-icon {
+  display: flex;
+  gap: rem-convert(6px);
+  align-items: center;
+  text-decoration: underline;
+  margin-top: rem-convert(10px);
+  margin-bottom: rem-convert(10px);
+  svg {
+    width: rem-convert(18px);
+    height: rem-convert(18px);
+  }
+}