feat(icon): PoC WT icons - FRONT-4688

src/implementations/twig/components/accordion/README.md

@@ -15,6 +15,7 @@ npm install --save @ecl/twig-component-accordion
     - "label" (string) (default: '')
   - "content" (string) (default: '')
 - **"icon"** (array) OR (object) (default: []) Two icons in an array that will be toggled
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'

src/implementations/twig/components/accordion/accordion.html.twig

@@ -14,6 +14,7 @@
       ...
     ]
     - "icon" (array) OR (object) (default: []) Two icons in an array that will be toggled.
+    - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
         {
@@ -29,6 +30,7 @@
 {% set _extra_attributes = 'data-ecl-auto-init="Accordion"' %}
 {% set _items = items|default([]) %}
 {% set _icons = icon is iterable and icon|keys is not empty ? icon : [icon] %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 
 {% if _icons|length == 1 and _icons[0].name == 'plus' %}
   {% set _icons = _icons|merge([{'name': 'minus', 'path': _icons[0].path}]) %}
@@ -74,11 +76,10 @@
               <span class="ecl-accordion__toggle-indicator">
               {% for icon in _icons %}
                 {% include '@ecl/icon/icon.html.twig' with {
-                  icon: {
-                    path: icon.path|default(''),
-                    name: icon.name|default(''),
+                  icon: icon|merge({
                     size: icon.size|default('s'),
-                  },
+                    wt_markup: icon.wt_markup|default(_icon_wt_markup),
+                  }),
                   extra_classes: 'ecl-accordion__toggle-icon' ~ icon.extra_classes|default(''),
                   extra_attributes: icon.extra_attributes|default([{}])|merge([{ name: "data-ecl-accordion-icon" }]),
                 } only %}

src/implementations/twig/components/banner/README.md

@@ -41,6 +41,7 @@ npm install --save @ecl/twig-component-banner
 - **"full_width"** (bools) (default: false) Extends the banner to whole viewport when used inside the grid
 - **"link"** (object) (default: predefined structure) predefined structure for the Link component
 - **"icon_path"** (string) (default: '') Path to the icons file
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'

src/implementations/twig/components/banner/banner.html.twig

@@ -35,6 +35,7 @@
   - "full_width": (bool) (default: false) Full width banner (inside the grid)
   - "link" (object) (default: predefined structure) predefined structure for the Link component
   - "icon_path" (string) (default: '') Path to the icons file
+  - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
   - "extra_classes" (optional) (string) (default: '')
   - "extra_attributes" (optional) (array) (default: [])
     - "name" (string) Attribute name, eg. 'data-test'
@@ -68,6 +69,7 @@
 {% set _sr_play = sr_play|default('') %}
 {% set _sr_pause = sr_pause|default('') %}
 {% set _icon_path = icon_path|default('') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 
 {# DEPRECATED #}
 {% set _variant = variant|default('') %}
@@ -187,6 +189,7 @@
           path: _icon_path,
           name: 'play-outline',
           size: 'm',
+          wt_markup: _icon_wt_markup,
         },
       } only %}
       {% include '@ecl/button/button.html.twig' with {
@@ -200,6 +203,7 @@
           path: _icon_path,
           name: 'pause-outline',
           size: 'm',
+          wt_markup: _icon_wt_markup,
         },
       } only %}
     </div>

src/implementations/twig/components/breadcrumb/README.md

@@ -15,6 +15,7 @@ npm install --save @ecl/twig-component-breadcrumb
 - **"ellipsis_label"** (string) (default: ''): Label of the ellipsis, e.g. "Click to expand"
 - **"ellipsis_text"** (string) (default: '...'): Text of the ellipsis
 - **"icon_path"** (string) (default: ''): URL to icons file
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'

src/implementations/twig/components/breadcrumb/breadcrumb.html.twig

@@ -13,6 +13,7 @@
     - "ellipsis_label" (string) (default: ''): Label of the ellipsis, e.g. "Click to expand"
     - "ellipsis_text" (string) (default: '...'): Text of the ellipsis
     - "icon_path" (string) (default: ''): URL to icons file
