fixs review anais

Author: leanormandon

components/Molecules/ItemHeader/ItemHeader.stories.js

@@ -5,9 +5,10 @@ export default {
 };
 
 export const Base = {
-  render: (args) => ItemHeader(args),
+  render: (args) =>
+    `<div class='h-[78px]'><ul class="flex h-full">${ItemHeader(args)}</ul></div>`,
   args: {
-    customText: "Item menu",
-    href: "",
-  },
+    customText: 'Item menu',
+    href: ''
+  }
 };

components/Molecules/OrderTag/OrderTag.css

@@ -15,6 +15,12 @@
     margin-right: rem-convert(6px);
   }
 
+  &--withoutChip {
+    &:before {
+      content: none;
+    }
+  }
+
   &--informative {
     background-color: var(--informative-lightest);
     border: 1px solid var(--informative);

components/Molecules/OrderTag/OrderTag.stories.js

@@ -7,21 +7,30 @@ export default {
 export const Base = {
   render: (args) => OrderTag(args),
   args: {
-    customText: "Commande validée",
+    customText: 'Commande validée',
+    withoutChip: false
   },
   argTypes: {
     variant: {
-      options: ['informative', 'success', 'validated', 'grey', 'error', 'processing', 'warning', 'vermillon'],
-      control: { type: 'select' },
+      options: [
+        'informative',
+        'success',
+        'validated',
+        'grey',
+        'error',
+        'processing',
+        'warning',
+        'vermillon'
+      ],
+      control: { type: 'select' }
     },
     type: {
       options: ['outline', 'minimal'],
-      control: { type: 'select' },
+      control: { type: 'select' }
     }
-  },
+  }
 };
 
-
 export const Variants = {
   render: () => `
     <h2 class="font-bold text-lg">Status Commande</h2>
@@ -62,4 +71,4 @@ export const Variants = {
     validated : 
     ${OrderTag({ customText: 'Epuisé', variant: 'error', type: 'minimal' })}</div>
   `
-}
+};

components/Molecules/OrderTag/OrderTag.twig

@@ -1,10 +1,12 @@
 {% set customText = customText|default('') %}
 {% set variant = variant|default('informative') %}
 {% set type = type|default('outline') %}
+{% set withoutChip = withoutChip|default(false) %}
 
 
 {% set classes = '' %}
 {% set classes = classes ~ ' OrderTag--' ~ variant %}
 {% set classes = classes ~ ' OrderTag--' ~ type %}
+{% if withoutChip %}{% set classes = classes ~ ' OrderTag--withoutChip' %}{% endif %}
 
 <span class="OrderTag{{ classes }}">{{ customText }}</span>

components/Molecules/Tooltip/tooltip.css

@@ -17,7 +17,6 @@
     width: max-content;
     background-color: var(--black);
     color: var(--white);
-    text-align: center;
     padding: rem-convert(22px) rem-convert(34px) rem-convert(22px)
       rem-convert(20px);
     border-radius: 8px;

components/Organisms/Card/PickupPoint/pickupPoint.css

@@ -97,6 +97,7 @@
     @apply h4;
     font-weight: 700;
     color: var(--black);
+    margin-bottom: rem-convert(16px);
   }
   &-address {
     @apply paragraph-2;

components/Organisms/ProductCard/ProductCard.stories.js

@@ -11,7 +11,8 @@ export default {
 };
 
 export const standard = {
-  render: (args) => Standard(args),
+  render: (args) =>
+    `<div class='max-w-[187px] sm:max-w-[340px] lg:max-w-[400px]'>${Standard(args)}</div>`,
   args: {
     productTitle: 'Nom du produit',
     secondaryTitle: 'Titre secondaire',

components/Organisms/SimilarContentCard/similarContentCard.css

@@ -16,6 +16,7 @@
     @apply paragraph-2;
     font-weight: 700;
     color: var(--black);
+    margin-bottom: rem-convert(8px);
   }
   &-footer {
     @apply paragraph-6;