change file extension twig components (#57)

* change file extension twig components * typo * typo * improve component integ
thelia · Sep 13, 2024 · 1e986f0 · 1e986f0
1 parent d34e334
commit 1e986f0
Show file tree

Hide file tree

Showing 198 changed files with 604 additions and 535 deletions.
diff --git a/404.html.twig b/404.html.twig
@@ -9,7 +9,7 @@
 			{{ source('assets/images/not-found.svg') }}
 		</div>
 		<h3 class="mt-4 mb-6 h3">{{ 'Oops, this page does not exist...'|trans }}</h3>
-		{% include '@components/Molecules/Button/Button.twig' with {text: 'Homepage',  classes:'Button--large', href: "/", variant: 'primary', icon_left: "chevron-left"} %}
+		{% include '@components/Molecules/Button/Button.html.twig' with {text: 'Homepage',  classes:'Button--large', href: "/", variant: 'primary', icon_left: "chevron-left"} %}
 	</div>
 {% endblock %}
 

diff --git a/base.html.twig b/base.html.twig
@@ -17,13 +17,13 @@
 	</head>
 	<body class="no-js">
 		{% block header %}
-			{% include '@components/Layout/Header/Header.twig' %}
+			{% include '@components/Layout/Header/Header.html.twig' %}
 		{% endblock %}
 
 		{% block body %}{% endblock %}
 
 		{% block footer %}
-			{% include '@components/Layout/Footer/Footer.twig' %}
+			{% include '@components/Layout/Footer/Footer.html.twig' %}
 		{% endblock %}
 	</body>
 </html>
diff --git a/category.html.twig b/category.html.twig
@@ -7,10 +7,10 @@
 	{% set products = resources('/api/front/products', {'productCategories.category.id': attr('category', 'id'), itemsPerPage:9, page: page}) %}
 	{% set totalProducts = resources('/api/front/products', {'productCategories.category.id': attr('category', 'id'), itemsPerPage:9, page: page}) %}
 
-	{% include '@components/Layout/Subheader/Category/SubheaderCategory.twig' with {title: attr('category', 'title'), description: attr('category', 'description'), nbProducts: products|length}  %}
+	{% include '@components/Layout/Subheader/Category/SimilarContent.html.twig' with {title: attr('category', 'title'), description: attr('category', 'description'), nbProducts: products|length}  %}
   {% include '@components/Layout/CategoryProduct/CategoryProduct.html.twig' with {products: products, totalProducts:totalProducts} %}
 
-	{% include '@components/Layout/Reinsurance/Reinsurance.twig' with { data: [
+	{% include '@components/Layout/Reinsurance/Reinsurance.html.twig' with { data: [
       {
         strongText: 'Free delivery' | trans,
         text: 'For any order over €100' | trans,

diff --git a/checkout.html.twig b/checkout.html.twig
@@ -9,15 +9,15 @@
 {% endblock %}
 
 {% block header %}
-	{% include '@components/Layout/Header/HeaderCheckout.twig' %}
+	{% include '@components/Layout/Header/HeaderCheckout.html.twig' %}
 {% endblock %}
 {% block body %}
 	{% set products = resources('/api/front/products', {'productCategories.category.id':1, itemsPerPage:3}) %}
 	<div id="Checkout"></div>
 	<div class="bg-theme-lighter">
-		{% include '@components/Layout/CrossSelling/CrossSelling.twig' with {products: products, title: 'Consultés récemment'} %}
+		{% include '@components/Layout/CrossSelling/CrossSelling.html.twig' with {products: products, title: 'Consultés récemment'} %}
 	</div>
 {% endblock %}
 {% block footer %}
-	{% include '@components/Layout/Footer/FooterCheckout.twig' %}
+	{% include '@components/Layout/Footer/FooterCheckout.html.twig' %}
 {% endblock %}
diff --git a/components/Atoms/Colors/Colors.twig → components/Atoms/Colors/Colors.html.twig b/components/Atoms/Colors/Colors.twig → components/Atoms/Colors/Colors.html.twig
diff --git a/components/Atoms/Colors/Colors.stories.js b/components/Atoms/Colors/Colors.stories.js
@@ -1,4 +1,4 @@
-import Colors from './Colors.twig';
+import Colors from './Colors.html.twig';
 import colors from './colors.json';
 
 import './colors.css';

diff --git a/components/Atoms/Font/Font.stories.js b/components/Atoms/Font/Font.stories.js
@@ -1,6 +1,6 @@
-import Title from './Title.twig';
-import Paragraph from './Paragraph.twig';
-import Other from './Other.twig';
+import Title from './Title.html.twig';
+import Paragraph from './Paragraph.html.twig';
+import Other from './Other.html.twig';
 import './font.css';
 
 export default {

diff --git a/components/Atoms/Font/Other.twig → components/Atoms/Font/Other.html.twig b/components/Atoms/Font/Other.twig → components/Atoms/Font/Other.html.twig
diff --git a/components/Atoms/Font/Paragraph.twig → components/Atoms/Font/Paragraph.html.twig b/components/Atoms/Font/Paragraph.twig → components/Atoms/Font/Paragraph.html.twig
diff --git a/components/Atoms/Font/Title.twig → components/Atoms/Font/Title.html.twig b/components/Atoms/Font/Title.twig → components/Atoms/Font/Title.html.twig
diff --git a/components/Atoms/Form/Checkbox.twig → components/Atoms/Form/Checkbox.html.twig b/components/Atoms/Form/Checkbox.twig → components/Atoms/Form/Checkbox.html.twig
diff --git a/components/Atoms/Form/Checkboxs.html.twig b/components/Atoms/Form/Checkboxs.html.twig
@@ -0,0 +1,7 @@
+<div>
+  {% include './Checkbox.html.twig' with {label: 'Unchecked',disabled: disabled, error:error} %}
+  {% include './Checkbox.html.twig' with {label: 'Checked',disabled: disabled, error:error, checked:true} %}
+  {% include './Checkbox.html.twig' with
+    {label: 'Undefined',disabled: disabled, error:error, classes:'indeterminate'}
+  %}
+</div>
diff --git a/components/Atoms/Form/Checkboxs.twig b/components/Atoms/Form/Checkboxs.twig
diff --git a/components/Atoms/Form/Form.stories.js b/components/Atoms/Form/Form.stories.js
@@ -1,6 +1,6 @@
-import Checkbox from './Checkboxs.twig';
-import Radio from './Radios.twig';
-import Toggle from './Toggles.twig';
+import Checkbox from './Checkboxs.html.twig';
+import Radio from './Radios.html.twig';
+import Toggle from './Toggles.html.twig';
 import './checkbox.css';
 import './toggle.css';
 

diff --git a/components/Atoms/Form/Radio.twig → components/Atoms/Form/Radio.html.twig b/components/Atoms/Form/Radio.twig → components/Atoms/Form/Radio.html.twig
diff --git a/components/Atoms/Form/Radios.html.twig b/components/Atoms/Form/Radios.html.twig
@@ -0,0 +1,5 @@
+<div>
+  {% include './Radio.html.twig' with {label: 'Radio 1', name: 'radio',disabled: disabled, error:error} %}
+  {% include './Radio.html.twig' with {label: 'Radio 2', name: 'radio',disabled: disabled, error:error, checked:true} %}
+  {% include './Radio.html.twig' with    {label: 'Radio 3', name: 'radio',disabled: disabled, error:error} %}
+</div>
diff --git a/components/Atoms/Form/Radios.twig b/components/Atoms/Form/Radios.twig
diff --git a/components/Atoms/Form/Toggle.twig → components/Atoms/Form/Toggle.html.twig b/components/Atoms/Form/Toggle.twig → components/Atoms/Form/Toggle.html.twig
diff --git a/components/Atoms/Form/Toggles.html.twig b/components/Atoms/Form/Toggles.html.twig
@@ -0,0 +1,4 @@
+{% include './Toggle.html.twig' with {labelOff: 'Off', labelOn: 'On',disabled: disabled, error:error} %}
+<div class="mt-5">
+  {% include './Toggle.html.twig' with {disabled: disabled, error:error, checked:true} %}
+</div>
diff --git a/components/Atoms/Form/Toggles.twig b/components/Atoms/Form/Toggles.twig
diff --git a/components/Atoms/Icon/Icon.twig → components/Atoms/Icon/Icon.html.twig b/components/Atoms/Icon/Icon.twig → components/Atoms/Icon/Icon.html.twig
diff --git a/components/Atoms/Icon/Icon.stories.js b/components/Atoms/Icon/Icon.stories.js
@@ -1,4 +1,4 @@
-import Icon from './Icon.twig';
+import Icon from './Icon.html.twig';
 import icons from './icons.json';
 
 export default {

diff --git a/components/Layout/CategoryProduct/CategoryProduct.html.twig b/components/Layout/CategoryProduct/CategoryProduct.html.twig
@@ -6,15 +6,15 @@
     <div class="h4 mb-[22px]">{{ 'Filter'|trans }}</div>
 
     <div>
-      {% include '@components/Molecules/Accordion/Accordion.twig' with {
+      {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
         title: "Size" | trans,
         content: ""
       } %}
-      {% include '@components/Molecules/Accordion/Accordion.twig' with {
+      {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
         title: "Color" | trans,
         content: "test"
       } %}
-      {% include '@components/Molecules/Accordion/Accordion.twig' with {
+      {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
         title: "Material" | trans,
         content: "test"
       } %}
@@ -27,7 +27,7 @@
         {{ 'item(s)'|trans }}</span>
 
       <div class="w-[250px]">
-        {% include '@components/Molecules/Fields/FieldSelect/FieldSelect.twig' with {
+        {% include '@components/Molecules/Fields/FieldSelect/FieldSelect.html.twig' with {
         label: "Sort by" | trans,
         tooltip: "Sort the products" | trans,
         placeholder: "Sort by" | trans,
@@ -51,12 +51,12 @@
 
     <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8 mb-[40px]">
       {% for product in products %}
-        {% include '@components/Organisms/ProductCard/ProductCard.twig' with  product|merge({displayWishButton: true}) %}
+        {% include '@components/Organisms/ProductCard/ProductCard.html.twig' with  product|merge({displayWishButton: true}) %}
       {% endfor %}
     </div>
 
     <div class='mx-auto lg:mx-0 lg:ml-auto w-max'>
-      {% include '@components/Molecules/Pagination/Pagination.twig' with {
+      {% include '@components/Molecules/Pagination/Pagination.html.twig' with {
       prevText: 'Previous' | trans,
       nextText: 'Next' | trans,
       currentPage: page,

diff --git a/components/Layout/CrossSelling/CrossSelling.html.twig b/components/Layout/CrossSelling/CrossSelling.html.twig
@@ -0,0 +1,19 @@
+{% set title = title|default('') %}
+
+{% set button = button|default(null) %}
+
+
+
+<div class="pt-[56px] pb-[68px] pl-[24px] md:pl-[48px] xl:pt-[68px] xl:pb-[104px] lg:px-0 lg:container lg:mx-auto">
+	<div class='pb-6 text-black h2'>{{ title }}</div>
+	<div class='CrossSelling slider'>
+		{% for product in this.products %}
+		{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with product|merge({displayWishButton: true}) %}
+		{% endfor %}
+	</div>
+  {% if button %}
+	<div class='mt-5'>
+		{% include '@components/Molecules/Button/Button.html.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %}
+	</div>
+  {% endif %}
+</div>
diff --git a/components/Layout/CrossSelling/CrossSelling.stories.js b/components/Layout/CrossSelling/CrossSelling.stories.js
@@ -1,4 +1,4 @@
-import CrossSelling from './CrossSelling.twig';
+import CrossSelling from './CrossSelling.html.twig';
 import { slider } from '../../../assets/js/slider';
 import { MAX_SECTION_PRODUCT } from '../../base';
 

diff --git a/components/Layout/CrossSelling/CrossSelling.twig b/components/Layout/CrossSelling/CrossSelling.twig
diff --git a/components/Layout/Footer/Footer.twig → components/Layout/Footer/Footer.html.twig b/components/Layout/Footer/Footer.twig → components/Layout/Footer/Footer.html.twig
@@ -17,7 +17,7 @@
 			<div class='Footer-newsletter mb-[50px] md:mb-0 md:pt-[50px] md:pl-[50px] lg:pt-[100px]'>
 				<div class='font-semibold paragraph-1'>Newsletter</div>
 				<div class='mb-4 paragraph-5'>Suivez nos dernières actualités & promotions</div>
-				{% include '@components/Molecules/Button/Button.twig' with {text: 'Je m\'inscris', type: 'primary', isFill: true, classes: "Button--large w-full md:w-auto"} %}
+				{% include '@components/Molecules/Button/Button.html.twig' with {text: 'Je m\'inscris', type: 'primary', isFill: true, classes: "Button--large w-full md:w-auto"} %}
       </div>
     {% endif %}
     <div class='Footer-store-infos mb-[30px] md:py-[50px] md:pl-[40px] md:mb-0 lg:pt-[100px] lg:pb-[90px] {{footerStoreInfosClasses}}'>
@@ -26,7 +26,7 @@
         <div class='paragraph-5'>Adresse première ligne <br> Complément d'adresse <br> 00000 Ville-sur-Fleuve <br> PAYS</div>
         <div class='my-4 paragraph-5'>Tel. +33 00 00 00 00 00</div>
       </div>
-      {% include '@components/Molecules/Button/Button.twig' with {text: 'Contactez nous', type: 'primary', icon_right: "email", isFill: true, classes: "w-full md:w-auto Button--secondary Button--large"} %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Contactez nous', type: 'primary', icon_right: "email", isFill: true, classes: "w-full md:w-auto Button--secondary Button--large"} %}
     </div>
     <ul class='lg:pt-[100px] {{footerLinksClasses}}'>
       {% set footerLinkClass = 'underline hover:no-underline focus:no-underline hover:opacity-75 focus:opacity-75' %}

diff --git a/components/Layout/Footer/Footer.stories.js b/components/Layout/Footer/Footer.stories.js
@@ -1,5 +1,5 @@
-import Footer from './Footer.twig';
-import FooterCheckout from './FooterCheckout.twig';
+import Footer from './Footer.html.twig';
+import FooterCheckout from './FooterCheckout.html.twig';
 
 export default {
   title: 'Design System/Layout/Footer'

diff --git a/components/Layout/Footer/FooterCheckout.twig → ...ts/Layout/Footer/FooterCheckout.html.twig b/components/Layout/Footer/FooterCheckout.twig → ...ts/Layout/Footer/FooterCheckout.html.twig
diff --git a/components/Layout/Header/Header.twig → components/Layout/Header/Header.html.twig b/components/Layout/Header/Header.twig → components/Layout/Header/Header.html.twig
@@ -5,7 +5,7 @@
 	<div class='flex'>
 		{% if type == "searchbar" %}
 			<div class='hidden lg:block xl:hidden'>
-        {% include '@components/Molecules/HeaderButton/HeaderButton.twig' with {icon: 'menu', text: 'Cart', classes: 'HeaderButton--light', small: true } %}
+        {% include '@components/Molecules/HeaderButton/HeaderButton.html.twig' with {icon: 'menu', text: 'Cart', classes: 'HeaderButton--light', small: true } %}
 			</div>
 		{% endif %}
 
@@ -18,7 +18,7 @@
 
 	{% if type == "searchbar" %}
 		<div class='w-[500px] 2xl:w-[800px] hidden lg:flex items-stretch flex-col justify-center absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2'>
-			{% include '@components/Molecules/SearchBar/SearchBar.twig' %}
+			{% include '@components/Molecules/SearchBar/SearchBar.html.twig' %}
 		</div>
 	{% else %}
 		<nav id="Menu">
@@ -30,13 +30,13 @@
       </button>
 			<ul class="Header-navigation" data-menu-sub="0">
         {% for category in categories %}
-				  {% include '@components/Molecules/ItemHeader/ItemHeader.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
+				  {% include '@components/Molecules/ItemHeader/ItemHeader.html.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
         {% endfor %}
 			</ul>
 		</nav>
 	{% endif %}
 
-	{% include '@components/Organisms/HeaderNav/HeaderNav.twig' with {type: type} %}
+	{% include '@components/Organisms/HeaderNav/HeaderNav.html.twig' with {type: type} %}
 
 	{% if type == "searchbar" %}
 		<nav id="Menu" class='Header-navWrap'>
@@ -48,7 +48,7 @@
       </button>
 			<ul class="Header-navigation">
         {% for category in categories %}
-				  {% include '@components/Molecules/ItemHeader/ItemHeader.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
+				  {% include '@components/Molecules/ItemHeader/ItemHeader.html.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
         {% endfor %}
 			</ul>
 		</nav>

diff --git a/components/Layout/Header/Header.stories.js b/components/Layout/Header/Header.stories.js
@@ -1,6 +1,6 @@
-import Header from './Header.twig';
+import Header from './Header.html.twig';
 import HeaderScript from './Header.js';
-import HeaderCheckout from './HeaderCheckout.twig';
+import HeaderCheckout from './HeaderCheckout.html.twig';
 
 export default {
   title: 'Design System/Layout/Header'

diff --git a/components/Layout/Header/HeaderCheckout.twig → ...ts/Layout/Header/HeaderCheckout.html.twig b/components/Layout/Header/HeaderCheckout.twig → ...ts/Layout/Header/HeaderCheckout.html.twig
diff --git a/components/Layout/Hero/Hero.twig → components/Layout/Hero/Hero.html.twig b/components/Layout/Hero/Hero.twig → components/Layout/Hero/Hero.html.twig
@@ -12,7 +12,7 @@
             <div class='{{ loop.index != 1 ? "paragraph-4" : "paragraph-1" }} Hero-itemContentTitle font-bold'>
               {{ block.title | default('Title') }}
             </div>
-            {% include '@components/Molecules/Button/Button.twig' with {
+            {% include '@components/Molecules/Button/Button.html.twig' with {
               text: block.linkLabel,
               type: 'primary',
               icon_right: "chevron-right",

diff --git a/components/Layout/Hero/Hero.stories.js b/components/Layout/Hero/Hero.stories.js
@@ -1,17 +1,16 @@
-import Hero from './Hero.twig';
+import Hero from './Hero.html.twig';
 
 export default {
   title: 'Design System/Layout/Hero'
 };
 
-
-
 export const Base = {
   render: (args) => Hero(args),
   args: {
     blocks: [
       {
-        image: 'https://sabatier-k.openstudio-lab.com/cache/images/carousel/design780x480-4-4.png',
+        image:
+          'https://sabatier-k.openstudio-lab.com/cache/images/carousel/design780x480-4-4.png',
         title: 'Ici une phrase d’accroche pour accompagner le visuel',
         href: 'http://sabatier-k.openstudio-lab.com/couteaux-sabatier.html',
         linkLabel: 'Je découvre'
@@ -31,7 +30,6 @@ export const Base = {
     ]
   },
   argTypes: {
-    blocks: { control: 'object' },
+    blocks: { control: 'object' }
   }
 };
-
diff --git a/components/Layout/ProductCategory/ProductCategory.html.twig b/components/Layout/ProductCategory/ProductCategory.html.twig
@@ -0,0 +1,12 @@
+{% set title = title|default('') %}
+{% set categories = this.categories|default([]) %}
+
+<div class='xl:container xl:mx-auto'>
+  <h2 class='pb-6 text-black h2'>{{ title }}</h2>
+</div>
+
+<div class='flex flex-col gap-10 lg:grid lg:grid-cols-3 xl:container xl:mx-auto'>
+  {% for category in categories %}
+    {% include '@components/Organisms/CategoryCard/CategoryCard.html.twig' with category %}
+  {% endfor %}
+</div>
diff --git a/components/Layout/ProductCategory/ProductCategory.stories.js b/components/Layout/ProductCategory/ProductCategory.stories.js
@@ -1,4 +1,4 @@
-import ProductCategory from './ProductCategory.twig';
+import ProductCategory from './ProductCategory.html.twig';
 
 export default {
   title: 'Design System/Layout/Product Category'

diff --git a/components/Layout/ProductCategory/ProductCategory.twig b/components/Layout/ProductCategory/ProductCategory.twig
diff --git a/...Layout/ProductGallery/ProductGallery.twig → ...t/ProductGallery/ProductGallery.html.twig b/...Layout/ProductGallery/ProductGallery.twig → ...t/ProductGallery/ProductGallery.html.twig
diff --git a/components/Layout/ProductGallery/test.twig b/components/Layout/ProductGallery/test.twig
diff --git a/.../PromotionalBanner/PromotionalBanner.twig → ...otionalBanner/PromotionalBanner.html.twig b/.../PromotionalBanner/PromotionalBanner.twig → ...otionalBanner/PromotionalBanner.html.twig
diff --git a/components/Layout/PromotionalBanner/PromotionalBanner.stories.js b/components/Layout/PromotionalBanner/PromotionalBanner.stories.js
@@ -1,4 +1,4 @@
-import PromotionalBanner from './PromotionalBanner.twig';
+import PromotionalBanner from './PromotionalBanner.html.twig';
 import promotionalBanner from './PromotionalBanner';
 
 export default {

diff --git a/...nents/Layout/Reinsurance/Reinsurance.twig → .../Layout/Reinsurance/Reinsurance.html.twig b/...nents/Layout/Reinsurance/Reinsurance.twig → .../Layout/Reinsurance/Reinsurance.html.twig
diff --git a/components/Layout/Reinsurance/Reinsurance.stories.js b/components/Layout/Reinsurance/Reinsurance.stories.js
@@ -1,4 +1,4 @@
-import Reinsurance from './Reinsurance.twig';
+import Reinsurance from './Reinsurance.html.twig';
 
 export default {
   title: 'Design System/Layout/Reinsurance'

diff --git a/components/Layout/Review/Review.twig → components/Layout/Review/Review.html.twig b/components/Layout/Review/Review.twig → components/Layout/Review/Review.html.twig
@@ -6,8 +6,8 @@
 	<div class='pb-6 text-black h2'>{{ title }}</div>
 	<div class='Reviews slider'>
 		{% for review in reviews %}
-    {% include '@components/Organisms/Card/Review/Review.twig' with review %}
+    {% include '@components/Organisms/Card/Review/Review.html.twig' with review %}
 		{% endfor %}
 	</div>
-	{% include '@components/Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary', classes: "mt-5"} %}
+	{% include '@components/Molecules/Button/Button.html.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary', classes: "mt-5"} %}
 </div>
diff --git a/components/Layout/Review/Review.stories.js b/components/Layout/Review/Review.stories.js
@@ -1,4 +1,4 @@
-import Review from './Review.twig';
+import Review from './Review.html.twig';
 import { slider } from '../../../assets/js/slider';
 
 export default {