From 789a21d1f1d5e00b3747d6680b4063af361d318a Mon Sep 17 00:00:00 2001 From: Romain Emery Date: Wed, 1 Feb 2023 12:57:14 +0100 Subject: [PATCH] feat(site-header): add message box - FRONT-3760 (#2715) --- .../twig/components/site-header/README.md | 1 + .../__snapshots__/site-header.test.js.snap | 320 ++++++++++++++++++ .../site-header/ec-site-header.story.js | 17 + .../site-header/eu-site-header.story.js | 17 + .../twig/components/site-header/package.json | 1 + .../site-header/site-header.html.twig | 11 + .../site-header/site-header-ec.scss | 12 + .../site-header/site-header-eu.scss | 12 + .../components/site-header/demo/data--ec.js | 20 ++ .../components/site-header/demo/data--eu.js | 20 ++ 10 files changed, 431 insertions(+) diff --git a/src/implementations/twig/components/site-header/README.md b/src/implementations/twig/components/site-header/README.md index cf95d80a071..8664b93f7a0 100644 --- a/src/implementations/twig/components/site-header/README.md +++ b/src/implementations/twig/components/site-header/README.md @@ -53,6 +53,7 @@ npm install --save @ecl/twig-component-site-header - "label" (string) Label of the element - "href" (string) Link of the element - **"search_form"** (associative array) (default: predefined structure): ECL Search Form component structure +- **"message"** (object) (default: {}): Optional message compatible with ECL Message component structure - **"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-header/__snapshots__/site-header.test.js.snap b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap index 36b6c26a586..7be96312a7f 100644 --- a/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap +++ b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap @@ -974,6 +974,70 @@ exports[`Site Header EC renders correctly 1`] = ` +
+
+ +
+
@@ -2030,6 +2094,70 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
+
+
+ +
+
@@ -3056,6 +3184,70 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
+
+
+ +
+
@@ -4080,6 +4272,70 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
+
+
+ +
+
@@ -5110,6 +5366,70 @@ exports[`Site Header EU renders correctly 1`] = `
+
+
+ +
+
diff --git a/src/implementations/twig/components/site-header/ec-site-header.story.js b/src/implementations/twig/components/site-header/ec-site-header.story.js index 0a6ce84b08a..50bff481c92 100644 --- a/src/implementations/twig/components/site-header/ec-site-header.story.js +++ b/src/implementations/twig/components/site-header/ec-site-header.story.js @@ -36,6 +36,7 @@ const getArgs = (data) => { const defaultArgs = { show_language_selector: true, show_search: true, + show_message: false, }; if (data.login_box) { @@ -91,6 +92,16 @@ const getArgTypes = (data) => { category: 'Optional', }, }; + if (data.message) { + argTypes.show_message = { + name: 'message', + type: { name: 'boolean' }, + description: 'Show the message box', + table: { + category: 'Optional', + }, + }; + } if (data.banner_top) { argTypes.show_banner_top = { name: 'class name', @@ -239,6 +250,12 @@ const prepareData = (data, args) => { data.banner_top = clonedDataFull.banner_top; } + if (!args.show_message) { + delete data.message; + } else { + data.message = clonedDataFull.message; + } + correctPaths(data); data.logo.src_desktop = enLogoEC; diff --git a/src/implementations/twig/components/site-header/eu-site-header.story.js b/src/implementations/twig/components/site-header/eu-site-header.story.js index 3f9988a882c..ddbe739fc5e 100644 --- a/src/implementations/twig/components/site-header/eu-site-header.story.js +++ b/src/implementations/twig/components/site-header/eu-site-header.story.js @@ -30,6 +30,7 @@ const getArgs = (data) => { const defaultArgs = { show_language_selector: true, show_search: true, + show_message: false, }; if (data.login_box) { @@ -85,6 +86,16 @@ const getArgTypes = (data) => { category: 'Optional', }, }; + if (data.message) { + argTypes.show_message = { + name: 'message', + type: { name: 'boolean' }, + description: 'Show the message box', + table: { + category: 'Optional', + }, + }; + } if (data.has_menu) { argTypes.show_menu = { name: 'menu', @@ -217,6 +228,12 @@ const prepareData = (data, args) => { data.cta_link = clonedDataFull.cta_link; } + if (!args.show_message) { + delete data.message; + } else { + data.message = clonedDataFull.message; + } + correctPaths(data); data.logo.src_desktop = enLogoDesktopEU; diff --git a/src/implementations/twig/components/site-header/package.json b/src/implementations/twig/components/site-header/package.json index 0ccd7fb6ed3..2039bc5b728 100644 --- a/src/implementations/twig/components/site-header/package.json +++ b/src/implementations/twig/components/site-header/package.json @@ -11,6 +11,7 @@ "@ecl/twig-component-icon": "3.6.0", "@ecl/twig-component-link": "3.6.0", "@ecl/twig-component-menu": "3.6.0", + "@ecl/twig-component-message": "3.6.0", "@ecl/twig-component-search-form": "3.6.0" }, "devDependencies": { 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 9c8e35dbdf6..9cf0a5d4de6 100644 --- a/src/implementations/twig/components/site-header/site-header.html.twig +++ b/src/implementations/twig/components/site-header/site-header.html.twig @@ -66,6 +66,7 @@ "href_logged": (string) Link to the logout form } - "search_form" (associative array) (default: predefined structure): EC Search Form component structure + - "message" (object) (default: {}): Optional message compatible with ECL Message component structure - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: data-ecl-auto-init="SiteHeaderStandardised"): format: [ { @@ -87,6 +88,7 @@ {% set _menu = menu|default(false) %} {% set _site_name = site_name|default('') %} {% set _cta_link = cta_link|default({}) %} +{% set _message = message|default({}) %} {% set _extra_attributes = '' %} {% set _css_class = 'ecl-site-header' %} {% set _search_form_extra_attributes = [{ name: 'data-ecl-search-form' }] %} @@ -339,6 +341,15 @@
+{# Message #} +{% if _message is defined and _message is not empty %} +
+
+ {% include '@ecl/message/message.html.twig' with _message only %} +
+
+{% endif %} + {# Banner top #} {% if banner_top is defined and banner_top is not empty %}
diff --git a/src/implementations/vanilla/components/site-header/site-header-ec.scss b/src/implementations/vanilla/components/site-header/site-header-ec.scss index 4c3bc1f1a8a..a4df6ceb4df 100644 --- a/src/implementations/vanilla/components/site-header/site-header-ec.scss +++ b/src/implementations/vanilla/components/site-header/site-header-ec.scss @@ -187,6 +187,14 @@ $_search-width-xl: 31.5rem; display: flex; } +.ecl-site-header__message { + display: flex; + + .ecl-message { + margin-bottom: map.get(theme.$spacing, 'm'); + } +} + .ecl-site-header__banner-top { background-color: map.get(theme.$color, 'blue-5'); font: map.get(theme.$font-prolonged, 's'); @@ -397,6 +405,10 @@ $_search-width-xl: 31.5rem; width: $_search-width-l; } + .ecl-site-header__message .ecl-message { + margin-bottom: map.get(theme.$spacing, 'l'); + } + .ecl-site-header__banner-top { font: map.get(theme.$font-prolonged, 'm'); } diff --git a/src/implementations/vanilla/components/site-header/site-header-eu.scss b/src/implementations/vanilla/components/site-header/site-header-eu.scss index 46238ae728d..55451906c1e 100644 --- a/src/implementations/vanilla/components/site-header/site-header-eu.scss +++ b/src/implementations/vanilla/components/site-header/site-header-eu.scss @@ -216,6 +216,14 @@ $_search-width-xl: 31.5rem; padding: 0; } +.ecl-site-header__message { + display: flex; + + .ecl-message { + margin-bottom: map.get(theme.$spacing, 'm'); + } +} + // stylelint-disable plugin/selector-bem-pattern .ecl-search-form__button .ecl-button__label { display: none; @@ -435,6 +443,10 @@ $_search-width-xl: 31.5rem; top: 0; width: $_search-width-l; } + + .ecl-site-header__message .ecl-message { + margin-bottom: map.get(theme.$spacing, 'l'); + } } @include breakpoints.up('xl') { diff --git a/src/specs/components/site-header/demo/data--ec.js b/src/specs/components/site-header/demo/data--ec.js index ead8acd97e5..599fbd82cdb 100644 --- a/src/specs/components/site-header/demo/data--ec.js +++ b/src/specs/components/site-header/demo/data--ec.js @@ -273,4 +273,24 @@ module.exports = { path: exampleLink, }, }, + message: { + variant: 'info', + icon: { + path: '/icons.svg', + name: 'information', + size: 'l', + }, + title: 'Information message', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.', + close: { + variant: 'ghost', + label: 'Close', + icon: { + path: '/icons.svg', + name: 'close-filled', + size: 'xs', + }, + }, + }, }; diff --git a/src/specs/components/site-header/demo/data--eu.js b/src/specs/components/site-header/demo/data--eu.js index 9bfa802e571..6bcf4b2306a 100644 --- a/src/specs/components/site-header/demo/data--eu.js +++ b/src/specs/components/site-header/demo/data--eu.js @@ -267,5 +267,25 @@ module.exports = { transform: 'rotate-90', }, }, + message: { + variant: 'info', + icon: { + path: '/icons.svg', + name: 'information', + size: 'l', + }, + title: 'Information message', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.', + close: { + variant: 'ghost', + label: 'Close', + icon: { + path: '/icons.svg', + name: 'close-filled', + size: 'xs', + }, + }, + }, icon_file_path: '/icons.svg', };