update components

src/implementations/twig/components/file-upload/file-upload.html.twig

@@ -5,7 +5,6 @@
   - "id" (string) (default: random)
   - "name" (string) (default: '')
   - "invalid" (boolean) (default: false)
-  - "invalid_icon" (object of type "icon") (default: {})
   - "multiple" (boolean) (default: false)
   - "disabled" (boolean) (default: false)
   - "required" (boolean) (default: false)

src/implementations/twig/components/form-group/README.md

@@ -16,6 +16,8 @@ npm install --save @ecl/twig-component-form-group
 - **"hide_label"** (bool) (default: false): hide form element label, for screen reader only
 - **"invalid"** (boolean) (default: false)
 - **"invalid_icon"** (object of type "icon") (default: {})
+- **"sr_invalid_icon"** (string) (default: ''): additional label for the invalid icon; for screen readers
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"required"** (boolean) (default: false)
 - **"label_aria_required"** (string) (default: ''): aria text for the required field label; if the required label is not explicit
 - **"label_aria_optional"** (string) (default: ''): aria text for the optional field label; if the optional label is not explicit

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

@@ -8,6 +8,7 @@
   - "invalid" (boolean) (default: false)
   - "invalid_icon" (object of type "icon") (default: {})
   - "sr_invalid_icon" (string) (default: ''): additional label for the invalid icon; for screen readers
+  - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
   - "required" (boolean) (default: false)
   - "label_aria_required" (string) (default: ''): aria text for the required field label; if the required label is not explicit
   - "label_aria_optional" (string) (default: ''): aria text for the optional field label; if the optional label is not explicit
@@ -36,6 +37,7 @@
 {% set _label_aria_optional = label_aria_optional|default('') %}
 {% set _invalid_icon = invalid_icon|default({}) %}
 {% set _sr_invalid_icon = sr_invalid_icon|default('') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _helper_text = helper_text|default('') %}
 {% set _invalid_text = invalid_text|default('') %}
 {% set _label_class = 'ecl-form-label' %}
@@ -244,7 +246,8 @@
     {% include '@ecl/checkbox/checkbox-group.html.twig' with _input|merge({
       invalid_text: _invalid_text,
       invalid_icon: _invalid_icon,
-      sr_invalid_icon: _sr_invalid_icon
+      sr_invalid_icon: _sr_invalid_icon,
+      icon_wt_markup: _icon_wt_markup,
     }) only %}
   {%- endif -%}
 
