{% if _title is not empty or _icon is not empty or _value is not empty %}
- {% 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 %}
diff --git a/src/implementations/twig/components/list-illustration/list-illustration.html.twig b/src/implementations/twig/components/list-illustration/list-illustration.html.twig
index d3b39acbcf..50086de732 100644
--- a/src/implementations/twig/components/list-illustration/list-illustration.html.twig
+++ b/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 -%}
{% endif %}
diff --git a/src/implementations/twig/components/list-illustration/list-illustration.story.js b/src/implementations/twig/components/list-illustration/list-illustration.story.js
index 0edec77a9f..ca6cb192e8 100644
--- a/src/implementations/twig/components/list-illustration/list-illustration.story.js
+++ b/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) => {
diff --git a/src/implementations/twig/components/media-container/README.md b/src/implementations/twig/components/media-container/README.md
index 16de9abe6d..8ebb489226 100644
--- a/src/implementations/twig/components/media-container/README.md
+++ b/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
diff --git a/src/implementations/twig/components/media-container/media-container.html.twig b/src/implementations/twig/components/media-container/media-container.html.twig
index cb738d4a14..40d671faa8 100644
--- a/src/implementations/twig/components/media-container/media-container.html.twig
+++ b/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 %}
diff --git a/src/implementations/twig/components/mega-menu/README.md b/src/implementations/twig/components/mega-menu/README.md
index 2cb60b50ca..3ff4aa6c3a 100644
--- a/src/implementations/twig/components/mega-menu/README.md
+++ b/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: '')
diff --git a/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig b/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig
index 218e72261f..e62a53f4db 100644
--- a/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig
+++ b/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig
@@ -4,6 +4,7 @@
Parameters:
- "id" (string) Unique id for this item. Needed for accessibility. Generated automatically
- "icon_path" (string) Path to the icon sprite
+ - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
- "item" (object)
- "label" (string) Label of the menu link
- "external" (boolean) External link
@@ -51,6 +52,7 @@
{% set _menu_list_item_attributes = 'data-ecl-mega-menu-item' %}
{% set _menu_list_item_class = 'ecl-mega-menu__item' %}
{% set _icon_path = icon_path|default('') %}
+{% set _icon_wt_markup = icon_wt_markup|default(false) %}
{% set _featured = _item.featured|default({}) %}
{% set _info = _item.info|default({}) %}
{% set _see_all = see_all|default(false) %}
@@ -85,12 +87,14 @@
transform: 'rotate-90',
path: _icon_path,
size: '2xs',
+ wt_markup: _icon_wt_markup,
},
{
name: 'arrow-left',
transform: 'flip-horizontal',
path: _icon_path,
size: 's',
+ wt_markup: _icon_wt_markup,
}] %}
{% endif %}
@@ -110,6 +114,7 @@
icon_path: _icon_path,
icon_position: 'after',
icon: _icon,
+ icon_wt_markup: _icon_wt_markup,
extra_classes: _menu_link_class,
extra_attributes: _menu_link_attributes,
} only %}
@@ -123,6 +128,7 @@
external: _can_be_external ? _item.external|default(false),
sr_external: _item.sr_external|default(''),
icon_position: 'after',
+ icon_wt_markup: _icon_wt_markup,
},
icon: _icon,
extra_classes: _menu_link_class,
@@ -182,6 +188,7 @@
link: _info.link.link|merge({
type: 'standalone',
path: _path,
+ icon_wt_markup: _info.link.icon_wt_markup|default(_icon_wt_markup),
}),
icon: {
name: 'arrow-left',
@@ -256,6 +263,7 @@
label: child.label,
icon_path: _icon_path,
icon: _icon,
+ icon_wt_markup: _icon_wt_markup,
extra_classes: _sublink_class,
extra_attributes: _sublink_attrs,
} only %}
@@ -265,6 +273,7 @@
third_level_aria_label: third_level_aria_label|default(''),
see_all_attributes: child.see_all_attributes|default([]),
icon_path: _icon_path,
+ icon_wt_markup: _icon_wt_markup,
sublink_id: _sublink_id|default(''),
item: {
path: child.path,
@@ -283,6 +292,7 @@
external: _can_be_external ? child.external|default(false),
sr_external: child.sr_external|default(''),
icon_path: _icon_path,
+ icon_wt_markup: _icon_wt_markup,
},
icon: _icon,
extra_classes: _sublink_class,
@@ -299,6 +309,7 @@
type: 'standalone',
label: _see_all_label,
path: _item.path,
+ icon_wt_markup: _icon_wt_markup,
},
icon: {
path: _icon_path,
@@ -348,7 +359,11 @@
{% for item in _featured.items %}
@@ -310,7 +315,8 @@
icon: {
path: _icon_path,
name: 'log-in',
- size: 's'
+ size: 's',
+ wt_markup: _icon_wt_markup,
},
as_image: true,
extra_classes: 'ecl-site-header__icon',
@@ -329,6 +335,7 @@
{% include '@ecl/site-header/site-header-language-switcher.html.twig' with {
language_selector: _language_selector,
icon_path: _icon_path,
+ icon_wt_markup: _icon_wt_markup,
} only %}
{% endif %}
@@ -348,6 +355,7 @@
name: 'search',
path: _icon_path,
size: 's',
+ wt_markup: _icon_wt_markup,
},
as_image: true,
extra_classes: 'ecl-site-header__icon',
@@ -372,6 +380,7 @@