From 87f9017b1ffc464e85cadc5103b533b39cee95fc Mon Sep 17 00:00:00 2001
From: papegaill <a@bypopcorn.com>
Date: Tue, 29 Oct 2019 16:57:04 +0100
Subject: [PATCH] fix(site-header-harmonised): Add missing group class -
 TWIG-106 (#196)

---
 .../ec-component-site-header-harmonised/README.md    |  2 ++
 .../site-header-harmonised.test.js.snap              | 12 ++++++------
 .../site-header-harmonised.html.twig                 |  4 +++-
 .../site-header-harmonised.story.js                  |  2 ++
 .../site-header-harmonised.test.js                   |  2 ++
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/ec/packages/ec-component-site-header-harmonised/README.md b/src/ec/packages/ec-component-site-header-harmonised/README.md
index 895a6088f..0d332e979 100644
--- a/src/ec/packages/ec-component-site-header-harmonised/README.md
+++ b/src/ec/packages/ec-component-site-header-harmonised/README.md
@@ -10,6 +10,7 @@ npm install --save @ecl-twig/ec-component-site-header-harmonised
 
 ### Parameters
 
+- "group" (string) (default: 'group1'): 'group1' or 'group2'
 - "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
@@ -57,6 +58,7 @@ npm install --save @ecl-twig/ec-component-site-header-harmonised
 <!-- prettier-ignore -->
 ```twig
 {% include '@ecl-twig/ec-component-site-header-harmonised/site-header-harmonised.html.twig' with { 
+  group: 'group1', 
   bannerTop: 'Class name', 
   banner: 'Site name', 
   menu: true, 
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
index d76ea70c1..a61ebcd72 100644
--- 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
@@ -2,7 +2,7 @@
 
 exports[`EC - Site Header Harmonised Group 1 renders correctly 1`] = `
 <header
-  class="ecl-site-header-harmonised"
+  class="ecl-site-header-harmonised ecl-site-header-harmonised--group2"
   data-ecl-auto-init="SiteHeaderHarmonised"
 >
   <div
@@ -752,7 +752,7 @@ exports[`EC - Site Header Harmonised Group 1 renders correctly 1`] = `
 
 exports[`EC - Site Header Harmonised Group 1 renders correctly with extra attributes 1`] = `
 <header
-  class="ecl-site-header-harmonised"
+  class="ecl-site-header-harmonised ecl-site-header-harmonised--group2"
   data-ecl-auto-init="SiteHeaderHarmonised"
   data-test="data-test-value"
   data-test-1="data-test-value-1"
@@ -1504,7 +1504,7 @@ exports[`EC - Site Header Harmonised Group 1 renders correctly with extra attrib
 
 exports[`EC - Site Header Harmonised Group 1 renders correctly with extra class names 1`] = `
 <header
-  class="ecl-site-header-harmonised custom-class custom-class--test"
+  class="ecl-site-header-harmonised ecl-site-header-harmonised--group2 custom-class custom-class--test"
   data-ecl-auto-init="SiteHeaderHarmonised"
 >
   <div
@@ -2254,7 +2254,7 @@ exports[`EC - Site Header Harmonised Group 1 renders correctly with extra class
 
 exports[`EC - Site Header Harmonised Group 2 renders correctly 1`] = `
 <header
-  class="ecl-site-header-harmonised"
+  class="ecl-site-header-harmonised ecl-site-header-harmonised--group1"
   data-ecl-auto-init="SiteHeaderHarmonised"
 >
   <div
@@ -2786,7 +2786,7 @@ exports[`EC - Site Header Harmonised Group 2 renders correctly 1`] = `
 
 exports[`EC - Site Header Harmonised Group 2 renders correctly with extra attributes 1`] = `
 <header
-  class="ecl-site-header-harmonised"
+  class="ecl-site-header-harmonised ecl-site-header-harmonised--group1"
   data-ecl-auto-init="SiteHeaderHarmonised"
   data-test="data-test-value"
   data-test-1="data-test-value-1"
@@ -3320,7 +3320,7 @@ exports[`EC - Site Header Harmonised Group 2 renders correctly with extra attrib
 
 exports[`EC - Site Header Harmonised Group 2 renders correctly with extra class names 1`] = `
 <header
-  class="ecl-site-header-harmonised custom-class custom-class--test"
+  class="ecl-site-header-harmonised ecl-site-header-harmonised--group1 custom-class custom-class--test"
   data-ecl-auto-init="SiteHeaderHarmonised"
 >
   <div
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
index fc021fc00..13ebf00fb 100644
--- 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
@@ -2,6 +2,7 @@
 
 {#
   Parameters:
+    - "group" (string): 'group1' or 'group2'
     - "icon_file_path" (string) (default: ''): URL to icons file
     - "banner_top" (string): Class name
     - "banner" (string): Site name
@@ -65,6 +66,7 @@
 
 {# Default variables #}
 
+{% set _group = group|default('group1') %}
 {% set _logo = logo|default({}) %}
 {% set _language_selector = language_selector|default({}) %}
 {% set _login_box = login_box|default({}) %}
@@ -74,7 +76,7 @@
 {% set _logged = logged|default(false) %}
 {% set _menu = menu|default(false) %}
 {% set _extra_attributes = '' %}
-{% set _css_class = 'ecl-site-header-harmonised' %}
+{% set _css_class = 'ecl-site-header-harmonised ecl-site-header-harmonised--' ~ _group %}
 
 {% set _search_form = {
   text_input: {
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
index 7a841e370..cbbf6927b 100644
--- 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
@@ -14,6 +14,7 @@ storiesOf('Components/Site Headers/Harmonised', module)
   .add(
     'group 1',
     () => {
+      dataGroup1.group = 'group1';
       dataGroup1.logged = true;
       dataGroup1.icon_file_path = defaultSprite;
       dataGroup1.logo.src = logo;
@@ -26,6 +27,7 @@ storiesOf('Components/Site Headers/Harmonised', module)
   .add(
     'group 2',
     () => {
+      dataGroup2.group = 'group2';
       dataGroup2.icon_file_path = defaultSprite;
       dataGroup2.logo.src = logo;
       return siteHeaderHarmonised(dataGroup2);
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
index c33daf990..f87771254 100644
--- 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
@@ -8,6 +8,7 @@ describe('EC - Site Header Harmonised', () => {
   const render = params => renderTwigFileAsNode(template, params);
 
   describe('Group 1', () => {
+    dataGroup1.group = 'group1';
     test('renders correctly', () => {
       expect.assertions(1);
       return expect(render(dataGroup1)).resolves.toMatchSnapshot();
@@ -38,6 +39,7 @@ describe('EC - Site Header Harmonised', () => {
   });
 
   describe('Group 2', () => {
+    dataGroup1.group = 'group2';
     test('renders correctly', () => {
       expect.assertions(1);
       return expect(render(dataGroup2)).resolves.toMatchSnapshot();