From ab79d0c71619ef1cfaf852f61977179b8725f0d5 Mon Sep 17 00:00:00 2001 From: planctus Date: Fri, 25 Oct 2019 17:26:09 +0200 Subject: [PATCH] feat(site-header-harmonised): Adding component - TWIG-80 (#188) --- .../.npmignore | 5 + .../README.md | 116 + .../site-header-harmonised.test.js.snap | 3851 +++++++++++++++++ .../demo/data.js | 67 + .../menu.html.twig | 27 + .../package.json | 35 + .../site-header-harmonised.html.twig | 317 ++ .../site-header-harmonised.story.js | 36 + .../site-header-harmonised.test.js | 69 + src/ec/packages/ec-components/package.json | 1 + yarn.lock | 15 + 11 files changed, 4539 insertions(+) create mode 100644 src/ec/packages/ec-component-site-header-harmonised/.npmignore create mode 100644 src/ec/packages/ec-component-site-header-harmonised/README.md create mode 100644 src/ec/packages/ec-component-site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap create mode 100644 src/ec/packages/ec-component-site-header-harmonised/demo/data.js create mode 100644 src/ec/packages/ec-component-site-header-harmonised/menu.html.twig create mode 100644 src/ec/packages/ec-component-site-header-harmonised/package.json create mode 100644 src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.html.twig create mode 100644 src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.story.js create mode 100644 src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.test.js diff --git a/src/ec/packages/ec-component-site-header-harmonised/.npmignore b/src/ec/packages/ec-component-site-header-harmonised/.npmignore new file mode 100644 index 000000000..e5291644b --- /dev/null +++ b/src/ec/packages/ec-component-site-header-harmonised/.npmignore @@ -0,0 +1,5 @@ +__snapshots__ +demo +*.story.js +*.test.js +**/*.md diff --git a/src/ec/packages/ec-component-site-header-harmonised/README.md b/src/ec/packages/ec-component-site-header-harmonised/README.md new file mode 100644 index 000000000..895a6088f --- /dev/null +++ b/src/ec/packages/ec-component-site-header-harmonised/README.md @@ -0,0 +1,116 @@ +# ECL Twig - EC Site Header Harmonised component + +npm package: `@ecl-twig/ec-component-site-header-harmonised` + +```shell +npm install --save @ecl-twig/ec-component-site-header-harmonised +``` + +## Site Header Harmonised + +### Parameters + +- "logged" (boolean) (default: false): Whether the user is logged in or not +- "menu" (boolean) (default: false): Whether the component includes a menu or not +- "menu_label" (string) (default: false): The menu toggler label +- "banner" (string): The site name +- "banner_top" (string): Class name +- "icon_file_path": (string) (default: ''): file containing the svg icons +- "logo" (associative array) (default: predefined structure): Logo image settings. format: + - "title" (string) (default: ''): Logo title attribute. + - "alt" (string) (default: ''): Logo alt attribute. + - "href" (string) (default: ''): Logo URL. + - "src" (string) (default: ''): Logo image file path, eg. dist/images/logo--en.svg. +- "login_box" (associative array) format: + - "id": (string): Id of the box + - "description": (string) Label for the logged in users + - "label": (string): Log out label + - "href": (string): Url of the link +- "login_toggle" (associative array) format: + - "label_not_logged": (string) Label for the anonymous users + - "href_not_logged": (string) Link to the login form + - "label_logged": (string) Label for the logged in users + - "href_logged": (string) Link to the logout form +- "language_selector" (associative array) (default: predefined structure): Language switcher settings. format: + - "href" (string) (default: ''): URL for switcher + - "name" (string) (default: ''): Switcher language label, eg. 'English', 'Français', etc. + - "code" (string) (default: ''): Switcher language code, eg. 'en', 'fr', etc. + - "overlay" (associative array) (default: predefined structure): Overlay language switcher settings. format: + - "close_label" (string) (default: ''): Close button label eg. 'Close'. + - "title" (string) (default: ''): Overlay title, eg. 'Select your language'. + - "items" (array) (default: []): (array) (default: []): format: + - "lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc. + - "label" (string) (default: '') Item language label, eg. 'English', 'Français', etc. + - "path" (string) (default: '') Item language URL eg. '/example#language_en'. + - "active" (boolean) (default: false) define if item is the active language. +- "search_toggle": (associative array) format: + - "label": (string) Label of the element + - "href": (string) Link of the element +- "search_form" (associative array) (default: predefined structure): EC Search Form component structure +- "extra_classes" (string) (default: '') +- "extra_attributes" (array) (default: []): format: + - "name" (string) (default: '') + - "value" (string) (default: '') + +### Example : + + +```twig +{% include '@ecl-twig/ec-component-site-header-harmonised/site-header-harmonised.html.twig' with { + bannerTop: 'Class name', + banner: 'Site name', + menu: true, + icon_file_path: '/path-to-the-icons-file', + logo: { + title: 'European Commission', + alt: 'European Commission logo', + href: '/example', + src: 'dist/images/logo--en.svg', + }, + language_selector: { + href: '/example', + name: 'English', + code: 'en', + overlay: { + close_label: 'Close', + title: 'Select your language', + items: [ + { lang: 'bg', label: 'български', path: '/example#language_bg' }, + { lang: 'es', label: 'español', path: '/example#language_es', active: true }, + ... + ], + }, + }, + login_toggle: { + label_not_logged: 'Log in', + href_not_logged: '/example', + label_logged: 'Logged in', + href_logged: '/example', + }, + login_box: { + id: 'login-box-id', + description: 'Logged in as , ', + label: 'Log out', + href: '/example', + }, + search_toggle: { + label: 'Search', + href: '#', + }, + search_form: { + text_input: { + id: 'input-search', + name: 'search', + }, + button: { + label: 'Search', + }, + }, + extra_classes: 'my-extra-class-1 my-extra-class-2', + extra_attributes: [ + { name: 'data-test', value: 'data-test-value' }, + { name: 'data-test-1', value: 'data-test-value-1' }, + ... + ], +} %} +``` diff --git a/src/ec/packages/ec-component-site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap b/src/ec/packages/ec-component-site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap new file mode 100644 index 000000000..d76ea70c1 --- /dev/null +++ b/src/ec/packages/ec-component-site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap @@ -0,0 +1,3851 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EC - Site Header Harmonised Group 1 renders correctly 1`] = ` +
+
+
+ + European Commission logo + +
+ + + + + + en + + + English + +
+ + +
+
+
+
+
+
+ Class name +
+
+
+
+ + + Menu + + Site name +
+
+
+
+ +
+
+ +
+`; + +exports[`EC - Site Header Harmonised Group 1 renders correctly with extra attributes 1`] = ` +
+
+
+ + European Commission logo + +
+ + + + + + en + + + English + +
+ + +
+
+
+
+
+
+ Class name +
+
+
+
+ + + Menu + + Site name +
+
+
+
+ +
+
+ +
+`; + +exports[`EC - Site Header Harmonised Group 1 renders correctly with extra class names 1`] = ` +
+
+
+ + European Commission logo + +
+ + + + + + en + + + English + +
+ + +
+
+
+
+
+
+ Class name +
+
+
+
+ + + Menu + + Site name +
+
+
+
+ +
+
+ +
+`; + +exports[`EC - Site Header Harmonised Group 2 renders correctly 1`] = ` +
+
+
+ + European Commission logo + +
+ + + + + en + + + English + +
+ + +
+
+
+
+ +
+`; + +exports[`EC - Site Header Harmonised Group 2 renders correctly with extra attributes 1`] = ` +
+
+
+ + European Commission logo + +
+ + + + + en + + + English + +
+ + +
+
+
+
+ +
+`; + +exports[`EC - Site Header Harmonised Group 2 renders correctly with extra class names 1`] = ` +
+
+
+ + European Commission logo + +
+ + + + + en + + + English + +
+ + +
+
+
+
+ +
+`; diff --git a/src/ec/packages/ec-component-site-header-harmonised/demo/data.js b/src/ec/packages/ec-component-site-header-harmonised/demo/data.js new file mode 100644 index 000000000..a6e0938a9 --- /dev/null +++ b/src/ec/packages/ec-component-site-header-harmonised/demo/data.js @@ -0,0 +1,67 @@ +/* eslint-disable import/no-extraneous-dependencies, no-param-reassign */ +import specGroup1 from '@ecl/ec-specs-site-header-harmonised/demo/data--group1'; +import specGroup2 from '@ecl/ec-specs-site-header-harmonised/demo/data--group2'; + +const defaultSprite = 'static/icons.svg'; + +const logo = 'static/media/logo--en.svg'; + +const adapter = initialData => { + const adaptedData = JSON.parse(JSON.stringify(initialData)); + adaptedData.banner_top = adaptedData.bannerTop; + delete adaptedData.bannerTop; + // Login toggle. + if (adaptedData.loginToggle) { + adaptedData.login_toggle = { + label_not_logged: adaptedData.loginToggle.labelNotLogged, + href_not_logged: adaptedData.loginToggle.hrefNotLogged, + label_logged: adaptedData.loginToggle.labelLogged, + href_logged: adaptedData.loginToggle.hrefLogged, + }; + delete adaptedData.loginToggle; + } + // Login box. + adaptedData.login_box = adaptedData.loginBox; + delete adaptedData.loginBox; + // Language selector. + adaptedData.logo.src = logo; + + adaptedData.language_selector = adaptedData.languageSelector; + delete adaptedData.languageSelector; + + adaptedData.language_selector.overlay.close_label = + adaptedData.language_selector.overlay.closeLabel; + delete adaptedData.language_selector.overlay.closeLabel; + + adaptedData.language_selector.overlay.items.forEach(item => { + item.path = item.href; + delete item.href; + if (item.isActive) { + item.active = true; // eslint-disable-line no-param-reassign + delete item.isActive; + } + }); + // Search toggle. + adaptedData.search_toggle = adaptedData.searchToggle; + delete adaptedData.searchToggle; + // Search form. + adaptedData.search_form = { + extra_attributes: [{ name: 'id', value: adaptedData.searchForm.id }], + text_input: { + id: adaptedData.searchForm.textInputId, + name: adaptedData.searchForm.inputLabel, + label: adaptedData.searchForm.inputLabel, + }, + button: { + label: adaptedData.searchForm.buttonLabel, + }, + }; + delete adaptedData.searchForm; + + adaptedData.icon_file_path = defaultSprite; + adaptedData.menu_label = 'Menu'; + return adaptedData; +}; + +export const dataGroup1 = adapter(specGroup1); +export const dataGroup2 = adapter(specGroup2); diff --git a/src/ec/packages/ec-component-site-header-harmonised/menu.html.twig b/src/ec/packages/ec-component-site-header-harmonised/menu.html.twig new file mode 100644 index 000000000..8177042df --- /dev/null +++ b/src/ec/packages/ec-component-site-header-harmonised/menu.html.twig @@ -0,0 +1,27 @@ +{# This is just a temporary helper for demoing a menu in site-header-harmonised component #} +{% set _extra_classes = 'ecl-site-header-harmonised__menu-link' %} +
+
+
    + {% for i in 0..6 %} +
  • + {% include '@ecl-twig/ec-component-link/link.html.twig' with { + link: { + path: '/example', + type: 'standalone', + label: i == 0 ? 'Home' : 'Item ' ~ i, + icon_position: 'after', + }, + icon: { + size: '2xs', + type: 'ui', + name: i == 0 ? '' : 'corner-arrow', + transform: 'rotate-180', + }|merge({ path: _icon_file_path }), + extra_classes: i == 1 ? _extra_classes ~ ' ' ~ _extra_classes ~ '--active' : _extra_classes, + } only -%} +
    • + {% endfor %} +
+
+
diff --git a/src/ec/packages/ec-component-site-header-harmonised/package.json b/src/ec/packages/ec-component-site-header-harmonised/package.json new file mode 100644 index 000000000..cf7f37787 --- /dev/null +++ b/src/ec/packages/ec-component-site-header-harmonised/package.json @@ -0,0 +1,35 @@ +{ + "name": "@ecl-twig/ec-component-site-header-harmonised", + "author": "European Commission", + "license": "EUPL-1.1", + "version": "2.12.0", + "description": "ECL Twig - EC Site Header Harmonised", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@ecl-twig/ec-component-icon": "2.11.2", + "@ecl-twig/ec-component-language-list": "2.11.2", + "@ecl-twig/ec-component-search-form": "2.11.2" + }, + "devDependencies": { + "@ecl/ec-component-site-header-harmonised": "2.12.0", + "@ecl/ec-resources-icons": "2.12.0", + "@ecl/ec-resources-logo": "2.12.0", + "@ecl/ec-specs-site-header-harmonised": "2.12.0" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ec-europa/ecl-twig.git" + }, + "bugs": { + "url": "https://github.com/ec-europa/ecl-twig/issues" + }, + "homepage": "https://github.com/ec-europa/ecl-twig", + "keywords": [ + "ecl", + "europa-component-library", + "design-system", + "twig" + ] +} diff --git a/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.html.twig b/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.html.twig new file mode 100644 index 000000000..2cb08fb60 --- /dev/null +++ b/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.html.twig @@ -0,0 +1,317 @@ +{% spaceless %} + +{# + Parameters: + - "icon_file_path" (string) (default: ''): URL to icons file + - "banner_top" (string): Class name + - "banner" (string): Site name + - "logged" (boolean): Whether the user is logged in or not + - "menu" (boolean): Whether the component includes a menu + - "menu_label" (stirng): The menu toggler label + - "logo" (associative array) (default: predefined structure): Logo image settings. format: + { + "title": (string) (default: ''): Logo title attribute. + "alt": (string) (default: ''): Logo alt attribute. + "href": (string) (default: ''): Logo URL. + "src": (string) (default: ''): Logo image file path, eg. dist/images/logo--en.svg. + }, + - "language_selector" (associative array) (default: predefined structure): Language switcher settings. format: + { + "href": (string) (default: ''): URL for switcher + "name": (string) (default: ''): Switcher language label, eg. 'English', 'Français', etc. + "code": (string) (default: ''): Switcher language code, eg. 'en', 'fr', etc. + "overlay" (associative array) (default: predefined structure): Overlay language switcher settings. format: + { + "close_label": (string) (default: ''): Close button label eg. 'Close'. + "title": (string) (default: ''): Overlay title, eg. 'Select your language'. + "items": (array) (default: []): (array) (default: []): format: [ + { + "lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc. + "label" (string) (default: '') Item language label, eg. 'English', 'Français', etc. + "path" (string) (default: '') Item language URL eg. '/example#language_en'. + "active" (boolean) (default: false) define if item is the active language. + }, + ], + }, + }, + - "search_toggle" (associate array) (default: {}) format: + { + "label": (string) Label of the element + "href": (string) Link of the element + } + - "login_box" (associate array) (default: {}) format: + { + "id": (string): Id of the box + "description": (string) default('Logged in as , ') + "label": (string): Log out label + "href": (string): Url of the link + } + - "login_toggle" (associate array) (default: {}) format: + { + "label_not_logged": (string) Label for the anonymous users + "href_not_logged": (string) Link to the login form + "label_logged": (string) Label for the logged in users + "href_logged": (string) Link to the logout form + } + - "search_form" (associative array) (default: predefined structure): EC Search Form component structure + - "extra_classes" (string) (default: '') + - "extra_attributes" (array) (default: data-ecl-auto-init="SiteHeaderCore"): format: [ + { + "name" (string) (default: ''), + "value" (optional) (string) + ... + ] +#} + +{# Default variables #} + +{% set _logo = logo|default({}) %} +{% set _language_selector = language_selector|default({}) %} +{% set _login_box = login_box|default({}) %} +{% set _login_toggle = login_toggle|default({}) %} +{% set _search_toggle = search_toggle|default({}) %} +{% set _icon_file_path = icon_file_path|default('') %} +{% set _logged = logged|default(false) %} +{% set _menu = menu|default(false) %} +{% set _extra_attributes = '' %} +{% set _css_class = 'ecl-site-header-harmonised' %} + +{% set _search_form = { + text_input: { + name: 'search', + extra_classes: 'ecl-search-form__text-input' + }, + button: { + variant: 'search', + icon: { + type: 'general', + name: 'search', + path: _icon_file_path, + size: 'fluid', + }, + extra_classes: 'ecl-search-form__button' + }, + extra_attributes: [ + { name: 'data-ecl-search-form' } + ]|merge(search_form.extra_attributes|default({})), + extra_classes: 'ecl-site-header-harmonised__search' +} +%} + +{# Merge options #} + +{% set extra_attributes = [ + { name: 'data-ecl-auto-init', value: 'SiteHeaderHarmonised' } + ]|merge(extra_attributes|default([])) +%} + +{% if logo is defined and logo is not empty %} + {% set _logo = _logo|merge(logo) %} +{% endif %} + +{% if login_toggle is defined and login_toggle is not empty %} + {% set _login_toggle = _login_toggle|merge(login_toggle) %} +{% endif %} + +{% if login_box is defined and login_box is not empty %} + {% set _login_box = _login_box|merge(login_box) %} +{% endif %} + +{% if language_selector is defined and language_selector is not empty %} + {% set _language_selector = _language_selector|merge(language_selector) %} +{% endif %} + +{% if search_toggle is defined and search_toggle is not empty %} + {% set _search_toggle = _search_toggle|merge(search_toggle) %} +{% endif %} + +{% if search_form.text_input is defined and search_form.text_input is not empty %} + {% set _search_form = _search_form|merge({ text_input: _search_form.text_input|merge(search_form.text_input) }) %} +{% endif %} + +{% if search_form.button is defined and search_form.button is not empty %} + {% set _search_form = _search_form|merge({ button: _search_form.button|merge(search_form.button) }) %} +{% endif %} + +{# Internal logic - Process properties #} + +{% if extra_classes is defined and extra_classes is not empty %} + {% set _css_class = _css_class ~ ' ' ~ extra_classes %} +{% endif %} + +{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %} + {% for attr in extra_attributes %} + {% if attr.value is defined %} + {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %} + {% else %} + {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name %} + {% endif %} + {% endfor %} +{% endif %} + +{# Print the result #} + +
+
+
+ + {{ _logo.alt }} + +
+ {% if _login_toggle is not empty and _login_box is not empty %} + + {% endif %} + {% if _language_selector is not empty %} + + + {% include '@ecl-twig/ec-component-icon/icon.html.twig' with { + icon: { + path: _icon_file_path, + type: 'general', + name: 'language', + size: 's' + } + } only %} + {{ _language_selector.code }} + + {{- _language_selector.label -}} + + {% endif %} +
+ {% if _search_toggle is not empty %} + + {% endif %} + {% include '@ecl-twig/ec-component-search-form/search-form.html.twig' with _search_form only %} +
+
+
+
+{% if banner_top is defined and banner_top is not empty %} +
+
{{ banner_top|raw }}
+
+{% endif %} +{% if banner is defined and banner is not empty %} +
+
+ + {%- include '@ecl-twig/ec-component-icon/icon.html.twig' with { + icon: { + name: 'hamburger', + path: _icon_file_path, + type: 'general', + size: 's', + extra_attributes: [ + { name: 'aria-hidden', value: true } + ] + } + } only -%} + {{- menu_label|default('') -}} + + {{- banner|raw -}} +
+
+{% endif %} +{% if _menu %} + {% include '@ecl-twig/ec-component-site-header-harmonised/menu.html.twig' with _icon_file_path %} +{% endif %} + {% include '@ecl-twig/ec-component-language-list/language-list-overlay.html.twig' with { + items: _language_selector.overlay.items, + close_label: _language_selector.overlay.close_label, + title: _language_selector.overlay.title, + icon_path: _icon_file_path, + extra_attributes: [ + { name: 'aria-labelledby', value: 'ecl-language-list__title' }, + { name: 'role', value: 'dialog' }, + { name: 'hidden' } + ] + } only %} +
+ +{% endspaceless %} diff --git a/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.story.js b/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.story.js new file mode 100644 index 000000000..7a841e370 --- /dev/null +++ b/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.story.js @@ -0,0 +1,36 @@ +import { storiesOf } from '@storybook/html'; +import { withNotes } from '@ecl-twig/storybook-addon-notes'; +import withCode from '@ecl-twig/storybook-addon-code'; + +import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; +import logo from '@ecl/ec-resources-logo/logo--en.svg'; +import siteHeaderHarmonised from './site-header-harmonised.html.twig'; +import { dataGroup1, dataGroup2 } from './demo/data'; +import siteHeaderHarmonisedDocs from './README.md'; + +storiesOf('Components/Site Headers/Harmonised', module) + .addDecorator(withNotes) + .addDecorator(withCode) + .add( + 'group 1', + () => { + dataGroup1.logged = true; + dataGroup1.icon_file_path = defaultSprite; + dataGroup1.logo.src = logo; + return siteHeaderHarmonised(dataGroup1); + }, + { + notes: { markdown: siteHeaderHarmonisedDocs }, + } + ) + .add( + 'group 2', + () => { + dataGroup2.icon_file_path = defaultSprite; + dataGroup2.logo.src = logo; + return siteHeaderHarmonised(dataGroup2); + }, + { + notes: { markdown: siteHeaderHarmonisedDocs }, + } + ); diff --git a/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.test.js b/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.test.js new file mode 100644 index 000000000..c33daf990 --- /dev/null +++ b/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.test.js @@ -0,0 +1,69 @@ +import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils'; + +import { dataGroup1, dataGroup2 } from './demo/data'; + +describe('EC - Site Header Harmonised', () => { + const template = + '@ecl-twig/ec-component-site-header-harmonised/site-header-harmonised.html.twig'; + const render = params => renderTwigFileAsNode(template, params); + + describe('Group 1', () => { + test('renders correctly', () => { + expect.assertions(1); + return expect(render(dataGroup1)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra class names', () => { + expect.assertions(1); + + const withExtraClasses = merge(dataGroup1, { + extra_classes: 'custom-class custom-class--test', + }); + + return expect(render(withExtraClasses)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra attributes', () => { + expect.assertions(1); + + const withExtraAttributes = merge(dataGroup1, { + extra_attributes: [ + { name: 'data-test', value: 'data-test-value' }, + { name: 'data-test-1', value: 'data-test-value-1' }, + ], + }); + + return expect(render(withExtraAttributes)).resolves.toMatchSnapshot(); + }); + }); + + describe('Group 2', () => { + test('renders correctly', () => { + expect.assertions(1); + return expect(render(dataGroup2)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra class names', () => { + expect.assertions(1); + + const withExtraClasses = merge(dataGroup2, { + extra_classes: 'custom-class custom-class--test', + }); + + return expect(render(withExtraClasses)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra attributes', () => { + expect.assertions(1); + + const withExtraAttributes = merge(dataGroup2, { + extra_attributes: [ + { name: 'data-test', value: 'data-test-value' }, + { name: 'data-test-1', value: 'data-test-value-1' }, + ], + }); + + return expect(render(withExtraAttributes)).resolves.toMatchSnapshot(); + }); + }); +}); diff --git a/src/ec/packages/ec-components/package.json b/src/ec/packages/ec-components/package.json index 72799a465..38608c519 100644 --- a/src/ec/packages/ec-components/package.json +++ b/src/ec/packages/ec-components/package.json @@ -42,6 +42,7 @@ "@ecl-twig/ec-component-select": "2.11.2", "@ecl-twig/ec-component-site-header": "2.11.2", "@ecl-twig/ec-component-site-header-core": "2.12.0", + "@ecl-twig/ec-component-site-header-harmonised": "2.12.0", "@ecl-twig/ec-component-skip-link": "2.11.2", "@ecl-twig/ec-component-social-media-follow": "2.11.2", "@ecl-twig/ec-component-social-media-share": "2.11.2", diff --git a/yarn.lock b/yarn.lock index bc716b62f..6067b5593 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1185,6 +1185,16 @@ "@ecl/ec-component-search-form" "^2.12.0" focus-trap "5.0.2" +"@ecl/ec-component-site-header-harmonised@2.12.0": + version "2.12.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-site-header-harmonised/-/ec-component-site-header-harmonised-2.12.0.tgz#63ccd97eb70043032927f70f3bc846d8ae0a65a5" + integrity sha512-Zht5lHROrdTors0yRZEipU8VTvuzmnlcfZVmuIkh+Scqp+gfzGpw5TLzy/CSS1TuyTDnGt9ZeG/qVsHjC5X2Nw== + dependencies: + "@ecl/ec-base" "^2.12.0" + "@ecl/ec-component-icon" "^2.12.0" + "@ecl/ec-component-search-form" "^2.12.0" + focus-trap "5.0.2" + "@ecl/ec-component-site-header@2.11.0": version "2.11.0" resolved "https://registry.yarnpkg.com/@ecl/ec-component-site-header/-/ec-component-site-header-2.11.0.tgz#d4283be9bb79ba91a672b6a3d60a8206c0599d1b" @@ -1439,6 +1449,11 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-site-header-core/-/ec-specs-site-header-core-2.12.0.tgz#c2f323cc1928fb1fa8e6e4547584951b9954ec4b" integrity sha512-moF3qJUZBA2a1M2jku6/DKKosyjFUkcOQOJcSHi3nQlqKfZ7eAyIDeeaZ27Pxw90lGYu6GI32GTwz0qB70oBAQ== +"@ecl/ec-specs-site-header-harmonised@2.12.0": + version "2.12.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-specs-site-header-harmonised/-/ec-specs-site-header-harmonised-2.12.0.tgz#a18f755770aa4ca4a5d9424445fb49b32c0c6ebe" + integrity sha512-AtaeZjBk8T1m/jD/qVDlJPeGBFIofy8+vbkyx6cO/lpm2zhWU4jL1CaeO8B6KblYnzp1qa+ZkaUrpN/mfzkz0w== + "@ecl/ec-specs-site-header@2.11.0": version "2.11.0" resolved "https://registry.yarnpkg.com/@ecl/ec-specs-site-header/-/ec-specs-site-header-2.11.0.tgz#3876d651c1774aac375f27f3b83488e68c0f2d66"