+    - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
         {
@@ -27,6 +28,7 @@
 {% set _breadcrumb_size = links|length %}
 {% set _links = links|default([]) %}
 {% set _icon_path = icon_path|default('') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _navigation_text = navigation_text|default('') %}
 {% set _ellipsis_label = ellipsis_label|default('') %}
 {% set _ellipsis_text = ellipsis_text|default('…') %}
@@ -43,6 +45,7 @@
     name: 'corner-arrow',
     size: 'fluid',
     path: _icon_path,
+    wt_markup: _icon_wt_markup,
   },
   extra_classes: 'ecl-breadcrumb__icon',
   extra_attributes: [{ name: 'role', value: 'presentation' }]

src/implementations/twig/components/button/README.md

@@ -14,6 +14,7 @@ npm install --save @ecl/twig-component-button
 - **"disabled"** (bool) (default: false): define if button should be disabled (HTML disabled attribute)
 - **"hide_label"** (bool) (default: false): hide button label, for screen reader only. Note: requires to have an icon defined
 - **"icon_position"** (string, optional) (default: after): Define icon position, can be 'before' or 'after'
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"icon"** (optional) (associative array) OR (array) of associate arrays - Default structure of the icon component with extra_classes as an internal key.
 - **"indicator"** (object) (default: {}) object of type Indicator. To be displayed it should be defined and not empty (should contain at least an empty value), and only if there is an icon and no label
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)

src/implementations/twig/components/button/button.html.twig

@@ -26,6 +26,7 @@
     - "disabled" (bool) (default: false): defined if button should be active or not (HTML disabled attribute)
     - "hide_label" (bool) (default: false): hide button label, for screen reader only. Note: requires to have an icon defined
     - "icon_position" (string) (default: after): define icon position, can be 'before' or 'after'
+    - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
     - "indicator" (object) (default: {}) object of type Indicator. To be displayed it should be defined and not empty (should contain at least an empty value), and only if there is an icon and no label
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
@@ -46,14 +47,10 @@
 {% set _variant = variant|default('primary') %}
 {% set _type = type|default('submit') %}
 {% set _icon_position = icon_position|default('after') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _disabled = disabled|default(false) %}
 {% set _hide_label = hide_label|default(false) %}
