Merge branch 'FRONT-4648-print' of https://github.com/ec-europa/europ…

…a-component-library into FRONT-4648-print
ec-europa · Nov 7, 2024 · 16de99c · 16de99c
2 parents 98fee80 + fadff09
commit 16de99c
Show file tree

Hide file tree

Showing 15 changed files with 791 additions and 862 deletions.
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "jest": "29.7.0",
     "jest-axe": "9.0.0",
     "jest-environment-jsdom": "29.7.0",
-    "lerna": "8.1.8",
+    "lerna": "8.1.9",
     "lerna-changelog": "2.2.0",
     "lint-staged": "15.2.10",
     "npm-run-all": "4.1.5",

diff --git a/src/implementations/twig/components/form-group/README.md b/src/implementations/twig/components/form-group/README.md
@@ -8,12 +8,12 @@ npm install --save @ecl/twig-component-form-group
 
 ### Parameters:
 
-- **"label"** (string) (default: '') - Label for the form group
 - **"input"** (object) (default: {
   ...,
   input_type: 'checkbox' || 'datepicker' || 'file' || 'radio' || 'range' || 'rating-field' || 'search' || 'select || 'text' || 'textarea'
   }) - Object of type input
 - **"disabled"** (boolean) (default: false)
+- **"hide_label"** (bool) (default: false): hide form element label, for screen reader only
 - **"invalid"** (boolean) (default: false)
 - **"invalid_icon"** (object of type "icon") (default: {})
 - **"required"** (boolean) (default: false)

diff --git a/src/implementations/twig/components/form-group/form-group.html.twig b/src/implementations/twig/components/form-group/form-group.html.twig
@@ -4,6 +4,7 @@
   Parameters:
   - "input" (object) default({}) Object of type input
   - "disabled" (boolean) (default: false)
