feat(page-header): add overlay for background image - FRONT-2886

src/implementations/twig/components/page-header-core/page-header-core.html.twig

@@ -11,7 +11,7 @@
     - "meta" (array) (default: []) Meta of header
     - "breadcrumb" (associative array) (default: '') Predefined structure compatible with EC Breadcrumb
     - "background_image_url (string) (default: '') Background image url
-    - "overlay" (string) (default: '') Optional overlay on top of background image (can be 'light', 'dark'). Only used on EC
+    - "overlay" (string) (default: '') Optional overlay on top of background image (can be 'light', 'dark')
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
         {

src/implementations/twig/components/page-header-core/page-header-core.story.js

@@ -15,9 +15,6 @@ const system = getSystem();
 
 const dataDefault = { ...demoContent };
 const dataBackgroundImage = { ...demoBackgroundImage };
-if (system === 'eu') {
-  delete dataBackgroundImage.overlay;
-}
 
 const getArgTypes = (data) => {
   const argTypes = {};
@@ -96,22 +93,21 @@ const getArgTypes = (data) => {
       },
     };
 
-    if (system === 'ec') {
-      argTypes.overlay = {
-        name: 'image overlay',
+    argTypes.overlay = {
+      name: 'image overlay',
+      type: 'select',
+      defaultValue: data.overlay,
+      description: 'Overlay on top on background image',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+        category: 'Content',
+      },
+      control: {
         type: 'select',
-        defaultValue: data.overlay,
-        description: 'Overlay on top on background image',
-        table: {
-          type: { summary: 'string' },
-          category: 'Content',
-        },
-        control: {
-          type: 'select',
-          options: ['none', 'dark', 'light'],
-        },
-      };
-    }
+        options: ['none', 'dark', 'light'],
+      },
+    };
   }
 
   return argTypes;
@@ -140,12 +136,10 @@ const prepareData = (data, args) => {
   data.meta = args.meta;
   data.background_image_url = args.background_image_url;
 
-  if (system === 'ec') {
-    if (args.overlay === 'none') {
-      delete data.overlay;
-    } else {
-      data.overlay = args.overlay;
-    }
+  if (args.overlay === 'none') {
+    delete data.overlay;
+  } else {
+    data.overlay = args.overlay;
   }
 
   correctSvgPath(data);

src/implementations/twig/components/page-header-standardised/page-header-standardised.html.twig

@@ -11,6 +11,7 @@
     - "meta" (array) (default: []) Meta of header
     - "breadcrumb" (associative array) (default: '') Predefined structure compatible with EC Breadcrumb
     - "background_image_url (string) (default: '') Background image url
+    - "overlay" (string) (default: '') Optional overlay on top of background image (can be 'light', 'dark')
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
         {
@@ -28,12 +29,17 @@
 {% set _breadcrumb = breadcrumb|default({}) %}
 {% set _css_class = 'ecl-page-header-standardised' %}
 {% set _background_image_url = background_image_url|default('') %}
+{% set _overlay = overlay|default('') %}
 {% set _extra_attributes = '' %}
 
 {# Internal logic - Process properties #}
 
 {% if _background_image_url and _background_image_url is not empty %}
   {% set _css_class = _css_class ~ ' ecl-page-header-standardised--image' %}
+
+  {% if _overlay is not empty %}
+    {% set _css_class = _css_class ~ ' ecl-page-header-standardised--overlay-' ~ _overlay %}
+  {% endif %}
 {% endif %}
 
 {% if extra_classes is defined and extra_classes is not empty %}

src/implementations/twig/components/page-header-standardised/page-header-standardised.story.js

@@ -15,9 +15,6 @@ const system = getSystem();
 
 const dataDefault = { ...demoContent };
 const dataBackgroundImage = { ...demoBackgroundImage };
-if (system === 'eu') {
-  delete dataBackgroundImage.overlay;
-}
 
 const getArgTypes = (data) => {
   const argTypes = {};
@@ -95,6 +92,22 @@ const getArgTypes = (data) => {
         category: 'Content',
       },
     };
+
+    argTypes.overlay = {
+      name: 'image overlay',
+      type: 'select',
+      defaultValue: 'none',
+      description: 'Overlay on top on background image',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+        category: 'Content',
+      },
+      control: {
+        type: 'select',
+        options: ['none', 'dark', 'light'],
+      },
+    };
   }
 
   return argTypes;
@@ -123,6 +136,12 @@ const prepareData = (data, args) => {
   data.meta = args.meta;
   data.background_image_url = args.background_image_url;
 
+  if (args.overlay === 'none') {
+    delete data.overlay;
+  } else {
+    data.overlay = args.overlay;
+  }
+
   correctSvgPath(data);
 
   return data;

src/implementations/vanilla/components/page-header-core/page-header-core-eu.scss

@@ -102,6 +102,7 @@
     background-size: cover;
     display: block;
     height: 10.875rem;
+    position: relative;
     width: 100%;
   }
 
@@ -128,3 +129,23 @@
     margin-top: map.get(theme.$spacing, 'xs');
   }
 }
+
+.ecl-page-header-core--overlay-dark {
+  .ecl-page-header-core__background::before {
+    background-color: rgba(0, 0, 0, 0.5);
+    content: '';
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+}
+
+.ecl-page-header-core--overlay-light {
+  .ecl-page-header-core__background::before {
+    background-color: rgba(0, 0, 0, 0.3);
+    content: '';
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+}

src/implementations/vanilla/components/page-header-standardised/page-header-standardised-ec.scss

@@ -94,6 +94,27 @@
     background-size: cover;
     display: block;
     height: 10.875rem;
+    position: relative;
+    width: 100%;
+  }
+}
+
+.ecl-page-header-standardised--overlay-dark {
+  .ecl-page-header-standardised__background::before {
+    background-color: rgba(0, 0, 0, 0.5);
+    content: '';
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+}
+
+.ecl-page-header-standardised--overlay-light {
+  .ecl-page-header-standardised__background::before {
+    background-color: rgba(0, 0, 0, 0.3);
+    content: '';
+    height: 100%;
+    position: absolute;
     width: 100%;
   }
 }

src/implementations/vanilla/components/page-header-standardised/page-header-standardised-eu.scss

@@ -102,6 +102,7 @@
     background-size: cover;
     display: block;
     height: 10.875rem;
+    position: relative;
     width: 100%;
   }
 
@@ -128,3 +129,23 @@
     margin-top: map.get(theme.$spacing, 'xs');
   }
 }
+
+.ecl-page-header-standardised--overlay-dark {
+  .ecl-page-header-standardised__background::before {
+    background-color: rgba(0, 0, 0, 0.5);
+    content: '';
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+}
+
+.ecl-page-header-standardised--overlay-light {
+  .ecl-page-header-standardised__background::before {
+    background-color: rgba(0, 0, 0, 0.3);
+    content: '';
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+}