From 027dd4637d8727d2ded8272d2ce6f31fbd206f99 Mon Sep 17 00:00:00 2001 From: emeryro Date: Fri, 20 Dec 2024 13:12:57 +0100 Subject: [PATCH] update components --- .../file-upload/file-upload.html.twig | 1 - .../twig/components/form-group/README.md | 2 + .../form-group/form-group.html.twig | 6 ++- .../twig/components/icon/README.md | 1 + .../twig/components/icon/icon.html.twig | 11 ++++- .../components/indicator/indicator.html.twig | 4 +- .../components/inpage-navigation/README.md | 1 + .../inpage-navigation.html.twig | 3 ++ .../twig/components/link/link.html.twig | 9 ++-- .../components/list-illustration/README.md | 1 + .../list-illustration-item.html.twig | 9 +++- .../list-illustration.html.twig | 6 ++- .../list-illustration.story.js | 42 ++++++++++--------- .../twig/components/media-container/README.md | 1 + .../media-container/media-container.html.twig | 4 ++ .../twig/components/mega-menu/README.md | 1 + .../mega-menu/mega-menu-item.html.twig | 17 +++++++- .../components/mega-menu/mega-menu.html.twig | 5 +++ .../twig/components/menu/README.md | 1 + .../twig/components/menu/menu-item.html.twig | 6 +++ .../twig/components/menu/menu.html.twig | 10 ++++- .../twig/components/modal/README.md | 1 + .../twig/components/modal/modal.html.twig | 5 +++ .../navigation-list-item.html.twig | 1 - .../twig/components/news-ticker/README.md | 1 + .../news-ticker/news-ticker.html.twig | 10 ++++- .../twig/components/notification/README.md | 1 + .../notification/notification.html.twig | 13 +++++- .../twig/components/pagination/README.md | 2 + .../pagination/pagination.html.twig | 6 ++- .../twig/components/popover/README.md | 1 + .../twig/components/popover/popover.html.twig | 7 ++++ .../twig/components/range/range.html.twig | 4 +- .../twig/components/rating-field/README.md | 1 + .../rating-field/rating-field.html.twig | 10 ++++- .../twig/components/search-form/README.md | 1 + .../search-form/search-form.html.twig | 3 ++ .../components/separator/separator.html.twig | 4 +- .../twig/components/site-footer/README.md | 1 + .../site-footer/site-footer.html.twig | 16 +++++-- .../twig/components/site-header/README.md | 1 + .../site-header-language-switcher.html.twig | 12 ++++-- .../site-header/site-header.html.twig | 22 ++++++++-- .../components/social-media-follow/README.md | 1 + .../social-media-follow.html.twig | 4 ++ .../twig/components/tabs/README.md | 1 + .../twig/components/tabs/tabs.html.twig | 6 +++ .../twig/components/tag/README-tag-set.md | 1 + .../twig/components/tag/README.md | 1 + .../twig/components/tag/tag-set.html.twig | 3 ++ .../twig/components/tag/tag.html.twig | 10 ++++- .../twig/components/text-area/README.md | 1 - .../components/text-area/text-area.html.twig | 1 - .../twig/components/text-input/README.md | 1 - .../text-input/text-input.html.twig | 5 +-- .../twig/components/timeline/README.md | 1 + .../components/timeline/timeline.html.twig | 3 ++ 57 files changed, 241 insertions(+), 62 deletions(-) diff --git a/src/implementations/twig/components/file-upload/file-upload.html.twig b/src/implementations/twig/components/file-upload/file-upload.html.twig index 8aaa4c00887..d0df0786fc7 100644 --- a/src/implementations/twig/components/file-upload/file-upload.html.twig +++ b/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) diff --git a/src/implementations/twig/components/form-group/README.md b/src/implementations/twig/components/form-group/README.md index aa460c4560e..1b9e188e841 100644 --- a/src/implementations/twig/components/form-group/README.md +++ b/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 diff --git a/src/implementations/twig/components/form-group/form-group.html.twig b/src/implementations/twig/components/form-group/form-group.html.twig index 869d93f88c3..b2cbca819ae 100644 --- a/src/implementations/twig/components/form-group/form-group.html.twig +++ b/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 ? {} : { diff --git a/src/implementations/twig/components/icon/README.md b/src/implementations/twig/components/icon/README.md index e00d6c1deb8..9cee3aaa0a2 100644 --- a/src/implementations/twig/components/icon/README.md +++ b/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? diff --git a/src/implementations/twig/components/icon/icon.html.twig b/src/implementations/twig/components/icon/icon.html.twig index d137a0f3435..b029ce02157 100644 --- a/src/implementations/twig/components/icon/icon.html.twig +++ b/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 %} {%- 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 @@ {% 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, diff --git a/src/implementations/twig/components/list-illustration/README.md b/src/implementations/twig/components/list-illustration/README.md index e6959da8959..bd4afbb7c7e 100644 --- a/src/implementations/twig/components/list-illustration/README.md +++ b/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 diff --git a/src/implementations/twig/components/list-illustration/list-illustration-item.html.twig b/src/implementations/twig/components/list-illustration/list-illustration-item.html.twig index 5fbb8fa6ffc..96d4f31086e 100644 --- a/src/implementations/twig/components/list-illustration/list-illustration-item.html.twig +++ b/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 @@
{% 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 d3b39acbcf2..50086de7325 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 0edec77a9fa..ca6cb192e88 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 16de9abe6d1..8ebb4892263 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 cb738d4a14b..40d671faa88 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 2cb60b50caf..3ff4aa6c3a8 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 218e72261f0..e62a53f4dbf 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 %}
  • {% include '@ecl/link/link.html.twig' with { - link: item|merge({ type: 'standalone', icon_path: _icon_path }), + link: item|merge({ + type: 'standalone', + icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, + }), extra_attributes: [ { name: 'data-ecl-mega-menu-featured-link' }, ]|merge(item.extra_attributes|default([])), diff --git a/src/implementations/twig/components/mega-menu/mega-menu.html.twig b/src/implementations/twig/components/mega-menu/mega-menu.html.twig index 624e20cef7b..b325530c639 100644 --- a/src/implementations/twig/components/mega-menu/mega-menu.html.twig +++ b/src/implementations/twig/components/mega-menu/mega-menu.html.twig @@ -10,6 +10,7 @@ - "second_level_aria_label" (string) (default: '') Aria label for the sub-lists, second level - "third_level_aria_label" (string) (default: '') Aria label for the sub-lists, third level - "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: '') @@ -66,6 +67,7 @@ {% set _css_class = 'ecl-mega-menu' %} {% set _extra_attributes = '' %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {# Internal logic - Process properties #} @@ -116,6 +118,7 @@ variant: 'tertiary', icon_path: _icon_path, icon_position: 'before', + icon_wt_markup: _toggle.icon_wt_markup|default(_icon_wt_markup), icon: _toggle_icon, hide_label: true, extra_classes: 'ecl-mega-menu__open', @@ -137,6 +140,7 @@ name: 'corner-arrow', size: 'xs', transform: 'rotate-270', + wt_markup: _icon_wt_markup, }, icon_position: 'before', extra_classes: 'ecl-mega-menu__back', @@ -155,6 +159,7 @@ item: item, id: "ecl-mega-menu-item-" ~ _id ~ '-' ~ key, icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, see_all_label: _see_all_label, second_level_aria_label: _second_level_aria_label, third_level_aria_label: _third_level_aria_label, diff --git a/src/implementations/twig/components/menu/README.md b/src/implementations/twig/components/menu/README.md index 8a906c87a2a..f35106fb3f6 100644 --- a/src/implementations/twig/components/menu/README.md +++ b/src/implementations/twig/components/menu/README.md @@ -15,6 +15,7 @@ npm install --save @ecl/twig-component-menu - **"back_label"** (string): (default: ''): Back button label - **"aria_label"** (string) (default: '') Aria label for the main nav - **"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/menu/menu-item.html.twig b/src/implementations/twig/components/menu/menu-item.html.twig index a82abf3521c..2b137279616 100644 --- a/src/implementations/twig/components/menu/menu-item.html.twig +++ b/src/implementations/twig/components/menu/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? - "see_all_label": (string) (default: ''): Label for the "see all" link (mobile only) - "item" (object) - "is_current" (boolean) Whether the item is currently selected @@ -33,6 +34,7 @@ {% set _menu_list_item_attributes = 'data-ecl-menu-item' %} {% set _menu_list_item_class = 'ecl-menu__item' %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _see_all_label = see_all_label|default('') %} {% set _menu_item_attributes = _item.extra_attributes|default([]) %} @@ -58,6 +60,7 @@ label: _item.label, path: _item.path, icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, external: _item.external|default(false), sr_external: _item.sr_external|default(''), }, @@ -78,6 +81,7 @@ variant: 'ghost', type: 'button', hide_label: true, + icon_wt_markup: _icon_wt_markup, icon: { name: 'corner-arrow', size: 'xs', @@ -112,6 +116,7 @@ label: child.label, path: child.path, icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, external: child.external, sr_external: child.sr_external|default(''), }, @@ -129,6 +134,7 @@ label: _see_all_label, path: _item.path, icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, }, icon: { name: 'arrow-left', diff --git a/src/implementations/twig/components/menu/menu.html.twig b/src/implementations/twig/components/menu/menu.html.twig index 8730e0338ee..f6232989c94 100644 --- a/src/implementations/twig/components/menu/menu.html.twig +++ b/src/implementations/twig/components/menu/menu.html.twig @@ -9,6 +9,7 @@ - "back_label": (string): (default: ''): Back button label - "aria_label" (string) (default: '') Aria label for the main nav - "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: '') @@ -62,6 +63,7 @@ {% set _button_previous_label = button_previous_label|default('') %} {% set _button_next_label = button_next_label|default('') %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _max_lines = max_lines|default(2) %} {# Internal logic - Process properties #} @@ -115,6 +117,7 @@ icon_path: _icon_path, icon_position: 'before', icon: _toggle_icon, + icon_wt_markup: _toggle.icon_wt_markup|default(_icon_wt_markup), hide_label: true, extra_classes: 'ecl-menu__open', extra_attributes: [ @@ -130,6 +133,7 @@ {% include '@ecl/button/button.html.twig' with _close|merge({ type: 'submit', variant: 'ghost', + icon_wt_markup: _close.icon_wt_markup|default(_icon_wt_markup), extra_classes: 'ecl-menu__close', extra_attributes: [{ name: 'data-ecl-menu-close', @@ -144,6 +148,7 @@ type: 'submit', variant: 'ghost', label: _back_label, + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, name: 'corner-arrow', @@ -159,11 +164,12 @@ {% endif %} - {% if _icon_path is not empty %} + {% if _icon_path is not empty or _icon_wt_markup %} {% include '@ecl/button/button.html.twig' with { type: 'button', variant: 'ghost', icon_position: 'before', + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, size: 's', @@ -183,6 +189,7 @@ type: 'button', variant: 'ghost', icon_position: 'before', + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, size: 's', @@ -207,6 +214,7 @@ item: item, id: "ecl-menu-item-" ~ _id ~ '-' ~ key, icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, see_all_label: _see_all_label, } only %} {% endif %} diff --git a/src/implementations/twig/components/modal/README.md b/src/implementations/twig/components/modal/README.md index a53f00ceb3e..56231f5150a 100644 --- a/src/implementations/twig/components/modal/README.md +++ b/src/implementations/twig/components/modal/README.md @@ -14,6 +14,7 @@ npm install --save @ecl/twig-component-modal - **"size"** (string) (default: 'l'): Size of the modal. Could be 's' or 'l' - **"icon_path"** (string) (default: '') Path to the icon sprite - **"sr_icon"** (string) (default: ''): additional label for the icon; for screen readers +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"close"** (object of type "button") (default: {}): close button; label has to be provided for screen reader - **"header_icon"** (associative array) (default: {}): Optional icon in the header, following ECL Icon structure - **"buttons"** (array) (default: {}) Array of ECL Button, displayed in the modal footer diff --git a/src/implementations/twig/components/modal/modal.html.twig b/src/implementations/twig/components/modal/modal.html.twig index 5115895672b..91557e32322 100644 --- a/src/implementations/twig/components/modal/modal.html.twig +++ b/src/implementations/twig/components/modal/modal.html.twig @@ -8,6 +8,7 @@ - "size" (string) (default: 'l'): Size of the modal. Could be 's' or 'l' - "icon_path" (string) (default: '') Path to the icon sprite - "sr_icon" (string) (default: ''): additional label for the icon; for screen readers + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "close" (object of type "button") (default: {}): close button; label has to be provided for screen reader - "buttons" (array) (default: {}) Array of ECL Button, displayed in the modal footer - "extra_classes" (string) (default: '') @@ -34,6 +35,7 @@ {% set _css_class = 'ecl-modal' %} {% set _icon_path = icon_path|default('') %} {% set _sr_icon = sr_icon|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _close = close|default({}) %} {% set _header = header|default('') %} {% set _header_icon = '' %} @@ -101,6 +103,7 @@ path: _icon_path, name: _header_icon, size: 'l', + wt_markup: _icon_wt_markup, }, as_image: true, extra_accessibility: not _sr_icon ? {} : { @@ -121,6 +124,7 @@ type: 'button', variant: 'tertiary', hide_label: true, + icon_wt_markup: _close.icon_wt_markup|default(_icon_wt_markup), extra_classes: 'ecl-modal__close', extra_attributes: [{ name: 'data-ecl-modal-close', @@ -159,6 +163,7 @@ {% set _button_extra_classes = _button_extra_classes ~ ' ' ~ _button.extra_classes %} {% endif %} {% include '@ecl/button/button.html.twig' with _button|merge({ + icon_wt_markup: _button.icon_wt_markup|default(_icon_wt_markup), extra_classes: _button_extra_classes, }) only %} {% endfor %} diff --git a/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig b/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig index 9ba17a2b235..643218504f5 100644 --- a/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig +++ b/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig @@ -27,7 +27,6 @@ {% set _description = description|default('') %} {% set _links = links|default([]) %} {% set _css_class = 'ecl-navigation-list__item' %} -{% set _icon = icon|default('') %} {% set _extra_attributes = '' %} {# Internal logic - Process properties #} diff --git a/src/implementations/twig/components/news-ticker/README.md b/src/implementations/twig/components/news-ticker/README.md index 114a648d9e6..689310c1fd4 100644 --- a/src/implementations/twig/components/news-ticker/README.md +++ b/src/implementations/twig/components/news-ticker/README.md @@ -25,6 +25,7 @@ npm install --save @ecl/twig-component-news-ticker - **"sr_play"** (string) (default: 'Play news ticker') screen reader label for the play button - **"sr_pause"** (string) (default: 'Pause news ticker') screen reader label for the pause button - **"icon_path"** (string) (default: ''): path to the icons svg +- **"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' diff --git a/src/implementations/twig/components/news-ticker/news-ticker.html.twig b/src/implementations/twig/components/news-ticker/news-ticker.html.twig index a047b1399ea..aa2c64ae51d 100644 --- a/src/implementations/twig/components/news-ticker/news-ticker.html.twig +++ b/src/implementations/twig/components/news-ticker/news-ticker.html.twig @@ -23,6 +23,7 @@ - "sr_play" (string) (default: 'Play news ticker') screen reader label for play button - "sr_pause" (string) (default: 'Pause news ticker') screen reader label for pause button - "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: [ { @@ -37,6 +38,7 @@ {% set _id = id|default('ecl-news-ticker-' ~ random()) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _counter_label = counter_label|default('of') %} {% set _items = items|default([]) %} {% set _aria_controls = _id ~ '-content' %} @@ -91,6 +93,7 @@ path: _icon_path, name: _item.icon.name, size: 'l', + wt_markup: _icon_wt_markup, }), extra_classes: 'ecl-news-ticker__icon', } only %} @@ -115,11 +118,12 @@ {{- _image -}} {% include '@ecl/link/link.html.twig' with { link: { - type: 'standalone', + type: 'standalone', label: _item.content, path: _item.link, icon_position: 'before', icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, external: _item.external, sr_external: _sr_external }, @@ -141,6 +145,7 @@ variant: 'tertiary', label: _sr_previous, hide_label: true, + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, name: 'corner-arrow', @@ -158,6 +163,7 @@ variant: 'tertiary', label: _sr_play, hide_label: true, + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, name: 'play-outline', @@ -174,6 +180,7 @@ variant: 'tertiary', label: _sr_pause, hide_label: true, + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, name: 'pause-outline', @@ -190,6 +197,7 @@ variant: 'tertiary', label: _sr_next, hide_label: true, + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, name: 'corner-arrow', diff --git a/src/implementations/twig/components/notification/README.md b/src/implementations/twig/components/notification/README.md index cb2d9eeec3f..d3eded131f9 100644 --- a/src/implementations/twig/components/notification/README.md +++ b/src/implementations/twig/components/notification/README.md @@ -11,6 +11,7 @@ npm install --save @ecl/twig-component-notification - **"variant"** (string) (default: 'info'): could be 'info, 'success', 'warning' or 'error' - **"icon"** (object of type "icon") (default: {}) - **"sr_icon"** (string) (default: ''): additional label for the icon; for screen readers +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"title"** (string) (default: '') - **"description"** (string) (default: '') - **"links"** (array) (default: []) diff --git a/src/implementations/twig/components/notification/notification.html.twig b/src/implementations/twig/components/notification/notification.html.twig index 8490c46608d..6b71a060eef 100644 --- a/src/implementations/twig/components/notification/notification.html.twig +++ b/src/implementations/twig/components/notification/notification.html.twig @@ -5,6 +5,7 @@ - "variant" (string) (default: 'info'): could be 'info, 'success', 'warning' or 'error' - "icon" (object of type "icon") (default: {}) - "sr_icon" (string) (default: ''): additional label for the icon; for screen readers + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "title" (string) (default: '') - "description" (string) (default: '') - "links" (array): An array of ECL links objects @@ -23,6 +24,7 @@ {% set _variant = variant|default('info') %} {% set _icon = icon|default({}) %} {% set _sr_icon = sr_icon|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _title = title|default('') %} {% set _close = close|default({}) %} {% set _links = links|default([]) %} @@ -62,7 +64,9 @@ {% endif %} {% include '@ecl/icon/icon.html.twig' with { - icon: _icon, + icon: _icon|merge({ + wt_markup: _icon.wt_markup|default(_icon_wt_markup), + }), as_image: true, extra_accessibility: not _sr_icon ? {} : { title: _sr_icon, @@ -74,6 +78,7 @@ {% include '@ecl/button/button.html.twig' with _close|merge({ type: 'button', variant: 'tertiary', + icon_wt_markup: _close.icon_wt_markup|default(_icon_wt_markup), extra_classes: 'ecl-notification__close', extra_attributes: [{ name: 'data-ecl-notification-close', @@ -89,7 +94,11 @@ {% if _links is not empty and _links is iterable %} {% for _link in _links %}
    - {% include '@ecl/link/link.html.twig' with _link only %} + {% include '@ecl/link/link.html.twig' with _link|merge({ + link: _link.link|merge({ + icon_wt_markup: _link.link.icon_wt_markup|default(_icon_wt_markup), + }) + }) only %}
    {% endfor %} {% endif %} diff --git a/src/implementations/twig/components/pagination/README.md b/src/implementations/twig/components/pagination/README.md index 9da98a040c2..e0ec1b3d963 100644 --- a/src/implementations/twig/components/pagination/README.md +++ b/src/implementations/twig/components/pagination/README.md @@ -9,6 +9,8 @@ npm install --save @ecl/twig-component-pagination ### Parameters - **"label"** (string) (default: ''): for screen reader +- **"icon_path"** (string) (default: '') Path to the icons file +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"items"** (array) (default: []): - "type" (string) (default: ''): could be 'previous', 'current', 'next', 'truncation' (previous and next are always visible) - "label" (string) (default: ''): label used when the item is not a link diff --git a/src/implementations/twig/components/pagination/pagination.html.twig b/src/implementations/twig/components/pagination/pagination.html.twig index c285d04e6fe..29f428d209b 100644 --- a/src/implementations/twig/components/pagination/pagination.html.twig +++ b/src/implementations/twig/components/pagination/pagination.html.twig @@ -4,6 +4,7 @@ Parameters: - "label" (string) (default: ''): for screen reader - "icon_path" (string) (default: '') Path to the icons file + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "items" (array) (default: []): - "type" (string) (default: ''): can be 'previous', 'current', 'next' or 'truncation' - "label" (string) (default: ''): label used when the item is not a link @@ -22,6 +23,7 @@ {% set _css_class = 'ecl-pagination' %} {% set _extra_attributes = '' %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {# Internal logic - Process properties #} @@ -59,7 +61,9 @@ {% set _icon = _icon_path is not empty ? _item.link.icon|merge({ path: _icon_path }) : _item.link.icon %} {% endif %} {% include '@ecl/link/link.html.twig' with { - link: _link|default({}), + link: _link|default({})|merge({ + icon_wt_markup: _icon_wt_markup, + }), icon: _icon, extra_classes: "ecl-pagination__link", } only %} diff --git a/src/implementations/twig/components/popover/README.md b/src/implementations/twig/components/popover/README.md index 7f8d301a7fa..92db78b89e5 100644 --- a/src/implementations/twig/components/popover/README.md +++ b/src/implementations/twig/components/popover/README.md @@ -12,6 +12,7 @@ npm install --save @ecl/twig-component-popover - **toggle** (associative array) (default: {}): Popover toggle element, following ECL Link or ECL button structure - **links** (array) (default: []): Array of ECL Links - **close** (object of type "button") (default: {}): close button (optional) +- **"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' diff --git a/src/implementations/twig/components/popover/popover.html.twig b/src/implementations/twig/components/popover/popover.html.twig index ef0d36f08e0..a06ddd41c19 100644 --- a/src/implementations/twig/components/popover/popover.html.twig +++ b/src/implementations/twig/components/popover/popover.html.twig @@ -5,6 +5,7 @@ - "id" (string) (default: random) - "toggle" (associative array) (default: {}): Popover toggle element, following ECL Link or ECL button structure - "close" (object of type "button") (default: {}): close button (optional) + - "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 _toggle = toggle|default({}) %} {% set _close = close|default({}) %} {% set _links = links|default([]) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {# Internal logic - Process properties #} @@ -62,11 +64,15 @@ {% endif %} {% if _toggle.link is not empty %} {% include '@ecl/link/link.html.twig' with _toggle|merge({ + link: _toggle.link|merge({ + icon_wt_markup: _toggle.link.icon_wt_markup|default(_icon_wt_markup), + }), extra_classes: _toggle_extra_classes, extra_attributes: _toggle_attributes, }) only %} {% else %} {% include '@ecl/button/button.html.twig' with _toggle|merge({ + icon_wt_markup: _toggle.icon_wt_markup|default(_icon_wt_markup), extra_classes: _toggle_extra_classes, extra_attributes: _toggle_attributes, }) only %} @@ -77,6 +83,7 @@ {% include '@ecl/button/button.html.twig' with _close|merge({ type: 'button', variant: 'tertiary', + icon_wt_markup: _close.icon_wt_markup|default(_icon_wt_markup), extra_classes: 'ecl-popover__close', extra_attributes: [{ name: 'data-ecl-popover-close', diff --git a/src/implementations/twig/components/range/range.html.twig b/src/implementations/twig/components/range/range.html.twig index fe5e0075813..6382a0d706a 100644 --- a/src/implementations/twig/components/range/range.html.twig +++ b/src/implementations/twig/components/range/range.html.twig @@ -14,8 +14,8 @@ - "width" (string) (default: 'm') - "extra_label_classes" (optional) (string) (default: '') Extra classes (space separated) for the range label - "extra_group_classes" (optional) (string) (default: '') Extra classes (space separated) for the range group - - "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 range + - "extra_attributes" (optional) (array) (default: []) Extra attributes for the range - "name" (string) Attribute name, eg. 'data-test' - "value" (optional) (string) Attribute value, eg: 'data-test-1' Blocks: diff --git a/src/implementations/twig/components/rating-field/README.md b/src/implementations/twig/components/rating-field/README.md index 5ad807d43ce..20d439a640c 100644 --- a/src/implementations/twig/components/rating-field/README.md +++ b/src/implementations/twig/components/rating-field/README.md @@ -15,6 +15,7 @@ npm install --save @ecl/twig-component-rating-field - **"invalid_icon"** (object) default({}) - **"star_filled_icon"** (object) default({}) - **"star_outline_icon"** (object) default({}) +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"required"** (boolean) (default: false) - **"extra_classes"** (optional) (string) (default: '') - **"extra_attributes"** (optional) (array) (default: []) diff --git a/src/implementations/twig/components/rating-field/rating-field.html.twig b/src/implementations/twig/components/rating-field/rating-field.html.twig index 538f4be8cd3..17ca64d462e 100644 --- a/src/implementations/twig/components/rating-field/rating-field.html.twig +++ b/src/implementations/twig/components/rating-field/rating-field.html.twig @@ -10,6 +10,7 @@ - "invalid_icon" (object) default({}) - "star_filled_icon" (object) default({}) - "star_outline_icon" (object) default({}) + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "required" (boolean) (default: false) - "extra_classes" (optional) (string) (default: '') - "extra_attributes" (optional) (array) (default: []) @@ -27,6 +28,7 @@ {% set _required = required|default(false) %} {% set _star_filled_icon = star_filled_icon|default({}) %} {% set _star_outline_icon = star_outline_icon|default({}) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _css_class = 'ecl-form-group' %} {% set _extra_attributes = '' %} @@ -76,11 +78,15 @@ {{ _item.label }} {% endif %} {% include '@ecl/icon/icon.html.twig' with { - icon: _star_filled_icon, + icon: _star_filled_icon|merge({ + wt_markup: _star_filled_icon.wt_markup|default(_icon_wt_markup), + }), extra_classes: 'ecl-rating-field__icon-filled', } only %} {% include '@ecl/icon/icon.html.twig' with { - icon: _star_outline_icon, + icon: _star_outline_icon|merge({ + wt_markup: _star_outline_icon.wt_markup|default(_icon_wt_markup), + }), extra_classes: 'ecl-rating-field__icon-outline', } only %} diff --git a/src/implementations/twig/components/search-form/README.md b/src/implementations/twig/components/search-form/README.md index 9097dbbbc45..0a93d181fc7 100644 --- a/src/implementations/twig/components/search-form/README.md +++ b/src/implementations/twig/components/search-form/README.md @@ -11,6 +11,7 @@ npm install --save @ecl/twig-component-search-form - **"label"** (string) default: '' Label of the search form - **"text_input"** (associative array) default: Predefined structure for the text-Input component - **"button"** (associative array) default: Predefined structure for the Button component +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"width"** (string) (default: 'm') - **"extra_form_elements"** (optional) (string) (default: '') Extra elements for the form - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) diff --git a/src/implementations/twig/components/search-form/search-form.html.twig b/src/implementations/twig/components/search-form/search-form.html.twig index 7847bf271e9..3a3e16a522f 100644 --- a/src/implementations/twig/components/search-form/search-form.html.twig +++ b/src/implementations/twig/components/search-form/search-form.html.twig @@ -4,6 +4,7 @@ Parameters: - "text_input" (associative array) default: A predefined structure for EC Text Input - "button" (associative array) default: A predefined structure for EC Button + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "width" (string) (default: 'm') - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ @@ -21,6 +22,7 @@ {% set _extra_form_elements = extra_form_elements|default('') %} {% set _button = button|default('') %} {% set _width = width|default('m') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _css_class = 'ecl-search-form' %} {% set _text_input = text_input|default('') %} {% set _label = label|default('') %} @@ -61,6 +63,7 @@ {% endif %} {% if _button is not empty %} {% include '@ecl/button/button.html.twig' with _button|merge({ + icon_wt_markup: _button.icon_wt_markup|default(_icon_wt_markup), icon: { path: _button.icon.path, name: 'search', diff --git a/src/implementations/twig/components/separator/separator.html.twig b/src/implementations/twig/components/separator/separator.html.twig index 019d5645260..5e64a3f3c04 100644 --- a/src/implementations/twig/components/separator/separator.html.twig +++ b/src/implementations/twig/components/separator/separator.html.twig @@ -2,8 +2,8 @@ {# Parameters: - - "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 separator + - "extra_attributes" (optional) (array) (default: []) Extra attributes for the separator - "name" (string) Attribute name, eg. 'data-test' - "value" (optional) (string) Attribute value, eg: 'data-test-1' #} diff --git a/src/implementations/twig/components/site-footer/README.md b/src/implementations/twig/components/site-footer/README.md index 9646acbd69c..15620428752 100644 --- a/src/implementations/twig/components/site-footer/README.md +++ b/src/implementations/twig/components/site-footer/README.md @@ -27,6 +27,7 @@ npm install --save @ecl/twig-component-site-footer - "content_after" (string) Optional text after the link - "links_inline" (optional) (bolean) (default: false) Optional inline style for the list - **"split_columns"** (boolean) (optional) (default: false) Split columns in the footer, used for Core EC version +- **"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' diff --git a/src/implementations/twig/components/site-footer/site-footer.html.twig b/src/implementations/twig/components/site-footer/site-footer.html.twig index 267a3a05046..30bf5a8c848 100644 --- a/src/implementations/twig/components/site-footer/site-footer.html.twig +++ b/src/implementations/twig/components/site-footer/site-footer.html.twig @@ -21,8 +21,9 @@ - "content_after" (string) Optional text after the link - "links_inline" (optional) (bolean) (default: false) Optional inline style for the list - "split_columns" (boolean) (optional) (default: false) Split columns in the footer, used for Core EC version - - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the icon - - "extra_attributes" (optional) (array) (default: []) Extra attributes for icon + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? + - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the footer + - "extra_attributes" (optional) (array) (default: []) Extra attributes for the footer - "name" (string) Attribute name, eg. 'data-test' - "value" (string) Attribute value, eg: 'data-test-1' #} @@ -30,6 +31,7 @@ {# Internal properties #} {% set _split_columns = split_columns|default(false) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _rows = rows|default([]) %} {% set _css_class = 'ecl-site-footer' %} {% set _extra_attributes = '' %} @@ -122,7 +124,10 @@
    {%- if _sections.title.link is defined and _sections.title.link is not empty -%} {% include '@ecl/link/link.html.twig' with _sections|merge({ - link: _sections.title.link|merge({ type: 'standalone'}), + link: _sections.title.link|merge({ + type: 'standalone', + icon_wt_markup: _sections.title.link.icon_wt_markup|default(_icon_wt_markup), + }), extra_classes: 'ecl-site-footer__title-link', icon: _sections.title.icon|default({}), }) only %} @@ -151,7 +156,10 @@ {{- _item.content_before -}} {% endif %} {% include '@ecl/link/link.html.twig' with _item|merge({ - link: _item.link|default({})|merge({ type: 'standalone' }), + link: _item.link|default({})|merge({ + type: 'standalone', + icon_wt_markup: _item.link.icon_wt_markup|default(_icon_wt_markup), + }), extra_classes: 'ecl-site-footer__link', }) only %} {% if _item.content_after is defined and _item.content_after is not empty %} diff --git a/src/implementations/twig/components/site-header/README.md b/src/implementations/twig/components/site-header/README.md index be3a5a8ee91..5ad77c8438f 100644 --- a/src/implementations/twig/components/site-header/README.md +++ b/src/implementations/twig/components/site-header/README.md @@ -12,6 +12,7 @@ npm install --save @ecl/twig-component-site-header - **"menu"** (associative array): Menu content, if any. Uses ECL Menu structure - **"banner_top"** (string) OR (object with Link component in property): Class name - **"icon_path"** (string) (default: ''): file containing the svg icons +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"site_name"** (string) (default: '') Site name - **"logo"** (associative array) (default: predefined structure): Logo image settings. format: - "title" (string) (default: ''): Logo title attribute. diff --git a/src/implementations/twig/components/site-header/site-header-language-switcher.html.twig b/src/implementations/twig/components/site-header/site-header-language-switcher.html.twig index 7eccac7e154..fc43d1da3d0 100644 --- a/src/implementations/twig/components/site-header/site-header-language-switcher.html.twig +++ b/src/implementations/twig/components/site-header/site-header-language-switcher.html.twig @@ -3,6 +3,7 @@ {# Parameters: - "icon_path" (string) (default: ''): URL to icons file + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "language_selector" (associative array) (default: predefined structure): Language switcher settings. format: { "href": (string) (default: ''): URL for switcher @@ -38,6 +39,7 @@ {% set _language_selector = language_selector|default({}) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _label = _language_selector.label|default('') %} {# Internal logic - Process properties #} @@ -64,7 +66,8 @@ icon: { path: _icon_path, name: 'global', - size: 's' + size: 's', + wt_markup: _icon_wt_markup, }, as_image: true, extra_classes: 'ecl-site-header__icon', @@ -88,6 +91,7 @@
    {% if _language_selector.overlay.close is not empty %} {% include '@ecl/button/button.html.twig' with _language_selector.overlay.close|merge({ + icon_wt_markup: _language_selector.overlay.close.icon_wt_markup|default(_icon_wt_markup), variant: 'tertiary', extra_classes: 'ecl-site-header__language-close', extra_attributes: [{ @@ -124,7 +128,8 @@ link: _item|merge({ label: _link_label, type: 'standalone', - no_visited: true + no_visited: true, + icon_wt_markup: _item.icon_wt_markup|default(_icon_wt_markup), }), extra_classes: _link_classes, extra_attributes: [ @@ -160,7 +165,8 @@ link: _item|merge({ label: _link_label, type: 'standalone', - no_visited: true + no_visited: true, + icon_wt_markup: _item.icon_wt_markup|default(_icon_wt_markup), }), extra_classes: _link_classes, extra_attributes: [ diff --git a/src/implementations/twig/components/site-header/site-header.html.twig b/src/implementations/twig/components/site-header/site-header.html.twig index 37451ee8fda..7a2f2130adb 100644 --- a/src/implementations/twig/components/site-header/site-header.html.twig +++ b/src/implementations/twig/components/site-header/site-header.html.twig @@ -3,6 +3,7 @@ {# Parameters: - "icon_path" (string) (default: ''): URL to icons file + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "banner_top" (object): Object of type link (link : { label, path }) - "logged" (boolean): Whether the user is logged in or not - "menu" (associative array): Menu content, if any. Uses ECL Menu structure @@ -87,6 +88,7 @@ {% set _login_toggle = login_toggle|default({}) %} {% set _search_toggle = search_toggle|default({}) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _menu = menu|default(false) %} {% set _mega_menu = mega_menu|default(false) %} {% set _site_name = site_name|default('') %} @@ -164,6 +166,7 @@ extra_attributes: _search_input_extra_attributes, }), button: search_form.button|default({})|merge({ + icon_wt_markup: search_form.button.icon_wt_markup|default(_icon_wt_markup), label: _search_button_label, icon: { name: 'search', @@ -273,7 +276,8 @@ icon: { path: _icon_path, name: 'logged-in', - size: 's' + size: 's', + wt_markup: _icon_wt_markup, }, as_image: true, extra_classes: 'ecl-site-header__icon', @@ -297,6 +301,7 @@ label: _login_box.label, path: _login_box.href, type: 'standalone', + icon_wt_markup: _icon_wt_markup, } } only %}
    • @@ -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 @@
    {% include '@ecl/notification/notification.html.twig' with _notification|merge({ + icon_wt_markup: _icon_wt_markup, extra_attributes: _notification.extra_attributes|default([])|merge([{ name: 'data-ecl-site-header-notification', }]), @@ -386,7 +395,11 @@
    {%- if banner_top.link is defined and banner_top.link is not empty %} {% include '@ecl/link/link.html.twig' with banner_top|merge({ - link: banner_top.link|merge({ type: 'standalone', no_visited: true}), + link: banner_top.link|merge({ + type: 'standalone', + no_visited: true, + icon_wt_markup: banner_top.link.icon_wt_markup|default(_icon_wt_markup), + }), icon_path: _icon_path }) only %} {% else %} @@ -407,6 +420,7 @@ {% include '@ecl/link/link.html.twig' with _cta_link|merge({ link: _cta_link.link|merge({ type: 'cta', + icon_wt_markup: _cta_link.link.icon_wt_markup|default(_icon_wt_markup), }), extra_classes: 'ecl-site-header__cta', }) only %} @@ -421,12 +435,14 @@ {% include '@ecl/menu/menu.html.twig' with _menu|merge({ site_name: _site_name, icon_path: _icon_path, + icon_wt_markup: _menu.icon_wt_markup|default(_icon_wt_markup), }) only %} {% endif %} {% if _mega_menu is defined and _mega_menu is not empty %} {% include '@ecl/mega-menu/mega-menu.html.twig' with _mega_menu|merge({ site_name: _site_name, icon_path: _icon_path, + icon_wt_markup: _mega_menu.icon_wt_markup|default(_icon_wt_markup), }) only %} {% endif %} diff --git a/src/implementations/twig/components/social-media-follow/README.md b/src/implementations/twig/components/social-media-follow/README.md index c99e80ec1dd..8262bdceffc 100644 --- a/src/implementations/twig/components/social-media-follow/README.md +++ b/src/implementations/twig/components/social-media-follow/README.md @@ -12,6 +12,7 @@ npm install --save @ecl/twig-component-social-media-follow - **"description"** (string) (default: '') - **"position"** (string) (default: 'left') Position (can be 'left', 'right') - **"links"** (array) (default: []) Array of links for social media, following ECL Link structure +- **"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' diff --git a/src/implementations/twig/components/social-media-follow/social-media-follow.html.twig b/src/implementations/twig/components/social-media-follow/social-media-follow.html.twig index 1181ba85735..208bd71d665 100644 --- a/src/implementations/twig/components/social-media-follow/social-media-follow.html.twig +++ b/src/implementations/twig/components/social-media-follow/social-media-follow.html.twig @@ -6,6 +6,7 @@ - "description" (string) (default: ''), - "position" (string) (default: 'left') Position (can be 'left', 'right') - "links" (array) (default: []): Array of links for social media, following ECL Link structure + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ { @@ -22,6 +23,7 @@ {% set _description = description|default('') %} {% set _position = position|default('left') %} {% set _links = links|default([]) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _variant = variant|default('') %} {# Internal logic - Process properties #} @@ -71,10 +73,12 @@ link: link.link|merge({ type: 'standalone', no_visited: true, + icon_wt_markup: link.link.icon_wt_markup|default(_icon_wt_markup), }), icon: link.icon|default({})|merge({ size: 'm', extra_classes: _icon_extra_classes, + category: 'networks', }), extra_classes: _link_extra_classes, } only %} diff --git a/src/implementations/twig/components/tabs/README.md b/src/implementations/twig/components/tabs/README.md index c2605df73dc..507b75e3c90 100644 --- a/src/implementations/twig/components/tabs/README.md +++ b/src/implementations/twig/components/tabs/README.md @@ -16,6 +16,7 @@ npm install --save @ecl/twig-component-tabs - **"previous_label"** (string) (default: 'Previous') Label for the previous button (mobile only); this is for screen readers - **"next_label"** (string) (default: 'Next') Label for the next button (mobile only); this is for screen readers - **"icon_path"** (string) (default: ''): path to the icons svg +- **"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' diff --git a/src/implementations/twig/components/tabs/tabs.html.twig b/src/implementations/twig/components/tabs/tabs.html.twig index 1ff2bfdb0bf..e539464e822 100644 --- a/src/implementations/twig/components/tabs/tabs.html.twig +++ b/src/implementations/twig/components/tabs/tabs.html.twig @@ -17,6 +17,7 @@ - "previous_label" (string) (default: 'Previous') Label for the previous button (mobile only); this is for screen readers - "next_label" (string) (default: 'Next') Label for the next button (mobile only); this is for screen readers - "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: [ { @@ -30,6 +31,7 @@ {# Internal properties #} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _more_label = more_label|default('More (%d)') %} {% set _previous_label = previous_label|default('Previous') %} {% set _next_label = next_label|default('Next') %} @@ -91,6 +93,7 @@ label: _item.label, path: _item.path, no_visited: true, + icon_wt_markup: _icon_wt_markup, }, extra_classes: _item_extra_classes, extra_attributes: _item_extra_attributes, @@ -106,6 +109,7 @@ variant: 'ghost', type: 'button', icon_position: 'after', + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, name: 'corner-arrow', @@ -123,6 +127,7 @@ variant: 'ghost', type: 'button', hide_label: true, + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, name: 'corner-arrow', @@ -136,6 +141,7 @@ variant: 'ghost', type: 'button', hide_label: true, + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, name: 'corner-arrow', diff --git a/src/implementations/twig/components/tag/README-tag-set.md b/src/implementations/twig/components/tag/README-tag-set.md index 7e57e0e703f..2840249068e 100644 --- a/src/implementations/twig/components/tag/README-tag-set.md +++ b/src/implementations/twig/components/tag/README-tag-set.md @@ -10,6 +10,7 @@ npm install --save @ecl/twig-component-tag - **"items"** (array) (default: []): array of Tag - **"icon_path"** (string) Path to the icons sprite. If provided here, it will be used for every tag in the set +- **"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' diff --git a/src/implementations/twig/components/tag/README.md b/src/implementations/twig/components/tag/README.md index 254539b63bc..c9640809593 100644 --- a/src/implementations/twig/components/tag/README.md +++ b/src/implementations/twig/components/tag/README.md @@ -16,6 +16,7 @@ npm install --save @ecl/twig-component-tag - aria_label: (string) (default: '') (optional) aria label for removable tag as a string - nowrap: boolean (default: false) force the tag to stay on one line - **"icon_path"** (string ) (default: '') - path for the icon image (need to render Icon component if tag type is 'removable') +- **"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' diff --git a/src/implementations/twig/components/tag/tag-set.html.twig b/src/implementations/twig/components/tag/tag-set.html.twig index 42b47a531eb..18a882c5204 100644 --- a/src/implementations/twig/components/tag/tag-set.html.twig +++ b/src/implementations/twig/components/tag/tag-set.html.twig @@ -4,6 +4,7 @@ Parameters: - "items" (array) (default: []): array of Tag - "icon_path" (string) Path to the icons sprite. If provided here, it will be used for every tag in the set + - "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' @@ -14,6 +15,7 @@ {% set _items = items|default([]) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _css_class = 'ecl-tag-set' %} {% set _extra_attributes = '' %} @@ -44,6 +46,7 @@
  • {% include '@ecl/tag/tag.html.twig' with _item|merge({ icon_path: _item.icon_path|default(_icon_path), + icon_wt_markup: _item.icon_wt_markup|default(_icon_wt_markup), }) only %}
    • {% endfor -%} diff --git a/src/implementations/twig/components/tag/tag.html.twig b/src/implementations/twig/components/tag/tag.html.twig index 0aba07dba03..ebb0a8273e4 100644 --- a/src/implementations/twig/components/tag/tag.html.twig +++ b/src/implementations/twig/components/tag/tag.html.twig @@ -12,6 +12,7 @@ nowrap: boolean (default: false) force the tag to stay on one line } - "icon_path" (string) Path to the icons sprite + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (string) (default: '') Extra classes - "extra_attributes" (array) (default: []): Extra attributes, format: [ { @@ -39,6 +40,7 @@ {% set _css_class = 'ecl-tag' %} {% set _extra_attributes = '' %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {# Internal logic - Process properties #} @@ -77,7 +79,12 @@ {{- _tag.label -}} {% include '@ecl/icon/icon.html.twig' with { - icon: { name: 'close-outline', size: 'xs', path: _icon_path }, + icon: { + name: 'close-outline', + size: 'xs', + path: _icon_path, + wt_markup: _icon_wt_markup, + }, extra_classes: 'ecl-tag__icon-close', as_image: true, extra_accessibility: { @@ -99,6 +106,7 @@ name: 'external', size: '2xs', path: _icon_path, + wt_markup: _icon_wt_markup, }, extra_classes: 'ecl-tag__icon ecl-tag__icon--external', } only -%} diff --git a/src/implementations/twig/components/text-area/README.md b/src/implementations/twig/components/text-area/README.md index f08df03b49a..1037923995c 100644 --- a/src/implementations/twig/components/text-area/README.md +++ b/src/implementations/twig/components/text-area/README.md @@ -11,7 +11,6 @@ npm install --save @ecl/twig-component-text-area - **"id"** (string) (default: random) - **"disabled"** (boolean) (default: false) - **"invalid"** (boolean) (default: false) -- **"invalid_icon"** (object of type "icon") (default: {}) - **"required"** (boolean) (default: false) - **"name"** (string) (default: '') - **"default_value"** (string) (default: '') diff --git a/src/implementations/twig/components/text-area/text-area.html.twig b/src/implementations/twig/components/text-area/text-area.html.twig index 2a430998917..f0a94fcafd6 100644 --- a/src/implementations/twig/components/text-area/text-area.html.twig +++ b/src/implementations/twig/components/text-area/text-area.html.twig @@ -22,7 +22,6 @@ {% set _id = id|default('ecl-text-area-' ~ random()) %} {% set _disabled = disabled|default(false) %} {% set _invalid = invalid|default(false) %} -{% set _invalid_icon = invalid_icon|default({}) %} {% set _required = required|default(false) %} {% set _name = name|default('') %} {% set _default_value = default_value|default('') %} diff --git a/src/implementations/twig/components/text-input/README.md b/src/implementations/twig/components/text-input/README.md index da428d5a7fa..e53936b1a3a 100644 --- a/src/implementations/twig/components/text-input/README.md +++ b/src/implementations/twig/components/text-input/README.md @@ -11,7 +11,6 @@ npm install --save @ecl/twig-component-text-input - **"id"** (string) (default: random) - **"disabled"** (boolean) (default: false) - **"invalid"** (boolean) (default: false) -- **"invalid_icon"** (object of type "icon") (default: {}) - **"required"** (boolean) (default: false) - **"name"** (string) (default: '') - **"type"** (string) (default: '') diff --git a/src/implementations/twig/components/text-input/text-input.html.twig b/src/implementations/twig/components/text-input/text-input.html.twig index 172e9165fd8..681234a7692 100644 --- a/src/implementations/twig/components/text-input/text-input.html.twig +++ b/src/implementations/twig/components/text-input/text-input.html.twig @@ -5,15 +5,14 @@ - "id" (string) (default: random) - "disabled" (boolean) (default: false) - "invalid" (boolean) (default: false) - - "invalid_icon" (object of type "icon") (default: {}) - "required" (boolean) (default: false) - "name" (string) (default: '') - "type" (string) (default: 'text') - "placeholder" (string) (default: '') - "width" (string) (default: 'm') - "extra_group_classes" (optional) (string) (default: '') Extra classes (space separated) for the text-input group - - "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 text input + - "extra_attributes" (optional) (array) (default: []) Extra attributes for the text input - "name" (string) Attribute name, eg. 'data-test' - "value" (optional) (string) Attribute value, eg: 'data-test-1' #} diff --git a/src/implementations/twig/components/timeline/README.md b/src/implementations/twig/components/timeline/README.md index 78732e9a8d3..38cecd74ebe 100644 --- a/src/implementations/twig/components/timeline/README.md +++ b/src/implementations/twig/components/timeline/README.md @@ -19,6 +19,7 @@ npm install --save @ecl/twig-component-timeline - "title": (string) (default: '') - "content": (block) (default: '') - **"icon_path"** (string) (default: ''): file containing the svg icons +- **"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' diff --git a/src/implementations/twig/components/timeline/timeline.html.twig b/src/implementations/twig/components/timeline/timeline.html.twig index ee464c2630a..1f41fb7b34d 100644 --- a/src/implementations/twig/components/timeline/timeline.html.twig +++ b/src/implementations/twig/components/timeline/timeline.html.twig @@ -13,6 +13,7 @@ Parameters: - "title": (string) (default: '') - "content": (block) (default: '') - "icon_path" (string) (default: ''): file containing the svg icons + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: - "name" (string) (default: '') @@ -25,6 +26,7 @@ Parameters: {% set _extra_attributes = 'data-ecl-auto-init="Timeline" data-ecl-timeline' %} {% set _items = items|default([]) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _toggle_collapsed = toggle_collapsed|default('') %} {% set _toggle_expanded = toggle_expanded|default('') %} {% set _hide_from = hide.from|default(items|length) %} @@ -88,6 +90,7 @@ Parameters: label: _toggle_collapsed, variant: 'secondary', type: 'button', + icon_wt_markup: _icon_wt_markup, icon: { path: _icon_path, name: 'corner-arrow',