diff --git a/404.html.twig b/404.html.twig index 64f9a96..bd4ef3f 100644 --- a/404.html.twig +++ b/404.html.twig @@ -9,7 +9,7 @@ {{ source('assets/images/not-found.svg') }}

{{ 'Oops, this page does not exist...'|trans }}

- {% 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"} %} {% endblock %} diff --git a/base.html.twig b/base.html.twig index 4b80208..d3829eb 100644 --- a/base.html.twig +++ b/base.html.twig @@ -17,13 +17,13 @@ {% 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 %} diff --git a/category.html.twig b/category.html.twig index 30fedc2..830be57 100644 --- 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 index 4077562..9b721d8 100644 --- 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}) %}
- {% 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'} %}
{% 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 b/components/Atoms/Colors/Colors.html.twig similarity index 100% rename from components/Atoms/Colors/Colors.twig rename to components/Atoms/Colors/Colors.html.twig diff --git a/components/Atoms/Colors/Colors.stories.js b/components/Atoms/Colors/Colors.stories.js index 6e44156..0da0b3a 100644 --- 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 index e625046..4505a7b 100644 --- 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 b/components/Atoms/Font/Other.html.twig similarity index 100% rename from components/Atoms/Font/Other.twig rename to components/Atoms/Font/Other.html.twig diff --git a/components/Atoms/Font/Paragraph.twig b/components/Atoms/Font/Paragraph.html.twig similarity index 100% rename from components/Atoms/Font/Paragraph.twig rename to components/Atoms/Font/Paragraph.html.twig diff --git a/components/Atoms/Font/Title.twig b/components/Atoms/Font/Title.html.twig similarity index 100% rename from components/Atoms/Font/Title.twig rename to components/Atoms/Font/Title.html.twig diff --git a/components/Atoms/Form/Checkbox.twig b/components/Atoms/Form/Checkbox.html.twig similarity index 100% rename from components/Atoms/Form/Checkbox.twig rename to components/Atoms/Form/Checkbox.html.twig diff --git a/components/Atoms/Form/Checkboxs.html.twig b/components/Atoms/Form/Checkboxs.html.twig new file mode 100644 index 0000000..fd8db80 --- /dev/null +++ b/components/Atoms/Form/Checkboxs.html.twig @@ -0,0 +1,7 @@ +
+ {% 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'} + %} +
diff --git a/components/Atoms/Form/Checkboxs.twig b/components/Atoms/Form/Checkboxs.twig deleted file mode 100644 index 22dc900..0000000 --- a/components/Atoms/Form/Checkboxs.twig +++ /dev/null @@ -1,7 +0,0 @@ -
- {% include './Checkbox.twig' with {label: 'Unchecked',disabled: disabled, error:error} %} - {% include './Checkbox.twig' with {label: 'Checked',disabled: disabled, error:error, checked:true} %} - {% include './Checkbox.twig' with - {label: 'Undefined',disabled: disabled, error:error, classes:'indeterminate'} - %} -
diff --git a/components/Atoms/Form/Form.stories.js b/components/Atoms/Form/Form.stories.js index c2c6fc9..1e472be 100644 --- 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 b/components/Atoms/Form/Radio.html.twig similarity index 100% rename from components/Atoms/Form/Radio.twig rename to components/Atoms/Form/Radio.html.twig diff --git a/components/Atoms/Form/Radios.html.twig b/components/Atoms/Form/Radios.html.twig new file mode 100644 index 0000000..61492f3 --- /dev/null +++ b/components/Atoms/Form/Radios.html.twig @@ -0,0 +1,5 @@ +
+ {% 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} %} +
diff --git a/components/Atoms/Form/Radios.twig b/components/Atoms/Form/Radios.twig deleted file mode 100644 index 88b4ea2..0000000 --- a/components/Atoms/Form/Radios.twig +++ /dev/null @@ -1,5 +0,0 @@ -
- {% include './Radio.twig' with {label: 'Radio 1', name: 'radio',disabled: disabled, error:error} %} - {% include './Radio.twig' with {label: 'Radio 2', name: 'radio',disabled: disabled, error:error, checked:true} %} - {% include './Radio.twig' with {label: 'Radio 3', name: 'radio',disabled: disabled, error:error} %} -
diff --git a/components/Atoms/Form/Toggle.twig b/components/Atoms/Form/Toggle.html.twig similarity index 100% rename from components/Atoms/Form/Toggle.twig rename to components/Atoms/Form/Toggle.html.twig diff --git a/components/Atoms/Form/Toggles.html.twig b/components/Atoms/Form/Toggles.html.twig new file mode 100644 index 0000000..1c48e8a --- /dev/null +++ b/components/Atoms/Form/Toggles.html.twig @@ -0,0 +1,4 @@ +{% include './Toggle.html.twig' with {labelOff: 'Off', labelOn: 'On',disabled: disabled, error:error} %} +
+ {% include './Toggle.html.twig' with {disabled: disabled, error:error, checked:true} %} +
diff --git a/components/Atoms/Form/Toggles.twig b/components/Atoms/Form/Toggles.twig deleted file mode 100644 index f37d581..0000000 --- a/components/Atoms/Form/Toggles.twig +++ /dev/null @@ -1,4 +0,0 @@ -{% include './Toggle.twig' with {labelOff: 'Off', labelOn: 'On',disabled: disabled, error:error} %} -
- {% include './Toggle.twig' with {disabled: disabled, error:error, checked:true} %} -
diff --git a/components/Atoms/Icon/Icon.twig b/components/Atoms/Icon/Icon.html.twig similarity index 100% rename from components/Atoms/Icon/Icon.twig rename to components/Atoms/Icon/Icon.html.twig diff --git a/components/Atoms/Icon/Icon.stories.js b/components/Atoms/Icon/Icon.stories.js index b5518e5..9279dd1 100644 --- 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 index 01661bf..69be4ae 100644 --- a/components/Layout/CategoryProduct/CategoryProduct.html.twig +++ b/components/Layout/CategoryProduct/CategoryProduct.html.twig @@ -6,15 +6,15 @@
{{ 'Filter'|trans }}
- {% 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 }}
- {% 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 @@
{% 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 %}
- {% 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 new file mode 100644 index 0000000..af2596a --- /dev/null +++ b/components/Layout/CrossSelling/CrossSelling.html.twig @@ -0,0 +1,19 @@ +{% set title = title|default('') %} + +{% set button = button|default(null) %} + + + +
+
{{ title }}
+
+ {% for product in this.products %} + {% include '@components/Organisms/ProductCard/ProductCard.html.twig' with product|merge({displayWishButton: true}) %} + {% endfor %} +
+ {% if button %} +
+ {% include '@components/Molecules/Button/Button.html.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %} +
+ {% endif %} +
diff --git a/components/Layout/CrossSelling/CrossSelling.stories.js b/components/Layout/CrossSelling/CrossSelling.stories.js index cd2f533..78cf1d2 100644 --- 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 deleted file mode 100644 index c9c7cd3..0000000 --- a/components/Layout/CrossSelling/CrossSelling.twig +++ /dev/null @@ -1,21 +0,0 @@ -{% set title = title|default('') %} -{% set products = products|default(null) %} -{% set button = button|default(null) %} - -{% if categoryId is defined %} - {% set products = resources('/api/front/products', {'productCategories.category.id':categoryId, itemsPerPage:3}) %} -{% endif %} - -
-
{{ title }}
-
- {% for product in products %} - {% include '@components/Organisms/ProductCard/ProductCard.twig' with product|merge({displayWishButton: true}) %} - {% endfor %} -
- {% if button %} -
- {% include '@components/Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %} -
- {% endif %} -
diff --git a/components/Layout/Footer/Footer.twig b/components/Layout/Footer/Footer.html.twig similarity index 90% rename from components/Layout/Footer/Footer.twig rename to components/Layout/Footer/Footer.html.twig index 43491f2..4660271 100644 --- a/components/Layout/Footer/Footer.twig +++ b/components/Layout/Footer/Footer.html.twig @@ -17,7 +17,7 @@
Newsletter
Suivez nos dernières actualités & promotions
- {% 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"} %}
{% endif %}
@@ -26,7 +26,7 @@
Adresse première ligne
Complément d'adresse
00000 Ville-sur-Fleuve
PAYS
Tel. +33 00 00 00 00 00
- {% 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"} %}
diff --git a/components/Layout/SimilarContent/SimilarContent.stories.js b/components/Layout/SimilarContent/SimilarContent.stories.js index e160151..94bbb6b 100644 --- a/components/Layout/SimilarContent/SimilarContent.stories.js +++ b/components/Layout/SimilarContent/SimilarContent.stories.js @@ -1,4 +1,4 @@ -import SimilarContent from './SimilarContent.twig'; +import SimilarContent from './SimilarContent.html.twig'; import { slider } from '../../../assets/js/slider'; export default { diff --git a/components/Layout/Subheader/Category/SubheaderCategory.twig b/components/Layout/Subheader/Category/SubheaderCategory.html.twig similarity index 81% rename from components/Layout/Subheader/Category/SubheaderCategory.twig rename to components/Layout/Subheader/Category/SubheaderCategory.html.twig index b23cbfa..107c7d8 100644 --- a/components/Layout/Subheader/Category/SubheaderCategory.twig +++ b/components/Layout/Subheader/Category/SubheaderCategory.html.twig @@ -13,7 +13,7 @@
{{ nbProducts }} {{ 'product(s)'|trans }}
- {% include '@components/Molecules/Button/Button.twig' with {text: 'Filter & Sort'|trans, icon_left:'filter', variant: 'secondary'} %} + {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Filter & Sort'|trans, icon_left:'filter', variant: 'secondary'} %}
diff --git a/components/Layout/Subheader/Category/SubheaderCategory.stories.js b/components/Layout/Subheader/Category/SubheaderCategory.stories.js index 677ec82..3230783 100644 --- a/components/Layout/Subheader/Category/SubheaderCategory.stories.js +++ b/components/Layout/Subheader/Category/SubheaderCategory.stories.js @@ -1,4 +1,4 @@ -import SubheaderCategory from './SubheaderCategory.twig'; +import SubheaderCategory from './SubheaderCategory.html.twig'; export default { title: 'Design System/Layout/Subheader/Category' diff --git a/components/Layout/Subheader/ContentPage/SubheaderContentPage.twig b/components/Layout/Subheader/ContentPage/SubheaderContentPage.html.twig similarity index 100% rename from components/Layout/Subheader/ContentPage/SubheaderContentPage.twig rename to components/Layout/Subheader/ContentPage/SubheaderContentPage.html.twig diff --git a/components/Layout/Subheader/ContentPage/SubheaderContentPage.stories.js b/components/Layout/Subheader/ContentPage/SubheaderContentPage.stories.js index 8fcc3bc..4b16538 100644 --- a/components/Layout/Subheader/ContentPage/SubheaderContentPage.stories.js +++ b/components/Layout/Subheader/ContentPage/SubheaderContentPage.stories.js @@ -1,4 +1,4 @@ -import SubheaderContentPage from './SubheaderContentPage.twig'; +import SubheaderContentPage from './SubheaderContentPage.html.twig'; export default { title: 'Design System/Layout/Subheader/Content Page' diff --git a/components/Layout/Subheader/Orders/SubheaderOrders.html.twig b/components/Layout/Subheader/Orders/SubheaderOrders.html.twig new file mode 100644 index 0000000..41334a7 --- /dev/null +++ b/components/Layout/Subheader/Orders/SubheaderOrders.html.twig @@ -0,0 +1,12 @@ +{% set title = title|default('') %} +{% set selected = selected|default('in_progress') %} + +
+
+

{{ title }}

+
+ {% include '@components/Molecules/Button/Button.html.twig' with {text: 'In progress'|trans, sharp:true, variant:selected == 'in_progress' ? 'primary' : 'secondary'} %} + {% include '@components/Molecules/Button/Button.html.twig' with {text: 'History'|trans, sharp:true, variant: selected == 'in_progress' ? 'secondary' : 'primary'} %} +
+
+
diff --git a/components/Layout/Subheader/Orders/SubheaderOrders.stories.js b/components/Layout/Subheader/Orders/SubheaderOrders.stories.js index 13c842f..e6690b2 100644 --- a/components/Layout/Subheader/Orders/SubheaderOrders.stories.js +++ b/components/Layout/Subheader/Orders/SubheaderOrders.stories.js @@ -1,4 +1,4 @@ -import SubheaderOrders from './SubheaderOrders.twig'; +import SubheaderOrders from './SubheaderOrders.html.twig'; export default { title: 'Design System/Layout/Subheader/Orders' diff --git a/components/Layout/Subheader/Orders/SubheaderOrders.twig b/components/Layout/Subheader/Orders/SubheaderOrders.twig deleted file mode 100644 index 61ca41f..0000000 --- a/components/Layout/Subheader/Orders/SubheaderOrders.twig +++ /dev/null @@ -1,12 +0,0 @@ -{% set title = title|default('') %} -{% set selected = selected|default('in_progress') %} - -
-
-

{{ title }}

-
- {% include '@components/Molecules/Button/Button.twig' with {text: 'In progress'|trans, sharp:true, variant:selected == 'in_progress' ? 'primary' : 'secondary'} %} - {% include '@components/Molecules/Button/Button.twig' with {text: 'History'|trans, sharp:true, variant: selected == 'in_progress' ? 'secondary' : 'primary'} %} -
-
-
diff --git a/components/Layout/Subheader/SearchResult/SubheaderSearch.twig b/components/Layout/Subheader/SearchResult/SubheaderSearch.html.twig similarity index 51% rename from components/Layout/Subheader/SearchResult/SubheaderSearch.twig rename to components/Layout/Subheader/SearchResult/SubheaderSearch.html.twig index 4884dfb..50bd4eb 100644 --- a/components/Layout/Subheader/SearchResult/SubheaderSearch.twig +++ b/components/Layout/Subheader/SearchResult/SubheaderSearch.html.twig @@ -5,11 +5,11 @@

{{ title }}

- {% include '@components/Molecules/SearchBar/SearchBar.twig' with { label: "Find a delivery address"|trans, classes: 'SearchBar--white ',placeholder: "e.g. City, Postcode"|trans,iconButtonLeft:true, iconButton: "search" } %} + {% include '@components/Molecules/SearchBar/SearchBar.html.twig' with { label: "Find a delivery address"|trans, classes: 'SearchBar--white ',placeholder: "e.g. City, Postcode"|trans,iconButtonLeft:true, iconButton: "search" } %}
{{ nbProducts}} {{ 'product(s)'|trans }}
- {% include '@components/Molecules/Button/Button.twig' with {text: 'Filter & Sort'|trans,icon_left:'filter', variant: 'secondary'} %} + {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Filter & Sort'|trans,icon_left:'filter', variant: 'secondary'} %}
diff --git a/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js b/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js index 277c2f4..21af82c 100644 --- a/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js +++ b/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js @@ -1,4 +1,4 @@ -import SubheaderSearch from './SubheaderSearch.twig'; +import SubheaderSearch from './SubheaderSearch.html.twig'; export default { title: 'Design System/Layout/Subheader/Search Results' diff --git a/components/Layout/Subheader/TitleOnly/SubheaderTitle.twig b/components/Layout/Subheader/TitleOnly/SubheaderTitle.html.twig similarity index 100% rename from components/Layout/Subheader/TitleOnly/SubheaderTitle.twig rename to components/Layout/Subheader/TitleOnly/SubheaderTitle.html.twig diff --git a/components/Layout/Subheader/TitleOnly/SubheaderTitle.stories.js b/components/Layout/Subheader/TitleOnly/SubheaderTitle.stories.js index 2f28b7a..ca2dee8 100644 --- a/components/Layout/Subheader/TitleOnly/SubheaderTitle.stories.js +++ b/components/Layout/Subheader/TitleOnly/SubheaderTitle.stories.js @@ -1,4 +1,4 @@ -import SubheaderTitle from './SubheaderTitle.twig'; +import SubheaderTitle from './SubheaderTitle.html.twig'; export default { title: 'Design System/Layout/Subheader/TitleOnly' diff --git a/components/Molecules/Accordion/Accordion.twig b/components/Molecules/Accordion/Accordion.html.twig similarity index 100% rename from components/Molecules/Accordion/Accordion.twig rename to components/Molecules/Accordion/Accordion.html.twig diff --git a/components/Molecules/Accordion/Accordion.stories.js b/components/Molecules/Accordion/Accordion.stories.js index a744a17..9742c67 100644 --- a/components/Molecules/Accordion/Accordion.stories.js +++ b/components/Molecules/Accordion/Accordion.stories.js @@ -1,6 +1,6 @@ -import Accordion from './Accordion.twig'; -import FilterList from '../Filters/FilterList/FilterList.twig'; -import FieldInput from '../Fields/FieldInput/FieldInput.twig'; +import Accordion from './Accordion.html.twig'; +import FilterList from '../Filters/FilterList/FilterList.html.twig'; +import FieldInput from '../Fields/FieldInput/FieldInput.html.twig'; export default { title: 'Design System/Molecules/Accordion' @@ -10,19 +10,19 @@ const commonProps = { args: { title: 'Concertina', iconPlus: null, - iconMinus: null, + iconMinus: null }, argTypes: { variant: { options: ['text', 'promo', 'filter', 'faq'], - control: { type: 'select' }, + control: { type: 'select' } }, - iconPlus: { - control: { type: 'text' }, - }, - iconMinus: { - control: { type: 'text' }, + iconPlus: { + control: { type: 'text' } }, + iconMinus: { + control: { type: 'text' } + } } }; diff --git a/components/Molecules/Breadcrumb/Breadcrumb.twig b/components/Molecules/Breadcrumb/Breadcrumb.html.twig similarity index 100% rename from components/Molecules/Breadcrumb/Breadcrumb.twig rename to components/Molecules/Breadcrumb/Breadcrumb.html.twig diff --git a/components/Molecules/Breadcrumb/Breadcrumb.stories.js b/components/Molecules/Breadcrumb/Breadcrumb.stories.js index e190360..b290469 100644 --- a/components/Molecules/Breadcrumb/Breadcrumb.stories.js +++ b/components/Molecules/Breadcrumb/Breadcrumb.stories.js @@ -1,4 +1,4 @@ -import Breadcrumb from './Breadcrumb.twig'; +import Breadcrumb from './Breadcrumb.html.twig'; import breadcrumbFunction from './Breadcrumb.js'; export default { @@ -19,7 +19,7 @@ export const Base = { export const Lengthy = { render: (args) => Breadcrumb(args), play: () => { - breadcrumbFunction() + breadcrumbFunction(); }, args: { items: [ @@ -29,6 +29,5 @@ export const Lengthy = { { label: 'Page mère', href: '#' }, { label: 'Page actuelle' } ] - } }; diff --git a/components/Molecules/Button/Button.twig b/components/Molecules/Button/Button.html.twig similarity index 100% rename from components/Molecules/Button/Button.twig rename to components/Molecules/Button/Button.html.twig diff --git a/components/Molecules/Button/Button.stories.js b/components/Molecules/Button/Button.stories.js index 15be54a..164daf4 100644 --- a/components/Molecules/Button/Button.stories.js +++ b/components/Molecules/Button/Button.stories.js @@ -1,7 +1,7 @@ -import Compact from './Classic.twig'; -import Quantities from './Quantities.twig'; -import Rounds from './Rounds.twig'; -import {quantityButton} from "./button"; +import Compact from './Classic.html.twig'; +import Quantities from './Quantities.html.twig'; +import Rounds from './Rounds.html.twig'; +import { quantityButton } from './button'; export default { title: 'Design System/Molecules/Button' diff --git a/components/Molecules/Button/Classic.twig b/components/Molecules/Button/Classic.html.twig similarity index 84% rename from components/Molecules/Button/Classic.twig rename to components/Molecules/Button/Classic.html.twig index 8cd5df8..b65cda1 100644 --- a/components/Molecules/Button/Classic.twig +++ b/components/Molecules/Button/Classic.html.twig @@ -3,11 +3,11 @@
Large
- {% include './Button.twig' with + {% include './Button.html.twig' with {disabled: false, classes:'Button--large', variant:variant, fill:fill, rectangle:rectangle, text:customText, icon_left: iconLeft, icon_right: iconRight} %} - {% include './Button.twig' with + {% include './Button.html.twig' with {disabled: true, classes:'Button--large', variant:variant, fill:fill, rectangle:rectangle, text:customText, icon_left: iconLeft, icon_right: iconRight} %} @@ -17,11 +17,11 @@
Medium
- {% include './Button.twig' with + {% include './Button.html.twig' with {disabled: false, variant:variant, fill:fill, rectangle:rectangle, text:customText, icon_left: iconLeft, icon_right: iconRight} %} - {% include './Button.twig' with + {% include './Button.html.twig' with {disabled: true, classes:classes, text:customText, icon_left: iconLeft, icon_right: iconRight} %} @@ -31,11 +31,11 @@
Small
- {% include './Button.twig' with + {% include './Button.html.twig' with {disabled: false, classes:'Button--small', variant:variant, fill:fill, rectangle:rectangle, text:customText, icon_left: iconLeft, icon_right: iconRight} %} - {% include './Button.twig' with + {% include './Button.html.twig' with {disabled: true, classes:'Button--small', variant:variant, fill:fill, rectangle:rectangle, text:customText, icon_left: iconLeft, icon_right: iconRight} %} diff --git a/components/Molecules/Button/Quantities.html.twig b/components/Molecules/Button/Quantities.html.twig new file mode 100644 index 0000000..55950fc --- /dev/null +++ b/components/Molecules/Button/Quantities.html.twig @@ -0,0 +1,39 @@ + +
+
Large
+
+ {% include './Quantity.html.twig' with {disabled: false, value:1, classes:'Button--large'} %} + {% include './Quantity.html.twig' with {disabled: true, value:1, classes:'Button--large'} %} + {% include './QuantityButton.html.twig' with {value:1, classes:'Button--large', text:'Ajouter au panier', icon:'cart'} %} +
+ +
Medium
+
+ {% include './Quantity.html.twig' with {disabled: false, value:1} %} + {% include './Quantity.html.twig' with {disabled: true, value:1} %} + {% include './QuantityButton.html.twig' with {value:1, text:'Ajouter au panier', icon:'cart'} %} + {% include './QuantityButton.html.twig' with {disabled: true,value:1, text:'Ajouter au panier', icon:'cart'} %} + +
+ +
Small
+
+ {% include './Quantity.html.twig' with {disabled: false, value:1, classes:'Button--small'} %} + {% include './Quantity.html.twig' with {disabled: true, value:1, classes:'Button--small'} %} + {% include './QuantityButton.html.twig' with {value:1, classes:'Button--small', text:'Ajouter au panier', icon:'cart'} %} + +
+ +
XSmall
+
+ {% include './Quantity.html.twig' with {disabled: false, value:1, classes:'Button--small Button--xsmall'} %} + {% include './Quantity.html.twig' with {disabled: true, value:1, classes:'Button--small Button--xsmall'} %} + +
+ +
Secondary
+
+ {% include './Quantity.html.twig' with {disabled: false, value:1, classes:'Button--secondary'} %} + {% include './Quantity.html.twig' with {disabled: true, value:1, classes:'Button--secondary'} %} +
+
diff --git a/components/Molecules/Button/Quantities.twig b/components/Molecules/Button/Quantities.twig deleted file mode 100644 index 78495df..0000000 --- a/components/Molecules/Button/Quantities.twig +++ /dev/null @@ -1,39 +0,0 @@ - -
-
Large
-
- {% include './Quantity.twig' with {disabled: false, value:1, classes:'Button--large'} %} - {% include './Quantity.twig' with {disabled: true, value:1, classes:'Button--large'} %} - {% include './QuantityButton.twig' with {value:1, classes:'Button--large', text:'Ajouter au panier', icon:'cart'} %} -
- -
Medium
-
- {% include './Quantity.twig' with {disabled: false, value:1} %} - {% include './Quantity.twig' with {disabled: true, value:1} %} - {% include './QuantityButton.twig' with {value:1, text:'Ajouter au panier', icon:'cart'} %} - {% include './QuantityButton.twig' with {disabled: true,value:1, text:'Ajouter au panier', icon:'cart'} %} - -
- -
Small
-
- {% include './Quantity.twig' with {disabled: false, value:1, classes:'Button--small'} %} - {% include './Quantity.twig' with {disabled: true, value:1, classes:'Button--small'} %} - {% include './QuantityButton.twig' with {value:1, classes:'Button--small', text:'Ajouter au panier', icon:'cart'} %} - -
- -
XSmall
-
- {% include './Quantity.twig' with {disabled: false, value:1, classes:'Button--small Button--xsmall'} %} - {% include './Quantity.twig' with {disabled: true, value:1, classes:'Button--small Button--xsmall'} %} - -
- -
Secondary
-
- {% include './Quantity.twig' with {disabled: false, value:1, classes:'Button--secondary'} %} - {% include './Quantity.twig' with {disabled: true, value:1, classes:'Button--secondary'} %} -
-
diff --git a/components/Molecules/Button/Quantity.twig b/components/Molecules/Button/Quantity.html.twig similarity index 100% rename from components/Molecules/Button/Quantity.twig rename to components/Molecules/Button/Quantity.html.twig diff --git a/components/Molecules/Button/QuantityButton.twig b/components/Molecules/Button/QuantityButton.html.twig similarity index 50% rename from components/Molecules/Button/QuantityButton.twig rename to components/Molecules/Button/QuantityButton.html.twig index 814acc0..4c15b0f 100644 --- a/components/Molecules/Button/QuantityButton.twig +++ b/components/Molecules/Button/QuantityButton.html.twig @@ -6,6 +6,6 @@ {% set fill = fill|default(false) %}
- {% include '@components/Molecules/Button/Quantity.twig' with {disabled: disabled, value:value, classes:classes} %} - {% include '@components/Molecules/Button/Button.twig' with {disabled: disabled, text:text, classes:classes, icon_left: icon, fill:fill} %} + {% include '@components/Molecules/Button/Quantity.html.twig' with {disabled: disabled, value:value, classes:classes} %} + {% include '@components/Molecules/Button/Button.html.twig' with {disabled: disabled, text:text, classes:classes, icon_left: icon, fill:fill} %}
diff --git a/components/Molecules/Button/Rounds.twig b/components/Molecules/Button/Rounds.html.twig similarity index 80% rename from components/Molecules/Button/Rounds.twig rename to components/Molecules/Button/Rounds.html.twig index 6901e49..fd10422 100644 --- a/components/Molecules/Button/Rounds.twig +++ b/components/Molecules/Button/Rounds.html.twig @@ -4,12 +4,12 @@
Large
- {% include './Button.twig' with + {% include './Button.html.twig' with {classes:'Button--large', round:true, variant:variant, icon_left: icon} %} - {% include './Button.twig' with + {% include './Button.html.twig' with {disabled: true,round:true, classes:'Button--large', icon_left: icon} %}
@@ -18,10 +18,10 @@
Small
- {% include './Button.twig' with + {% include './Button.html.twig' with {classes:'Button--small', round:true, icon_left: icon} %} - {% include './Button.twig' with + {% include './Button.html.twig' with {disabled: true, classes:'Button--small', round:true, icon_left: icon} %}
diff --git a/components/Molecules/Dropdown/Dropdown.twig b/components/Molecules/Dropdown/Dropdown.html.twig similarity index 100% rename from components/Molecules/Dropdown/Dropdown.twig rename to components/Molecules/Dropdown/Dropdown.html.twig diff --git a/components/Molecules/Dropdown/Dropdown.stories.js b/components/Molecules/Dropdown/Dropdown.stories.js index 382a047..368e9f2 100644 --- a/components/Molecules/Dropdown/Dropdown.stories.js +++ b/components/Molecules/Dropdown/Dropdown.stories.js @@ -1,4 +1,4 @@ -import Dropdown from './Dropdown.twig'; +import Dropdown from './Dropdown.html.twig'; import dropdownFunction from './Dropdown.js'; export default { @@ -8,14 +8,19 @@ export default { export const Base = { render: (args) => Dropdown(args), args: { - id: "civility", - placeholder: "Civilité", - options: [{ value: 1, label: "M." }, { value: 2, label: "Mme" }, { value: 3, label: "Neutre / Non binaire / Agenre" }, { value: 4, label: "Je ne souhaite pas répondre" }], + id: 'civility', + placeholder: 'Civilité', + options: [ + { value: 1, label: 'M.' }, + { value: 2, label: 'Mme' }, + { value: 3, label: 'Neutre / Non binaire / Agenre' }, + { value: 4, label: 'Je ne souhaite pas répondre' } + ] }, play: () => { - dropdownFunction() + dropdownFunction(); }, parameters: { - backgrounds: { default: 'grey' }, - }, + backgrounds: { default: 'grey' } + } }; diff --git a/components/Molecules/Favorite/Favorite.twig b/components/Molecules/Favorite/Favorite.html.twig similarity index 100% rename from components/Molecules/Favorite/Favorite.twig rename to components/Molecules/Favorite/Favorite.html.twig diff --git a/components/Molecules/Favorite/Favorite.stories.js b/components/Molecules/Favorite/Favorite.stories.js index 162d41a..76c5957 100644 --- a/components/Molecules/Favorite/Favorite.stories.js +++ b/components/Molecules/Favorite/Favorite.stories.js @@ -1,4 +1,4 @@ -import Favorite from './Favorite.twig'; +import Favorite from './Favorite.html.twig'; export default { title: 'Design System/Molecules/Favorite' diff --git a/components/Molecules/Fields/FieldInput/FieldInput.twig b/components/Molecules/Fields/FieldInput/FieldInput.html.twig similarity index 90% rename from components/Molecules/Fields/FieldInput/FieldInput.twig rename to components/Molecules/Fields/FieldInput/FieldInput.html.twig index bdeb19f..34c3735 100644 --- a/components/Molecules/Fields/FieldInput/FieldInput.twig +++ b/components/Molecules/Fields/FieldInput/FieldInput.html.twig @@ -42,7 +42,7 @@ {% endif %} {% if tooltip %} - {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} + {% include '../../Tooltip/Tooltip.html.twig' with {tooltip: tooltip, position: 'bottom'} %} {% endif %}
@@ -57,7 +57,7 @@ {% endif %} {% if button %}
- {% include '../../Button/Button.twig' with {text: button, rectangle: true, type: "submit", classes: size == 'small' ? ' Button--small' : ''} %} + {% include '../../Button/Button.html.twig' with {text: button, rectangle: true, type: "submit", classes: size == 'small' ? ' Button--small' : ''} %}
{% endif %}
diff --git a/components/Molecules/Fields/FieldInput/FieldInput.stories.js b/components/Molecules/Fields/FieldInput/FieldInput.stories.js index 3bc62c5..c8ba138 100644 --- a/components/Molecules/Fields/FieldInput/FieldInput.stories.js +++ b/components/Molecules/Fields/FieldInput/FieldInput.stories.js @@ -1,4 +1,4 @@ -import FieldInput from './FieldInput.twig'; +import FieldInput from './FieldInput.html.twig'; import fieldInputFunction from './FieldInput.js'; export default { diff --git a/components/Molecules/Fields/FieldNumber/FieldNumber.twig b/components/Molecules/Fields/FieldNumber/FieldNumber.html.twig similarity index 100% rename from components/Molecules/Fields/FieldNumber/FieldNumber.twig rename to components/Molecules/Fields/FieldNumber/FieldNumber.html.twig diff --git a/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js b/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js index ed790c0..0408c42 100644 --- a/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js +++ b/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js @@ -1,4 +1,4 @@ -import FieldNumber from './FieldNumber.twig'; +import FieldNumber from './FieldNumber.html.twig'; import fieldNumberFunction from './FieldNumber.js'; export default { @@ -11,10 +11,10 @@ export const Base = { fieldNumberFunction(); }, args: { - name: "Indication", - min: "", - max: "", - error: "", + name: 'Indication', + min: '', + max: '', + error: '' }, argTypes: { disabled: { @@ -22,6 +22,6 @@ export const Base = { }, required: { control: { type: 'boolean' } - }, + } } }; diff --git a/components/Molecules/Fields/FieldSelect/FieldSelect.twig b/components/Molecules/Fields/FieldSelect/FieldSelect.html.twig similarity index 93% rename from components/Molecules/Fields/FieldSelect/FieldSelect.twig rename to components/Molecules/Fields/FieldSelect/FieldSelect.html.twig index 240e6d9..e644542 100644 --- a/components/Molecules/Fields/FieldSelect/FieldSelect.twig +++ b/components/Molecules/Fields/FieldSelect/FieldSelect.html.twig @@ -27,7 +27,7 @@ {{ label }}{% if required and label %} *{% endif %} {% if tooltip %} - {% include '@components/Molecules/Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} + {% include '@components/Molecules/Tooltip/Tooltip.html.twig' with {tooltip: tooltip, position: 'bottom'} %} {% endif %}