@@ -271,6 +274,7 @@
       {% include '@ecl/icon/icon.html.twig' with {
         icon: _invalid_icon|merge({
           size: 's',
+          wt_markup: _invalid_icon.wt_markup|default(_icon_wt_markup),
         }),
         as_image: true,
         extra_accessibility: not _sr_invalid_icon ? {} : {

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

@@ -16,6 +16,7 @@ npm install --save @ecl/twig-component-icon
   transform (string) (default: ''): icon transformation (available options: 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical'),
   color (string) (default: ''): icon color (available options: 'default', 'inverted', 'primary')
   title (string) (default: ''): additional title for the icon; shortcut for extra accessibility title parameter
+  category (string) (default: ''): icon category; only used for webtools markup
   wt_markup (boolean) (default: false): should the icon use the Webtools markup?
   }
 - **"as_image"** (boolean) (default: false): should the icon be displayed as an image?

src/implementations/twig/components/icon/icon.html.twig

@@ -10,6 +10,7 @@
         transform (string) (default: ''): icon transformation (available options: 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical'),
         color (string) (default: ''): icon color (available options: 'default', 'inverted', 'primary')
         title (string) (default: ''): additional title for the icon; shortcut for extra accessibility title parameter
+        category (string) (default: ''): icon category; only used for webtools markup
         wt_markup (boolean) (default: false): should the icon use the Webtools markup?
       }
     - "as_image" (boolean) (default: false): should the icon be displayed as an image?
@@ -41,6 +42,7 @@
   transform: '',
   color: '',
   title: '',
+  category: '',
   wt_markup: false,
 }|merge(icon|default({})) %}
 
@@ -112,10 +114,15 @@
 
 {% if _icon.wt_markup %}
   {% set _wt_classes = '' %}
+  {% set _full_name = '' %}
+  {% if _icon.category is not empty %}
+    {% set _full_name = _full_name ~ '-' ~ _icon.category %}
+  {% endif %}
   {% if _icon.name is not empty %}
-    {% set _wt_classes = 'wt-icon--' ~ _icon.name %}
-    {% set _css_class = _css_class  ~ ' ecl-icon--' ~ _icon.name %}
+    {% set _full_name = _full_name ~ '--' ~ _icon.name %}
   {% endif %}
+  {% set _wt_classes = 'wt-icon' ~ _full_name %}
+  {% set _css_class = _css_class  ~ ' ecl-icon' ~ _full_name %}
 
   <span 
     class="{{ _wt_classes }} {{ _css_class }}"

src/implementations/twig/components/indicator/indicator.html.twig

@@ -3,8 +3,8 @@
 {#
   Parameters:
   - "value" (string) (default: '') Indicator value
-  - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the icon
-  - "extra_attributes" (optional) (array) (default: []) Extra attributes for icon
+  - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the indicator
+  - "extra_attributes" (optional) (array) (default: []) Extra attributes for the indicator
     - "name" (string) Attribute name, eg. 'data-test'
     - "value" (optional) (string) Attribute value, eg: 'data-test-1'
 #}

src/implementations/twig/components/inpage-navigation/README.md

@@ -17,6 +17,7 @@ Parameters:
   - label: (string) (default: '')
 - **"icon_path"** (string) (default: ''): path to the icons svg
 - **"icon_size"** (string) (default( 'xs') size of the toggle icon
+- **"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/inpage-navigation/inpage-navigation.html.twig

@@ -14,6 +14,7 @@
       ]
     - "icon_path" (string) (default: ''): path to the icons svg
     - "icon_size" (string) (default: 'xs') EC: xs, EU: s
+    - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
         {
@@ -30,6 +31,7 @@
 {% set _css_class = 'ecl-inpage-navigation' %}
 {% set _icon_path = icon_path|default('') %}
 {% set _icon_size = icon_size|default('xs') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _trigger_aria_label = trigger_aria_label|default('') %}
 {% set _extra_attributes = 'data-ecl-auto-init="InpageNavigation"' %}
 
@@ -79,6 +81,7 @@
             path: _icon_path,
             name: "corner-arrow",
             size: _icon_size,
+            wt_markup: _icon_wt_markup,
           },
           as_image: true,
           extra_classes: 'ecl-icon--rotate-180 ecl-inpage-navigation__trigger-icon',

src/implementations/twig/components/link/link.html.twig

@@ -70,7 +70,6 @@
   path: '',
   size: '',
   title: '',
-  wt_markup: false,
 } %}
 
 {% set _css_class = 'ecl-link' %}
