diff --git a/src/implementations/twig/components/accordion/README.md b/src/implementations/twig/components/accordion/README.md index 3a6addf0800..eae9b428ba6 100644 --- a/src/implementations/twig/components/accordion/README.md +++ b/src/implementations/twig/components/accordion/README.md @@ -15,6 +15,7 @@ npm install --save @ecl/twig-component-accordion - "label" (string) (default: '') - "content" (string) (default: '') - **"icon"** (array) OR (object) (default: []) Two icons in an array that will be toggled +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' diff --git a/src/implementations/twig/components/accordion/accordion.html.twig b/src/implementations/twig/components/accordion/accordion.html.twig index e97d31fa0af..619d1208981 100644 --- a/src/implementations/twig/components/accordion/accordion.html.twig +++ b/src/implementations/twig/components/accordion/accordion.html.twig @@ -14,6 +14,7 @@ ... ] - "icon" (array) OR (object) (default: []) Two icons in an array that will be toggled. + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ { @@ -29,6 +30,7 @@ {% set _extra_attributes = 'data-ecl-auto-init="Accordion"' %} {% set _items = items|default([]) %} {% set _icons = icon is iterable and icon|keys is not empty ? icon : [icon] %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% if _icons|length == 1 and _icons[0].name == 'plus' %} {% set _icons = _icons|merge([{'name': 'minus', 'path': _icons[0].path}]) %} @@ -74,11 +76,10 @@ {% for icon in _icons %} {% include '@ecl/icon/icon.html.twig' with { - icon: { - path: icon.path|default(''), - name: icon.name|default(''), + icon: icon|merge({ size: icon.size|default('s'), - }, + wt_markup: icon.wt_markup|default(_icon_wt_markup), + }), extra_classes: 'ecl-accordion__toggle-icon' ~ icon.extra_classes|default(''), extra_attributes: icon.extra_attributes|default([{}])|merge([{ name: "data-ecl-accordion-icon" }]), } only %} diff --git a/src/implementations/twig/components/banner/README.md b/src/implementations/twig/components/banner/README.md index 2c3089e9280..0b6106923c1 100644 --- a/src/implementations/twig/components/banner/README.md +++ b/src/implementations/twig/components/banner/README.md @@ -41,6 +41,7 @@ npm install --save @ecl/twig-component-banner - **"full_width"** (bools) (default: false) Extends the banner to whole viewport when used inside the grid - **"link"** (object) (default: predefined structure) predefined structure for the Link component - **"icon_path"** (string) (default: '') Path to the icons file +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' diff --git a/src/implementations/twig/components/banner/banner.html.twig b/src/implementations/twig/components/banner/banner.html.twig index 8f721bfc2d9..e7d46ba593a 100644 --- a/src/implementations/twig/components/banner/banner.html.twig +++ b/src/implementations/twig/components/banner/banner.html.twig @@ -35,6 +35,7 @@ - "full_width": (bool) (default: false) Full width banner (inside the grid) - "link" (object) (default: predefined structure) predefined structure for the Link component - "icon_path" (string) (default: '') Path to the icons file + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (optional) (string) (default: '') - "extra_attributes" (optional) (array) (default: []) - "name" (string) Attribute name, eg. 'data-test' @@ -68,6 +69,7 @@ {% set _sr_play = sr_play|default('') %} {% set _sr_pause = sr_pause|default('') %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {# DEPRECATED #} {% set _variant = variant|default('') %} @@ -187,6 +189,7 @@ path: _icon_path, name: 'play-outline', size: 'm', + wt_markup: _icon_wt_markup, }, } only %} {% include '@ecl/button/button.html.twig' with { @@ -200,6 +203,7 @@ path: _icon_path, name: 'pause-outline', size: 'm', + wt_markup: _icon_wt_markup, }, } only %} diff --git a/src/implementations/twig/components/breadcrumb/README.md b/src/implementations/twig/components/breadcrumb/README.md index 28a8d06be39..96a5b86a793 100644 --- a/src/implementations/twig/components/breadcrumb/README.md +++ b/src/implementations/twig/components/breadcrumb/README.md @@ -15,6 +15,7 @@ npm install --save @ecl/twig-component-breadcrumb - **"ellipsis_label"** (string) (default: ''): Label of the ellipsis, e.g. "Click to expand" - **"ellipsis_text"** (string) (default: '...'): Text of the ellipsis - **"icon_path"** (string) (default: ''): URL to icons file +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' diff --git a/src/implementations/twig/components/breadcrumb/breadcrumb.html.twig b/src/implementations/twig/components/breadcrumb/breadcrumb.html.twig index 8ea3619c7d9..12dea40b499 100644 --- a/src/implementations/twig/components/breadcrumb/breadcrumb.html.twig +++ b/src/implementations/twig/components/breadcrumb/breadcrumb.html.twig @@ -13,6 +13,7 @@ - "ellipsis_label" (string) (default: ''): Label of the ellipsis, e.g. "Click to expand" - "ellipsis_text" (string) (default: '...'): Text of the ellipsis - "icon_path" (string) (default: ''): URL to icons file + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ { @@ -27,6 +28,7 @@ {% set _breadcrumb_size = links|length %} {% set _links = links|default([]) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _navigation_text = navigation_text|default('') %} {% set _ellipsis_label = ellipsis_label|default('') %} {% set _ellipsis_text = ellipsis_text|default('…') %} @@ -43,6 +45,7 @@ name: 'corner-arrow', size: 'fluid', path: _icon_path, + wt_markup: _icon_wt_markup, }, extra_classes: 'ecl-breadcrumb__icon', extra_attributes: [{ name: 'role', value: 'presentation' }] diff --git a/src/implementations/twig/components/button/README.md b/src/implementations/twig/components/button/README.md index 3eeccb53439..6dc06dd8f37 100644 --- a/src/implementations/twig/components/button/README.md +++ b/src/implementations/twig/components/button/README.md @@ -14,6 +14,7 @@ npm install --save @ecl/twig-component-button - **"disabled"** (bool) (default: false): define if button should be disabled (HTML disabled attribute) - **"hide_label"** (bool) (default: false): hide button label, for screen reader only. Note: requires to have an icon defined - **"icon_position"** (string, optional) (default: after): Define icon position, can be 'before' or 'after' +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"icon"** (optional) (associative array) OR (array) of associate arrays - Default structure of the icon component with extra_classes as an internal key. - **"indicator"** (object) (default: {}) object of type Indicator. To be displayed it should be defined and not empty (should contain at least an empty value), and only if there is an icon and no label - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) diff --git a/src/implementations/twig/components/button/button.html.twig b/src/implementations/twig/components/button/button.html.twig index 8a9f225627b..6a289250412 100644 --- a/src/implementations/twig/components/button/button.html.twig +++ b/src/implementations/twig/components/button/button.html.twig @@ -26,6 +26,7 @@ - "disabled" (bool) (default: false): defined if button should be active or not (HTML disabled attribute) - "hide_label" (bool) (default: false): hide button label, for screen reader only. Note: requires to have an icon defined - "icon_position" (string) (default: after): define icon position, can be 'before' or 'after' + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "indicator" (object) (default: {}) object of type Indicator. To be displayed it should be defined and not empty (should contain at least an empty value), and only if there is an icon and no label - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ @@ -46,14 +47,10 @@ {% set _variant = variant|default('primary') %} {% set _type = type|default('submit') %} {% set _icon_position = icon_position|default('after') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _disabled = disabled|default(false) %} {% set _hide_label = hide_label|default(false) %} -{% set _icon = { - name: '', - path: '', - size: '', - title: '' -} %} +{% set _icon = icon|default({}) %} {% set _indicator = indicator|default({}) %} {# Internal logic - Process properties #} @@ -74,10 +71,10 @@ {% endfor %} {% endif %} -{% if icon.name is defined and icon.name is not empty %} - {% set _icons = [icon] %} -{% elseif icon[1] is defined and icon[1] is not empty %} - {% set _icons = icon %} +{% if _icon.name is defined and _icon.name is not empty %} + {% set _icons = [_icon] %} +{% elseif _icon[1] is defined and _icon[1] is not empty %} + {% set _icons = _icon %} {% endif %} {% if _hide_label and _icon is not empty %} @@ -92,7 +89,7 @@ {# Define icon macro #} -{% macro icon(_icons, _indicator, _indicator_content) %}{% apply spaceless %} +{% macro icon(_icons, _indicator, _indicator_content, _icon_wt_markup) %}{% apply spaceless %} {% import _self as button %} {% for icon in _icons %} @@ -110,7 +107,9 @@ {% if _indicator is not empty %} {% include '@ecl/icon/icon.html.twig' with { - icon: icon, + icon: icon|merge({ + wt_markup: icon.wt_markup|default(_icon_wt_markup), + }), as_image: _icon_image, extra_accessibility: _icon_extra_accessibility, extra_classes: _icon_extra_classes, @@ -122,7 +121,9 @@ {% else %} {% include '@ecl/icon/icon.html.twig' with { - icon: icon, + icon: icon|merge({ + wt_markup: icon.wt_markup|default(_icon_wt_markup), + }), as_image: _icon_image, extra_accessibility: _icon_extra_accessibility, extra_classes: _icon_extra_classes, @@ -145,13 +146,13 @@ {%- if _icons is defined %} {% if _icon_position == 'before' %} - {{ button.icon(_icons, _indicator, _indicator_content) }} + {{ button.icon(_icons, _indicator, _indicator_content, _icon_wt_markup) }} {% endif %} {% if _label %} {% block label _label %} {% endif %} {% if _icon_position == 'after' %} - {{ button.icon(_icons, _indicator, _indicator_content) }} + {{ button.icon(_icons, _indicator, _indicator_content, _icon_wt_markup) }} {% endif %} {% else %} diff --git a/src/implementations/twig/components/card/README.md b/src/implementations/twig/components/card/README.md index ca7b0410afb..2f50deb2c08 100644 --- a/src/implementations/twig/components/card/README.md +++ b/src/implementations/twig/components/card/README.md @@ -23,6 +23,7 @@ npm install --save @ecl/twig-component-card ... ] - **lists** (array) (default: []): Array of ECL Description list +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **extra_classes** (string) (default: '') - **extra_attributes** (array) (default: []): format: [ { diff --git a/src/implementations/twig/components/card/card.html.twig b/src/implementations/twig/components/card/card.html.twig index 9c8873209f2..f8465dcc145 100644 --- a/src/implementations/twig/components/card/card.html.twig +++ b/src/implementations/twig/components/card/card.html.twig @@ -17,6 +17,7 @@ ... ] - "lists" (array) (default: []): Array of ECL Description list + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ { @@ -37,6 +38,7 @@ {% set _description = description|default('') %} {% set _secondary_meta = secondary_meta|default([]) %} {% set _lists = lists|default([]) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _css_class = 'ecl-card' %} {% set _extra_attributes = '' %} @@ -86,6 +88,7 @@ description: _description, secondary_meta: _secondary_meta, lists: _lists, + icon_wt_markup: _icon_wt_markup, } %} {% include '@ecl/content-block/content-block.html.twig' with _content_block|merge({ extra_classes: 'ecl-card__content-block' diff --git a/src/implementations/twig/components/carousel/README.md b/src/implementations/twig/components/carousel/README.md index 206185fce7d..faa9cd02c4f 100644 --- a/src/implementations/twig/components/carousel/README.md +++ b/src/implementations/twig/components/carousel/README.md @@ -17,6 +17,7 @@ npm install --save @ecl/twig-component-carousel - **"sr_pause"** (string) (default: 'Pause carousel') screen reader label for the pause button - **"full_width"** (bools) (default: false) Extends the banner to whole viewport when used inside the grid - **"icon_path"** (string) ) (default: '') +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' diff --git a/src/implementations/twig/components/carousel/carousel.html.twig b/src/implementations/twig/components/carousel/carousel.html.twig index 7fb5bf59f64..f4537ff008e 100644 --- a/src/implementations/twig/components/carousel/carousel.html.twig +++ b/src/implementations/twig/components/carousel/carousel.html.twig @@ -12,6 +12,7 @@ - "sr_pause" (string) (default: 'Pause carousel') screen reader label for the pause button - "full_width": (bool) (default: false) Full width banner (inside the grid) - "icon_path" (string) (default: '') Path to the icons file + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ { @@ -35,6 +36,7 @@ {% set _counter_label = counter_label|default('of') %} {% set _full_width = full_width|default(false) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {# Internal logic - Process properties #} @@ -82,6 +84,7 @@ name: 'play-outline', size: 'm', extra_classes: 'ecl-carousel__icon-default', + wt_markup: _icon_wt_markup, }, } only %} {% include '@ecl/button/button.html.twig' with { @@ -95,6 +98,7 @@ name: 'pause-outline', size: 'm', extra_classes: 'ecl-carousel__icon-default', + wt_markup: _icon_wt_markup, }, } only %} diff --git a/src/implementations/twig/components/category-filter/README.md b/src/implementations/twig/components/category-filter/README.md index 8370afeea48..dcc1be7b1bd 100644 --- a/src/implementations/twig/components/category-filter/README.md +++ b/src/implementations/twig/components/category-filter/README.md @@ -9,6 +9,7 @@ npm install --save @ecl/twig-component-category-filter ### Parameters - **"icon_path"** (string) (default: ''): Path to the icon sprite +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"label"**: (string) (default: ''): Aria label provided for accessibility - **"id"**: (string) (default: randomized string): Unique id for the category filter - **"items"** (associative array) (default: {}): The tree items - format: diff --git a/src/implementations/twig/components/category-filter/category-filter-items.html.twig b/src/implementations/twig/components/category-filter/category-filter-items.html.twig index 3aec096517d..8f1ef84a42a 100644 --- a/src/implementations/twig/components/category-filter/category-filter-items.html.twig +++ b/src/implementations/twig/components/category-filter/category-filter-items.html.twig @@ -3,6 +3,7 @@ {# Parameters: - "icon_path": (string) (default: ''): Path to the icon sprite + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "id": (string) (default: randomized string): Unique id for the category filter - "items": (associative array) (default: {}): The menu items - format: [ { @@ -29,6 +30,7 @@ {% set _items = items|default({}) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _level = level|default(1) %} {% if _items is defined and _items is not empty %} @@ -72,6 +74,7 @@ size: 'xs', transform: 'rotate-90', path: _icon_path, + wt_markup: _icon_wt_markup, }, extra_classes: 'ecl-category-filter__item-icon', } only %} @@ -84,6 +87,7 @@ size: 'xs', transform: 'rotate-180', path: _icon_path, + wt_markup: _icon_wt_markup, }, extra_classes: 'ecl-category-filter__item-icon', } only %} @@ -94,6 +98,7 @@ {% include '@ecl/category-filter/category-filter-items.html.twig' with { items: item.children, icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, level: _level + 1, id: _item_id, } only %} diff --git a/src/implementations/twig/components/category-filter/category-filter.html.twig b/src/implementations/twig/components/category-filter/category-filter.html.twig index ae7b33c359f..35d3588a299 100644 --- a/src/implementations/twig/components/category-filter/category-filter.html.twig +++ b/src/implementations/twig/components/category-filter/category-filter.html.twig @@ -3,6 +3,7 @@ {# Parameters: - "icon_path": (string) (default: ''): Path to the icon sprite + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "label": (string) (default: ''): Aria label provided for accessibility - "id": (string) (default: randomized string): Unique id for the category filter - "items": (associative array) (default: {}): The menu items - format: [ @@ -38,6 +39,7 @@ {% set _css_class = 'ecl-category-filter' %} {% set _extra_attributes = '' %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _label = label|default('') %} {% set _id = id|default('ecl-category-filter-' ~ random()) %} @@ -73,6 +75,7 @@ {% include '@ecl/category-filter/category-filter-items.html.twig' with { items: items, icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, id: _id, } only %} {% endif %} diff --git a/src/implementations/twig/components/checkbox/README.md b/src/implementations/twig/components/checkbox/README.md index b13f0c41369..baf66534ba9 100644 --- a/src/implementations/twig/components/checkbox/README.md +++ b/src/implementations/twig/components/checkbox/README.md @@ -17,6 +17,7 @@ npm install --save @ecl/twig-component-checkbox - "helper_text" (block) (default: '') - "label" (block) (default: '') - "icon_path" (string) (default: ''): file containing the svg icons + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "item_required_text" (string) (default: '') - **"name"** (string) (default: '') - **"invalid"** (boolean) (default: false) diff --git a/src/implementations/twig/components/checkbox/checkbox-group.html.twig b/src/implementations/twig/components/checkbox/checkbox-group.html.twig index 948944b9369..7ff0a1705cd 100644 --- a/src/implementations/twig/components/checkbox/checkbox-group.html.twig +++ b/src/implementations/twig/components/checkbox/checkbox-group.html.twig @@ -5,6 +5,7 @@ - "items" (array) (default: []): array of checkbox_button - "name" (string) (default: '') - "invalid" (boolean) (default: false) + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "invalid_icon" (object of type "icon") (default: {}) - "sr_invalid_icon" (string) (default: ''): additional label for the invalid icon; for screen readers - "item_required_text" (string) (default: *) @@ -22,6 +23,7 @@ {% set _items = items|default([]) %} {% set _name = name|default('') %} {% set _invalid = invalid|default(false) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _invalid_icon = invalid_icon|default({}) %} {% set _sr_invalid_icon = sr_invalid_icon|default('') %} {% set _required = required|default(false) %} @@ -40,6 +42,7 @@ {% include '@ecl/icon/icon.html.twig' with { icon: _invalid_icon|merge({ size: 's', + wt_markup: _icon_wt_markup, }), as_image: true, extra_accessibility: not _sr_invalid_icon ? {} : { @@ -65,6 +68,7 @@ invalid: _item.invalid|default(_invalid), required: _item.required|default(_required), required_text: _item_required_text, + icon_wt_markup: _icon_wt_markup, extra_classes: _item.extra_classes|default(_item_extra_classes|default('')), extra_attributes: _item.extra_attributes|default(_extra_attributes), }) only %} diff --git a/src/implementations/twig/components/checkbox/checkbox-item.html.twig b/src/implementations/twig/components/checkbox/checkbox-item.html.twig index 924e3f374f7..ccba51b195d 100644 --- a/src/implementations/twig/components/checkbox/checkbox-item.html.twig +++ b/src/implementations/twig/components/checkbox/checkbox-item.html.twig @@ -14,6 +14,7 @@ - "invalid" (boolean) (default: false) - "checked" (boolean) (default: false) - "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_attributes" (optional) (array) (default: []) - "name" (string) Attribute name, eg. 'data-test' @@ -36,6 +37,7 @@ {% set _invalid = invalid|default(false) %} {% set _checked = checked|default(false) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _box_css_class = 'ecl-checkbox__box' %} {% set _helper_text = helper_text|default('') %} {% set _label = label|default('') %} @@ -101,7 +103,8 @@ icon: { path: _icon_path, name: "check", - size: "xs" + size: "xs", + wt_markup: _icon_wt_markup, }, extra_classes: 'ecl-checkbox__icon', } only %} diff --git a/src/implementations/twig/components/content-block/README.md b/src/implementations/twig/components/content-block/README.md index a46e8ba9eb1..cec38c7ec53 100644 --- a/src/implementations/twig/components/content-block/README.md +++ b/src/implementations/twig/components/content-block/README.md @@ -22,6 +22,7 @@ npm install --save @ecl/twig-component-content-block ] - **links** (array) (default: []): Array or multi array of ECL Links - **lists** (array) (default: []): Array of ECL Description list +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"extra_classes"** (string) (default: '') - **"extra_attributes"** (array) (default: []): format: [ { diff --git a/src/implementations/twig/components/content-block/content-block.html.twig b/src/implementations/twig/components/content-block/content-block.html.twig index 7394eb1dc65..2328c074b96 100644 --- a/src/implementations/twig/components/content-block/content-block.html.twig +++ b/src/implementations/twig/components/content-block/content-block.html.twig @@ -16,6 +16,7 @@ ] - "links" (array) (default: []): Array or multi array of ECL Links - "lists" (array) (default: []): Array of ECL Description list + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ { @@ -35,6 +36,7 @@ {% set _secondary_meta = secondary_meta|default([]) %} {% set _links = links|default([]) %} {% set _lists = lists|default([]) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _css_class = 'ecl-content-block' %} {% set _title_attrs = '' %} {% set _extra_attributes = '' %} @@ -112,6 +114,7 @@ {% include '@ecl/icon/icon.html.twig' with { icon: _meta.icon|merge({ size: 's', + wt_markup: _meta.icon.wt_markup|default(_icon_wt_markup), }), extra_classes: 'ecl-content-block__secondary-meta-icon' } only %} diff --git a/src/implementations/twig/components/content-item/README.md b/src/implementations/twig/components/content-item/README.md index 6c81cf65604..4b134db5239 100644 --- a/src/implementations/twig/components/content-item/README.md +++ b/src/implementations/twig/components/content-item/README.md @@ -38,6 +38,7 @@ npm install --save @ecl/twig-component-content-item ] - **divider** (boolean) (default: false): Optional divider below the content item - **lists** (array) (default: []): Array of ECL Description list +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **extra_classes** (string) (default: '') - **extra_attributes** (array) (default: []): format: [ { diff --git a/src/implementations/twig/components/content-item/content-item.html.twig b/src/implementations/twig/components/content-item/content-item.html.twig index 2044492bd89..6d50943ffc9 100644 --- a/src/implementations/twig/components/content-item/content-item.html.twig +++ b/src/implementations/twig/components/content-item/content-item.html.twig @@ -31,6 +31,7 @@ ... ] - "lists" (array) (default: []): Array of ECL Description list + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "divider" (boolean) (default: false): Optional divider below the content item - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ @@ -61,6 +62,7 @@ {% set _description = description|default('') %} {% set _secondary_meta = secondary_meta|default(_infos) %} {% set _lists = lists|default([]) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _css_class = 'ecl-content-item' %} {% set _extra_attributes = '' %} {% set _picture_attrs = '' %} @@ -134,6 +136,7 @@ description: _description, secondary_meta: _secondary_meta, lists: _lists, + icon_wt_markup: _icon_wt_markup, } %} {% include '@ecl/content-block/content-block.html.twig' with _content_block|merge({ extra_classes: 'ecl-content-item__content-block' diff --git a/src/implementations/twig/components/datepicker/README.md b/src/implementations/twig/components/datepicker/README.md index bf1f8187fa0..a5eb0f6a76d 100644 --- a/src/implementations/twig/components/datepicker/README.md +++ b/src/implementations/twig/components/datepicker/README.md @@ -17,6 +17,7 @@ npm install --save @ecl/twig-component-datepicker - **"type"**: (string) (default: 'text') - **"name"** (string) (default: '') - **"icon_path"**: (string) (default: '') +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"placeholder"**: (string) (default: 'DD-MM-YYYY') - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (array) (default: []) Extra attributes for the datepicker diff --git a/src/implementations/twig/components/datepicker/datepicker.html.twig b/src/implementations/twig/components/datepicker/datepicker.html.twig index ffc3430a384..7ba70e9ad82 100644 --- a/src/implementations/twig/components/datepicker/datepicker.html.twig +++ b/src/implementations/twig/components/datepicker/datepicker.html.twig @@ -16,6 +16,7 @@ - "type" (string) (default: 'text') - "optional_text" (string) (default: '') - "icon_path" (string) (default: '') + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "placeholder" (string) (default: 'DD-MM-YYYY') - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []) Extra attributes for the datepicker @@ -34,6 +35,7 @@ {% set _type = type|default('text') %} {% set _placeholder = placeholder|default('DD-MM-YYYY') %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _invalid = invalid|default(false) %} {% set _disabled = disabled|default(false) %} {% set _required = required|default(false) %} @@ -96,12 +98,13 @@ {% endif %} {{ _extra_attributes|raw }} /> - {% if _icon_path is not empty %} + {% if _icon_path is not empty or _icon_wt_markup %} {% include '@ecl/icon/icon.html.twig' with { icon: { name: 'calendar', size: 'xs', path: _icon_path, + wt_markup: _icon_wt_markup, }, extra_classes: 'ecl-datepicker__icon', } only %} diff --git a/src/implementations/twig/components/expandable/README.md b/src/implementations/twig/components/expandable/README.md index bc456345a8d..c1f2c7a0f50 100644 --- a/src/implementations/twig/components/expandable/README.md +++ b/src/implementations/twig/components/expandable/README.md @@ -12,6 +12,7 @@ npm install --save @ecl/twig-component-expandable - **"label_expanded"** (string) (default: '') - **"label_collapsed"** (string) (default: '') - **"button"** (predefined structure) : Button component structure +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"extra_dropdown_classes"** (optional) (string) (default: '') Extra dropdown classes (space separated) - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes diff --git a/src/implementations/twig/components/expandable/expandable.html.twig b/src/implementations/twig/components/expandable/expandable.html.twig index 6925ae59db5..8397dbc6b82 100644 --- a/src/implementations/twig/components/expandable/expandable.html.twig +++ b/src/implementations/twig/components/expandable/expandable.html.twig @@ -6,6 +6,7 @@ - "label_expanded" (string) (default: '') - "label_collapsed" (string) (default: '') - "button" (predefined structure): Button component structure + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_dropdown_classes" (string) (default: '') - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ @@ -33,6 +34,7 @@ {% set _aria_controls = _id ~ '-content' %} {% set _content = content|default('') %} {% set _button = button|default({}) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _expanded = expanded|default(false) %} {% set _content_hidden_attribute = '' %} @@ -78,7 +80,8 @@ icon: _button.icon|merge({ name: 'corner-arrow', size: 'fluid', - transform: 'rotate-180' + transform: 'rotate-180', + wt_markup: _button.icon.wt_markup|default(_icon_wt_markup), }), extra_classes: 'ecl-expandable__toggle', extra_attributes: _button_attributes, diff --git a/src/implementations/twig/components/fact-figures/README.md b/src/implementations/twig/components/fact-figures/README.md index 953fe6d9a5a..49d2f6199d1 100644 --- a/src/implementations/twig/components/fact-figures/README.md +++ b/src/implementations/twig/components/fact-figures/README.md @@ -23,6 +23,7 @@ npm install --save @ecl/twig-component-fact-figures - "visible" (boolean) (default: true) - **"display_icons"** (boolean) (default: true) - **"icon_size"** (string) (default: 'l') (l or 2xl) +- **"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/fact-figures/fact-figures.html.twig b/src/implementations/twig/components/fact-figures/fact-figures.html.twig index f394b25a0e4..ed69afcc4a8 100644 --- a/src/implementations/twig/components/fact-figures/fact-figures.html.twig +++ b/src/implementations/twig/components/fact-figures/fact-figures.html.twig @@ -16,6 +16,7 @@ - "path" (string) (default: '') - "display_icons" (boolean) (default: true) - "icon_size" (string) (default: 'l'): l or 2xl + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ { @@ -34,6 +35,7 @@ {% set _font_size = font_size|default('l') %} {% set _extra_classes = extra_classes|default('') %} {% set _icon_size = icon_size|default('l') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _display_icons = display_icons ?? true %} {% set _centered = centered|default(false) %} @@ -76,6 +78,7 @@ {% include '@ecl/icon/icon.html.twig' with { icon: item.icon|merge({ size: _icon_size, + wt_markup: item.icon.wt_markup|default(_icon_wt_markup), }), extra_classes: 'ecl-fact-figures__icon', } only %} @@ -110,6 +113,7 @@ name: 'arrow-left', transform: 'flip-horizontal', size: 'xs', + wt_markup: view_all.icon.wt_markup|default(_icon_wt_markup), }), extra_classes: 'ecl-fact-figures__view-all-link', }) only %} 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/file/README.md b/src/implementations/twig/components/file/README.md index dddeef25854..71fafcf4390 100644 --- a/src/implementations/twig/components/file/README.md +++ b/src/implementations/twig/components/file/README.md @@ -33,6 +33,7 @@ npm install --save @ecl/twig-component-file - "lang" (string) (default: '') - "download" (object) (default to the parent download property) object of type Link - "download_attribute" (bool) (default to the parent download attribute) +- **"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/file/file-translation-item.html.twig b/src/implementations/twig/components/file/file-translation-item.html.twig index a934d0f9a8e..67d1c2619e6 100644 --- a/src/implementations/twig/components/file/file-translation-item.html.twig +++ b/src/implementations/twig/components/file/file-translation-item.html.twig @@ -9,6 +9,7 @@ - "title_id" (string) (default: '') - "download" (object) (default to the parent download property) object of type Link - "download_attribute" (bool) (default to the parent download attribute) + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? #} {# Internal properties #} @@ -19,6 +20,7 @@ {% set _download_attribute = download_attribute|default(download_attribute_default) %} {% set _id = id|default('') %} {% set _title_id = title_id|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _link_id = _id ~ '-link' %} {% set _label_id = _link_id ~ '-label' %} @@ -70,7 +72,8 @@ }), icon: _download.icon|default(_download.icon|default({}))|merge({ name: 'download', - size: 'fluid' + size: 'fluid', + wt_markup: _download.icon.wt_markup|default(_icon_wt_markup), }), extra_classes: _download_link_classes, extra_attributes: _download_link_attributes, diff --git a/src/implementations/twig/components/file/file-translations.html.twig b/src/implementations/twig/components/file/file-translations.html.twig index 0d40c88357a..69f2b949136 100644 --- a/src/implementations/twig/components/file/file-translations.html.twig +++ b/src/implementations/twig/components/file/file-translations.html.twig @@ -4,6 +4,7 @@ Parameters: - "toggle" (object) (default: {}): object of type Button - "id" (string) (default: '') + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "items" (array) (default: []): - "title" (string) (default: '') - "meta" (string) (default: '') @@ -17,6 +18,7 @@ {% set _toggle = toggle|default({}) %} {% set _id = id|default('') %} {% set _download_attribute_default = download_attribute_default|default(false) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% if _items is not empty %}
diff --git a/src/implementations/twig/components/file/file.html.twig b/src/implementations/twig/components/file/file.html.twig index d18c512c270..352981d8b02 100644 --- a/src/implementations/twig/components/file/file.html.twig +++ b/src/implementations/twig/components/file/file.html.twig @@ -32,6 +32,7 @@ - "meta" (string) (default: '') - "lang" (string) (default: '') - "download" (object) (default to the parent download property) object of type Link + - "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' @@ -60,6 +61,7 @@ {% set _variant = variant|default('default') %} {% set _description = description|default('') %} {% set _id = id|default('ecl-file-' ~ random()) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _extra_attributes = 'data-ecl-file id="' ~ _id ~ '"' %} {% set _lang_id = _id ~ '-lang' %} @@ -114,7 +116,9 @@
{% if _variant == 'default' %} {% include '@ecl/icon/icon.html.twig' with { - icon: _icon, + icon: _icon|merge({ + wt_markup: _icon.wt_markup|default(_icon_wt_markup), + }), extra_classes: 'ecl-file__icon', } only %} {% else %} @@ -193,7 +197,8 @@ }), icon: _download.icon|default({})|merge({ name: 'download', - size: 'fluid' + size: 'fluid', + wt_markup: _download.icon.wt_markup|default(_icon_wt_markup), }), extra_attributes: _download_link_attributes, extra_classes: _download_link_classes, @@ -205,6 +210,7 @@ {% include '@ecl/file/file-translations.html.twig' with _translation|merge({ id: _id, download_attribute_default: _download_attribute, + icon_wt_markup: _icon_wt_markup, }) only %} {% endif %}
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..5562b0230e3 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' %} @@ -224,7 +226,9 @@ {%- if _input.input_type == 'select' -%}
- {% include '@ecl/select/select.html.twig' with _input only %} + {% include '@ecl/select/select.html.twig' with _input|merge({ + icon_wt_markup: _icon_wt_markup, + }) only %}
{%- endif -%} @@ -244,7 +248,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 +276,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/gallery/README.md b/src/implementations/twig/components/gallery/README.md index f8c0211a312..ac1b4de1bee 100644 --- a/src/implementations/twig/components/gallery/README.md +++ b/src/implementations/twig/components/gallery/README.md @@ -36,6 +36,7 @@ npm install --save @ecl/twig-component-gallery - **"visible_items"** (integer) (default: 8) Number of visible items in an expandable gallery - **"expandable"** (boolean) (default: true) collapsible/expandable gallery - **"icon_path"** (string) (default: '') Path to the icon sprite +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"sr_gallery_label"** (string) (default: ''): additional label for the gallery, providing instruction; for screen readers - **"sr_video_label"** (string) (default: ''): additional label for the video items; for screen readers - **"sr_video_player"** (string) (default: ''): additional label for the video player; for screen readers diff --git a/src/implementations/twig/components/gallery/gallery-item.html.twig b/src/implementations/twig/components/gallery/gallery-item.html.twig index e256ca1468e..6ffffd04426 100644 --- a/src/implementations/twig/components/gallery/gallery-item.html.twig +++ b/src/implementations/twig/components/gallery/gallery-item.html.twig @@ -15,6 +15,7 @@ - "sr_video_audio" (string) (default: ''): additional text to indicate if there is an audio description; for screen readers - "share_path" (optional) (string) (default: '') - "icon_path": (string) (default '') + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "sr_video_label" (string) (default: ''): additional label for the video items; for screen readers - "sr_video_player" (string) (default: ''): additional label for the video player; for screen readers - "picture_zoom" (bool) (default: false): Should the thumbnail pictures be animated? @@ -37,6 +38,7 @@ {% set _picture = item.picture|default({}) %} {% set _thumbnail = item.thumbnail|default({}) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _sr_video_label = sr_video_label|default('') %} {% set _sr_video_player = sr_video_player|default('') %} {% set _picture_zoom = picture_zoom|default(false) %} @@ -118,7 +120,7 @@ {% set _image_alt = _image_alt ~ ' - ' ~ _sr_video_label %} {% endif %} - {% if _icon_path is not empty %} + {% if _icon_path is not empty or _icon_wt_markup %}
{%- include '@ecl/icon/icon.html.twig' with { icon: { @@ -126,6 +128,7 @@ size: 'l', path: _icon_path, color: 'inverted', + wt_markup: _icon_wt_markup, }, extra_classes: 'ecl-gallery__item-icon', } only %} diff --git a/src/implementations/twig/components/gallery/gallery-overlay.html.twig b/src/implementations/twig/components/gallery/gallery-overlay.html.twig index 2d8c84aac95..218a34b496d 100644 --- a/src/implementations/twig/components/gallery/gallery-overlay.html.twig +++ b/src/implementations/twig/components/gallery/gallery-overlay.html.twig @@ -11,6 +11,7 @@ - "share" (object) (default: {}): object of type link - "sr_overlay_label" (string) (default: '') aria-label for the overlay - "item" (object) (default: {}): object of type gallery-item + - "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' @@ -26,6 +27,7 @@ {% set _button_variant = 'ghost' %} {% set _overlay = overlay|default({}) %} {% set _item = item|default({}) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {# Internal logic - Process properties #} @@ -58,6 +60,9 @@ extra_classes: 'ecl-gallery__close-button', variant: _button_variant, type: 'submit', + icon: _overlay.close.icon|merge({ + wt_markup: _overlay.close.icon.wt_markup|default(_icon_wt_markup), + }), extra_attributes: [ { name: 'data-ecl-gallery-close' }, ], @@ -92,6 +97,7 @@ size: 'm', transform: 'rotate-270', name: 'corner-arrow', + wt_markup: _overlay.previous.icon.wt_markup|default(_icon_wt_markup), }), extra_attributes: [ { name: 'data-ecl-gallery-overlay-previous' }, @@ -109,6 +115,7 @@ size: 'm', transform: 'rotate-90', name: 'corner-arrow', + wt_markup: _overlay.next.icon.wt_markup|default(_icon_wt_markup), }), extra_attributes: [ { name: 'data-ecl-gallery-overlay-next' }, @@ -130,7 +137,8 @@ icon: { name: 'fullscreen', size: 'fluid', - path: icon_path|default('') + path: icon_path|default(''), + wt_markup: _icon_wt_markup, }, extra_classes: 'ecl-gallery__download', extra_attributes: [ @@ -150,6 +158,7 @@ icon: _overlay.share.icon|merge({ name: 'share', size: 'fluid', + wt_markup: _overlay.share.icon.wt_markup|default(_icon_wt_markup), }), extra_classes: 'ecl-gallery__share', extra_attributes: [ diff --git a/src/implementations/twig/components/gallery/gallery.html.twig b/src/implementations/twig/components/gallery/gallery.html.twig index fb02d291321..84d5b697023 100644 --- a/src/implementations/twig/components/gallery/gallery.html.twig +++ b/src/implementations/twig/components/gallery/gallery.html.twig @@ -37,6 +37,7 @@ - "sr_video_audio" (string) (default: ''): additional text to indicate if there is an audio description; for screen readers - "share_path" (optional) (string) (default: '') - "icon_path": (string) (default: '') + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "sr_gallery_label" (string) (default: ''): additional label for the gallery, providing instruction; for screen readers - "sr_video_label" (string) (default: ''): additional label for the video items; for screen readers - "sr_video_player" (string) (default: ''): additional label for the video player; for screen readers @@ -67,6 +68,7 @@ {% set _disable_hover = disable_hover|default(false) %} {% set _disable_overlay = disable_overlay|default(false) %} {% set _icon_path = icon_path|default('') %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _sr_gallery_label = sr_gallery_label|default('') %} {% set _sr_video_label = sr_video_label|default('') %} {% set _expandable = expandable ?? true %} @@ -152,6 +154,7 @@ id: "ecl-gallery-item-" ~ _id ~ '-' ~ _key, item: _item, icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, sr_video_label: _sr_video_label, sr_video_player: _sr_video_player, disable_overlay: _disable_overlay, @@ -188,8 +191,9 @@ link: _footer.link|merge({ type: 'standalone', icon_position: 'after', + icon_wt_markup: _icon_wt_markup, }), - icon: _footer.icon + icon: _footer.icon, }) only %}
{% endif %} @@ -210,6 +214,7 @@ extra_classes: _overlay_class, item: _selected_item, icon_path: _icon_path, + icon_wt_markup: _icon_wt_markup, } only %} diff --git a/src/implementations/twig/components/icon/README.md b/src/implementations/twig/components/icon/README.md index 0e009b33e22..9cee3aaa0a2 100644 --- a/src/implementations/twig/components/icon/README.md +++ b/src/implementations/twig/components/icon/README.md @@ -8,23 +8,35 @@ npm install --save @ecl/twig-component-icon ### Parameters -- **"icon"** (associative array) (default: 'predefined structure below') - - "path" (string) (default: '') - path/url to general icon file (eg. /path-to-icon/icon.svg) - - "name" (string) (default: '') - name of icon, eg. 'facebook', 'twitter'. - - "size" (string) (default: 'm') size of icon. Available sizes are 'xs','s','m','l','xl','2xl','fluid' - - "transform" (string) (default: '') Transformation of icon. Available transformations are 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical') - - "color" (string) (default: '') Color of icon. Available colors are 'default', 'inverted', 'primary' - - "title": '' (string) (default: '') Additional title for the icon; shortcut for extra accessibility title -- **"as_image"**: (boolean) (default: false) Whether the icon is used as an image -- **"extra_accessibility"** (optional) (object) Extra tags for accessibility when used as an image - - description: '' (desc tag) - - description_id: '' (desc tag id) - - title: '' (title tag) - - title_id: '' (title tag id) -- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) -- **"extra_attributes"** (optional) (array) (default: []) Extra attributes - - "name" (string) Attribute name, eg. 'data-test' - - "value" (string) Attribute value, eg: 'data-test-1' +- **"icon"** (associative array) (default: predefined structure): + { + path (string) (default: ''): path to the icon file, + name (string) (default: ''): name of the icon, + size (string) (default: 'm'): icon size (available options: '2xs', 'xs','s','m','l','xl','2xl','fluid'), + 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? +- **"extra_accessibility"** (associative array) (default: {}): + { + description (string) (default: ''): additional description + description_id (string) (default: ''): unique id for the description + title (string) (default: ''): additional title + title_id (string) (default: ''): unique id for the title + role (string) (default: ''): role attribute + } +- **"extra_classes"** (string) (default: ''): additional classes (space separated) +- **"extra_attributes"** (array) (default: []): + [ + { + name (string) (default: ''), + value (string) (default: ''), + } + ... + ], ### Example: diff --git a/src/implementations/twig/components/icon/__snapshots__/icon.test.js.snap b/src/implementations/twig/components/icon/__snapshots__/icon.test.js.snap index da536b869e2..16b9a0bbc8d 100644 --- a/src/implementations/twig/components/icon/__snapshots__/icon.test.js.snap +++ b/src/implementations/twig/components/icon/__snapshots__/icon.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Icon All icons - icon arrow-left renders correctly 1`] = ` +exports[`Icon ECL markup - icon arrow-left renders correctly 1`] = ` {%- 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, @@ -165,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/select/README.md b/src/implementations/twig/components/select/README.md index 9ddcb379a13..2493ab1a9e6 100644 --- a/src/implementations/twig/components/select/README.md +++ b/src/implementations/twig/components/select/README.md @@ -23,6 +23,7 @@ npm install --save @ecl/twig-component-select - **"toggle_label"** (string) (default: 'Toggle dropdown') - **"width"** (string) (default: '') Input width size (s, m or l) - **"icon_path"** (string) (default: ''): file containing the svg icons +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"multiple"** (bolean) (default: false): For the multiple select - **"multiple_placeholder"** (string) (default: '') Placeholder for the multiple select - **"multiple_all_text"** (string) (default: '') Text for the select all option diff --git a/src/implementations/twig/components/select/select.html.twig b/src/implementations/twig/components/select/select.html.twig index 2eacd3c732b..e3b05499707 100644 --- a/src/implementations/twig/components/select/select.html.twig +++ b/src/implementations/twig/components/select/select.html.twig @@ -17,6 +17,7 @@ - "toggle_label": (default: 'Toggle dropdown') - "width" (string) (default: '') - "icon_path" (string) (default: ''): file containing the svg icons + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "multiple" (boolean) (optional) (default: false) For the multiple select - "multiple_placeholder" (string)(default: '') Label for the multiple select placeholder - "multiple_all_text" (string)(default: '') Label for the select all option @@ -43,6 +44,7 @@ {% set _required = required|default(false) %} {% set _name = name|default('') %} {% set _icon_path = icon_path|default(false) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {% set _icon_size = icon_size|default('xs') %} {% set _width = width|default('m') %} {% set _helper_text = helper_text|default('') %} @@ -63,6 +65,9 @@ {% set _css_class = 'ecl-select' %} {% set _extra_attributes = '' %} {% set extra_attributes = extra_attributes|default([])|merge([{ name: 'data-ecl-auto-init', value: 'Select' }]) %} + +{# Internal logic - Process properties #} + {% if _multiple %} {% set extra_attributes = extra_attributes|merge([ { name: 'multiple' }, @@ -85,7 +90,11 @@ {% endif %} {% endif %} -{# Internal logic - Process properties #} +{% if _icon_wt_markup %} + {% set extra_attributes = extra_attributes|default([])|merge([ + { name: 'data-ecl-icon-wt-markup' }, + ]) %} +{% endif %} {% if extra_group_classes is defined and extra_group_classes is not empty %} {% set _css_group_class = _css_group_class ~ ' ' ~ extra_group_classes %} @@ -157,6 +166,7 @@
    {% include '@ecl/button/button.html.twig' with { + icon_wt_markup: _icon_wt_markup, hide_label: true, type: 'button', variant: 'ghost', 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/table/README.md b/src/implementations/twig/components/table/README.md index a21f59ecf03..956cd41f3c2 100644 --- a/src/implementations/twig/components/table/README.md +++ b/src/implementations/twig/components/table/README.md @@ -20,6 +20,7 @@ npm install --save @ecl/twig-component-table - "rowspan" (string) (default: ''), - "data-ecl-table-header-group" (string) (default: ''), - "headers" (string) (default: ''): headers attribute to reference the relevant table headers ids (for multi headers table) +- **"icon_wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"rows"** (array) (default: []): [ { - "extra_attributes": (string) (default: ''), - "extra_classes": (string) (default: '') Extra classes for the table row (space separated) - "data: [ { diff --git a/src/implementations/twig/components/table/table.html.twig b/src/implementations/twig/components/table/table.html.twig index baa1d625ba4..56681a955f4 100644 --- a/src/implementations/twig/components/table/table.html.twig +++ b/src/implementations/twig/components/table/table.html.twig @@ -7,6 +7,7 @@ - "caption" (string) (default: ''): optional caption for the table - "label_sort" (string) (default: ''): label used for sorting buttons (screen reader only) - "zebra" (boolean) (default: false)) + - "icon_wt_markup" (boolean) (default: false): should the icon use the Webtools markup? - "headers" (array) (default: []): format: [ { "label" (string or array of string) @@ -63,6 +64,7 @@ {% set _label_sort = label_sort|default('') %} {% set _rows = rows|default([]) %} {% set _zebra = zebra|default(false) %} +{% set _icon_wt_markup = icon_wt_markup|default(false) %} {# Internal logic - Process properties #} @@ -78,6 +80,12 @@ ]) %} {% endif %} +{% if _icon_wt_markup %} + {% set extra_attributes = extra_attributes|default([])|merge([ + { name: 'data-ecl-icon-wt-markup' }, + ]) %} +{% endif %} + {% if _simple %} {% set _css_class = _css_class ~ ' ' ~ _simple_css_class %} {% endif %} 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', diff --git a/src/implementations/vanilla/components/icon/icon-print.scss b/src/implementations/vanilla/components/icon/icon-print.scss index c0cfd5ac953..f9f5cddd02a 100644 --- a/src/implementations/vanilla/components/icon/icon-print.scss +++ b/src/implementations/vanilla/components/icon/icon-print.scss @@ -62,6 +62,10 @@ $theme: null !default; fill: map.get($theme, 'color', 'white'); } +.ecl-icon--rotate-0 { + transform: rotateZ(0deg); +} + .ecl-icon--rotate-90 { transform: rotateZ(90deg); } diff --git a/src/implementations/vanilla/components/icon/icon.scss b/src/implementations/vanilla/components/icon/icon.scss index 2cbb11be9f5..a0097881b20 100644 --- a/src/implementations/vanilla/components/icon/icon.scss +++ b/src/implementations/vanilla/components/icon/icon.scss @@ -63,6 +63,10 @@ $icons: null !default; fill: map.get($theme, 'color', 'white'); } +.ecl-icon--rotate-0 { + transform: rotateZ(0deg); +} + .ecl-icon--rotate-90 { transform: rotateZ(90deg); } diff --git a/src/implementations/vanilla/components/select/select.js b/src/implementations/vanilla/components/select/select.js index 3eee749691b..a5fa37c1024 100644 --- a/src/implementations/vanilla/components/select/select.js +++ b/src/implementations/vanilla/components/select/select.js @@ -174,17 +174,25 @@ export class Select { * @private * @returns {HTMLElement} */ - static #createSvgIcon(icon, classes) { - const tempElement = document.createElement('div'); - tempElement.innerHTML = icon; // avoiding the use of not-so-stable createElementNs - const svg = tempElement.children[0]; - svg.removeAttribute('height'); - svg.removeAttribute('width'); - svg.setAttribute('focusable', false); - svg.setAttribute('aria-hidden', true); - // The following element is which does not support classList API as others. - svg.setAttribute('class', classes); - return svg; + static #createSvgIcon(icon, name, classes, wtMarkup) { + let result = ''; + if (wtMarkup) { + result = document.createElement('span'); + result.setAttribute('class', `wt-icon--${name} ${classes}`); + } else { + const tempElement = document.createElement('div'); + tempElement.innerHTML = icon; // avoiding the use of not-so-stable createElementNs + // eslint-disable-next-line prefer-destructuring + result = tempElement.children[0]; + result.removeAttribute('height'); + result.removeAttribute('width'); + result.setAttribute('focusable', false); + result.setAttribute('aria-hidden', true); + // The following element is which does not support classList API as others. + result.setAttribute('class', classes); + } + + return result; } /** @@ -198,10 +206,11 @@ export class Select { * @param {String} [options.disabled] - relevant when re-creating an option * @param {String} [options.selected] - relevant when re-creating an option * @param {String} ctx + * @param {String} wtMarkup * @private * @returns {HTMLElement} */ - static #createCheckbox(options, ctx) { + static #createCheckbox(options, ctx, wtMarkup) { // Early returns. if (!options || !ctx) return ''; const { id, text, disabled, selected, extraClass } = options; @@ -242,7 +251,9 @@ export class Select { box.appendChild( Select.#createSvgIcon( iconSvgAllCheck, + 'check', 'ecl-icon ecl-icon--s ecl-checkbox__icon', + wtMarkup, ), ); label.appendChild(box); @@ -257,10 +268,11 @@ export class Select { * Static method to generate the select icon * * @static + * @param {String} wtMarkup * @private * @returns {HTMLElement} */ - static #createSelectIcon() { + static #createSelectIcon(wtMarkup) { const wrapper = document.createElement('div'); wrapper.classList.add('ecl-select__icon'); const button = document.createElement('button'); @@ -276,13 +288,18 @@ export class Select { label.classList.add('ecl-button__label'); label.textContent = 'Toggle dropdown'; labelWrapper.appendChild(label); + const icon = Select.#createSvgIcon( iconSvgAllCornerArrow, + 'corner-arrow', `ecl-icon ecl-icon--${iconSize} ecl-icon--rotate-180`, + wtMarkup, ); + labelWrapper.appendChild(icon); button.appendChild(labelWrapper); wrapper.appendChild(button); + return wrapper; } @@ -321,6 +338,7 @@ export class Select { ECL.components = ECL.components || new Map(); this.select = this.element; + const wtMarkup = this.element.hasAttribute('data-ecl-icon-wt-markup'); if (this.multiple) { const containerClasses = Array.from(this.select.parentElement.classList); @@ -408,7 +426,7 @@ export class Select { this.inputContainer.appendChild(this.selectionCount); this.inputContainer.appendChild(this.input); - this.inputContainer.appendChild(Select.#createSelectIcon()); + this.inputContainer.appendChild(Select.#createSelectIcon(wtMarkup)); this.searchContainer = document.createElement('div'); this.searchContainer.style.display = 'none'; this.searchContainer.classList.add( @@ -446,6 +464,7 @@ export class Select { extraClass: 'ecl-select__multiple-all', }, this.selectMultipleId, + wtMarkup, ); this.selectAll.addEventListener('click', this.handleClickSelectAll); this.selectAll.addEventListener('keypress', this.handleClickSelectAll); @@ -558,6 +577,7 @@ export class Select { selected: option.selected, }, this.selectMultipleId, + wtMarkup, ); checkbox.setAttribute('data-visible', true); diff --git a/src/implementations/vanilla/components/table/table.js b/src/implementations/vanilla/components/table/table.js index 21b8ebbda3b..91db1a31c40 100644 --- a/src/implementations/vanilla/components/table/table.js +++ b/src/implementations/vanilla/components/table/table.js @@ -58,20 +58,31 @@ export class Table { /** * @returns {HTMLElement} */ - static createSortIcon(customClass) { - const tempElement = document.createElement('span'); - tempElement.innerHTML = iconSvgAllArrow; // avoiding the use of not-so-stable createElementNs - const svg = tempElement.children[0]; - svg.removeAttribute('height'); - svg.removeAttribute('width'); - svg.setAttribute('focusable', false); - svg.setAttribute('aria-hidden', true); - // The following element is which does not support classList API as others. - svg.setAttribute( - 'class', - `ecl-table__icon ecl-icon ecl-icon--${iconSvgAllArrowSize} ${customClass}`, - ); - return svg; + static createSortIcon(customClass, wtMarkup) { + let icon = ''; + if (wtMarkup) { + icon = document.createElement('span'); + icon.setAttribute( + 'class', + `wt-icon--solid-arrow ecl-table__icon ecl-icon--${iconSvgAllArrowSize} ${customClass}`, + ); + } else { + const tempElement = document.createElement('span'); + tempElement.innerHTML = iconSvgAllArrow; // avoiding the use of not-so-stable createElementNs + // eslint-disable-next-line prefer-destructuring + icon = tempElement.children[0]; + icon.removeAttribute('height'); + icon.removeAttribute('width'); + icon.setAttribute('focusable', false); + icon.setAttribute('aria-hidden', true); + // The following element is which does not support classList API as others. + icon.setAttribute( + 'class', + `ecl-table__icon ecl-icon ecl-icon--${iconSvgAllArrowSize} ${customClass}`, + ); + } + + return icon; } /** @@ -87,6 +98,7 @@ export class Table { // Add sort arrows and bind click event on toggles. if (this.sortHeadings) { + const wtMarkup = this.element.hasAttribute('data-ecl-icon-wt-markup'); this.sortHeadings.forEach((tr) => { const sort = document.createElement('button'); sort.classList.add('ecl-table__arrow'); @@ -96,8 +108,10 @@ export class Table { this.element.getAttribute(this.sortLabelSelector), ); } - sort.appendChild(Table.createSortIcon('ecl-table__icon-up')); - sort.appendChild(Table.createSortIcon('ecl-table__icon-down')); + sort.appendChild(Table.createSortIcon('ecl-table__icon-up', wtMarkup)); + sort.appendChild( + Table.createSortIcon('ecl-table__icon-down', wtMarkup), + ); tr.appendChild(sort); tr.addEventListener('click', (e) => this.handleClickOnSort(tr)(e)); }); diff --git a/src/playground/addons/story-utils/index.js b/src/playground/addons/story-utils/index.js index 62658023c8c..748db21b947 100755 --- a/src/playground/addons/story-utils/index.js +++ b/src/playground/addons/story-utils/index.js @@ -141,7 +141,7 @@ export const getIconControls = (data, icons, mapping) => { argTypes.title = { name: 'icon title', type: 'string', - description: 'Textual information for the icon, mostly for screen readers', + description: 'Short textual information for the icon, for screen readers', table: { type: { summary: 'string' }, defaultValue: { summary: '' }, @@ -149,6 +149,17 @@ export const getIconControls = (data, icons, mapping) => { }, if: { arg: 'name', neq: 'none' }, }; + argTypes.description = { + name: 'icon description', + type: 'string', + description: 'Additional description for the icon, for screen readers', + table: { + type: { summary: 'string' }, + defaultValue: { summary: '' }, + category: 'Icon', + }, + if: { arg: 'title', neq: '' }, + }; return argTypes; }; diff --git a/src/playground/ec/.storybook/preview-head.html b/src/playground/ec/.storybook/preview-head.html index e5f2113c032..b7620bdc93c 100644 --- a/src/playground/ec/.storybook/preview-head.html +++ b/src/playground/ec/.storybook/preview-head.html @@ -65,6 +65,11 @@ } + +