From 98e0034eadf14cf5633424d2763220c1af080d2c Mon Sep 17 00:00:00 2001
From: lnormandon <lnormandon@openstudio.fr>
Date: Tue, 2 Jul 2024 12:16:34 +0200
Subject: [PATCH] Add defaults values EVERYWHERE

---
 components/Atoms/Form/Checkbox.twig           | 10 ++++-
 components/Atoms/Form/Radio.twig              | 13 +++++-
 components/Atoms/Form/Toggle.twig             | 12 ++++-
 .../Layout/CrossSelling/CrossSelling.twig     |  4 ++
 components/Layout/Footer/Footer.twig          |  2 +
 components/Layout/Footer/FooterCheckout.twig  |  2 +-
 components/Layout/Header/Header.twig          |  2 +
 components/Layout/Header/HeaderCheckout.twig  |  2 +
 .../ProductCategory/ProductCategory.twig      |  3 ++
 .../PromotionalBanner/PromotionalBanner.twig  |  5 +++
 .../Layout/Reinsurance/Reinsurance.twig       |  2 +
 components/Layout/Review/Review.twig          |  4 ++
 .../Layout/SimilarContent/SimilarContent.twig |  4 ++
 .../Category/SubheaderCategory.stories.js     |  1 +
 .../Subheader/Category/SubheaderCategory.twig |  6 ++-
 .../ContentPage/SubheaderContentPage.twig     |  4 ++
 .../Subheader/Orders/SubheaderOrders.twig     |  2 +
 .../SearchResult/SubheaderSearch.stories.js   |  3 +-
 .../SearchResult/SubheaderSearch.twig         |  5 ++-
 .../Subheader/TitleOnly/SubheaderTitle.twig   |  3 ++
 components/Molecules/Accordion/Accordion.twig |  5 ++-
 .../Molecules/Breadcrumb/Breadcrumb.twig      |  7 ++-
 components/Molecules/Button/Button.twig       | 10 ++++-
 components/Molecules/Button/Quantity.twig     |  6 ++-
 .../Molecules/Button/QuantityButton.twig      |  6 +++
 components/Molecules/Dropdown/Dropdown.twig   |  4 ++
 components/Molecules/Favorite/Favorite.twig   |  3 ++
 .../Fields/FieldInput/FieldInput.twig         | 29 +++++++++---
 .../Fields/FieldNumber/FieldNumber.twig       |  8 ++++
 .../Fields/FieldSelect/FieldSelect.twig       | 10 +++++
 .../Filters/FilterList/FilterList.twig        |  4 ++
 .../Filters/FilterPill/FilterPill.twig        | 12 ++++-
 .../Filters/FilterSelect/FilterSelect.twig    |  5 +++
 .../Molecules/HeaderButton/HeaderButton.twig  | 27 +++++++----
 .../Molecules/ItemHeader/ItemHeader.twig      |  5 +++
 components/Molecules/Link/Link.twig           |  7 +++
 components/Molecules/OrderTag/OrderTag.twig   |  9 +++-
 .../Molecules/Pagination/Pagination.twig      |  6 +++
 components/Molecules/RadioCard/RadioCard.twig |  8 +++-
 components/Molecules/SearchBar/Base.twig      |  2 -
 components/Molecules/SearchBar/SearchBar.twig |  8 +++-
 components/Molecules/Shortcut/Shortcut.twig   |  4 ++
 components/Molecules/Step/Steps.twig          |  7 ++-
 components/Molecules/Tab/Tab.twig             |  6 +++
 components/Molecules/Tag/Tag.twig             |  6 +++
 components/Molecules/Tooltip/Tooltip.twig     |  5 ++-
 components/Molecules/userMenu/UserMenu.twig   |  6 ++-
 components/Organisms/AddToCart/AddToCart.twig |  4 ++
 .../Organisms/Card/Address/AddressCard.twig   | 16 +++++++
 .../Card/Address/ClientAddressCard.twig       | 12 +++++
 .../Organisms/Card/Article/Article.stories.js | 10 ++---
 .../Organisms/Card/Article/Article.twig       |  6 ++-
 .../Organisms/Card/Order/OrderCard.twig       |  7 +++
 .../Organisms/Card/Payment/PaymentCard.twig   | 45 +++++++++++--------
 .../Card/PickupPoint/PickupPoint.twig         | 16 ++++++-
 .../Card/PickupPoint/PickupPointDrawer.twig   | 10 +++++
 components/Organisms/Card/Review/Review.twig  |  6 +++
 .../SelfPromotion/SelfPromotion.stories.js    |  6 +--
 .../Card/SelfPromotion/SelfPromotion.twig     |  6 ++-
 .../Organisms/Card/StoreInfo/StoreInfo.twig   | 12 +++++
 .../Card/SuggestFilters/SuggestFilters.twig   |  3 ++
 .../Card/Transporter/Transporter.twig         |  8 +++-
 .../CategoryCard/CategoryCard.stories.js      |  1 +
 .../Organisms/CategoryCard/CategoryCard.twig  | 14 +++---
 .../Modules/Filters/FilterClassic.twig        |  3 ++
 .../Modules/Filters/FilterColor.twig          |  2 +
 .../Organisms/Modules/Filters/filters.css     |  0
 .../Modules/HomeDelivery/HomeDelivery.twig    | 15 +++++++
 .../Organisms/Modules/Payment/Payment.twig    |  3 ++
 .../PickupPointModule/PickupPointModule.twig  |  8 ++++
 .../Modules/StoreDelivery/StoreDelivery.twig  | 18 ++++++++
 .../Organisms/ProductCard/ProductCard.twig    | 45 +++++++++++--------
 .../Organisms/ProductCard/PurchaseFunnel.twig |  6 ++-
 .../Organisms/Reinsurance/Reinsurance.twig    |  1 +
 .../SimilarContentCard.stories.js             |  3 +-
 .../SimilarContentCard.twig                   | 18 ++++----
 .../Organisms/SnackBar/SnackBar.stories.js    | 13 ++++--
 components/Organisms/SnackBar/SnackBar.twig   | 16 ++++---
 .../SummaryCard/SummaryCard.stories.js        |  5 ++-
 .../Organisms/SummaryCard/SummaryCard.twig    | 17 ++++---
 80 files changed, 534 insertions(+), 125 deletions(-)
 delete mode 100644 components/Organisms/Modules/Filters/filters.css

diff --git a/components/Atoms/Form/Checkbox.twig b/components/Atoms/Form/Checkbox.twig
index 6777c3d..76227f0 100644
--- a/components/Atoms/Form/Checkbox.twig
+++ b/components/Atoms/Form/Checkbox.twig
@@ -1,4 +1,12 @@
-<label class="Checkbox {{ classes|default('') }} {{ error ? 'error'  : ''}}">
+{% set classes = classes|default('') %}
+{% set error = error|default('') %}
+{% set name = name|default('') %}
+{% set value = value|default('') %}
+{% set disabled = disabled|default(false) %}
+{% set checked = checked|default(false) %}
+{% set label = label|default('') %}
+
+<label class="Checkbox {{ classes }} {{ error ? 'error'  : ''}}">
   <input type="checkbox"
          name='{{ name }}'
          value='{{ value }}'
diff --git a/components/Atoms/Form/Radio.twig b/components/Atoms/Form/Radio.twig
index f1dcd95..d7e9022 100644
--- a/components/Atoms/Form/Radio.twig
+++ b/components/Atoms/Form/Radio.twig
@@ -1,9 +1,18 @@
+{% set classes = classes|default('') %}
+{% set error = error|default(0) %}
+{% set name = name|default('') %}
+{% set value = value|default('') %}
+{% set id = id|default(0) %}
+{% set disabled = disabled|default(false) %}
+{% set checked = checked|default(false) %}
+{% set label = label|default('') %}
 {% set type = type|default('label') %}
-<{{ type }} class="Radio {{ classes|default('') }} {{ error|default(0) ? 'error'  : ''}}">
+
+<{{ type }} class="Radio {{ classes }} {{ error ? 'error'  : ''}}">
   <input
     type="radio"
     name='{{ name }}'
-    value='{{ value|default('') }}'
+    value='{{ value }}'
     {% if id %}id='{{ id }}'{% endif %}
     {% if disabled %}disabled{% endif %}
     {% if checked %}checked{% endif %}
diff --git a/components/Atoms/Form/Toggle.twig b/components/Atoms/Form/Toggle.twig
index 4340fce..ca37c07 100644
--- a/components/Atoms/Form/Toggle.twig
+++ b/components/Atoms/Form/Toggle.twig
@@ -1,4 +1,14 @@
-<label class="ToggleButton  {{ classes|default('') }} {{ error ? 'error'  : ''}}">
+{% set classes = classes|default('') %}
+{% set error = error|default(0) %}
+{% set name = name|default('') %}
+{% set value = value|default('') %}
+{% set disabled = disabled|default(false) %}
+{% set checked = checked|default(false) %}
+{% set labelOff = labelOff|default(null) %}
+{% set labelOn = labelOn|default(null) %}
+
+
+<label class="ToggleButton  {{ classes }} {{ error ? 'error'  : ''}}">
   <input type="checkbox"
          name='{{ name }}'
          value='{{ value }}'
diff --git a/components/Layout/CrossSelling/CrossSelling.twig b/components/Layout/CrossSelling/CrossSelling.twig
index ae2d865..3bbeca4 100644
--- a/components/Layout/CrossSelling/CrossSelling.twig
+++ b/components/Layout/CrossSelling/CrossSelling.twig
@@ -1,3 +1,7 @@
+{% set title = title|default('') %}
+{% set products = products|default([]) %}
+{% set button = button|default({label:"", href:""}) %}
+
 <div class='xl:container xl:mx-auto'>
 	<div class='pb-6 text-black h2'>{{ title }}</div>
 </div>