+  - "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
@@ -25,6 +26,7 @@
 {# Common properties #}
 
 {% set _label = label|default('') %}
+{% set _hide_label = hide_label|default(false) %}
 {% set _disabled = disabled|default(false) %}
 {% set _invalid = invalid|default(false) %}
 {% set _required = required|default(false) %}
@@ -178,6 +180,7 @@
       id="{{ _id }}-label"
     {% endif %}
       class="{{- _label_class -}}
+      {{- _hide_label ? ' ecl-form-label--hidden' -}}
       {{- _invalid ? ' ecl-form-label--invalid' -}}
       {{- _disabled ? ' ecl-form-label--disabled' -}}"
     >

diff --git a/src/implementations/twig/components/form-group/form-group.story.js b/src/implementations/twig/components/form-group/form-group.story.js
@@ -29,7 +29,7 @@ const dataStandaloneCheckbox = {
 
 const getArgs = (data) => {
   const args = {
-    show_label: true,
+    hide_label: false,
     show_helper: true,
     show_error: true,
     invalid: data.invalid || false,
@@ -102,9 +102,6 @@ const prepareData = (data, args) => {
   Object.assign(clone, args);
   correctPaths(clone);
 
-  if (!args.show_label) {
-    clone.label = '';
-  }
   if (!args.show_error) {
     clone.invalid_text = '';
   }
@@ -119,7 +116,7 @@ const prepareData = (data, args) => {
     clone.input.multiple_search = !!args.show_search;
   }
   if (clone.input.input_type === 'checkbox') {
-    if (clone.input.standalone && !args.show_label) {
+    if (clone.input.standalone && args.hide_label) {
       clone.input.items[0].required_text = args.required_text;
       clone.input.items[0].label_aria_required = clone.label_aria_required;
       clone.input.items[0].optional_text = args.optional_text;
@@ -184,7 +181,7 @@ StandaloneCheckbox.storyName = 'Checkbox';
 StandaloneCheckbox.args = {
   ...getArgs(dataStandaloneCheckbox),
   show_helper: false,
-  show_label: false,
+  hide_label: true,
 };
 StandaloneCheckbox.argTypes = getArgTypes(dataStandaloneCheckbox, 'group');
 StandaloneCheckbox.parameters = {

diff --git a/src/implementations/vanilla/components/form-group/form-group.scss b/src/implementations/vanilla/components/form-group/form-group.scss
@@ -3,6 +3,7 @@
  */
 
 @use 'sass:map';
+@use '@ecl/vanilla-utility-screen-reader/screen-reader';
 
 // Exposed variables
 $theme: null !default;
@@ -67,8 +68,15 @@ $form-group: null !default;
   color: var(--c-er);
 }
 
-.ecl-form-label + {
-  *:not(.ecl-help-block, .ecl-feedback-message) {
-    margin-top: var(--s-xs);
-  }
+.ecl-form-label--hidden {
+  @include screen-reader.sr-only;
+}
+
+.ecl-form-label.ecl-form-label--hidden + * {
+  margin-top: 0;
+}
+
+.ecl-form-label:not(.ecl-form-label--hidden)
+  + *:not(.ecl-help-block, .ecl-feedback-message) {
+  margin-top: var(--s-xs);
 }
diff --git a/src/implementations/vanilla/components/form-group/package.json b/src/implementations/vanilla/components/form-group/package.json
@@ -6,6 +6,9 @@
   "description": "ECL Form Group",
   "style": "form-group.scss",
   "sass": "form-group.scss",
+  "dependencies": {
+    "@ecl/vanilla-utility-screen-reader": "4.8.1"
+  },
   "publishConfig": {
     "access": "public"
   },

diff --git a/src/playground/addons/story-utils/index.js b/src/playground/addons/story-utils/index.js
@@ -155,13 +155,13 @@ export const getIconControls = (data, icons, mapping) => {
 
 export const getFormControls = (data, type) => {
   const argTypes = {};
-  argTypes.show_label = {
-    name: 'label',
+  argTypes.hide_label = {
+    name: 'hide label',
     type: 'boolean',
-    description: `Show ${type} label`,
+    description: `Hide ${type} label on screen, keeping it only for screen readers`,
     table: {
       type: { summary: 'boolean' },
-      defaultValue: { summary: true },
+      defaultValue: { summary: false },
       category: 'Optional',
     },
   };
@@ -234,7 +234,6 @@ export const getFormControls = (data, type) => {
       defaultValue: { summary: '' },
       category: 'Content',
     },
-    if: { arg: 'show_label' },
   };
   argTypes.helper_text = {
     name: 'helper text',

diff --git a/src/playground/addons/storybook-addon-code/package.json b/src/playground/addons/storybook-addon-code/package.json
@@ -6,10 +6,10 @@
   "private": true,
   "dependencies": {
     "@ecl/builder": "4.8.1",
-    "@storybook/components": "8.3.6",
-    "@storybook/manager-api": "8.3.6",
-    "@storybook/preview-api": "8.3.6",
-    "@storybook/theming": "8.3.6",
+    "@storybook/components": "8.4.2",
+    "@storybook/manager-api": "8.4.2",
+    "@storybook/preview-api": "8.4.2",
+    "@storybook/theming": "8.4.2",
     "html-entities": "2.5.2",
     "js-beautify": "1.15.1",
     "prop-types": "15.8.1",

diff --git a/src/playground/addons/storybook-addon-notes/package.json b/src/playground/addons/storybook-addon-notes/package.json
@@ -7,8 +7,8 @@
   "dependencies": {
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
-    "@storybook/manager-api": "8.3.6",
-    "@storybook/preview-api": "8.3.6",
+    "@storybook/manager-api": "8.4.2",
+    "@storybook/preview-api": "8.4.2",
     "he": "1.2.0",
     "marked": "10.0.0",
     "prismjs": "1.29.0",

diff --git a/src/playground/addons/storybook-addon-system-switcher/package.json b/src/playground/addons/storybook-addon-system-switcher/package.json
@@ -9,9 +9,9 @@
   ],
   "dependencies": {
     "@ecl/builder": "4.8.1",
-    "@storybook/components": "8.3.6",
-    "@storybook/manager-api": "8.3.6",
-    "@storybook/preview-api": "8.3.6",
+    "@storybook/components": "8.4.2",
+    "@storybook/manager-api": "8.4.2",
+    "@storybook/preview-api": "8.4.2",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   }

diff --git a/src/playground/ec/package.json b/src/playground/ec/package.json
@@ -15,18 +15,18 @@
     "@babel/preset-react": "7.25.9",
     "@babel/runtime": "7.26.0",
     "@iframe-resizer/child": "5.3.2",
-    "@storybook/addon-a11y": "8.3.6",
+    "@storybook/addon-a11y": "8.4.2",
     "@storybook/addon-cssresources": "6.2.9",
-    "@storybook/addon-essentials": "8.3.6",
-    "@storybook/addon-links": "8.3.6",
-    "@storybook/builder-webpack5": "8.3.6",
-    "@storybook/cli": "8.3.6",
-    "@storybook/html": "8.3.6",
-    "@storybook/html-webpack5": "8.3.6",
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-links": "8.4.2",
+    "@storybook/builder-webpack5": "8.4.2",
+    "@storybook/cli": "8.4.2",
+    "@storybook/html": "8.4.2",
+    "@storybook/html-webpack5": "8.4.2",
     "babel-loader": "9.2.1",
     "browser-update": "3.3.55",
     "buffer": "6.0.3",
-    "core-js": "3.38.1",
+    "core-js": "3.39.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "storybook-dark-mode": "4.0.2",

diff --git a/src/playground/eu/package.json b/src/playground/eu/package.json
@@ -15,18 +15,18 @@
     "@babel/preset-react": "7.25.9",
     "@babel/runtime": "7.26.0",
     "@iframe-resizer/child": "5.3.2",
-    "@storybook/addon-a11y": "8.3.6",
+    "@storybook/addon-a11y": "8.4.2",
     "@storybook/addon-cssresources": "6.2.9",
-    "@storybook/addon-essentials": "8.3.6",
-    "@storybook/addon-links": "8.3.6",
-    "@storybook/builder-webpack5": "8.3.6",
-    "@storybook/cli": "8.3.6",
-    "@storybook/html": "8.3.6",
-    "@storybook/html-webpack5": "8.3.6",
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-links": "8.4.2",
+    "@storybook/builder-webpack5": "8.4.2",
+    "@storybook/cli": "8.4.2",
+    "@storybook/html": "8.4.2",
+    "@storybook/html-webpack5": "8.4.2",
     "babel-loader": "9.2.1",
     "browser-update": "3.3.55",
     "buffer": "6.0.3",
-    "core-js": "3.38.1",
+    "core-js": "3.39.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "storybook-dark-mode": "4.0.2",

diff --git a/src/tools/builder/package.json b/src/tools/builder/package.json
@@ -15,7 +15,7 @@
     "@babel/eslint-parser": "7.25.9",
     "@babel/preset-env": "7.26.0",
     "@babel/runtime": "7.26.0",
-    "@rollup/plugin-replace": "5.0.7",
+    "@rollup/plugin-replace": "6.0.1",
     "autoprefixer": "10.4.20",
     "browser-sync": "3.0.3",
     "commander": "12.1.0",
@@ -25,13 +25,13 @@
     "postcss": "8.4.45",
     "postcss-banner": "4.0.1",
     "postcss-input-range": "5.0.0",
-    "rollup": "4.24.2",
+    "rollup": "4.24.4",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-commonjs": "10.1.0",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-svg": "2.0.0",
     "rollup-plugin-uglify": "6.0.4",
-    "sass": "1.80.4"
+    "sass": "1.80.6"
   },
   "engines": {
     "node": ">=18.12.0"

diff --git a/src/website/package.json b/src/website/package.json
@@ -26,7 +26,7 @@
     "@mdx-js/react": "3.1.0",
     "classnames": "2.5.1",
     "clipboard": "2.0.11",
-    "core-js": "3.38.1",
+    "core-js": "3.39.0",
     "deepmerge": "4.3.1",
     "html-entities": "2.5.2",
     "html-react-parser": "3.0.16",
@@ -74,7 +74,7 @@
     "html-webpack-plugin": "5.6.3",
     "interpolate-html-plugin": "4.0.0",
     "jsdoc": "4.0.4",
-    "mini-css-extract-plugin": "2.9.1",
+    "mini-css-extract-plugin": "2.9.2",
     "netlify-cms-proxy-server": "1.3.24",
     "node-polyfill-webpack-plugin": "2.0.1",
     "postcss": "8.4.45",
@@ -89,8 +89,8 @@
     "remark-gfm": "1.0.0",
     "remark-unwrap-images": "2.1.0",
     "rimraf": "6.0.1",
-    "sass": "1.80.4",
-    "sass-loader": "16.0.2",
+    "sass": "1.80.6",
+    "sass-loader": "16.0.3",
     "serve": "14.2.4",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",