Merge pull request #56 from thelia/feat/twig-ux-icons

use symfony ux to display svg icons instead of custom function
thelia · Sep 9, 2024 · dbf6cc5 · dbf6cc5
2 parents 3d5233d + fe6b050
commit dbf6cc5
Show file tree

Hide file tree

Showing 41 changed files with 131 additions and 103 deletions.
diff --git a/assets/js/twig/custom-twig.ts b/assets/js/twig/custom-twig.ts
@@ -3,7 +3,7 @@ import Twig from 'twig';
 // @ts-ignore
 import IconTwig from './IconTwig.twig';
 
-Twig.extendFunction('svg', (iconName: string): string => {
+Twig.extendFunction('ux_icon', (iconName: string): string => {
   return IconTwig({ icon: iconName });
 });
 

diff --git a/components/Atoms/Form/Checkbox.twig b/components/Atoms/Form/Checkbox.twig
@@ -9,7 +9,7 @@
 <label class="Checkbox {{ classes }} {{ error ? 'error'  : ''}}">
 	<input type="checkbox" name='{{ name }}' value='{{ value }}' {% if disabled %} disabled {% endif %} {% if checked %} checked {% endif %}>
 	<div class="checkmark">
-		<span>{{ svg("checkbox") }}</span>
+    {{ ux_icon('checkbox') }}
 	</div>
   <span class="paragraph-5">{{ label|raw }}</span>
 </label>
diff --git a/components/Atoms/Form/checkbox.css b/components/Atoms/Form/checkbox.css
@@ -27,8 +27,8 @@
     }
   }
   .checkmark {
-    width: 16px;
-    height: 16px;
+    width: 1rem;
+    height: 1rem;
     background: var(--white);
     border: 1px solid var(--current-checkbox-color);
     border-radius: 2px;

diff --git a/components/Atoms/Icon/Icon.twig b/components/Atoms/Icon/Icon.twig
@@ -5,7 +5,7 @@
     {% for icon in line %}
    <div class='flex flex-col items-center {{ color }}'>
      <div class='{{ size }} '>
-       {{ svg(icon) }}
+      {{ ux_icon(icon) }}
      </div>
      <div class='text-xs'>{{ icon }}</div>
    </div>

diff --git a/components/Layout/Footer/Footer.twig b/components/Layout/Footer/Footer.twig
@@ -41,22 +41,22 @@
   <div class='md:flex md:justify-between md:items-center md:border-t md:border-t-grey-lighter md:px-[50px] md:pt-[30px]'>
     <div class='flex justify-between md:gap-[30px] mb-5 md:mb-0 text-black Footer-socials'>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("instagram") }}
+        {{ ux_icon('instagram') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("pinterest") }}
+        {{ ux_icon('pinterest') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("youtube") }}
+        {{ ux_icon('youtube') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("twitter") }}
+        {{ ux_icon('twitter') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("facebook") }}
+        {{ ux_icon('facebook') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("linkedin") }}
+        {{ ux_icon('linkedin') }}
       </div>
     </div>
 

diff --git a/components/Layout/Header/Header.twig b/components/Layout/Header/Header.twig
@@ -10,7 +10,9 @@
 		{% endif %}
 
 		<div class='flex items-center self-center h-full'>
-			<a href="/" class='Header-logo'>{{ svg('thelia') }}</a>
+			<a href="/" class='Header-logo'>
+      {{ ux_icon('thelia') }}
+      </a>
 		</div>
 	</div>
 
@@ -20,8 +22,12 @@
 		</div>
 	{% else %}
 		<nav id="Menu">
-			<button type="button" data-menu-back="-1">{{ svg("arrow-left") }}</button>
-			<button type="button" data-menu-close>{{ svg("close") }}</button>
+			<button type="button" data-menu-back="-1">
+        {{ ux_icon('arrow-left') }}
+      </button>
+			<button type="button" data-menu-close>
+        {{ ux_icon('close') }}
+      </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} %}
@@ -34,8 +40,12 @@
 
 	{% if type == "searchbar" %}
 		<nav id="Menu" class='Header-navWrap'>
