fix summary card

thelia · Jul 5, 2024 · 5eba614 · 5eba614
1 parent b00a0ad
commit 5eba614
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/components/Organisms/Modules/StoreDelivery/StoreDelivery.js b/components/Organisms/Modules/StoreDelivery/StoreDelivery.js
@@ -5,7 +5,13 @@ export function storeDelivery() {
     button.addEventListener('click', function () {
       const parent = this.closest('.StoreDelivery');
       const hoursListing = parent.querySelector('.StoreDelivery-hoursListing');
-      hoursListing.classList.toggle('md:hidden');
+      const isOpen = hoursListing.classList.toggle('md:hidden');
+      textShowHours(isOpen, button);
     });
   });
 }
+
+function textShowHours(isOpen = true, button) {
+  const text = isOpen ? button.dataset.showHours : button.dataset.hideHours;
+  button.querySelector('span').textContent = text;
+}
diff --git a/components/Organisms/Modules/StoreDelivery/StoreDelivery.stories.js b/components/Organisms/Modules/StoreDelivery/StoreDelivery.stories.js
@@ -14,8 +14,8 @@ const address = {
 };
 
 const hours = [
-  { day: 'lundi', hours: '14h - 19h' },
-  { day: 'mardi', hours: '14h - 20h' },
+  { 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' },
@@ -38,7 +38,8 @@ export const Base = {
     address: address,
     price: 'Gratuit',
     img: { alt: 'Logo Mondial Relay', src: '/images/mondialRelay.svg' },
-    hours
+    hours,
+    carbone: '0.12kg CO2'
   },
   argTypes: {
     date: { control: { type: 'text' } }

diff --git a/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig b/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig
@@ -15,6 +15,7 @@
   phone: '',
 }) %}
 {% set hours = hours|default([]) %} {# hours: [{ day: 'lundi', hours: '14h - 19h' }, ...] #}
+{% set carbone = carbone|default(null) %}
 
 <div class='StoreDelivery {% if selected %}selected{% endif %}'>
   <label class='StoreDelivery-content'>
@@ -32,7 +33,9 @@
         </div>
         <div class='flex items-center justify-between mt-6'>
           <span class='StoreDelivery-price'>{{ price }}</span>
-          {% include '../../../Molecules/Tag/Tag.twig' with { icon: "carbone", customText: "0.12kg CO2" } %}
+          {% if carbone %}
+            {% include '../../../Molecules/Tag/Tag.twig' with { icon: "carbone", customText: carbone} %}
+          {% endif %}
         </div>
 
         {% if registeredClient and newClient == false %}
@@ -60,9 +63,9 @@
   </label>
   {% if newClient == false %}
   <div class='StoreDelivery-bottom'>
-    <button class='StoreDelivery-hours'>{{ source("/icons/clock.svg") }}Horaires du magasin</button>
+    <button class='StoreDelivery-hours' data-show-hours='Voir les horaires' data-hide-hours='Masquer les horaires'>{{ source("/icons/clock.svg") }}<span>Voir les horaires</span></span></button>
   </div>
-  <div class='StoreDelivery-hoursListing'>
+  <div class='StoreDelivery-hoursListing md:hidden'>
     <table>
       {% for hour in hours %}
         <tr>

diff --git a/components/Organisms/Modules/StoreDelivery/storeDelivery.css b/components/Organisms/Modules/StoreDelivery/storeDelivery.css
@@ -56,9 +56,10 @@
   &-hoursListing {
     margin-top: rem-convert(16px);
     padding-top: rem-convert(16px);
-    @apply paragraph-4;
+    @apply paragraph-5;
     td:first-child {
       padding-right: rem-convert(40px);
+      font-weight: 700;
     }
   }
   &-hours {