-{% set _icon = {
-  name: '',
-  path: '',
-  size: '',
-  title: ''
-} %}
+{% set _icon = icon|default({}) %}
 {% set _indicator = indicator|default({}) %}
 
 {# Internal logic - Process properties #}
@@ -74,10 +71,10 @@
   {% endfor %}
 {% endif %}
 
-{% if icon.name is defined and icon.name is not empty %}
-  {% set _icons = [icon] %}
-{% elseif icon[1] is defined and icon[1] is not empty %}
-  {% set _icons = icon %}
+{% if _icon.name is defined and _icon.name is not empty %}
+  {% set _icons = [_icon] %}
+{% elseif _icon[1] is defined and _icon[1] is not empty %}
+  {% set _icons = _icon %}
 {% endif %}
 
 {% if _hide_label and _icon is not empty %}
@@ -92,7 +89,7 @@
 
 {# Define icon macro #}
 
-{% macro icon(_icons, _indicator, _indicator_content) %}{% apply spaceless %}
+{% macro icon(_icons, _indicator, _indicator_content, _icon_wt_markup) %}{% apply spaceless %}
   {% import _self as button %}
 
   {% for icon in _icons %}
@@ -110,7 +107,9 @@
     {% if _indicator is not empty %}
       <span class="ecl-button__icon-container">
         {% include '@ecl/icon/icon.html.twig' with {
-          icon: icon,
+          icon: icon|merge({
+            wt_markup: icon.wt_markup|default(_icon_wt_markup),
+          }),
           as_image: _icon_image,
           extra_accessibility: _icon_extra_accessibility,
           extra_classes: _icon_extra_classes,
@@ -122,7 +121,9 @@
       </span>
     {% else %}
       {% include '@ecl/icon/icon.html.twig' with {
-        icon: icon,
+        icon: icon|merge({
+          wt_markup: icon.wt_markup|default(_icon_wt_markup),
+        }),
         as_image: _icon_image,
         extra_accessibility: _icon_extra_accessibility,
         extra_classes: _icon_extra_classes,
@@ -145,13 +146,13 @@
 {%- if _icons is defined %}
   <span class="ecl-button__container">
   {% if _icon_position == 'before' %}
-    {{ button.icon(_icons, _indicator, _indicator_content) }}
+    {{ button.icon(_icons, _indicator, _indicator_content, _icon_wt_markup) }}
   {% endif %}
   {% if _label %}
     <span class="ecl-button__label" data-ecl-label="true">{% block label _label %}</span>
   {% endif %}
   {% if _icon_position == 'after' %}
-    {{ button.icon(_icons, _indicator, _indicator_content) }}
+    {{ button.icon(_icons, _indicator, _indicator_content, _icon_wt_markup) }}
   {% endif %}
   </span>
 {% else %}

src/implementations/twig/components/card/README.md

@@ -23,6 +23,7 @@ npm install --save @ecl/twig-component-card
   ...
   ]
 - **lists** (array) (default: []): Array of ECL Description list
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **extra_classes** (string) (default: '')
 - **extra_attributes** (array) (default: []): format: [
   {

src/implementations/twig/components/card/card.html.twig

@@ -17,6 +17,7 @@
         ...
       ]
     - "lists" (array) (default: []): Array of ECL Description list
+    - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
         {
@@ -37,6 +38,7 @@
 {% set _description = description|default('') %}
 {% set _secondary_meta = secondary_meta|default([]) %}
 {% set _lists = lists|default([]) %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 
 {% set _css_class = 'ecl-card' %}
 {% set _extra_attributes = '' %}
@@ -86,6 +88,7 @@
       description: _description,
       secondary_meta: _secondary_meta,
       lists: _lists,
+      icon_wt_markup: _icon_wt_markup,
     } %}
     {% include '@ecl/content-block/content-block.html.twig' with _content_block|merge({
       extra_classes: 'ecl-card__content-block'

src/implementations/twig/components/carousel/README.md

@@ -17,6 +17,7 @@ npm install --save @ecl/twig-component-carousel
 - **"sr_pause"** (string) (default: 'Pause carousel') screen reader label for the pause button
 - **"full_width"** (bools) (default: false) Extends the banner to whole viewport when used inside the grid
 - **"icon_path"** (string) ) (default: '')
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'

src/implementations/twig/components/carousel/carousel.html.twig

@@ -12,6 +12,7 @@
     - "sr_pause" (string) (default: 'Pause carousel') screen reader label for the pause button
     - "full_width": (bool) (default: false) Full width banner (inside the grid)
     - "icon_path" (string) (default: '') Path to the icons file
+    - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
         {
@@ -35,6 +36,7 @@
 {% set _counter_label = counter_label|default('of') %}
 {% set _full_width = full_width|default(false) %}
 {% set _icon_path = icon_path|default('') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 
 {# Internal logic - Process properties #}
 
@@ -82,6 +84,7 @@
             name: 'play-outline',
             size: 'm',
             extra_classes: 'ecl-carousel__icon-default',
+            wt_markup: _icon_wt_markup,
           },
         } only %}
         {% include '@ecl/button/button.html.twig' with {
@@ -95,6 +98,7 @@
             name: 'pause-outline',
             size: 'm',
             extra_classes: 'ecl-carousel__icon-default',
+            wt_markup: _icon_wt_markup,
           },
         } only %}
       </div>

src/implementations/twig/components/category-filter/README.md

@@ -9,6 +9,7 @@ npm install --save @ecl/twig-component-category-filter
 ### Parameters
 
 - **"icon_path"** (string) (default: ''): Path to the icon sprite
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"label"**: (string) (default: ''): Aria label provided for accessibility
 - **"id"**: (string) (default: randomized string): Unique id for the category filter
 - **"items"** (associative array) (default: {}): The tree items - format:

src/implementations/twig/components/category-filter/category-filter-items.html.twig

@@ -3,6 +3,7 @@
 {#
   Parameters:
   - "icon_path": (string) (default: ''): Path to the icon sprite
+  - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
   - "id": (string) (default: randomized string): Unique id for the category filter
   - "items": (associative array) (default: {}): The menu items - format: [
     {
@@ -29,6 +30,7 @@
 
 {% set _items = items|default({}) %}
 {% set _icon_path = icon_path|default('') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _level = level|default(1) %}
 
 {% if _items is defined and _items is not empty %}
@@ -72,6 +74,7 @@
                 size: 'xs',
                 transform: 'rotate-90',  
                 path: _icon_path,
+                wt_markup: _icon_wt_markup,
               },
               extra_classes: 'ecl-category-filter__item-icon',
             } only %}
@@ -84,6 +87,7 @@
                 size: 'xs',
                 transform: 'rotate-180',  
                 path: _icon_path,
+                wt_markup: _icon_wt_markup,
               },
               extra_classes: 'ecl-category-filter__item-icon',
             } only %}
@@ -94,6 +98,7 @@
             {% include '@ecl/category-filter/category-filter-items.html.twig' with {
               items: item.children,
               icon_path: _icon_path,
+              icon_wt_markup: _icon_wt_markup,
               level: _level + 1,
               id: _item_id,
             } only %}

src/implementations/twig/components/category-filter/category-filter.html.twig

@@ -3,6 +3,7 @@
 {#
   Parameters:
   - "icon_path": (string) (default: ''): Path to the icon sprite
+  - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
   - "label": (string) (default: ''): Aria label provided for accessibility
   - "id": (string) (default: randomized string): Unique id for the category filter
   - "items": (associative array) (default: {}): The menu items - format: [
@@ -38,6 +39,7 @@
 {% set _css_class = 'ecl-category-filter' %}
 {% set _extra_attributes = '' %}
 {% set _icon_path = icon_path|default('') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _label = label|default('') %}
 {% set _id = id|default('ecl-category-filter-' ~ random()) %}
 
@@ -73,6 +75,7 @@
     {% include '@ecl/category-filter/category-filter-items.html.twig' with {
       items: items,
       icon_path: _icon_path,
+      icon_wt_markup: _icon_wt_markup,
       id: _id,
     } only %}
   {% endif %}

src/implementations/twig/components/checkbox/README.md

@@ -17,6 +17,7 @@ npm install --save @ecl/twig-component-checkbox
   - "helper_text" (block) (default: '')
   - "label" (block) (default: '')
   - "icon_path" (string) (default: ''): file containing the svg icons
+  - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
   - "item_required_text" (string) (default: '')
 - **"name"** (string) (default: '')
 - **"invalid"** (boolean) (default: false)

src/implementations/twig/components/checkbox/checkbox-group.html.twig

@@ -5,6 +5,7 @@
   - "items" (array) (default: []): array of checkbox_button
   - "name" (string) (default: '')
   - "invalid" (boolean) (default: false)
+  - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
   - "invalid_icon" (object of type "icon") (default: {})
   - "sr_invalid_icon" (string) (default: ''): additional label for the invalid icon; for screen readers
   - "item_required_text" (string) (default: *)
@@ -22,6 +23,7 @@
 {% set _items = items|default([]) %}
 {% set _name = name|default('') %}
 {% set _invalid = invalid|default(false) %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _invalid_icon = invalid_icon|default({}) %}
 {% set _sr_invalid_icon = sr_invalid_icon|default('') %}
 {% set _required = required|default(false) %}
@@ -40,6 +42,7 @@
     {% include '@ecl/icon/icon.html.twig' with {
       icon: _invalid_icon|merge({
         size: 's',
+        wt_markup: _icon_wt_markup,
       }),
       as_image: true,
       extra_accessibility: not _sr_invalid_icon ? {} : {
@@ -65,6 +68,7 @@
       invalid: _item.invalid|default(_invalid),
       required: _item.required|default(_required),
       required_text: _item_required_text,
+      icon_wt_markup: _icon_wt_markup,
       extra_classes: _item.extra_classes|default(_item_extra_classes|default('')),
       extra_attributes: _item.extra_attributes|default(_extra_attributes),
     }) only %}