refactor(demo): Site Header Core, optional/mandatory knobs - FRONT-917 (

#379)
ec-europa · Mar 20, 2020 · fcdafa2 · fcdafa2
1 parent 77e07ae
commit fcdafa2
Show file tree

Hide file tree

Showing 5 changed files with 206 additions and 44 deletions.
diff --git a/src/ec/packages/ec-component-site-header-core/__snapshots__/site-header-core.test.js.snap b/src/ec/packages/ec-component-site-header-core/__snapshots__/site-header-core.test.js.snap
@@ -96,6 +96,7 @@ exports[`EC - Site Header Core Default renders correctly 1`] = `
           <form
             class="ecl-search-form ecl-site-header-core__search"
             data-ecl-search-form=""
+            id="search-form-id"
             role="search"
           >
             <div
@@ -110,7 +111,6 @@ exports[`EC - Site Header Core Default renders correctly 1`] = `
               <input
                 class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
                 id="search-input-id"
-                name="Search"
                 type="search"
               />
             </div>
@@ -675,6 +675,7 @@ exports[`EC - Site Header Core Default renders correctly when logged in 1`] = `
           <form
             class="ecl-search-form ecl-site-header-core__search"
             data-ecl-search-form=""
+            id="search-form-id"
             role="search"
           >
             <div
@@ -689,7 +690,6 @@ exports[`EC - Site Header Core Default renders correctly when logged in 1`] = `
               <input
                 class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
                 id="search-input-id"
-                name="Search"
                 type="search"
               />
             </div>
@@ -1224,6 +1224,7 @@ exports[`EC - Site Header Core Default renders correctly with extra attributes 1
           <form
             class="ecl-search-form ecl-site-header-core__search"
             data-ecl-search-form=""
+            id="search-form-id"
             role="search"
           >
             <div
@@ -1238,7 +1239,6 @@ exports[`EC - Site Header Core Default renders correctly with extra attributes 1
               <input
                 class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
                 id="search-input-id"
-                name="Search"
                 type="search"
               />
             </div>
@@ -1771,6 +1771,7 @@ exports[`EC - Site Header Core Default renders correctly with extra class names
           <form
             class="ecl-search-form ecl-site-header-core__search"
             data-ecl-search-form=""
+            id="search-form-id"
             role="search"
           >
             <div
@@ -1785,7 +1786,6 @@ exports[`EC - Site Header Core Default renders correctly with extra class names
               <input
                 class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
                 id="search-input-id"
-                name="Search"
                 type="search"
               />
             </div>
@@ -2318,6 +2318,7 @@ exports[`EC - Site Header Core Translated renders correctly 1`] = `
           <form
             class="ecl-search-form ecl-site-header-core__search"
             data-ecl-search-form=""
+            id="search-form-id"
             role="search"
           >
             <div
@@ -2332,7 +2333,6 @@ exports[`EC - Site Header Core Translated renders correctly 1`] = `
               <input
                 class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
                 id="search-input-id"
-                name="Recherche"
                 type="search"
               />
             </div>
@@ -2867,6 +2867,7 @@ exports[`EC - Site Header Core Translated renders correctly with extra attribute
           <form
             class="ecl-search-form ecl-site-header-core__search"
             data-ecl-search-form=""
+            id="search-form-id"
             role="search"
           >
             <div
@@ -2881,7 +2882,6 @@ exports[`EC - Site Header Core Translated renders correctly with extra attribute
               <input
                 class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
                 id="search-input-id"
-                name="Recherche"
                 type="search"
               />
             </div>
@@ -3414,6 +3414,7 @@ exports[`EC - Site Header Core Translated renders correctly with extra class nam
           <form
             class="ecl-search-form ecl-site-header-core__search"
             data-ecl-search-form=""
+            id="search-form-id"
             role="search"
           >
             <div
@@ -3428,7 +3429,6 @@ exports[`EC - Site Header Core Translated renders correctly with extra class nam
               <input
                 class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
                 id="search-input-id"
-                name="Recherche"
                 type="search"
               />
             </div>

diff --git a/src/ec/packages/ec-component-site-header-core/adapter.js b/src/ec/packages/ec-component-site-header-core/adapter.js
@@ -48,7 +48,6 @@ const adapter = initialData => {
   adaptedData.search_form = {
     text_input: {
       id: adaptedData.searchForm.textInputId,
-      name: adaptedData.searchForm.inputLabel,
       label: adaptedData.searchForm.inputLabel,
     },
     button: {

diff --git a/src/ec/packages/ec-component-site-header-core/ecl-site-header-core.html.twig b/src/ec/packages/ec-component-site-header-core/ecl-site-header-core.html.twig
@@ -71,7 +71,6 @@
 {% set _search_form = {
   text_input: {
     id: 'input-search',
-    name: 'search',
     label: 'search',
     extra_classes: 'ecl-search-form__text-input'
   },
@@ -86,7 +85,10 @@
     label: 'Search',
     extra_classes: 'ecl-search-form__button'
   },
-  extra_attributes: [{ name: 'data-ecl-search-form' }],
+  extra_attributes: [
+    { name: 'data-ecl-search-form' },
+    { name: 'id', value: 'search-form-id' }
+  ],
   extra_classes: 'ecl-site-header-core__search'
 }
 %}
@@ -119,7 +121,7 @@
 {% endif %}
 
 {% if search_form.text_input is defined and search_form.text_input is not empty %}
-  {% set _search_form = _search_form|merge({ text_input: _search_form.text_input|merge(search_form.text_input) }) %}
+  {% set _search_form = _search_form|merge({text_input: _search_form.text_input|merge(search_form.text_input) }) %}
 {% endif %}
 
 {% if search_form.button is defined and search_form.button is not empty %}

diff --git a/src/ec/packages/ec-component-site-header-core/site-header-core.story.js b/src/ec/packages/ec-component-site-header-core/site-header-core.story.js
@@ -1,8 +1,22 @@
 /* eslint-disable no-param-reassign */
-import merge from 'deepmerge';
 import { storiesOf } from '@storybook/html';
-import { withKnobs, button } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  button,
+  select,
+  text,
+  boolean,
+  object,
+} from '@storybook/addon-knobs';
 import { withNotes } from '@ecl-twig/storybook-addon-notes';
+import {
+  getExtraKnobs,
+  buttonLabels,
+  getLogoKnobs,
+  getLoginKnobs,
+  getLanguageSelectorKnobs,
+  getSearchFormKnobs,
+} from '@ecl-twig/story-utils';
 import withCode from '@ecl-twig/storybook-addon-code';
 
 import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg';
@@ -32,55 +46,97 @@ const frBtnHandler = () => {
   }
 };
 
+const prepareSiteHeaderCore = (data, lang) => {
+  data.logged = boolean('logged', data.logged, buttonLabels.states);
+  data.icon_file_path = select(
+    'icon_file_path',
+    [defaultSprite],
+    defaultSprite,
+    buttonLabels.required
+  );
+  if (lang === 'en') {
+    data.logo.src = select(
+      'logo.src',
+      [englishBanner],
+      englishBanner,
+      buttonLabels.required
+    );
+  } else {
+    data.logo.src = select(
+      'logo.src',
+      [frenchBanner],
+      frenchBanner,
+      buttonLabels.required
+    );
+  }
+  // Logo knobs
+  getLogoKnobs(data);
+  // Login box and login toggle knobs.
+  getLoginKnobs(data);
+  // Language selector knobs.
+  getLanguageSelectorKnobs(data);
+  // Search toggle.
+  data.search_toggle.label = text(
+    'search_toggle.label',
+    data.search_toggle.label,
+    buttonLabels.required
+  );
+  data.search_toggle.href = text(
+    'search_toggle.href',
+    data.search_toggle.href,
+    buttonLabels.required
+  );
+  // Search form.
+  getSearchFormKnobs(data);
+  // Language selector overlay.
+  data.language_selector.overlay = object(
+    'language_selector.overlay',
+    data.language_selector.overlay,
+    buttonLabels.required
+  );
+  // Extra classes and extra attributes.
+  getExtraKnobs(data);
+
+  return data;
+};
+
 storiesOf('Components/Site Headers/Core', module)
   .addDecorator(withKnobs)
   .addDecorator(withNotes)
   .addDecorator(withCode)
   .add(
     'default',
-    () =>
-      siteHeaderCore(
-        merge(enData, {
-          logo: {
-            src: frenchBanner,
-          },
-          icon_file_path: defaultSprite,
-          logged: false,
-        }),
-        button(btnLabel, enBtnHandler)
-      ),
+    () => {
+      button(btnLabel, enBtnHandler, buttonLabels.cases);
+      const dataStory = prepareSiteHeaderCore(enData, 'en');
+
+      return siteHeaderCore(dataStory);
+    },
     {
       notes: { markdown: notes, json: enData },
     }
   )
   .add(
     'logged in',
-    () =>
-      siteHeaderCore(
-        merge(englishData, {
-          logo: {
-            src: englishBanner,
-          },
-          icon_file_path: defaultSprite,
-          logged: true,
-        })
-      ),
+    () => {
+      enData.logged = true;
+      button(btnLabel, enBtnHandler, buttonLabels.cases);
+      const dataStory = prepareSiteHeaderCore(enData, 'en');
+
+      return siteHeaderCore(dataStory);
+    },
     {
       notes: { markdown: notes, json: englishData },
     }
   )
   .add(
     'translated',
-    () =>
-      siteHeaderCore(
-        merge(frData, {
-          logo: {
-            src: frenchBanner,
-          },
-          icon_file_path: defaultSprite,
-        }),
-        button(btnLabel, frBtnHandler)
-      ),
+    () => {
+      button(btnLabel, frBtnHandler, buttonLabels.cases);
+      const dataStory = prepareSiteHeaderCore(frData, 'en');
+
+      return siteHeaderCore(dataStory);
+    },
     {
       notes: { markdown: notes, json: frData },
     }