Add defaults values EVERYWHERE

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 }}'

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 %}

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 }}'

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>

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' %}

components/Layout/Footer/FooterCheckout.twig

@@ -18,4 +18,4 @@
 		</li>
 	</ul>
 	<span class='text-grey indication indication-small'>© OpenStudio - 2024</span>
-</div</footer>
+</footer>

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" %}

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]'>

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>

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>

components/Layout/Reinsurance/Reinsurance.twig

@@ -1,3 +1,5 @@
+{% set data = data|default([]) %}
+
 <div class='ReinsuranceModule'>
   <div class='ReinsuranceModule-wrapper'>
     {% for reinsurance in data %}

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>

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>

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...'
   },

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>

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" />

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>

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: {}
 };

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>

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 }}>

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'>

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>
-
-
-
-

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 %}

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>

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} %}

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 %}

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>

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 %}

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' %}

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' %}

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>

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 %}

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 %}