diff --git a/components/Layout/Footer/Footer.twig b/components/Layout/Footer/Footer.twig
index 26fbceb..eac0198 100644
--- a/components/Layout/Footer/Footer.twig
+++ b/components/Layout/Footer/Footer.twig
@@ -1,3 +1,5 @@
+{% set withNewsletter = withNewsletter|default(false) %}
+
 {% set footerLinksClasses = 'flex flex-col gap-2 md:gap-6 md:flex-row lg:flex-col Footer-links mb-[30px] md:mb-0 md:pb-[70px] md:px-[50px] md:pt-[30px] md:border-t md:border-t-grey-lighter lg:border-none ' %}
 {% if withNewsletter %}
 	{% set footerLinksClasses = footerLinksClasses ~ 'md:col-span-2 lg:col-span-1 text-black' %}
diff --git a/components/Layout/Footer/FooterCheckout.twig b/components/Layout/Footer/FooterCheckout.twig
index 61c45da..1fb1336 100644
--- a/components/Layout/Footer/FooterCheckout.twig
+++ b/components/Layout/Footer/FooterCheckout.twig
@@ -18,4 +18,4 @@
 		</li>
 	</ul>
 	<span class='text-grey indication indication-small'>© OpenStudio - 2024</span>
-</div</footer>
+</footer>
diff --git a/components/Layout/Header/Header.twig b/components/Layout/Header/Header.twig
index c476bad..2ff82c1 100644
--- a/components/Layout/Header/Header.twig
+++ b/components/Layout/Header/Header.twig
@@ -1,3 +1,5 @@
+{% set type = type|default("generic") %}
+
 <header class='Header  {% if type == "sticky" %}is-sticky{% endif %} {% if type == "searchbar" %}Header--withSearchBar{% endif %}'>
 	<div class='flex'>
 		{% if type == "searchbar" %}
diff --git a/components/Layout/Header/HeaderCheckout.twig b/components/Layout/Header/HeaderCheckout.twig
index adff0a2..2ebce31 100644
--- a/components/Layout/Header/HeaderCheckout.twig
+++ b/components/Layout/Header/HeaderCheckout.twig
@@ -1,3 +1,5 @@
+{% set classes = classes|default('') %}
+
 <header class='HeaderCheckout flex justify-between items-center {{ classes }} h-12 xl:h-20 px-6  relative'>
 	<div class='xl:mx-auto Header-logo'>{{ source("/icons/thelia.svg") }}</div>
 	<div class='flex sm:absolute sm:right-6 HeaderCheckout-reassurance top-1/2 sm:-translate-y-1/2  items-center gap-[2px]'>
diff --git a/components/Layout/ProductCategory/ProductCategory.twig b/components/Layout/ProductCategory/ProductCategory.twig
index a12f61c..adb1535 100644
--- a/components/Layout/ProductCategory/ProductCategory.twig
+++ b/components/Layout/ProductCategory/ProductCategory.twig
@@ -1,3 +1,6 @@
+{% set title = title|default('') %}
+{% set categories = categories|default([]) %}
+
 <div class='xl:container xl:mx-auto'>
   <h2 class='h2 text-black pb-6'>{{ title }}</h2>
 </div>
diff --git a/components/Layout/PromotionalBanner/PromotionalBanner.twig b/components/Layout/PromotionalBanner/PromotionalBanner.twig
index 8079b62..259affe 100644
--- a/components/Layout/PromotionalBanner/PromotionalBanner.twig
+++ b/components/Layout/PromotionalBanner/PromotionalBanner.twig
@@ -1,3 +1,8 @@
+{% set text = text|default('') %}
+{% set type = type|default('button') %}
+{% set linkLabel = type|default('') %}
+{% set link = type|default('') %}
+
 <div class='PromotionalBanner'>
   <div class='PromotionalBanner-header'>
     <button type='button' class='PromotionalBanner-close' data-promotional-banner-close>{{ source("/icons/close.svg") }}</button>
diff --git a/components/Layout/Reinsurance/Reinsurance.twig b/components/Layout/Reinsurance/Reinsurance.twig
index 7916229..93cbb60 100644
--- a/components/Layout/Reinsurance/Reinsurance.twig
+++ b/components/Layout/Reinsurance/Reinsurance.twig
@@ -1,3 +1,5 @@
+{% set data = data|default([]) %}
+
 <div class='ReinsuranceModule'>
   <div class='ReinsuranceModule-wrapper'>
     {% for reinsurance in data %}
diff --git a/components/Layout/Review/Review.twig b/components/Layout/Review/Review.twig
index 0e09aec..ae36024 100644
--- a/components/Layout/Review/Review.twig
+++ b/components/Layout/Review/Review.twig
@@ -1,3 +1,7 @@
+{% set title = title|default('') %}
+{% set reviews = reviews|default([]) %}
+{% set button = button|default({label:"", href:""}) %}
+
 <div class='xl:container xl:mx-auto'>
   <div class='h4 text-black pb-6'>{{ title }}</div>
 </div>
diff --git a/components/Layout/SimilarContent/SimilarContent.twig b/components/Layout/SimilarContent/SimilarContent.twig
index 05f0ded..fb77b97 100644
--- a/components/Layout/SimilarContent/SimilarContent.twig
+++ b/components/Layout/SimilarContent/SimilarContent.twig
@@ -1,3 +1,7 @@
+{% set title = title|default('') %}
+{% set similarContents = similarContents|default([]) %}
+{% set button = button|default({label:"", href:""}) %}
+
 <div class='xl:container xl:mx-auto'>
   <div class='h4 text-black pb-6'>{{ title }}</div>
 </div>
