From 8a3fded67c7a77afd388bc1c91b6bea0d1fcce46 Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 26 Nov 2024 16:24:23 +0200 Subject: [PATCH 01/14] fix(showcase): Including menu markup in the showcase examples - FRONT-4689 (#3737) --- .../ec/components/navigation/mega-menu/demo/index.js | 5 ++++- .../pages/ec/components/navigation/menu/demo/index.js | 5 ++++- .../ec/components/site-wide/site-header/demo/index.js | 11 +++++++---- .../eu/components/navigation/mega-menu/demo/index.js | 5 ++++- .../pages/eu/components/navigation/menu/demo/index.js | 5 ++++- .../eu/components/site-wide/site-header/demo/index.js | 9 ++++++--- 6 files changed, 29 insertions(+), 11 deletions(-) diff --git a/src/website/src/pages/ec/components/navigation/mega-menu/demo/index.js b/src/website/src/pages/ec/components/navigation/mega-menu/demo/index.js index ffd34b94486..09a078712b0 100644 --- a/src/website/src/pages/ec/components/navigation/mega-menu/demo/index.js +++ b/src/website/src/pages/ec/components/navigation/mega-menu/demo/index.js @@ -1,8 +1,11 @@ import dataFull from '@ecl/specs-component-site-header/demo/data--ec'; +import dataMegaMenu from '@ecl/specs-component-mega-menu/demo/data'; import template from '@ecl/twig-component-site-header/site-header.html.twig'; import { correctSvgPath } from '@ecl/website-utils'; -const dataCore = JSON.parse(JSON.stringify(dataFull)); +const dataWithMenu = { ...dataFull, mega_menu: dataMegaMenu }; + +const dataCore = JSON.parse(JSON.stringify(dataWithMenu)); delete dataCore.login_box; delete dataCore.site_name; delete dataCore.banner_top; diff --git a/src/website/src/pages/ec/components/navigation/menu/demo/index.js b/src/website/src/pages/ec/components/navigation/menu/demo/index.js index ffd34b94486..2696a195954 100644 --- a/src/website/src/pages/ec/components/navigation/menu/demo/index.js +++ b/src/website/src/pages/ec/components/navigation/menu/demo/index.js @@ -1,8 +1,11 @@ import dataFull from '@ecl/specs-component-site-header/demo/data--ec'; +import dataMenu from '@ecl/specs-component-menu/demo/data--ec'; import template from '@ecl/twig-component-site-header/site-header.html.twig'; import { correctSvgPath } from '@ecl/website-utils'; -const dataCore = JSON.parse(JSON.stringify(dataFull)); +const dataWithMenu = { ...dataFull, menu: dataMenu }; + +const dataCore = JSON.parse(JSON.stringify(dataWithMenu)); delete dataCore.login_box; delete dataCore.site_name; delete dataCore.banner_top; diff --git a/src/website/src/pages/ec/components/site-wide/site-header/demo/index.js b/src/website/src/pages/ec/components/site-wide/site-header/demo/index.js index adc3caec630..fff70299c74 100644 --- a/src/website/src/pages/ec/components/site-wide/site-header/demo/index.js +++ b/src/website/src/pages/ec/components/site-wide/site-header/demo/index.js @@ -1,22 +1,25 @@ import dataFull from '@ecl/specs-component-site-header/demo/data--ec'; +import dataMegaMenu from '@ecl/specs-component-mega-menu/demo/data'; import template from '@ecl/twig-component-site-header/site-header.html.twig'; import { correctSvgPath } from '@ecl/website-utils'; +const dataWithMenu = { ...dataFull, mega_menu: dataMegaMenu }; + // Core -const dataCore = JSON.parse(JSON.stringify(dataFull)); +const dataCore = JSON.parse(JSON.stringify(dataWithMenu)); delete dataCore.login_box; delete dataCore.site_name; delete dataCore.banner_top; delete dataCore.cta_link; -dataCore.has_menu = false; +dataCore.has_menu = true; // Standardised -const dataStandardised = JSON.parse(JSON.stringify(dataFull)); +const dataStandardised = JSON.parse(JSON.stringify(dataWithMenu)); delete dataStandardised.login_box; dataStandardised.has_menu = true; // Harmonised -const dataHarmonised = JSON.parse(JSON.stringify(dataFull)); +const dataHarmonised = JSON.parse(JSON.stringify(dataWithMenu)); delete dataHarmonised.banner_top; dataHarmonised.has_menu = true; diff --git a/src/website/src/pages/eu/components/navigation/mega-menu/demo/index.js b/src/website/src/pages/eu/components/navigation/mega-menu/demo/index.js index 48307906593..3aba67595cb 100644 --- a/src/website/src/pages/eu/components/navigation/mega-menu/demo/index.js +++ b/src/website/src/pages/eu/components/navigation/mega-menu/demo/index.js @@ -1,8 +1,11 @@ import dataFull from '@ecl/specs-component-site-header/demo/data--eu'; +import dataMegaMenu from '@ecl/specs-component-mega-menu/demo/data'; import template from '@ecl/twig-component-site-header/site-header.html.twig'; import { correctSvgPath } from '@ecl/website-utils'; -const dataCore = JSON.parse(JSON.stringify(dataFull)); +const dataWithMenu = { ...dataFull, mega_menu: dataMegaMenu }; + +const dataCore = JSON.parse(JSON.stringify(dataWithMenu)); delete dataCore.login_box; delete dataCore.site_name; delete dataCore.banner_top; diff --git a/src/website/src/pages/eu/components/navigation/menu/demo/index.js b/src/website/src/pages/eu/components/navigation/menu/demo/index.js index 48307906593..f3a56680d93 100644 --- a/src/website/src/pages/eu/components/navigation/menu/demo/index.js +++ b/src/website/src/pages/eu/components/navigation/menu/demo/index.js @@ -1,8 +1,11 @@ import dataFull from '@ecl/specs-component-site-header/demo/data--eu'; +import dataMenu from '@ecl/specs-component-menu/demo/data--eu'; import template from '@ecl/twig-component-site-header/site-header.html.twig'; import { correctSvgPath } from '@ecl/website-utils'; -const dataCore = JSON.parse(JSON.stringify(dataFull)); +const dataWithMenu = { ...dataFull, menu: dataMenu }; + +const dataCore = JSON.parse(JSON.stringify(dataWithMenu)); delete dataCore.login_box; delete dataCore.site_name; delete dataCore.banner_top; diff --git a/src/website/src/pages/eu/components/site-wide/site-header/demo/index.js b/src/website/src/pages/eu/components/site-wide/site-header/demo/index.js index 7c50adb4aa3..9cf3fbed8e1 100644 --- a/src/website/src/pages/eu/components/site-wide/site-header/demo/index.js +++ b/src/website/src/pages/eu/components/site-wide/site-header/demo/index.js @@ -1,17 +1,20 @@ import dataFull from '@ecl/specs-component-site-header/demo/data--eu'; +import dataMenu from '@ecl/specs-component-menu/demo/data--eu'; import template from '@ecl/twig-component-site-header/site-header.html.twig'; import { correctSvgPath } from '@ecl/website-utils'; +const dataWithMenu = { ...dataFull, menu: dataMenu }; + // Core -const dataCore = JSON.parse(JSON.stringify(dataFull)); +const dataCore = JSON.parse(JSON.stringify(dataWithMenu)); delete dataCore.login_box; delete dataCore.site_name; delete dataCore.banner_top; delete dataCore.cta_link; -dataCore.has_menu = false; +dataCore.has_menu = true; // Harmonised -const dataHarmonised = JSON.parse(JSON.stringify(dataFull)); +const dataHarmonised = JSON.parse(JSON.stringify(dataWithMenu)); delete dataHarmonised.banner_top; dataHarmonised.has_menu = true; From 1591b7ff48972396626ea6686fe030097ec9ef98 Mon Sep 17 00:00:00 2001 From: Romain Emery Date: Thu, 28 Nov 2024 12:16:54 +0100 Subject: [PATCH 02/14] update indentation (#3721) Co-authored-by: planctus --- .../vanilla/components/ordered-list/ordered-list.scss | 2 +- src/themes/ec/variables/_list.scss | 8 ++++---- src/themes/eu/variables/_list.scss | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/implementations/vanilla/components/ordered-list/ordered-list.scss b/src/implementations/vanilla/components/ordered-list/ordered-list.scss index 59c198d7ad7..d4c4b4398b4 100644 --- a/src/implementations/vanilla/components/ordered-list/ordered-list.scss +++ b/src/implementations/vanilla/components/ordered-list/ordered-list.scss @@ -58,7 +58,7 @@ $list: null !default; // No marker .ecl-ordered-list--no-marker { list-style-type: none; - padding-inline-start: map.get($list, 'ordered', 'unstyled-sublist-padding'); + padding-inline-start: map.get($list, 'ordered', 'divider-sublist-padding'); .ecl-ordered-list { list-style-type: none; diff --git a/src/themes/ec/variables/_list.scss b/src/themes/ec/variables/_list.scss index b5e5d4e7300..10da28b37d3 100644 --- a/src/themes/ec/variables/_list.scss +++ b/src/themes/ec/variables/_list.scss @@ -6,17 +6,17 @@ $list: ( marker: disc, item-margin: var(--s-xl), item-padding: 0, - padding-start: var(--s-xl), + padding-start: var(--s-2xl), sublist-marker: circle, sublist-padding: 0, unstyled-sublist-padding: var(--s-xl), - divider-item-padding: var(--s-xl), + divider-item-padding: var(--s-3xl), ), ordered: ( - divider-item-padding: var(--s-xl), + divider-item-padding: var(--s-3xl), marker: decimal, item-margin: var(--s-xl), - padding-start: var(--s-xl), + padding-start: var(--s-3xl), sublist-marker: lower-latin, sublist-padding: 0, unstyled-sublist-padding: var(--s-xl), diff --git a/src/themes/eu/variables/_list.scss b/src/themes/eu/variables/_list.scss index 207a5b6321d..1109fb035e7 100644 --- a/src/themes/eu/variables/_list.scss +++ b/src/themes/eu/variables/_list.scss @@ -6,17 +6,17 @@ $list: ( marker: disc, item-margin: var(--s-l), item-padding: 0, - padding-start: var(--s-l), + padding-start: var(--s-xl), sublist-marker: circle, sublist-padding: 0, unstyled-sublist-padding: var(--s-l), - divider-item-padding: var(--s-l), + divider-item-padding: var(--s-2xl), ), ordered: ( - divider-item-padding: var(--s-l), + divider-item-padding: var(--s-2xl), marker: decimal, item-margin: var(--s-l), - padding-start: var(--s-l), + padding-start: var(--s-2xl), sublist-marker: lower-latin, sublist-padding: 0, unstyled-sublist-padding: var(--s-l), From 2af02ea3ec031f7ae5e7b11ae064fd0cd13208f4 Mon Sep 17 00:00:00 2001 From: Romain Emery Date: Wed, 4 Dec 2024 15:03:22 +0100 Subject: [PATCH 03/14] feat(button, link): add indicator - FRONT-4677 (#3714) --- .../twig/components/button/README.md | 1 + .../button/__snapshots__/button.test.js.snap | 41 ++++++ .../twig/components/button/button.html.twig | 86 +++++++----- .../twig/components/button/button.story.js | 62 ++++++--- .../twig/components/button/button.test.js | 28 ++++ .../twig/components/button/package.json | 3 +- .../twig/components/indicator/.npmignore | 2 + .../twig/components/indicator/README.md | 29 ++++ .../components/indicator/indicator.html.twig | 47 +++++++ .../twig/components/indicator/package.json | 27 ++++ .../twig/components/link/README.md | 1 + .../link/__snapshots__/link.test.js.snap | 35 +++++ .../twig/components/link/link.html.twig | 75 +++++----- .../twig/components/link/link.story.js | 34 +++++ .../twig/components/link/link.test.js | 25 ++++ .../twig/components/popover/popover.story.js | 37 +++++ .../site-header/site-header.html.twig | 3 +- .../components/button/button-print.scss | 11 +- .../vanilla/components/button/button.scss | 19 ++- .../vanilla/components/indicator/README.md | 1 + .../components/indicator/indicator-print.scss | 8 ++ .../vanilla/components/indicator/indicator.js | 128 ++++++++++++++++++ .../components/indicator/indicator.scss | 32 +++++ .../vanilla/components/indicator/package.json | 27 ++++ .../vanilla/components/link/link.scss | 19 ++- .../site-header/site-header-ec.scss | 5 + .../site-header/site-header-eu.scss | 11 +- src/presets/ec/package.json | 1 + src/presets/ec/src/ec-print.scss | 1 + src/presets/ec/src/ec.js | 1 + src/presets/ec/src/ec.scss | 3 + src/presets/eu/package.json | 1 + src/presets/eu/src/eu-print.scss | 1 + src/presets/eu/src/eu.js | 1 + src/presets/eu/src/eu.scss | 3 + 35 files changed, 709 insertions(+), 100 deletions(-) create mode 100644 src/implementations/twig/components/indicator/.npmignore create mode 100644 src/implementations/twig/components/indicator/README.md create mode 100644 src/implementations/twig/components/indicator/indicator.html.twig create mode 100644 src/implementations/twig/components/indicator/package.json create mode 100644 src/implementations/vanilla/components/indicator/README.md create mode 100644 src/implementations/vanilla/components/indicator/indicator-print.scss create mode 100644 src/implementations/vanilla/components/indicator/indicator.js create mode 100644 src/implementations/vanilla/components/indicator/indicator.scss create mode 100644 src/implementations/vanilla/components/indicator/package.json diff --git a/src/implementations/twig/components/button/README.md b/src/implementations/twig/components/button/README.md index 6bc20da7748..3eeccb53439 100644 --- a/src/implementations/twig/components/button/README.md +++ b/src/implementations/twig/components/button/README.md @@ -15,6 +15,7 @@ npm install --save @ecl/twig-component-button - **"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"** (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) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' diff --git a/src/implementations/twig/components/button/__snapshots__/button.test.js.snap b/src/implementations/twig/components/button/__snapshots__/button.test.js.snap index 9da7188975f..71eabf925df 100644 --- a/src/implementations/twig/components/button/__snapshots__/button.test.js.snap +++ b/src/implementations/twig/components/button/__snapshots__/button.test.js.snap @@ -152,6 +152,47 @@ exports[`Button CTA button - icon only renders correctly 1`] = ` `; +exports[`Button CTA button - with indicator renders correctly 1`] = ` + + + +`; + exports[`Button CTA renders correctly 1`] = `