-			<button type="button" data-menu-back="-1">{{ svg("arrow-left") }}</button>
-			<button type="button" data-menu-close>{{ svg("close") }}</button>
+			<button type="button" data-menu-back="-1">
+        {{ ux_icon('arrow-left') }}
+      </button>
+			<button type="button" data-menu-close>
+        {{ ux_icon('close') }}
+      </button>
 			<ul class="Header-navigation">
         {% for category in categories %}
 				  {% include '@components/Molecules/ItemHeader/ItemHeader.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}

diff --git a/components/Layout/Header/HeaderCheckout.twig b/components/Layout/Header/HeaderCheckout.twig
@@ -1,10 +1,12 @@
 {% 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'>{{ svg("thelia") }}</div>
+	<div class='xl:mx-auto Header-logo'>
+    {{ ux_icon('thelia') }}
+  </div>
 	<div class='flex sm:absolute sm:right-6 HeaderCheckout-reassurance top-1/2 sm:-translate-y-1/2  items-center gap-[2px]'>
 		<div class="w-[20px]">
-			{{ svg("lock") }}
+      {{ ux_icon('lock') }}
 		</div>
     <span class="text-grey-dark indication indication-lower">{{ '100% secure'|trans }}</span>
 	</div>

diff --git a/components/Layout/Reinsurance/Reinsurance.twig b/components/Layout/Reinsurance/Reinsurance.twig
@@ -5,7 +5,9 @@
     {% for reinsurance in data %}
       <div>
         {% if reinsurance.icon %}
-          <span class='ReinsuranceModule-icon'>{{ svg(reinsurance.icon) }}</span>
+          <span class='ReinsuranceModule-icon'>
+            {{ux_icon(reinsurance.icon)}}
+          </span>
         {% endif %}
         <div>
           {% if reinsurance.strongText %}

diff --git a/components/Molecules/Accordion/Accordion.twig b/components/Molecules/Accordion/Accordion.twig
@@ -19,10 +19,16 @@
   <summary class='Accordion-summary'>
     {{ title }}
     {% if variant == 'faq' or (iconPlus and iconMinus) %}
-      <span class='Accordion-icon Accordion-icon--plus'>{{ svg(iconPlus) }}</span>
-      <span class='Accordion-icon Accordion-icon--minus'>{{ svg(iconMinus) }}</span>
+      <span class='Accordion-icon Accordion-icon--plus'>
+        {{ux_icon(iconPlus)}}
+      </span>
+      <span class='Accordion-icon Accordion-icon--minus'>
+        {{ux_icon(iconMinus)}}
+      </span>
     {% else %}
-      <span class='Accordion-icon'>{{ svg("chevron-down") }}</span>
+      <span class='Accordion-icon'>
+        {{ ux_icon('chevron-down') }}
+      </span>
     {% endif %}
   </summary>
   <div class="Accordion-content">

diff --git a/components/Molecules/Button/Button.twig b/components/Molecules/Button/Button.twig
@@ -22,10 +22,14 @@
 
 <{{ tag }} class='Button {{ classes }}' {% if disabled %}disabled{% endif %} {% if href %}href='{{ href }}'{% else %}type='{{ type }}'{% endif %}>
   {% if icon_left %}
-    <span class='icon icon-left'>{{ svg(icon_left) }}</span>
+    <span class='icon icon-left'>
+      {{ux_icon(icon_left)}}
+    </span>
   {% endif %}
   {{ text|striptags('<span>')|raw }}
   {% if icon_right %}
-    <span class='icon icon-right'>{{ svg(icon_right) }}</span>
+    <span class='icon icon-right'>
+      {{ux_icon(icon_right)}}
+    </span>
   {% endif %}
 </{{ tag }}>
diff --git a/components/Molecules/Favorite/Favorite.twig b/components/Molecules/Favorite/Favorite.twig
@@ -3,5 +3,7 @@
 
 <button class='Favorite {% if selected %}selected{% endif %}'>
   <span class='text'>{{ text }}</span>
-  <span class='star'>{{ svg("star") }}</span>
+  <span class='star'>
+    {{ ux_icon('star') }}
+  </span>
 </button>
diff --git a/components/Molecules/Filters/FilterPill/FilterPill.twig b/components/Molecules/Filters/FilterPill/FilterPill.twig
@@ -19,10 +19,10 @@
 <label class="FilterPill{{ classes }}">
 	<input type='{{ inputType }}' class='hidden' value='{{ value }}' name='{{ name }}' {% if disabled %} disabled {% endif %}/>
 	{% if icon %}
-		<span class="FilterPill-icon" {% if iconColor %} style="color:{{ iconColor }}" {% endif %}>{{ svg(icon) }}</span>
+		<span class="FilterPill-icon" {% if iconColor %} style="color:{{ iconColor }}" {% endif %}>{{ ux_icon(icon) }}</span>
 	{% endif %}
 	{{ customText }}
 	{% if closeButton %}
-		<span class='FilterPill-iconClose'>{{ svg("close") }}</span>
+		<span class='FilterPill-iconClose'>{{ ux_icon("close") }}</span>
 	{% endif %}
 </label>
diff --git a/components/Molecules/Filters/FilterSelect/FilterSelect.twig b/components/Molecules/Filters/FilterSelect/FilterSelect.twig
@@ -16,7 +16,7 @@
         <p class="FilterSelect-text">{{ option.label|raw }}</p>
       </div>
     {% endfor %}
-     <span class='FilterSelect-icon'>{{ svg("chevron-down") }}</span>
+     <span class='FilterSelect-icon'>{{ ux_icon("chevron-down") }}</span>
   </div>
   <ul class="FilterSelect-list">
     {% for option in options %}
@@ -30,7 +30,7 @@
 
 <div class='MobileDrawer FilterSelect-mobileDrawer' id='FilterSelectDrawer-{{ id }}'>
   <div class='MobileDrawer-header'>
-    <button class='MobileDrawer-close' type='button' data-drawer-close>{{ svg("close") }}</button>
+    <button class='MobileDrawer-close' type='button' data-drawer-close>{{ ux_icon("close") }}</button>
   </div>
   <div>
     <ul class="FilterSelect-mobileList">

diff --git a/components/Molecules/HeaderButton/HeaderButton.twig b/components/Molecules/HeaderButton/HeaderButton.twig
@@ -8,7 +8,7 @@
 
 <button {% if id %} id="{{id}}" {% endif %} class='HeaderButton {% if inactive %}HeaderButton--inactive{% endif %} {{ classes }} {% if small %}HeaderButton--small{% endif %}'>
   {% if icon %}
-    <span class='HeaderButton-icon'>{{ svg(icon) }}</span>
+    <span class='HeaderButton-icon'>{{ ux_icon(icon) }}</span>
   {% endif %}
 
   <div class='flex flex-col items-start HeaderButton-text'>

diff --git a/components/Molecules/ItemHeader/ItemHeader.twig b/components/Molecules/ItemHeader/ItemHeader.twig
@@ -8,11 +8,11 @@
 		{{ customText }}
 	</a>
 	{% if sub %}
-		<button type="button" data-menu-item="{{sub}}">{{ svg("arrow-right") }}</button>
+		<button type="button" data-menu-item="{{sub}}">{{ ux_icon("arrow-right") }}</button>
 		<ul data-menu-sub="{{sub}}" data-menu-previous="0">
 			<li>
 				<a href="#0">Titre sous menu</a>
-				<button type="button" data-menu-item="5">{{ svg("arrow-right") }}</button>
+				<button type="button" data-menu-item="5">{{ ux_icon("arrow-right") }}</button>
 				<ul data-menu-sub="5" data-menu-previous="{{sub}}">
 					<li>
 						<a href="#0">Titre sous sous menu</a>

diff --git a/components/Molecules/Link/Link.twig b/components/Molecules/Link/Link.twig
@@ -13,10 +13,10 @@
 
 <a href="{{ href }}" {% if target %} target="{{ target }}" {% endif %} class='Link {{ classes }}' {% if disabled %} disabled {% endif %}>
 	{% if iconLeft %}
-		<span class='Link-icon'>{{ svg(iconLeft) }}</span>
+		<span class='Link-icon'>{{ ux_icon(iconLeft) }}</span>
 	{% endif %}
 	{{ customText }}
 	{% if iconRight %}
-		<span class='Link-icon'>{{ svg(iconRight) }}</span>
+		<span class='Link-icon'>{{ ux_icon(iconRight) }}</span>
 	{% endif %}
 </a>
diff --git a/components/Molecules/Pagination/Pagination.twig b/components/Molecules/Pagination/Pagination.twig
@@ -5,15 +5,15 @@
 
 
 {# Nombre de pages à afficher de chaque côté de la page actuelle #}
-{% set range = 2 %} 
+{% set range = 2 %}
 
 {% if totalPages > 1 %}
   <nav class="Pagination">
     <ul class="Pagination-list">
       {% if currentPage != 1 %}
         <li class="Pagination-listItemPrev">
           <a href="?page={{ currentPage - 1 }}" class="Pagination-item Pagination-item--isPrev">
-            <span class='Pagination-icon'>{{ svg("chevron-left") }}</span>
+            <span class='Pagination-icon'>{{ ux_icon("chevron-left") }}</span>
             <span class='Pagination-text'>{{ prevText }}</span>
           </a>
         </li>
@@ -24,19 +24,19 @@
           <a href="?page=1" class="Pagination-item">1</a>
         </li>
       {% endif %}
-        
+
       {% if currentPage > range + 1 %}
         <li><span class="Pagination-item">...</span></li>
       {% endif %}
-        
+
       {% for page in 1..totalPages %}
         {% if page == currentPage %}
           <li><span class="Pagination-item Pagination-item--active">{{ page }}</span></li>
         {% elseif page > currentPage - range and page < currentPage + range %}
           <li><a href="?page={{ page }}" class="Pagination-item">{{ page }}</a></li>
         {% endif %}
       {% endfor %}
-        
+
       {% if totalPages > currentPage + range %}
         <li><span class="Pagination-item">...</span></li>
       {% endif %}
@@ -51,7 +51,7 @@
         <li class="Pagination-listItemNext">
           <a href="?page={{ currentPage + 1 }}" class="Pagination-item Pagination-item--isNext">
             <span class='Pagination-text'>{{ nextText }}</span>
-            <span class='Pagination-icon'>{{ svg("chevron-right") }}</span>
+            <span class='Pagination-icon'>{{ ux_icon("chevron-right") }}</span>
           </a>
         </li>
       {% endif %}

diff --git a/components/Molecules/Score/Score.twig b/components/Molecules/Score/Score.twig
@@ -3,11 +3,11 @@
 
 <div class="Score">
   {% for star in 1..score %}
-    <span class="Score-star">{{ svg("star") }}</span>
+    <span class="Score-star">{{ ux_icon("star") }}</span>
   {% endfor %}
   {% if score < maxScore %}
     {% for star in 1..(maxScore - score) %}
-      <span class="Score-star Score-star--empty">{{ svg("star") }}</span>
+      <span class="Score-star Score-star--empty">{{ ux_icon("star") }}</span>
     {% endfor %}
   {% endif %}
 </div>
diff --git a/components/Molecules/SearchBar/SearchBar.twig b/components/Molecules/SearchBar/SearchBar.twig
@@ -5,6 +5,6 @@
 {% if type != 'classic' %}{% set classes = classes ~ ' SearchBar--' ~ type %}{% endif %}
 
 <label class="SearchBar {{ classes }}" aria-label={{"Search"|trans}}>
-	<button class='w-4 h-4'>{{ svg("search") }}</button>
+	<button class='w-4 h-4'>{{ ux_icon("search") }}</button>
 	<input type="text" name="query" placeholder={{"e.g. Shoes, T-shirts, ..."|trans}} autocomplete='off' value="{{ value }}"/>
 </label>
diff --git a/components/Molecules/Step/Steps.twig b/components/Molecules/Step/Steps.twig
@@ -12,7 +12,7 @@
       class="CheckoutSteps-stepBack"
       {# onClick={() => changeStep(currentStep - 1)} #}
     >
-      <span>{{ svg("chevron-left") }}</span>
+      <span>{{ ux_icon("chevron-left") }}</span>
     </div>
     <div class="StepProgressBar">
       <div

diff --git a/components/Molecules/Tab/Tab.twig b/components/Molecules/Tab/Tab.twig
@@ -11,10 +11,10 @@
 
 <button class='Tab {{ classes }}' {% if disabled %}disabled{% endif %}>
   {% if iconLeft %}
-    <span class='Tab-icon'>{{ svg(iconLeft) }}</span>
+    <span class='Tab-icon'>{{ ux_icon(iconLeft) }}</span>
   {% endif %}
   {{ customText }}
   {% if iconRight %}
-    <span class='Tab-icon'>{{ svg(iconRight) }}</span>
+    <span class='Tab-icon'>{{ ux_icon(iconRight) }}</span>
   {% endif %}
 </button>
diff --git a/components/Molecules/Tag/Tag.twig b/components/Molecules/Tag/Tag.twig
@@ -16,18 +16,18 @@
 {% if not closeOnClick and not href and not onClick %}
 	<span class="Tag{{ classes }}">
 		{% if icon %}
-      <span class="Tag-icon">{{ svg(icon) }}</span>
+      <span class="Tag-icon">{{ ux_icon(icon) }}</span>
 		{% endif %}
 		{{ customText }}
 	</span>
 {% else %}
 	<button class="Tag{{ classes }} Tag--action" {% if href %} href="{{ href }}" {% endif %} {% if onClick %} onclick="onClick" {% endif %}>
 		{% if icon %}
-			<span class="Tag-icon">{{ svg(icon) }}</span>
+			<span class="Tag-icon">{{ ux_icon(icon) }}</span>
 		{% endif %}
 		{{ customText }}
 		{% if closeOnClick %}
-			<span class='Tag-iconClose'>{{ svg("close") }}</span>
+			<span class='Tag-iconClose'>{{ ux_icon("close") }}</span>
 		{% endif %}
 	</button>
 {% endif %}
diff --git a/components/Molecules/Tooltip/Tooltip.twig b/components/Molecules/Tooltip/Tooltip.twig
@@ -5,9 +5,9 @@
 {% set classes = classes ~ ' Tooltip-text--' ~ position %}
 
 <div class='Tooltip'>
-  <span class='Tooltip-icon'>{{ svg("help") }}</span>
+  <span class='Tooltip-icon'>{{ ux_icon("help") }}</span>
   <span class='Tooltip-text{{ classes }}'>
-    <span class='Tooltip-close'>{{ svg("close") }}</span>
+    <span class='Tooltip-close'>{{ ux_icon("close") }}</span>
     {{ tooltip }}
   </span>
 </div>
diff --git a/components/Molecules/userMenu/UserMenu.twig b/components/Molecules/userMenu/UserMenu.twig
@@ -12,6 +12,6 @@
 <a href="{{ href }}" class='UserMenu {{ classes }}'>
   {{ customText }}
   {% if icon %}
-    <span class='UserMenu-icon'>{{ svg("chevron-right") }}</span>
+    <span class='UserMenu-icon'>{{ ux_icon("chevron-right") }}</span>
   {% endif %}
 </a>
diff --git a/components/Organisms/Card/Address/AddressCard.twig b/components/Organisms/Card/Address/AddressCard.twig
@@ -43,11 +43,11 @@
   {% if not purchaseFunnel %}
     <div class="bottom-card-buttons">
       <button {% if disabled %}disabled{% endif %} class='hover:text-theme' type='button'>
-        <span>{{ svg("edit") }}</span>
+        <span>{{ ux_icon("edit") }}</span>
         {{ 'Modify'|trans }}
       </button>
       <button {% if disabled %}disabled{% endif %} class='hover:text-theme' type='button'>
-        <span>{{ svg("delete") }}</span>
+        <span>{{ ux_icon("delete") }}</span>
         {{ 'Delete'|trans }}
       </button>
     </div>