diff --git a/components/Layout/Subheader/Category/SubheaderCategory.stories.js b/components/Layout/Subheader/Category/SubheaderCategory.stories.js
index 9257165..677ec82 100644
--- a/components/Layout/Subheader/Category/SubheaderCategory.stories.js
+++ b/components/Layout/Subheader/Category/SubheaderCategory.stories.js
@@ -8,6 +8,7 @@ export const base = {
   render: (args) => SubheaderCategory(args),
   args: {
     title: 'Nom de la catégorie',
+    nbProducts: 16,
     description:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...'
   },
diff --git a/components/Layout/Subheader/Category/SubheaderCategory.twig b/components/Layout/Subheader/Category/SubheaderCategory.twig
index 8569c51..dc56cd2 100644
--- a/components/Layout/Subheader/Category/SubheaderCategory.twig
+++ b/components/Layout/Subheader/Category/SubheaderCategory.twig
@@ -1,3 +1,7 @@
+{% set title = title|default('') %}
+{% set description = description|default('') %}
+{% set nbProducts = nbProducts|default(0) %}
+
 <div class='Subheader Subheader--category'>
   <div class='container mx-auto flex flex-col'>
     <h1 class='Subheader-title'>{{ title }}</h1>
@@ -8,7 +12,7 @@
       <a href='#' class='link-large'>Lire la suite</a>
     </div>
     <div class='Subheader-info Subheader-info--category'>
-      <div>16 produit(s)</div>
+      <div>{{ nbProducts }} produit(s)</div>
       {% include '../../../Molecules/Button/Button.twig' with {text: 'Filtrer & trier',icon_left:'filter', variant: 'secondary'} %}
     </div>
   </div>
diff --git a/components/Layout/Subheader/ContentPage/SubheaderContentPage.twig b/components/Layout/Subheader/ContentPage/SubheaderContentPage.twig
index c8a85a3..4808fe0 100644
--- a/components/Layout/Subheader/ContentPage/SubheaderContentPage.twig
+++ b/components/Layout/Subheader/ContentPage/SubheaderContentPage.twig
@@ -1,3 +1,7 @@
+{% set title = title|default('') %}
+{% set description = description|default('') %}
+{% set img = img|default({src:'/images/placeholder2.webp', alt:""}) %}
+
 <div class='Subheader Subheader--contentPage'>
   <div class='Subheader-image'>
     <img src='{{ img.src }}' alt='{{ img.alt }}'  loading="lazy" />
diff --git a/components/Layout/Subheader/Orders/SubheaderOrders.twig b/components/Layout/Subheader/Orders/SubheaderOrders.twig
index af2290e..43eeae7 100644
--- a/components/Layout/Subheader/Orders/SubheaderOrders.twig
+++ b/components/Layout/Subheader/Orders/SubheaderOrders.twig
@@ -1,3 +1,5 @@
+{% set title = title|default('') %}
+
 <div class='Subheader Subheader--orders'>
   <div class='container mx-auto flex flex-col items-center'>
     <h1 class='Subheader-title'>{{ title }}</h1>
diff --git a/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js b/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js
index c29f21b..277c2f4 100644
--- a/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js
+++ b/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js
@@ -7,7 +7,8 @@ export default {
 export const base = {
   render: (args) => SubheaderSearch(args),
   args: {
-    title: 'Résultat de recherche'
+    title: 'Résultat de recherche',
+    nbProducts: 16
   },
   argTypes: {}
 };
diff --git a/components/Layout/Subheader/SearchResult/SubheaderSearch.twig b/components/Layout/Subheader/SearchResult/SubheaderSearch.twig
index 9fdeea3..a149ad4 100644
--- a/components/Layout/Subheader/SearchResult/SubheaderSearch.twig
+++ b/components/Layout/Subheader/SearchResult/SubheaderSearch.twig
@@ -1,3 +1,6 @@
+{% set title = title|default('') %}
+{% set nbProducts = nbProducts|default(0) %}
+
 <div class='Subheader Subheader--search'>
   <div class='container mx-auto flex flex-col'>
     <h1 class='Subheader-title Subheader-title--search'>{{ title }}</h1>
@@ -6,7 +9,7 @@
 
     </div>
     <div class='Subheader-info'>
-      <div>16 produit(s)</div>
+      <div>{{ nbProducts}} produit(s)</div>
       {% include '../../../Molecules/Button/Button.twig' with {text: 'Filtrer & trier',icon_left:'filter', variant: 'secondary'} %}
     </div>
   </div>
diff --git a/components/Layout/Subheader/TitleOnly/SubheaderTitle.twig b/components/Layout/Subheader/TitleOnly/SubheaderTitle.twig
index 21d1b7c..bff44ba 100644
--- a/components/Layout/Subheader/TitleOnly/SubheaderTitle.twig
+++ b/components/Layout/Subheader/TitleOnly/SubheaderTitle.twig
@@ -1,4 +1,7 @@
 {% set tag = tag|default('h1') %}
+{% set position = position|default('left') %}
+{% set title = title|default('') %}
+
 <div class='Subheader Subheader-titleOnly  {% if position == 'centered' %}Subheader-centered{% endif %}'>
   <div class='container mx-auto'>
     <{{ tag }} class='Subheader-title'>{{ title }}</{{ tag }}>
diff --git a/components/Molecules/Accordion/Accordion.twig b/components/Molecules/Accordion/Accordion.twig
index c01016f..0951b02 100644
--- a/components/Molecules/Accordion/Accordion.twig
+++ b/components/Molecules/Accordion/Accordion.twig
@@ -1,5 +1,8 @@
 {% set classes = '' %}
-{% set classes = classes ~ ' Accordion--' ~ (variant|default('text')) %}
+{% set variant = variant|default('text') %}
+{% set classes = classes ~ ' Accordion--' ~ variant %}
+{% set title = title|default('') %}
+{% set content = content|default('') %}
 
 <details class='Accordion{{ classes }}'>
   <summary class='Accordion-summary'>
diff --git a/components/Molecules/Breadcrumb/Breadcrumb.twig b/components/Molecules/Breadcrumb/Breadcrumb.twig
index 2f9146e..86cfdc0 100644
--- a/components/Molecules/Breadcrumb/Breadcrumb.twig
+++ b/components/Molecules/Breadcrumb/Breadcrumb.twig
@@ -1,3 +1,6 @@
+{% set classes = classes|default('') %}
+{% set items = items|default([]) %}
+
 <nav class="Breadcrumb{{ classes }}" aria-label="Fil d'Ariane">
   <ol class="Breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">
     {% if items.length > 3 %}
@@ -23,7 +26,3 @@
     {% endfor %}
   </ol>
 </nav>
-
-
-
-
diff --git a/components/Molecules/Button/Button.twig b/components/Molecules/Button/Button.twig
index d37924a..f7a42b5 100644
--- a/components/Molecules/Button/Button.twig
+++ b/components/Molecules/Button/Button.twig
@@ -1,4 +1,11 @@
 {% set classes = classes|default('') %}
+{% set text = text|default('') %}
+{% set disabled = disabled|default(false) %}
+{% set href = href|default(false) %}
+{% set type = type|default('button') %}
+{% set icon_left = icon_left|default(false) %}
+{% set icon_right = icon_right|default(false) %}
+
 {% if variant and variant != 'primary' %}{% set classes = classes ~ ' Button--' ~ variant %}{% endif %}
 {% if fill %}{% set classes = classes ~ ' Button--fill'%}{% endif %}
 {% if rectangle %}{% set classes = classes ~ ' Button--rectangle'%}{% endif %}
@@ -7,7 +14,8 @@
 {% set tag = 'button' %}
 {% if href %}{% set tag = 'a' %}{% endif %}
 
-<{{ tag }} class='Button {{ classes }}' {% if disabled %}disabled{% endif %} {% if href %}href='{{ href }}'{% else %}type='{{ type|default('button') }}'{% endif %}>
+
+<{{ tag }} class='Button {{ classes }}' {% if disabled %}disabled{% endif %} {% if href %}href='{{ href }}'{% else %}type='{{ type }}'{% endif %}>
   {% if icon_left %}
     <span class='icon icon-left'>{{ source("/icons/"~ icon_left ~".svg") }}</span>
   {% endif %}
diff --git a/components/Molecules/Button/Quantity.twig b/components/Molecules/Button/Quantity.twig
index 83b50ec..e1e2d51 100644
--- a/components/Molecules/Button/Quantity.twig
+++ b/components/Molecules/Button/Quantity.twig
@@ -1,4 +1,8 @@
-<div role="button" class='Button Button-quantity {{ classes|default('') }} {% if disabled %}disabled{% endif %}'>
+{% set classes = classes|default('') %}
+{% set value = value|default('') %}
+{% set disabled = disabled|default(false) %}
+
+<div role="button" class='Button Button-quantity {{ classes }} {% if disabled %}disabled{% endif %}'>
   <button data-qty='minus' {% if disabled %}disabled{% endif %}>-</button>
   <input type='number' {% if disabled %}disabled{% endif %} value='{{ value }}'>
   <button data-qty='plus' {% if disabled %}disabled{% endif %}>+</button>
diff --git a/components/Molecules/Button/QuantityButton.twig b/components/Molecules/Button/QuantityButton.twig
index 5e8c51a..0846407 100644
--- a/components/Molecules/Button/QuantityButton.twig
+++ b/components/Molecules/Button/QuantityButton.twig
@@ -1,3 +1,9 @@
+{% set classes = classes|default('') %}
+{% set value = value|default('') %}
+{% set disabled = disabled|default(false) %}
+{% set icon = icon|default(null) %}
+{% set text = text|default('') %}
+
 <div class='Button-quantityButton'>
   {% include './Quantity.twig' with {disabled: disabled, value:value, classes:classes} %}
   {% include './Button.twig' with {disabled: disabled, text:text, classes:classes, icon_left: icon} %}
diff --git a/components/Molecules/Dropdown/Dropdown.twig b/components/Molecules/Dropdown/Dropdown.twig
index d7949a3..c43458b 100644
--- a/components/Molecules/Dropdown/Dropdown.twig
+++ b/components/Molecules/Dropdown/Dropdown.twig
@@ -1,3 +1,7 @@
+{% set placeholder = placeholder|default(false) %}
+{% set id = id|default('') %}
+{% set options = options|default([]) %}
+
 <div class="Dropdown">
   <div class="Dropdown-current" tabindex="1">
     {% if placeholder %}
diff --git a/components/Molecules/Favorite/Favorite.twig b/components/Molecules/Favorite/Favorite.twig
index 845cbe9..86c324c 100644
--- a/components/Molecules/Favorite/Favorite.twig
+++ b/components/Molecules/Favorite/Favorite.twig
@@ -1,3 +1,6 @@
+{% set text = text|default('') %}
+{% set selected = selected|default(false) %}
+
 <button class='Favorite {% if selected %}selected{% endif %}'>
   <span class='text'>{{ text }}</span>
   <span class='star'>{{ source("/icons/star.svg") }}</span>
diff --git a/components/Molecules/Fields/FieldInput/FieldInput.twig b/components/Molecules/Fields/FieldInput/FieldInput.twig
index d7e2953..2429d30 100644
--- a/components/Molecules/Fields/FieldInput/FieldInput.twig
+++ b/components/Molecules/Fields/FieldInput/FieldInput.twig
@@ -1,15 +1,32 @@
 {% set classes = '' %}
+{% set success = success|default(false) %}
+{% set size = size|default(false) %}  {# size: 'small'|'large' #}
+{% set disabled = disabled|default(false) %}
+{% set required = required|default(false) %}
+{% set tooltip = tooltip|default(false) %}
+{% set name = name|default('') %}
+{% set label = label|default('') %}
+{% set value = value|default(null) %}
+{% set placeholder = placeholder|default(null) %}
+{% set iconButton = iconButton|default(null) %}
+{% set iconButtonLeft = iconButtonLeft|default(null) %}
+{% set min = min|default(null) %}
+{% set max = max|default(null) %}
+{% set button = button|default(null) %}
+{% set error = error|default(null) %}
+{% set type = type|default('text') %}
+
 {% if error %}
-   {% set classes = classes ~ ' FieldInput--error' %}
+  {% set classes = classes ~ ' FieldInput--error' %}
 {% endif %}
 {% if success %}
-   {% set classes = classes ~ ' FieldInput--success' %}
+  {% set classes = classes ~ ' FieldInput--success' %}
 {% endif %}
 {% if size %}
-   {% set classes = classes ~ ' FieldInput--' ~ size %}
+  {% set classes = classes ~ ' FieldInput--' ~ size %}
 {% endif %}
 {% if button %}
-   {% set classes = classes ~ ' FieldInput--withButton' %}
+  {% set classes = classes ~ ' FieldInput--withButton' %}
 {% endif %}
 
 
@@ -19,13 +36,13 @@
       {{ label }}{% if required and label %} *{% endif %}
     </label>
     {% if tooltip %}
-        {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %}
+      {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %}
     {% endif %}
   </div>
   <div class='FieldInput-blockInput {% if iconButton and iconButtonLeft %}FieldInput-blockInputIconLeft{% endif %}'>
     <input
       class='FieldInput-input{% if unit %} FieldInput-input--unit{% endif %}'
-      type='{{ type|default('text') }}'
+      type='{{ type }}'
       name='{{ name }}'
       id='{{ name }}'
       {% if value %}value='{{ value }}'{% endif %}
diff --git a/components/Molecules/Fields/FieldNumber/FieldNumber.twig b/components/Molecules/Fields/FieldNumber/FieldNumber.twig
index e872cd3..2af4085 100644
--- a/components/Molecules/Fields/FieldNumber/FieldNumber.twig
+++ b/components/Molecules/Fields/FieldNumber/FieldNumber.twig
@@ -1,3 +1,11 @@
+{% set error = error|default(false) %}
+{% set disabled = disabled|default(false) %}
+{% set required = required|default(false) %}
+{% set name = name|default('') %}
+{% set value = value|default(null) %}
+{% set min = min|default(null) %}
+{% set max = max|default(null) %}
+
 {% set classes = '' %}
 {% if error %}
    {% set classes = classes ~ ' FieldNumber--error' %}
diff --git a/components/Molecules/Fields/FieldSelect/FieldSelect.twig b/components/Molecules/Fields/FieldSelect/FieldSelect.twig
index 64fdb96..edab35a 100644
--- a/components/Molecules/Fields/FieldSelect/FieldSelect.twig
+++ b/components/Molecules/Fields/FieldSelect/FieldSelect.twig
@@ -1,3 +1,13 @@
+{% set error = error|default(false) %}
+{% set disabled = disabled|default(false) %}
+{% set required = required|default(false) %}
+{% set name = name|default('') %}
+{% set label = label|default('') %}
+{% set value = value|default(null) %}
+{% set tooltip = tooltip|default(null) %}
+{% set placeholder = placeholder|default(null) %}
+{% set options = options|default([]) %}
+
 {% set classes = '' %}
 {% if error %}
    {% set classes = classes ~ ' FieldSelect--error' %}
diff --git a/components/Molecules/Filters/FilterList/FilterList.twig b/components/Molecules/Filters/FilterList/FilterList.twig
index 49b09c6..b4f8249 100644
--- a/components/Molecules/Filters/FilterList/FilterList.twig
+++ b/components/Molecules/Filters/FilterList/FilterList.twig
@@ -1,3 +1,7 @@
+{% set value = value|default('') %}
+{% set label = label|default('') %}
+{% set onClick = onClick|default(null) %}
+
 <div class="FilterList" tabindex="1">
   <input class="FilterList-input" type="checkbox" id="{{ value }}" value="{{ value }}" {% if onClick %}onclick=onClick{% endif %}>
   <label class="FilterList-label" for="{{ value }}">{{ label }}</label>
diff --git a/components/Molecules/Filters/FilterPill/FilterPill.twig b/components/Molecules/Filters/FilterPill/FilterPill.twig
index f6e9eab..828c7f0 100644
--- a/components/Molecules/Filters/FilterPill/FilterPill.twig
+++ b/components/Molecules/Filters/FilterPill/FilterPill.twig
@@ -1,3 +1,13 @@
+{% set value = value|default('') %}
+{% set name = name|default('') %}
+{% set customText = customText|default('') %}
+{% set selected = label|default(false) %}
+{% set disabled = disabled|default(false) %}
+{% set icon = icon|default(null) %}
+{% set closeButton = closeButton|default(null) %}
+{% set iconColor = iconColor|default(null) %}
+{% set inputType = inputType|default('checkbox') %}
+
 {% set classes = '' %}
 {% if selected %}
    {% set classes = classes ~ ' FilterPill--selected' %}
@@ -7,7 +17,7 @@
 {% endif %}
 
 <label class="FilterPill{{ classes }}" {% if disabled %}disabled{% endif %}>
-  <input type='{{ inputType|default('checkbox') }}' class='hidden' value='{{ value }}' name='{{ name }}' />
+  <input type='{{ inputType }}' class='hidden' value='{{ value }}' name='{{ name }}' />
   {% if icon %}
     <span class="FilterPill-icon" {% if iconColor %}style="color:{{ iconColor }}"{% endif %}>{{ source("/icons/" ~ icon  ~".svg") }}</span>
   {% endif %}
diff --git a/components/Molecules/Filters/FilterSelect/FilterSelect.twig b/components/Molecules/Filters/FilterSelect/FilterSelect.twig
index 0560b0a..d3188a5 100644
--- a/components/Molecules/Filters/FilterSelect/FilterSelect.twig
+++ b/components/Molecules/Filters/FilterSelect/FilterSelect.twig
@@ -1,3 +1,8 @@
+{% set isRounded = isRounded|default(false) %}
+{% set placeholder = placeholder|default(null) %}
+{% set id = id|default('') %}
+{% set options = options|default([]) %}
+
 <div class="FilterSelect {% if isRounded %}FilterSelect--isRounded{% endif %}" data-drawer-toggle='#FilterSelectDrawer'>
   <div class="FilterSelect-current" tabindex="1">
       {% if placeholder %}
diff --git a/components/Molecules/HeaderButton/HeaderButton.twig b/components/Molecules/HeaderButton/HeaderButton.twig
index cd5e0d2..e77ad1b 100644
--- a/components/Molecules/HeaderButton/HeaderButton.twig
+++ b/components/Molecules/HeaderButton/HeaderButton.twig
@@ -1,12 +1,21 @@
+{% set id = id|default(null) %}
+{% set inactive = inactive|default(false) %}
+{% set classes = classes|default('') %}
+{% set small = small|default(false) %}
+{% set mobile = mobile|default(false) %}
+{% set subText = subText|default(null) %}
+{% set icon = icon|default(null) %}
+{% set text = text|default('') %}
+
 <button {% if id %} id="{{id}}" {% endif %} class='HeaderButton {% if inactive %}HeaderButton--inactive{% endif %} {{ classes }} {% if small %}HeaderButton--small{% endif %}'>
-	{% if icon %}
-		<span class='HeaderButton-icon'>{{ source("/icons/" ~ icon ~ ".svg") }}</span>
-	{% endif %}
+  {% if icon %}
+    <span class='HeaderButton-icon'>{{ source("/icons/" ~ icon ~ ".svg") }}</span>
+  {% endif %}
 
-	<div class='flex flex-col items-start HeaderButton-text'>
-		<span class="HeaderButton-text">{{ text }}</span>
-		{% if subText and not mobile %}
-			<span class='HeaderButton-subText'>{{ subText }}</span>
-		{% endif %}
-	</div>
+  <div class='flex flex-col items-start HeaderButton-text'>
+    <span class="HeaderButton-text">{{ text }}</span>
+    {% if subText and not mobile %}
+      <span class='HeaderButton-subText'>{{ subText }}</span>
+    {% endif %}
+  </div>
 </button>
diff --git a/components/Molecules/ItemHeader/ItemHeader.twig b/components/Molecules/ItemHeader/ItemHeader.twig
index 1e36d33..fb4cc01 100644
--- a/components/Molecules/ItemHeader/ItemHeader.twig
+++ b/components/Molecules/ItemHeader/ItemHeader.twig
@@ -1,3 +1,8 @@
+{% set href = href|default('') %}
+{% set classes = classes|default('') %}
+{% set customText = customText|default('') %}
+{% set sub = sub|default(null) %}
+
 <li class="flex">
 	<a href='{{ href }}' class='ItemHeader {{ classes }}'>
 		{{ customText }}
diff --git a/components/Molecules/Link/Link.twig b/components/Molecules/Link/Link.twig
index 67b4eff..557c7b6 100644
--- a/components/Molecules/Link/Link.twig
+++ b/components/Molecules/Link/Link.twig
@@ -1,3 +1,10 @@
+{% set href = href|default('') %}
+{% set customText = customText|default('') %}
+{% set disabled = disabled|default(false) %}
+{% set target = target|default(null) %}
+{% set iconLeft = iconLeft|default(null) %}
+{% set iconRight = iconRight|default(null) %}
+
 {% set classes = '' %}
 {% if size %}
    {% set classes = classes ~ 'Link--' ~ size %}
diff --git a/components/Molecules/OrderTag/OrderTag.twig b/components/Molecules/OrderTag/OrderTag.twig
index be11b10..fbc80f5 100644
--- a/components/Molecules/OrderTag/OrderTag.twig
+++ b/components/Molecules/OrderTag/OrderTag.twig
@@ -1,5 +1,10 @@
+{% set customText = customText|default('') %}
+{% set variant = variant|default('informative') %}
+{% set type = type|default('outline') %}
+
+
 {% set classes = '' %}
-{% set classes = classes ~ ' OrderTag--' ~ (variant|default('informative')) %}
-{% set classes = classes ~ ' OrderTag--' ~ (type|default('outline')) %}
+{% set classes = classes ~ ' OrderTag--' ~ variant %}
+{% set classes = classes ~ ' OrderTag--' ~ type %}
 
 <span class="OrderTag{{ classes }}">{{ customText }}</span>
diff --git a/components/Molecules/Pagination/Pagination.twig b/components/Molecules/Pagination/Pagination.twig
index 030c60d..c926d39 100644
--- a/components/Molecules/Pagination/Pagination.twig
+++ b/components/Molecules/Pagination/Pagination.twig
@@ -1,3 +1,9 @@
+{% set totalPages = totalPages|default(1) %}
+{% set currentPage = currentPage|default(1) %}
+{% set prevText = prevText|default('') %}
+{% set nextText = nextText|default('') %}
+
+
 {# Nombre de pages à afficher de chaque côté de la page actuelle #}
 {% set range = 2 %} 
 
diff --git a/components/Molecules/RadioCard/RadioCard.twig b/components/Molecules/RadioCard/RadioCard.twig
index ec767d7..f3f9438 100644
--- a/components/Molecules/RadioCard/RadioCard.twig
+++ b/components/Molecules/RadioCard/RadioCard.twig
@@ -1,4 +1,10 @@
-<label class="RadioCard {{ classes|default('') }}">
+{% set classes = classes|default('') %}
+{% set name = name|default('') %}
+{% set value = value|default('') %}
+{% set label = label|default('') %}
+{% set disabled = disabled|default(false) %}
+
+<label class="RadioCard {{ classes }}">
   <input
     type="radio"
     class="RadioCard-input"
diff --git a/components/Molecules/SearchBar/Base.twig b/components/Molecules/SearchBar/Base.twig
index f75aecb..3b300e1 100644
--- a/components/Molecules/SearchBar/Base.twig
+++ b/components/Molecules/SearchBar/Base.twig
@@ -1,5 +1,3 @@
-{% set classes = '' %}
-{% if type != 'classic' %}{% set classes = classes ~ ' SearchBar--' ~ type %}{% endif %}
 <div class='w-[400px] max-w-full'>
   {% include './SearchBar.twig' %}
 </div>
diff --git a/components/Molecules/SearchBar/SearchBar.twig b/components/Molecules/SearchBar/SearchBar.twig
index f65c250..53ae889 100644
--- a/components/Molecules/SearchBar/SearchBar.twig
+++ b/components/Molecules/SearchBar/SearchBar.twig
@@ -1,4 +1,10 @@
+{% set type = type|default('classic') %} {# type: 'classic'|'white' #}
+{% set value = value|default('') %}
+
+{% set classes = '' %}
+{% if type != 'classic' %}{% set classes = classes ~ ' SearchBar--' ~ type %}{% endif %}
+
 <label class="SearchBar {{ classes }}" aria-label="Recherche">
 	<button class='w-4 h-4'>{{ source("/icons/search.svg") }}</button>
-	<input type="text" name="query" placeholder="Ex. Chaussures, tee-shirt, ..." autocomplete='off' value="{{ value|default('') }}"/>
+	<input type="text" name="query" placeholder="Ex. Chaussures, tee-shirt, ..." autocomplete='off' value="{{ value }}"/>
 </label>
diff --git a/components/Molecules/Shortcut/Shortcut.twig b/components/Molecules/Shortcut/Shortcut.twig
index 7cf806b..4f75d0a 100644
--- a/components/Molecules/Shortcut/Shortcut.twig
+++ b/components/Molecules/Shortcut/Shortcut.twig
@@ -1,3 +1,7 @@
+{% set classes = classes|default('') %}
+{% set customText = customText|default('') %}
+{% set active = active|default(false) %}
+
 <button class='Shortcut {{ classes }} {% if active %}active{% endif %}'>
   <span>{{ customText }}</span>
 </button>
diff --git a/components/Molecules/Step/Steps.twig b/components/Molecules/Step/Steps.twig
index b0df461..17054af 100644
--- a/components/Molecules/Step/Steps.twig
+++ b/components/Molecules/Step/Steps.twig
@@ -1,3 +1,8 @@
+{% set checkoutSteps = checkoutSteps|default([]) %}
+{% set currentStep = currentStep|default(1) %}
+{% set cartTotal = cartTotal|default('') %}
+{% set cartQuantity = cartQuantity|default('') %}
+
 {% set totalSteps = checkoutSteps|length %}
 {% set percent = (currentStep / totalSteps) * 100 %}
 <div class="Steps">
@@ -41,4 +46,4 @@
       </span>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/components/Molecules/Tab/Tab.twig b/components/Molecules/Tab/Tab.twig
index 89f2822..ae2ede5 100644
--- a/components/Molecules/Tab/Tab.twig
+++ b/components/Molecules/Tab/Tab.twig
@@ -1,3 +1,9 @@
+{% set size = size|default(null) %} {# size: 'large'|'small' #}
+{% set disabled = disabled|default(false) %}
+{% set iconLeft = iconLeft|default(null) %}
+{% set iconRight = iconRight|default(null) %}
+{% set customText = customText|default('') %}
+
 {% set classes = '' %}
 {% if size %}
    {% set classes = classes ~ 'Tab--' ~ size %}
diff --git a/components/Molecules/Tag/Tag.twig b/components/Molecules/Tag/Tag.twig
index b775285..f1f10f3 100644
--- a/components/Molecules/Tag/Tag.twig
+++ b/components/Molecules/Tag/Tag.twig
@@ -1,3 +1,9 @@
+{% set icon = icon|default(null) %}
+{% set closeOnClick = closeOnClick|default(false) %}
+{% set onClick = onClick|default(null) %}
+{% set customText = customText|default('') %}
+{% set href = href|default(null) %}
+
 {% set classes = '' %}
 {% set classes = classes ~ ' Tag--' ~ (variant|default('validated')) %}
 {% if closeOnClick %}
diff --git a/components/Molecules/Tooltip/Tooltip.twig b/components/Molecules/Tooltip/Tooltip.twig
index 26f0123..956b3c6 100644
--- a/components/Molecules/Tooltip/Tooltip.twig
+++ b/components/Molecules/Tooltip/Tooltip.twig
@@ -1,5 +1,8 @@
+{% set position = position|default('top') %}
+{% set tooltip = tooltip|default('') %}
+
 {% set classes = '' %}
-{% set classes = classes ~ ' Tooltip-text--' ~ (position|default('top')) %}
+{% set classes = classes ~ ' Tooltip-text--' ~ position %}
 
 <div class='Tooltip'>
   <span class='Tooltip-icon'>{{ source("/icons/help.svg") }}</span>
diff --git a/components/Molecules/userMenu/UserMenu.twig b/components/Molecules/userMenu/UserMenu.twig
index 0123c51..b8c8946 100644
--- a/components/Molecules/userMenu/UserMenu.twig
+++ b/components/Molecules/userMenu/UserMenu.twig
@@ -1,6 +1,10 @@
+{% set variant = variant|default('vermillon') %}
+{% set href = href|default('') %}
+{% set customText = customText|default('') %}
+{% set icon = icon|default(null) %}
 
 {% set classes = '' %}
-{% set classes = classes ~ ' UserMenu--' ~ (variant|default('vermillon')) %}
+{% set classes = classes ~ ' UserMenu--' ~ variant %}
 {% if icon %}
    {% set classes = classes ~ ' UserMenu--withIcon' %}
 {% endif %}
diff --git a/components/Organisms/AddToCart/AddToCart.twig b/components/Organisms/AddToCart/AddToCart.twig
index c8898a5..7625931 100644
--- a/components/Organisms/AddToCart/AddToCart.twig
+++ b/components/Organisms/AddToCart/AddToCart.twig
@@ -1,3 +1,7 @@
+{% set price = price|default(null) %}
+{% set discount = discount|default(null) %}
+{% set unavailable = unavailable|default(false) %}
+
 <div class='AddToCart {% if not price %}AddToCart--center{% endif %}'>
   {% if price %}
     <div>
diff --git a/components/Organisms/Card/Address/AddressCard.twig b/components/Organisms/Card/Address/AddressCard.twig
index eeb8780..5f18da0 100644
--- a/components/Organisms/Card/Address/AddressCard.twig
+++ b/components/Organisms/Card/Address/AddressCard.twig
@@ -1,4 +1,20 @@
 {% set contentType = "label" %}
+{% set disabled = disabled|default(false) %}
+{% set radio = radio|default(false) %}
+{% set selected = selected|default(false) %}
+{% set purchaseFunnel = purchaseFunnel|default(false) %}
+{% set isDefault = isDefault|default(false) %}
+{% set address = address|default({
+  title: "",
+  name: "",
+  address1: "",
+  zipCode: '',
+  city: '',
+  country: '',
+  phone: '',
+}) %}
+
+
 {% if purchaseFunnel %}
   {% set radio = false %}
   {% set selected = false %}
diff --git a/components/Organisms/Card/Address/ClientAddressCard.twig b/components/Organisms/Card/Address/ClientAddressCard.twig
index c3337f4..f873a0e 100644
--- a/components/Organisms/Card/Address/ClientAddressCard.twig
+++ b/components/Organisms/Card/Address/ClientAddressCard.twig
@@ -1,3 +1,15 @@
+{% set undefined = undefined|default(false) %}
+{% set address = address|default({
+  title: "",
+  name: "",
+  address1: "",
+  zipCode: '',
+  city: '',
+  country: '',
+  phone: '',
+}) %}
+
+
 <div class='AddressCard AddressCard--client-information'>
   <div class='AddressCard-content'>
     {% if undefined %}
diff --git a/components/Organisms/Card/Article/Article.stories.js b/components/Organisms/Card/Article/Article.stories.js
index 89a946b..0f2722d 100644
--- a/components/Organisms/Card/Article/Article.stories.js
+++ b/components/Organisms/Card/Article/Article.stories.js
@@ -7,11 +7,11 @@ export default {
 export const Base = {
   render: (args) => `<div class='w-[334px]''>${Article(args)}</div>`,
   args: {
-    img: { url: '', alt: '' },
-    title: "Titre de l’article à cet endroit",
-    date: "04.05.2021"
+    img: { url: '/images/placeholder2.webp', alt: '' },
+    title: 'Titre de l’article à cet endroit',
+    date: '04.05.2021'
   },
   parameters: {
-    backgrounds: { default: 'grey' },
-  },
+    backgrounds: { default: 'grey' }
+  }
 };
diff --git a/components/Organisms/Card/Article/Article.twig b/components/Organisms/Card/Article/Article.twig
index c290a49..478130d 100644
--- a/components/Organisms/Card/Article/Article.twig
+++ b/components/Organisms/Card/Article/Article.twig
@@ -1,5 +1,9 @@
+{% set img = img|default({url: '/images/placeholder2.webp', alt:''}) %}
+{% set title = title|default('') %}
+{% set date = date|default('') %}
+
 <div class='Article'>
-  <img src="{{ img and img.url ? imag.url : '/images/placeholder2.webp' }}" alt="{{ img and img.alt ? img.alt : '' }}" loading="lazy" class="Article-img">
+  <img src="{{ imag.url}}" alt="{{ img.alt }}" loading="lazy" class="Article-img">
   <div class='Article-content'>
     <div class='Article-title'>{{ title }}</div>
     <div class='Article-date'>{{ date }}</div>
diff --git a/components/Organisms/Card/Order/OrderCard.twig b/components/Organisms/Card/Order/OrderCard.twig
index 2998df8..f777aff 100644
--- a/components/Organisms/Card/Order/OrderCard.twig
+++ b/components/Organisms/Card/Order/OrderCard.twig
@@ -1,3 +1,10 @@
+{% set orderNumber = orderNumber|default('') %}
+{% set date = date|default('') %}
+{% set nbItems = nbItems|default(0) %}
+{% set price = price|default('') %}
+{% set deliveryDate = deliveryDate|default('') %}
+{% set productImages = productImages|default([]) %}
+
 <div class='OrderCard'>
   <div class='2xl:flex justify-between'>
     <div>
diff --git a/components/Organisms/Card/Payment/PaymentCard.twig b/components/Organisms/Card/Payment/PaymentCard.twig
index 0f3d931..baa6faa 100644
--- a/components/Organisms/Card/Payment/PaymentCard.twig
+++ b/components/Organisms/Card/Payment/PaymentCard.twig
@@ -1,23 +1,30 @@
+{% set title = title|default('') %}
+{% set expired = expired|default(false) %}
+{% set withoutButton = withoutButton|default(false) %}
+{% set cardType = cardType|default('') %}
+{% set number = number|default('') %}
+{% set date = date|default('') %}
+
 <div class='PaymentCard'>
   <div class='PaymentCard-icon'><span>{{ source("/icons/calendar.svg") }}</span></div>
   <div class='PaymentCard-title'>{{ title }}</div>
- <div class='{% if not expired %}flex flex-cols items-end justify-between {% endif %}'>
-   <div class='PaymentCard-content'>
-     <div class='font-semibold'>{{ cardType }}</div>
-     <div>N° {{ number }}</div>
-     {% if expired %}
-       <div class='font-bold text-error-dark'>Expirée</div>
-     {% else %}
-       <div>Expire le {{ date }}</div>
-     {% endif %}
-   </div>
-   {% if not withoutButton %}
-     <div class='{% if expired %}mt-2 flex gap-2{% endif %}'>
-       {% include '../../../Molecules/Button/Button.twig' with {classes: 'Button--small',text:'Supprimer', icon_left: 'delete'} %}
-       {% if expired %}
-         {% include '../../../Molecules/Button/Button.twig' with {classes: 'Button--small', variant:'secondary', text:'Mettre à jour'} %}
-       {% endif %}
-     </div>
-   {% endif %}
- </div>
+  <div class='{% if not expired %}flex flex-cols items-end justify-between {% endif %}'>
+    <div class='PaymentCard-content'>
+      <div class='font-semibold'>{{ cardType }}</div>
+      <div>N° {{ number }}</div>
+      {% if expired %}
+        <div class='font-bold text-error-dark'>Expirée</div>
+      {% else %}
+        <div>Expire le {{ date }}</div>
+      {% endif %}
+    </div>
+    {% if not withoutButton %}
+      <div class='{% if expired %}mt-2 flex gap-2{% endif %}'>
+        {% include '../../../Molecules/Button/Button.twig' with {classes: 'Button--small',text:'Supprimer', icon_left: 'delete'} %}
+        {% if expired %}
+          {% include '../../../Molecules/Button/Button.twig' with {classes: 'Button--small', variant:'secondary', text:'Mettre à jour'} %}
+        {% endif %}
+      </div>
+    {% endif %}
+  </div>
 </div>
diff --git a/components/Organisms/Card/PickupPoint/PickupPoint.twig b/components/Organisms/Card/PickupPoint/PickupPoint.twig
index 0f77151..bea129f 100644
--- a/components/Organisms/Card/PickupPoint/PickupPoint.twig
+++ b/components/Organisms/Card/PickupPoint/PickupPoint.twig
@@ -1,3 +1,17 @@
+{% set title = title|default('') %}
+{% set date = date|default('') %}
+{% set selected = selected|default(false) %}
+{% set closed = closed|default(false) %}
+{% set img = img|default({src: '/images/placeholder2.webp', alt:'Logo Pickup'}) %}
+{% set hours = hours|default([]) %} {# hours: [{ day: 'lundi', hours: '14h - 19h' }, ...] #}
+{% set address = address|default({
+  title: "",
+  name: "",
+  address1: "",
+  zipCode: '',
+  city: ''
+}) %}
+
 <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} %}
@@ -17,7 +31,7 @@
   <div class='PickupPoint-bottom'>
           <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">
+            <img src="{{ img.src }}" alt="{{ img.alt }}" loading="lazy">
           {% endif %}
   </div>
   <div class='PickupPoint-hoursListing md:hidden'>
diff --git a/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig b/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig
index 12479ac..a16bb8d 100644
--- a/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig
+++ b/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig
@@ -1,3 +1,13 @@
+{% set title = title|default('') %}
+{% set hours = hours|default([]) %} {# hours: [{ day: 'lundi', hours: '14h - 19h' }, ...] #}
+{% set address = address|default({
+  title: "",
+  name: "",
+  address1: "",
+  zipCode: '',
+  city: ''
+}) %}
+
 <div class='MobileDrawer' id='PickupPointDrawer'>
   <div class='MobileDrawer-header'>
     <button class='MobileDrawer-close' type='button' data-drawer-close>{{ source("/icons/close.svg") }}</button>
diff --git a/components/Organisms/Card/Review/Review.twig b/components/Organisms/Card/Review/Review.twig
index b2c13b9..261d78a 100644
--- a/components/Organisms/Card/Review/Review.twig
+++ b/components/Organisms/Card/Review/Review.twig
@@ -1,3 +1,9 @@
+{% set author = author|default('') %}
+{% set review = review|default('') %}
+{% set date = date|default('') %}
+{% set note = note|default(0) %}
+{% set maxNote = maxNote|default(5) %}
+
 <div class="Review">
   <div class="Review-author">{{ author }}</div>
   <div class="Review-review">{{ review }}</div>
diff --git a/components/Organisms/Card/SelfPromotion/SelfPromotion.stories.js b/components/Organisms/Card/SelfPromotion/SelfPromotion.stories.js
index 86f0afa..9d145fa 100644
--- a/components/Organisms/Card/SelfPromotion/SelfPromotion.stories.js
+++ b/components/Organisms/Card/SelfPromotion/SelfPromotion.stories.js
@@ -7,8 +7,8 @@ export default {
 export const Base = {
   render: (args) => SelfPromotion(args),
   args: {
-    img: { url: '', alt: '' },
-    title: "Ici un texte d’autopromotion",
-    desc: "Accompagné d’un texte secondaire à cet endroit",
+    img: { url: '/images/placeholder2.webp', alt: '' },
+    title: 'Ici un texte d’autopromotion',
+    desc: 'Accompagné d’un texte secondaire à cet endroit'
   }
 };
diff --git a/components/Organisms/Card/SelfPromotion/SelfPromotion.twig b/components/Organisms/Card/SelfPromotion/SelfPromotion.twig
index a596449..4d6f97b 100644
--- a/components/Organisms/Card/SelfPromotion/SelfPromotion.twig
+++ b/components/Organisms/Card/SelfPromotion/SelfPromotion.twig
@@ -1,5 +1,9 @@
+{% set title = title|default('') %}
+{% set desc = desc|default('') %}
+{% set img = img|default({url: '/images/placeholder2.webp', alt:''}) %}
+
 <div class="SelfPromotion">
-  <img src="{{ img and img.url ? imag.url : '/images/placeholder2.webp' }}" alt="{{ img and img.alt ? img.alt : '' }}" loading="lazy" class="SelfPromotion-img">
+  <img src="{{ img.url }}" alt="{{ img.alt }}" loading="lazy" class="SelfPromotion-img">
   <div class="SelfPromotion-content">
     <p class="SelfPromotion-title">{{ title }}</p>
     <p class="SelfPromotion-desc">{{ desc }}</p>
diff --git a/components/Organisms/Card/StoreInfo/StoreInfo.twig b/components/Organisms/Card/StoreInfo/StoreInfo.twig
index 954e87f..3f0fa76 100644
--- a/components/Organisms/Card/StoreInfo/StoreInfo.twig
+++ b/components/Organisms/Card/StoreInfo/StoreInfo.twig
@@ -1,3 +1,15 @@
+{% set storeName = storeName|default('') %}
+{% set displayHours = displayHours|default(false) %}
+{% set hours = hours|default([]) %} {# hours: [{ day: 'lundi', hours: '14h - 19h' }, ...] #}
+{% set address = address|default({
+  title: "",
+  name: "",
+  address1: "",
+  zipCode: '',
+  city: '',
+  country: ''
+}) %}
+
 <div class='StoreInfo'>
   <div class='StoreInfo-title'>{{ storeName }}</div>
   <div class='StoreInfo-address'>
diff --git a/components/Organisms/Card/SuggestFilters/SuggestFilters.twig b/components/Organisms/Card/SuggestFilters/SuggestFilters.twig
index 1a882da..2f6cbf6 100644
--- a/components/Organisms/Card/SuggestFilters/SuggestFilters.twig
+++ b/components/Organisms/Card/SuggestFilters/SuggestFilters.twig
@@ -1,3 +1,6 @@
+{% set customText = customText|default('') %}
+{% set button = button|default('') %}
+
 <div class="SuggestFilters">
     <div class="SuggestFilters-desc">{{ customText }}</div>
     {% include '../../../Molecules/Button/Button.twig' with {text: button, variant: "secondary", icon_left: "filter", classes: ' Button--medium'} %}
diff --git a/components/Organisms/Card/Transporter/Transporter.twig b/components/Organisms/Card/Transporter/Transporter.twig
index e546af2..be01ad4 100644
--- a/components/Organisms/Card/Transporter/Transporter.twig
+++ b/components/Organisms/Card/Transporter/Transporter.twig
@@ -1,3 +1,9 @@
+{% set selected = selected|default(false) %}
+{% set title = title|default('') %}
+{% set date = date|default('') %}
+{% set price = price|default('') %}
+{% set img = img|default({src: null, alt:'Logo transporteur'}) %}
+
 <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} %}
@@ -8,7 +14,7 @@
         <span class='Transporter-bottom'>
           <span>{{ price }}</span>
           {% if img.src %}
-            <img src="{{ img.src }}" alt="{{ img.alt|default('Logo transporteur') }}" loading="lazy">
+            <img src="{{ img.src }}" alt="{{ img.alt }}" loading="lazy">
           {% endif %}
         </span>
     </span>
diff --git a/components/Organisms/CategoryCard/CategoryCard.stories.js b/components/Organisms/CategoryCard/CategoryCard.stories.js
index 7c1b27d..58ae170 100644
--- a/components/Organisms/CategoryCard/CategoryCard.stories.js
+++ b/components/Organisms/CategoryCard/CategoryCard.stories.js
@@ -7,6 +7,7 @@ export default {
 export const base = {
   render: (args) => CategoryCard(args),
   args: {
+    img: { url: '/images/placeholder2.webp', alt: '' },
     title: 'Nom de la catégorie',
     button: { label: 'Je découvre', href: '#' }
   },
diff --git a/components/Organisms/CategoryCard/CategoryCard.twig b/components/Organisms/CategoryCard/CategoryCard.twig
index 5012924..0c31e93 100644
--- a/components/Organisms/CategoryCard/CategoryCard.twig
+++ b/components/Organisms/CategoryCard/CategoryCard.twig
@@ -1,18 +1,14 @@
-{% set productThumbnailUrl = base_url ~ "/images/placeholder2.webp" %}
-{% set productTumbnailTitle = "placeholder" %}
+{% set title = title|default('') %}
+{% set img = img|default({url: '/images/placeholder2.webp', alt:''}) %}
 {% set classes = classes|default('') %}
+{% set button = button|default({label: '', href:''}) %}
+
 <div class="CategoryCard {{ classes }}">
 
   <div class="CategoryCard-mainContent">
     <a class="CategoryCard-imgLink" href="#">
       <figure class="CategoryCard-img">
-        {% if productThumbnailUrl %}
-          <img src="{{ productThumbnailUrl }}" alt="{{ productTumbnailTitle }}"
-               title="{{ productTumbnailTitle }}"  loading="lazy">
-        {% else %}
-          <img src="{{ source("/images/placeholder.svg") }}" alt="{{ productTumbnailTitle }}"
-               title="{{ productTumbnailTitle }}"  loading="lazy">
-        {% endif %}
+        <img src="{{ img.url }}" alt="{{ img.alt }}" title="{{ img.alt }}"  loading="lazy">
       </figure>
     </a>
     <div class="CategoryCard-desc">
diff --git a/components/Organisms/Modules/Filters/FilterClassic.twig b/components/Organisms/Modules/Filters/FilterClassic.twig
index 8e6a934..c7b0c5f 100644
--- a/components/Organisms/Modules/Filters/FilterClassic.twig
+++ b/components/Organisms/Modules/Filters/FilterClassic.twig
@@ -1,3 +1,6 @@
+{% set options = options|default([]) %} {# options:  [{ value: 1, label: 'State Blue' }, ...] #}
+{% set isRounded = isRounded|default(false) %}
+
 <div class='hidden md:block'>
   {% for option in options %}
     {% include '../../../Molecules/Filters/FilterPill/FilterPill.twig' with {customText: option.label,inputType: 'radio', name: 'classic', value: option.value} %}
diff --git a/components/Organisms/Modules/Filters/FilterColor.twig b/components/Organisms/Modules/Filters/FilterColor.twig
index afd2a8c..d7ae3ed 100644
--- a/components/Organisms/Modules/Filters/FilterColor.twig
+++ b/components/Organisms/Modules/Filters/FilterColor.twig
@@ -1,3 +1,5 @@
+{% set options = options|default([]) %} {# options:  [{ value: 1, color: '#6969B3', label: 'State Blue' }, ...] #}
+
 {% set optionsColors = [] %}
 {% for option in options %}
   {% set optionsColors = optionsColors|merge([{
diff --git a/components/Organisms/Modules/Filters/filters.css b/components/Organisms/Modules/Filters/filters.css
deleted file mode 100644
index e69de29..0000000
diff --git a/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig b/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig
index 8601345..e15ef2d 100644
--- a/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig
+++ b/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig
@@ -1,3 +1,18 @@
+{% set selected = selected|default(false) %}
+{% set title = title|default('') %}
+{% set date = date|default('') %}
+{% set price = price|default('') %}
+{% set noAddress = noAddress|default(false) %}
+{% set address = address|default({
+  title: "",
+  name: "",
+  address1: "",
+  zipCode: '',
+  city: '',
+  country: '',
+  phone: '',
+}) %}
+
 <div class='HomeDelivery {% if selected %}selected{% endif %}'>
   <label class='HomeDelivery-content'>
     {% include '../../../Atoms/Form/Radio.twig' with {type:"span", name:"HomeDelivery", value:1, checked:selected} %}
diff --git a/components/Organisms/Modules/Payment/Payment.twig b/components/Organisms/Modules/Payment/Payment.twig
index 7268a4c..546164f 100644
--- a/components/Organisms/Modules/Payment/Payment.twig
+++ b/components/Organisms/Modules/Payment/Payment.twig
@@ -1,3 +1,6 @@
+{% set selected = selected|default(false) %}
+{% set title = title|default('') %}
+
 <div class='Payment {% if selected %}selected{% endif %}'>
   <label class='Payment-content'>
     {% include '../../../Atoms/Form/Radio.twig' with {type:"span", name:"Payment", value:1, checked:selected} %}
diff --git a/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig b/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig
index 6d58ec8..0009541 100644
--- a/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig
+++ b/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig
@@ -1,3 +1,11 @@
+{% set selected = selected|default(false) %}
+{% set title = title|default('') %}
+{% set date = date|default('') %}
+{% set price = price|default('') %}
+{% set carbone = carbone|default('') %}
+{% set pickupServices = pickupServices|default([]) %} {# pickupServices: [{name: 'Mondial relais', value: 'mondial_relais', img: '' }, ...] #}
+{% set pickups = pickups|default([]) %} {# 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}, ...] #}
+
 <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} %}
diff --git a/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig b/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig
index 271355a..13711e2 100644
--- a/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig
+++ b/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig
@@ -1,3 +1,21 @@
+{% set selected = selected|default(false) %}
+{% set title = title|default('') %}
+{% set date = date|default('') %}
+{% set price = price|default('') %}
+{% set registeredClient = registeredClient|default(false) %}
+{% set newClient = newClient|default(false) %}
+{% set closed = closed|default(false) %}
+{% set address = address|default({
+  title: "",
+  name: "",
+  address1: "",
+  zipCode: '',
+  city: '',
+  country: '',
+  phone: '',
+}) %}
+{% set hours = hours|default([]) %} {# hours: [{ day: 'lundi', hours: '14h - 19h' }, ...] #}
+
 <div class='StoreDelivery {% if selected %}selected{% endif %}'>
   <label class='StoreDelivery-content'>
     {% include '../../../Atoms/Form/Radio.twig' with {type:"span", name:"StoreDelivery", value:1, checked:selected} %}
diff --git a/components/Organisms/ProductCard/ProductCard.twig b/components/Organisms/ProductCard/ProductCard.twig
index 5885992..d54fa54 100644
--- a/components/Organisms/ProductCard/ProductCard.twig
+++ b/components/Organisms/ProductCard/ProductCard.twig
@@ -1,11 +1,27 @@
-{% set productThumbnailUrl = base_url ~ "/images/placeholder2.webp" %}
-{% set productTumbnailTitle = "placeholder" %}
 {% set classes = classes|default('') %}
+{% set productTitle = productTitle|default('') %}
+{% set orderSecondaryTitle = orderSecondaryTitle|default('') %}
+{% set price = price|default('') %}
+{% set promoPrice = promoPrice|default('') %}
+{% set size = size|default('') %}
+{% set quantity = quantity|default(null) %}
 {% set imgWidth = imgWidth|default(300) %}
 {% set imgHeight = imgHeight|default(300) %}
 {% set displayWishButton = displayWishButton|default(false) %}
+{% set inWishlist = inWishlist|default(false) %}
 {% set isOrderCard = isOrderCard|default(false) %}
 {% set isAddToCartConfirmation = isAddToCartConfirmation|default(false) %}
+{% set isRemoveProduct = isRemoveProduct|default(0) %}
+{% set disabled = disabled|default(0) %}
+{% set isPurchaseFunnelCard = isPurchaseFunnelCard|default(0) %}
+{% set isOutOfStock = isOutOfStock|default(0) %}
+{% set isNew = isNew|default(0) %}
+{% set isPromo = isPromo|default(0) %}
+{% set colors = colors|default([]) %} {# colors: ['#667761','#84DCC6',...] #}
+{% set rate = rate|default(null) %}
+{% set secondaryTitle = secondaryTitle|default(null) %}
+{% set img = img|default({url: '/images/placeholder2.webp', alt:''}) %}
+{% set quantityChoice = quantityChoice|default(1) %}
 
 <div class="ProductCard {{ classes }}">
   {% if isAddToCartConfirmation or isRemoveProduct %}
@@ -13,10 +29,10 @@
   {% endif %}
   <div class="ProductCard-header">
     <div class="ProductCard-tagList">
-      {% if isNew|default(0) %}
+      {% if isNew %}
         {% include '../../Molecules/Tag/Tag.twig' with {customText: 'Nouveau', variant: 'vermillon'} %}
       {% endif %}
-      {% if isPromo|default(0) %}
+      {% if isPromo %}
         {% include '../../Molecules/Tag/Tag.twig' with {customText: '-15%', variant: 'error'} %}
       {% endif %}
     </div>
@@ -43,13 +59,8 @@
   <div class="ProductCard-mainContent">
     <a class="ProductCard-imgLink" href="#">
       <figure class="ProductCard-img">
-        {% if productThumbnailUrl %}
-          <img src="{{ productThumbnailUrl }}" alt="{{ productTumbnailTitle }}"
-                  title="{{ productTumbnailTitle }}"  loading="lazy">
-        {% else %}
-            <img src="{{ source("/images/placeholder.svg") }}" alt="{{ productTumbnailTitle }}"
-                  title="{{ productTumbnailTitle }}"  loading="lazy">
-        {% endif %}
+        <img src="{{ img.url }}" alt="{{ img.alt }}"
+             title="{{ img.alt }}"  loading="lazy">
       </figure>
     </a>
     <div class="ProductCard-desc">
@@ -73,9 +84,9 @@
         {% include '../../Molecules/Button/Button.twig' with {classes:'Button--small', text: "Restaurer", icon_left: "restore" } %}
       {% endif %}
       <div class="ProductCard-footer">
-        {% if hasReviews or hasColors %}
+        {% if rate != null or colors.length > 0 %}
           <div class="ProductCard-footerLeft">
-            {% if hasReviews %}
+            {% if rate != null %}
               <div class="Rating">
                 <div class="Rating-mark">
                   {% for i in 1..5 %}
@@ -102,12 +113,10 @@
             {% if hasColors %}
               <div class="Colors">
                 {% set limit = 6 %}
-                {% set count = 0 %}
                 {% for color in colors %}
-                    {% if count < limit %}
+                    {% if loop.index0 < limit %}
                         <a href="#" class="Colors-item" style="background-color:{{ color }}">
                         </a>
-                        {% set count = count + 1 %}
                     {% else %}
                         <div class="Colors-others">...</div>
                     {% endif %}
@@ -116,7 +125,7 @@
             {% endif %}
           </div>
         {% endif %}
-        {% if isPromo|default(0) %}
+        {% if isPromo %}
           <div class="ProductCard-footerRight">
             <div class="ProductCard-price">{{ promoPrice }}</div>
             <div class="ProductCard-originalPrice">{{ price }}</div>
@@ -156,7 +165,7 @@
       {% include '../../Molecules/Button/Button.twig' with {classes:'Button--medium', variant: "secondary", text: "Poursuivre mes achats" } %}
     </div>
   {% endif %}
-  {% if isRemoveProduct|default(0) %}
+  {% if isRemoveProduct %}
     <div class="ProductCard-progressBar">
         <div class="ProductCard-progressBarInner">
         </div>
diff --git a/components/Organisms/ProductCard/PurchaseFunnel.twig b/components/Organisms/ProductCard/PurchaseFunnel.twig
index 5cef6cc..c0966d8 100644
--- a/components/Organisms/ProductCard/PurchaseFunnel.twig
+++ b/components/Organisms/ProductCard/PurchaseFunnel.twig
@@ -1,5 +1,7 @@
+{% set isOutOfStock = isOutOfStock|default(0) %}
+{% set productTitle = productTitle|default('') %}
 
-{% if isOutOfStock %} 
+{% if isOutOfStock %}
     <div class="ProductCardWrapper ProductCardWrapper--outOfStock purchase-funnel-card-width">
         <div class="ProductCardWrapper-outOfStockMessage">
             <div>
@@ -12,4 +14,4 @@
     </div>
 {% else %}
     {% include './ProductCard.twig' with {classes:'ProductCardPurchaseFunnel purchase-funnel-card-width', isPurchaseFunnelCard: true, imgWidth:'232', imgHeight:'232'} %}
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/components/Organisms/Reinsurance/Reinsurance.twig b/components/Organisms/Reinsurance/Reinsurance.twig
index 4e5bf0c..3a8f3fd 100644
--- a/components/Organisms/Reinsurance/Reinsurance.twig
+++ b/components/Organisms/Reinsurance/Reinsurance.twig
@@ -1,3 +1,4 @@
+{% set data = data|default([]) %} {# data: [{strongText: 'Livraison gratuite',text: ' à partir de 50€',icon: 'reinsurance-delivery'},...] #}
 
 <div class='Reinsurance'>
   {% for reinsurance in data %}
diff --git a/components/Organisms/SimilarContentCard/SimilarContentCard.stories.js b/components/Organisms/SimilarContentCard/SimilarContentCard.stories.js
index 6d00631..42be27f 100644
--- a/components/Organisms/SimilarContentCard/SimilarContentCard.stories.js
+++ b/components/Organisms/SimilarContentCard/SimilarContentCard.stories.js
@@ -8,7 +8,8 @@ export const base = {
   render: (args) => SimilarContentCard(args),
   args: {
     title: 'Titre de l’article à cet endroit',
-    date: 'JJ.MM.AAAA'
+    date: 'JJ.MM.AAAA',
+    url: '#'
   },
   parameters: {
     backgrounds: { default: 'grey' }
diff --git a/components/Organisms/SimilarContentCard/SimilarContentCard.twig b/components/Organisms/SimilarContentCard/SimilarContentCard.twig
index 7e3ded8..7d09f58 100644
--- a/components/Organisms/SimilarContentCard/SimilarContentCard.twig
+++ b/components/Organisms/SimilarContentCard/SimilarContentCard.twig
@@ -1,21 +1,19 @@
-{% set productThumbnailUrl = base_url ~ "/images/placeholder2.webp" %}
-{% set productTumbnailTitle = "placeholder" %}
+{% set img = img|default({url: '/images/placeholder.webp', alt:''}) %}
 {% set classes = classes|default('') %}
+{% set title = title|default('') %}
+{% set date = date|default('') %}
+{% set url = url|default('') %}
+
 <div class="SimilarContentCard {{ classes }}">
   <div class="SimilarContentCard-imgLink" href="#">
     <figure class="SimilarContentCard-img">
-      {% if productThumbnailUrl %}
-        <img src="{{ productThumbnailUrl }}" alt="{{ productTumbnailTitle }}"
-             title="{{ productTumbnailTitle }}"  loading="lazy">
-      {% else %}
-        <img src="{{ source("/images/placeholder.svg") }}" alt="{{ productTumbnailTitle }}"
-             title="{{ productTumbnailTitle }}"  loading="lazy">
-      {% endif %}
+      <img src="{{ img.url }}" alt="{{ img.alt }}"
+           title="{{ img.alt }}"  loading="lazy">
     </figure>
   </div>
   <div class="SimilarContentCard-desc">
 
-    <a href="#" class="SimilarContentCard-title">{{ title }}</a>
+    <a href="{{ url }}" class="SimilarContentCard-title">{{ title }}</a>
 
     <div class="SimilarContentCard-footer">
       {{ date }}
diff --git a/components/Organisms/SnackBar/SnackBar.stories.js b/components/Organisms/SnackBar/SnackBar.stories.js
index 3d52e04..d9c0d02 100644
--- a/components/Organisms/SnackBar/SnackBar.stories.js
+++ b/components/Organisms/SnackBar/SnackBar.stories.js
@@ -7,7 +7,7 @@ export default {
 export const base = {
   render: (args) => SnackBar(args),
   args: {
-    size:  'small',
+    size: 'small',
     variant: 'error',
     button: 'Bouton',
     text: 'Ici un message d’erreur pour aider l’utilisateur à corriger son erreur.',
@@ -19,8 +19,15 @@ export const base = {
       control: { type: 'radio' }
     },
     variant: {
-      options: ['error', 'warning', 'validated', 'informative', 'neutral-light', 'neutral-dark'],
+      options: [
+        'error',
+        'warning',
+        'validated',
+        'informative',
+        'neutral-light',
+        'neutral-dark'
+      ],
       control: { type: 'radio' }
-    },
+    }
   }
 };
diff --git a/components/Organisms/SnackBar/SnackBar.twig b/components/Organisms/SnackBar/SnackBar.twig
index 0303715..5870db4 100644
--- a/components/Organisms/SnackBar/SnackBar.twig
+++ b/components/Organisms/SnackBar/SnackBar.twig
@@ -1,10 +1,16 @@
+{% set variant = variant|default('theme-light') %} {# variant: 'theme-light'|'error'|'warning'|'validated'|'informative' #}
+{% set size = size|default('small') %} {# size: 'small'|'large' #}
+{% set withIcon = withIcon|default(false) %}
+{% set text = text|default('') %}
+{% set button = button|default(null) %}
+
 {% set icon = '' %}
-{% if variant|default('theme-light') == 'error' %}{% set icon = 'error' %}{% endif %}
-{% if variant|default('theme-light') == 'warning' %}{% set icon = 'warning' %}{% endif %}
-{% if variant|default('theme-light') == 'validated' %}{% set icon = 'check' %}{% endif %}
-{% if variant|default('theme-light') == 'informative' %}{% set icon = 'info' %}{% endif %}
+{% if variant == 'error' %}{% set icon = 'error' %}{% endif %}
+{% if variant == 'warning' %}{% set icon = 'warning' %}{% endif %}
+{% if variant == 'validated' %}{% set icon = 'check' %}{% endif %}
+{% if variant == 'informative' %}{% set icon = 'info' %}{% endif %}
 
-<div class='SnackBar SnackBar-{{ size|default('small') }} SnackBar--{{ variant|default('theme-light') }}'>
+<div class='SnackBar SnackBar-{{ size }} SnackBar--{{ variant }}'>
   <div class='SnackBar-content'>
     {% if withIcon and icon %}
     <div class='SnackBar-icon'>{{ source("/icons/" ~ icon  ~".svg") }}</div>
diff --git a/components/Organisms/SummaryCard/SummaryCard.stories.js b/components/Organisms/SummaryCard/SummaryCard.stories.js
index 380036b..288a598 100644
--- a/components/Organisms/SummaryCard/SummaryCard.stories.js
+++ b/components/Organisms/SummaryCard/SummaryCard.stories.js
@@ -7,7 +7,10 @@ export default {
 export const base = {
   render: (args) => `<div class='w-[334px]''>${SummaryCard(args)}</div>`,
   args: {
-    cgv: true,
+    cgvLink: '#',
+    nbArticles: 2,
+    subTotal: '2 150,00€',
+    total: '2 000,00€',
     promo: {
       code: '50JUIL23',
       reduction: '-50€'
diff --git a/components/Organisms/SummaryCard/SummaryCard.twig b/components/Organisms/SummaryCard/SummaryCard.twig
index de2c5ee..60ac531 100644
--- a/components/Organisms/SummaryCard/SummaryCard.twig
+++ b/components/Organisms/SummaryCard/SummaryCard.twig
@@ -1,8 +1,15 @@
+{% set promo = promo|default(null) %}
+{% set giftCard = giftCard|default(null) %}
+{% set nbArticles = nbArticles|default(0) %}
+{% set subTotal = subTotal|default('') %}
+{% set total = total|default('') %}
+{% set cgvLink = cgvLink|default('') %}
+
 <div class='SummaryCard'>
   <div class='SummaryCard-list'>
     <div class='SummaryCard-line'>
-      <div>Sous-total <span class='paragraph-6 font-normal	'>(2 articles)</span></div>
-      <div>2 050,00€</div>
+      <div>Sous-total <span class='paragraph-6 font-normal	'>({{ nbArticles}} article{{ nbArticles > 1 ? 's' : '' }})</span></div>
+      <div>{{ subTotal }}</div>
     </div>
     <div class='SummaryCard-line'>
       <div>Livraison</div>
@@ -42,14 +49,14 @@
   <div class='SummaryCard-footer'>
     <div class='SummaryCard-total'>
       <div>Total TTC</div>
-      <div>2 000,00€</div>
+      <div>{{ total }}</div>
     </div>
     <div class='italic'>
       Taxes de 5,05 € incluse
     </div>
-    {% if cgv %}
+    {% if cgvLink %}
       <div class='mt-2'>
-        En payant votre commande, vous acceptez nos <a href='#'>conditions générales de vente</a> .
+        En payant votre commande, vous acceptez nos <a href='{{ cgvLink }}'>conditions générales de vente</a> .
       </div>
     {% endif %}
   </div>