Skip to content

Commit

Permalink
change file extension twig components (#57)
Browse files Browse the repository at this point in the history
* change file extension twig components

* typo

* typo

* improve component integ
  • Loading branch information
Lucanis authored Sep 13, 2024
1 parent d34e334 commit 1e986f0
Show file tree
Hide file tree
Showing 198 changed files with 604 additions and 535 deletions.
2 changes: 1 addition & 1 deletion 404.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand Down
4 changes: 2 additions & 2 deletions base.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions category.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions checkout.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
File renamed without changes.
2 changes: 1 addition & 1 deletion components/Atoms/Colors/Colors.stories.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Colors from './Colors.twig';
import Colors from './Colors.html.twig';
import colors from './colors.json';

import './colors.css';
Expand Down
6 changes: 3 additions & 3 deletions components/Atoms/Font/Font.stories.js
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
7 changes: 7 additions & 0 deletions components/Atoms/Form/Checkboxs.html.twig
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 0 additions & 7 deletions components/Atoms/Form/Checkboxs.twig

This file was deleted.

6 changes: 3 additions & 3 deletions components/Atoms/Form/Form.stories.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
File renamed without changes.
5 changes: 5 additions & 0 deletions components/Atoms/Form/Radios.html.twig
Original file line number Diff line number Diff line change
@@ -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>
5 changes: 0 additions & 5 deletions components/Atoms/Form/Radios.twig

This file was deleted.

File renamed without changes.
4 changes: 4 additions & 0 deletions components/Atoms/Form/Toggles.html.twig
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 0 additions & 4 deletions components/Atoms/Form/Toggles.twig

This file was deleted.

File renamed without changes.
2 changes: 1 addition & 1 deletion components/Atoms/Icon/Icon.stories.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Icon from './Icon.twig';
import Icon from './Icon.html.twig';
import icons from './icons.json';

export default {
Expand Down
12 changes: 6 additions & 6 deletions components/Layout/CategoryProduct/CategoryProduct.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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"
} %}
Expand All @@ -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,
Expand All @@ -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,
Expand Down
19 changes: 19 additions & 0 deletions components/Layout/CrossSelling/CrossSelling.html.twig
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion components/Layout/CrossSelling/CrossSelling.stories.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
21 changes: 0 additions & 21 deletions components/Layout/CrossSelling/CrossSelling.twig

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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}}'>
Expand All @@ -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' %}
Expand Down
4 changes: 2 additions & 2 deletions components/Layout/Footer/Footer.stories.js
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand All @@ -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">
Expand All @@ -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'>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions components/Layout/Header/Header.stories.js
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 4 additions & 6 deletions components/Layout/Hero/Hero.stories.js
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -31,7 +30,6 @@ export const Base = {
]
},
argTypes: {
blocks: { control: 'object' },
blocks: { control: 'object' }
}
};

12 changes: 12 additions & 0 deletions components/Layout/ProductCategory/ProductCategory.html.twig
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import ProductCategory from './ProductCategory.twig';
import ProductCategory from './ProductCategory.html.twig';

export default {
title: 'Design System/Layout/Product Category'
Expand Down
12 changes: 0 additions & 12 deletions components/Layout/ProductCategory/ProductCategory.twig

This file was deleted.

1 change: 0 additions & 1 deletion components/Layout/ProductGallery/test.twig

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import PromotionalBanner from './PromotionalBanner.twig';
import PromotionalBanner from './PromotionalBanner.html.twig';
import promotionalBanner from './PromotionalBanner';

export default {
Expand Down
2 changes: 1 addition & 1 deletion components/Layout/Reinsurance/Reinsurance.stories.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Reinsurance from './Reinsurance.twig';
import Reinsurance from './Reinsurance.html.twig';

export default {
title: 'Design System/Layout/Reinsurance'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion components/Layout/Review/Review.stories.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Review from './Review.twig';
import Review from './Review.html.twig';
import { slider } from '../../../assets/js/slider';

export default {
Expand Down
Loading

0 comments on commit 1e986f0

Please sign in to comment.