@@ -160,7 +159,9 @@
       {% if _link.indicator is not empty %}
         <span class="ecl-link__icon-container">
           {%- include '@ecl/icon/icon.html.twig' with icon|merge({
-            icon: icon|default({}),
+            icon: icon|default({})|merge({
+              wt_markup: icon.wt_markup|default(_link.icon_wt_markup),
+            }),
             extra_classes: _icon_extra_classes,
             extra_accessibility: _extra_accessibility,
             as_image: _as_image,
@@ -169,7 +170,9 @@
         </span>
       {% else %}
         {%- include '@ecl/icon/icon.html.twig' with icon|merge({
-          icon: icon|default({}),
+          icon: icon|default({})|merge({
+            wt_markup: icon.wt_markup|default(_link.icon_wt_markup),
+          }),
           extra_classes: _icon_extra_classes,
           extra_accessibility: _extra_accessibility,
           as_image: _as_image,

src/implementations/twig/components/list-illustration/README.md

@@ -16,6 +16,7 @@ npm install --save @ecl/twig-component-list-illustration
   - "square" (boolean) (default: false): Squared image (100x100px)
   - "icon" (associative array) (default: {}): predefined structure for Icon component
   - "media_size" (string) (default: 'm'): size of the media (square picture or icon). Could be 's', 'm' or 'l'
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"column"** (number) (default: 1): number of columns (1 column means vertical display)
 - **"zebra"** (optional) (boolean) (default: false) use alternate background display for vertical list
 - **"centered"** (bool) (default: false) Define if the items should be centered

src/implementations/twig/components/list-illustration/list-illustration-item.html.twig

@@ -8,6 +8,7 @@
     - "picture" (associative array) (default: {}): Image for item, following ECL Picture structure
     - "square" (boolean) (default: false): true if the image is squared, otherwise ratio is 3:2
     - "icon" (associative array) (default: {}): predefined structure for Icon component
+    - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
     - "media_size" (string) (default: 'm'): size of the media (square picture or icon). Could be 's', 'm' or 'l'
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
@@ -26,6 +27,7 @@
 {% set _picture = picture|default({}) %}
 {% set _square = square|default(false) %}
 {% set _icon = icon|default({}) %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _media_size = media_size|default('m') %}
 {% set _css_class = 'ecl-list-illustration__item' %}
 {% set _image_class =  'ecl-list-illustration__image' %}
@@ -77,9 +79,12 @@
   <div class="ecl-list-illustration__detail">
   {% if _title is not empty or _icon is not empty or _value is not empty %}
     <div class="ecl-list-illustration__title-container">
-    {% if _icon is not empty and _icon.path is defined %}
+    {% if _icon is not empty and (_icon.path is defined or _icon_wt_markup) %}
       {% include '@ecl/icon/icon.html.twig' with {
-        icon: _icon|merge({ size: _icon_size }),
+        icon: _icon|merge({ 
+          size: _icon_size,
+          wt_markup: _icon.wt_markup|default(_icon_wt_markup), 
+        }),
         extra_classes: 'ecl-list-illustration__icon',
       } only %}
     {% endif %}

src/implementations/twig/components/list-illustration/list-illustration.html.twig

@@ -3,6 +3,7 @@
 {#
   Parameters:
     - "items" (array) (default: []): array of list_illustration_item
+    - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
     - "column" (number) (default: 1): number of columns (1 column means vertical display)
     - "zebra" (boolean) (default: true): use alternate background display for vertical list
     - "centered" (bool) (default: false) Define if the items should be centered
@@ -23,6 +24,7 @@
 {% set _centered = centered|default(false) %}
 {% set _font_size = font_size|default('l') %}
 {% set _column = column|default(1) %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _css_class = 'ecl-list-illustration' %}
 {% set _extra_attributes = '' %}
 
@@ -66,7 +68,9 @@
   {{ _extra_attributes|raw }}
 >
   {%- for _item in _items %}
-    {% include '@ecl/list-illustration/list-illustration-item.html.twig' with _item only %}
+    {% include '@ecl/list-illustration/list-illustration-item.html.twig' with _item|merge({
+      icon_wt_markup: _icon_wt_markup,
+    }) only %}
   {% endfor -%}
 </ul>
 {% endif %}

src/implementations/twig/components/list-illustration/list-illustration.story.js

@@ -326,44 +326,46 @@ const getArgTypes = (data, variant) => {
 };
 
 const prepareDataItem = (data, args) => {
-  data.title = args.title;
+  const clone = JSON.parse(JSON.stringify(data));
+
+  clone.title = args.title;
   if (!args.show_value) {
-    data.value = '';
+    clone.value = '';
   } else {
-    data.value = args.value;
+    clone.value = args.value;
   }
   if (!args.show_description) {
-    data.description = '';
+    clone.description = '';
   } else {
-    data.description = args.description;
+    clone.description = args.description;
   }
   if (!args.show_image) {
-    data.picture = {};
+    clone.picture = {};
   } else {
-    data.picture = imgDefault;
-    data.picture.img.src = args.picture;
-    data.square = args.image_squared;
-    data.media_size = args.image_size;
+    clone.picture = imgDefault;
+    clone.picture.img.src = args.picture;
+    clone.square = args.image_squared;
+    clone.media_size = args.image_size;
   }
   if (!args.show_icon) {
-    delete data.icon;
+    delete clone.icon;
   } else {
-    data.icon = {};
-    data.icon.name = args.icon;
-    data.icon.path = 'icon.svg';
-    data.media_size = args.icon_size;
+    clone.icon = {};
+    clone.icon.name = args.icon;
+    clone.icon.path = 'icon.svg';
+    clone.media_size = args.icon_size;
     if (args.icon_flag && args.icon_flag !== 'none') {
-      data.icon.name = args.icon_flag;
-      data.icon.path = 'icon-flag.svg';
+      clone.icon.name = args.icon_flag;
+      clone.icon.path = 'icon-flag.svg';
     }
     if (args.icon === 'none') {
-      delete data.icon;
+      delete clone.icon;
     }
   }
 
-  correctPaths(data);
+  correctPaths(clone);
 
-  return data;
+  return clone;
 };
 
 const prepareDataList = (data, args) => {

src/implementations/twig/components/media-container/README.md

@@ -18,6 +18,7 @@ npm install --save @ecl/twig-component-media-container
 - **"sr_play"** (string) (default: ''): Label for the play button (for the autoplay video)
 - **"sr_pause"** (string) (default: ''): Label for the pause button (for the autoplay video)
 - **"icon_path"**: (string) (default: '') Path or url to the icons sprite (for autoplay video)
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"full_width"**: (bool) (default: false) Full width media container (inside the grid container)
 - **"ratio"** (string) ('') Ratio of the embedded media, if empty the ratio will be set by the js
 - **"expandable"** (associative array) (default: {}): Optional expandable block, following ECL Expandable structure

src/implementations/twig/components/media-container/media-container.html.twig

@@ -7,6 +7,7 @@
   - "sr_play" (string) (default: ''): Label for the play button (for autoplay video)
   - "sr_pause" (string) (default: ''): Label for the pause button (for autoplay video)
   - "icon_path": (string) (default: '') Path to the icon sprite (needed for the autoplay video)
+  - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
   - "full_width": (bool) (default: false) Full width media container (inside the grid container)
   - "title" (string) (default: ''): Media title
   - "description" (string) (default: ''),
@@ -52,6 +53,7 @@
 {% set _autoplay = autoplay|default(false) %}
 {% set _video = video|default({}) %}
 {% set _icon_path = icon_path|default('') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
 {% set _picture = picture|default({}) %}
 {% set _extra_attributes = (embedded_media or (autoplay and (video or sources))) ? [
   'data-ecl-media-container="true"',
@@ -174,6 +176,7 @@
           path: _icon_path,
           name: 'play-outline',
           size: 'm',
+          wt_markup: _icon_wt_markup,
         },
       } only %}
       {% include '@ecl/button/button.html.twig' with {
@@ -187,6 +190,7 @@
           path: _icon_path,
           name: 'pause-outline',
           size: 'm',
+          wt_markup: _icon_wt_markup,
         },
       } only %}
     {% endif %}

src/implementations/twig/components/mega-menu/README.md

@@ -17,6 +17,7 @@ npm install --save @ecl/twig-component-mega-menu
 - **"third_level_aria_label"** (string): (default: ''): Third level list aria label
 - **"back_label"** (string): (default: ''): Back button label
 - **"icon_path"** (string) (default: ''): Path to the icon sprite
+- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
 - **"items"**: (array) (default: []): The menu items - format: [
   {
   "label": (string) (default: '')