feat(site-headers): Render class name as a link - TWIG-104 (#198)

ec-europa · Oct 30, 2019 · 2f4f7c2 · 2f4f7c2
1 parent 95c5ea3
commit 2f4f7c2
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 49 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
@@ -15,7 +15,7 @@ npm install --save @ecl-twig/ec-component-site-header-harmonised
 - "menu" (boolean) (default: false): Whether the component includes a menu or not
 - "menu_label" (string) (default: false): The menu toggler label
 - "banner" (string): The site name
-- "banner_top" (string): Class name
+- "banner_top" (string) OR (object with Link component in property): Class name
 - "icon_file_path": (string) (default: ''): file containing the svg icons
 - "logo" (associative array) (default: predefined structure): Logo image settings. format:
   - "title" (string) (default: ''): Logo title attribute.

diff --git a/...ges/ec-component-site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap b/...ges/ec-component-site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap
@@ -148,7 +148,12 @@ exports[`EC - Site Header Harmonised Group 1 renders correctly 1`] = `
     <div
       class="ecl-container"
     >
-      Class name
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Class name
+      </a>
     </div>
   </div>
   <div
@@ -900,7 +905,12 @@ exports[`EC - Site Header Harmonised Group 1 renders correctly with extra attrib
     <div
       class="ecl-container"
     >
-      Class name
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Class name
+      </a>
     </div>
   </div>
   <div
@@ -1650,7 +1660,12 @@ exports[`EC - Site Header Harmonised Group 1 renders correctly with extra class
     <div
       class="ecl-container"
     >
-      Class name
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Class name
+      </a>
     </div>
   </div>
   <div

diff --git a/src/ec/packages/ec-component-site-header-harmonised/demo/data.js b/src/ec/packages/ec-component-site-header-harmonised/demo/data.js
@@ -2,13 +2,18 @@
 import specGroup1 from '@ecl/ec-specs-site-header-harmonised/demo/data--group1';
 import specGroup2 from '@ecl/ec-specs-site-header-harmonised/demo/data--group2';
 
+import { formatLink } from '@ecl-twig/data-utils';
+
 const defaultSprite = 'static/icons.svg';
 
 const logo = 'static/media/logo--en.svg';
 
 const adapter = initialData => {
   const adaptedData = JSON.parse(JSON.stringify(initialData));
   adaptedData.banner_top = adaptedData.bannerTop;
+  if (adaptedData.banner_top instanceof Object) {
+    adaptedData.banner_top = formatLink(adaptedData.banner_top);
+  }
   delete adaptedData.bannerTop;
   // Login toggle.
   if (adaptedData.loginToggle) {

diff --git a/src/ec/packages/ec-component-site-header-harmonised/package.json b/src/ec/packages/ec-component-site-header-harmonised/package.json
@@ -2,7 +2,7 @@
   "name": "@ecl-twig/ec-component-site-header-harmonised",
   "author": "European Commission",
   "license": "EUPL-1.1",
-  "version": "2.12.0",
+  "version": "2.14.0",
   "description": "ECL Twig - EC Site Header Harmonised",
   "publishConfig": {
     "access": "public"
@@ -13,10 +13,10 @@
     "@ecl-twig/ec-component-search-form": "2.11.2"
   },
   "devDependencies": {
-    "@ecl/ec-component-site-header-harmonised": "2.12.0",
-    "@ecl/ec-resources-icons": "2.12.0",
-    "@ecl/ec-resources-logo": "2.12.0",
-    "@ecl/ec-specs-site-header-harmonised": "2.12.0"
+    "@ecl/ec-component-site-header-harmonised": "2.14.0",
+    "@ecl/ec-resources-icons": "2.14.0",
+    "@ecl/ec-resources-logo": "2.14.0",
+    "@ecl/ec-specs-site-header-harmonised": "2.14.0"
   },
   "repository": {
     "type": "git",

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
@@ -4,7 +4,7 @@
   Parameters:
     - "group" (string): 'group1' or 'group2'
     - "icon_file_path" (string) (default: ''): URL to icons file
-    - "banner_top" (string): Class name
+    - "banner_top" (string) OR (object with Link component in property): Class name
     - "banner" (string): Site name
     - "logged" (boolean): Whether the user is logged in or not
     - "menu" (boolean): Whether the component includes a menu
@@ -273,7 +273,15 @@
   </div>
 {% if banner_top is defined and banner_top is not empty %}
   <div class="ecl-site-header-harmonised__banner-top">
-    <div class="ecl-container">{{ banner_top|raw }}</div>
+    <div class="ecl-container">
+      {%- if banner_top.link is defined and banner_top.link is not empty %}
+        {% include '@ecl-twig/ec-component-link/link.html.twig' with banner_top|merge({
+          link: banner_top.link|merge({ type: 'standalone'})
+        }) only %}
+      {% else %}
+        {{ banner_top|raw }}
+      {% endif -%}
+    </div>
   </div>
 {% endif %}
 {% if banner is defined and banner is not empty %}

diff --git a/src/ec/packages/ec-component-site-header-standardised/README.md b/src/ec/packages/ec-component-site-header-standardised/README.md
@@ -14,7 +14,7 @@ npm install --save @ecl-twig/ec-component-site-header-standardised
 - "menu" (boolean) (default: false): Whether the component includes a menu or not
 - "menu_label" (string): Menu toggler label
 - "banner" (string): The site name
-- "banner_top" (string): Class name
+- "banner_top" (string) OR (object with Link component in property): Class name
 - "icon_file_path": (string) (default: ''): file containing the svg icons
 - "logo" (associative array) (default: predefined structure): Logo image settings. format:
   - "title" (string) (default: ''): Logo title attribute.

diff --git a/...ec-component-site-header-standardised/__snapshots__/site-header-standardised.test.js.snap b/...ec-component-site-header-standardised/__snapshots__/site-header-standardised.test.js.snap
@@ -148,7 +148,12 @@ exports[`EC - Site Header Standardised Default renders correctly 1`] = `
     <div
       class="ecl-container"
     >
-      Class name
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Class name
+      </a>
     </div>
   </div>
   <div
@@ -928,7 +933,12 @@ exports[`EC - Site Header Standardised Default renders correctly when logged in
     <div
       class="ecl-container"
     >
-      Class name
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Class name
+      </a>
     </div>
   </div>
   <div
@@ -1680,7 +1690,12 @@ exports[`EC - Site Header Standardised Default renders correctly with extra attr
     <div
       class="ecl-container"
     >
-      Class name
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Class name
+      </a>
     </div>
   </div>
   <div
@@ -2430,7 +2445,12 @@ exports[`EC - Site Header Standardised Default renders correctly with extra clas
     <div
       class="ecl-container"
     >
-      Class name
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Class name
+      </a>
     </div>
   </div>
   <div
@@ -3180,7 +3200,12 @@ exports[`EC - Site Header Standardised Translated renders correctly 1`] = `
     <div
       class="ecl-container"
     >
-      Nom de la classe
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Nom de la classe
+      </a>
     </div>
   </div>
   <div
@@ -3932,7 +3957,12 @@ exports[`EC - Site Header Standardised Translated renders correctly with extra a
     <div
       class="ecl-container"
     >
-      Nom de la classe
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Nom de la classe
+      </a>
     </div>
   </div>
   <div
@@ -4682,7 +4712,12 @@ exports[`EC - Site Header Standardised Translated renders correctly with extra c
     <div
       class="ecl-container"
     >
-      Nom de la classe
+      <a
+        class="ecl-link ecl-link--standalone"
+        href="/example"
+      >
+        Nom de la classe
+      </a>
     </div>
   </div>
   <div

diff --git a/src/ec/packages/ec-component-site-header-standardised/demo/data.js b/src/ec/packages/ec-component-site-header-standardised/demo/data.js
@@ -2,6 +2,8 @@
 import specEnglishData from '@ecl/ec-specs-site-header-standardised/demo/data--en';
 import specFrenchData from '@ecl/ec-specs-site-header-standardised/demo/data--fr';
 
+import { formatLink } from '@ecl-twig/data-utils';
+
 const defaultSprite = 'static/icons.svg';
 
 const englishBanner = 'static/media/logo--en.svg';
@@ -10,6 +12,9 @@ const frenchBanner = 'static/media/logo--fr.svg';
 const adapter = initialData => {
   const adaptedData = JSON.parse(JSON.stringify(initialData));
   adaptedData.banner_top = adaptedData.bannerTop;
+  if (adaptedData.banner_top instanceof Object) {
+    adaptedData.banner_top = formatLink(adaptedData.banner_top);
+  }
   delete adaptedData.bannerTop;
   // Login toggle.
   adaptedData.login_toggle = {

diff --git a/src/ec/packages/ec-component-site-header-standardised/package.json b/src/ec/packages/ec-component-site-header-standardised/package.json
@@ -2,7 +2,7 @@
   "name": "@ecl-twig/ec-component-site-header-standardised",
   "author": "European Commission",
   "license": "EUPL-1.1",
-  "version": "2.12.0",
+  "version": "2.14.0",
   "description": "ECL Twig - EC Site Header Standardised",
   "publishConfig": {
     "access": "public"
@@ -13,10 +13,10 @@
     "@ecl-twig/ec-component-search-form": "2.11.2"
   },
   "devDependencies": {
-    "@ecl/ec-component-site-header-standardised": "2.12.0",
-    "@ecl/ec-resources-icons": "2.12.0",
-    "@ecl/ec-resources-logo": "2.12.0",
-    "@ecl/ec-specs-site-header-standardised": "2.12.0"
+    "@ecl/ec-component-site-header-standardised": "2.14.0",
+    "@ecl/ec-resources-icons": "2.14.0",
+    "@ecl/ec-resources-logo": "2.14.0",
+    "@ecl/ec-specs-site-header-standardised": "2.14.0"
   },
   "repository": {
     "type": "git",

diff --git a/src/ec/packages/ec-component-site-header-standardised/site-header-standardised.html.twig b/src/ec/packages/ec-component-site-header-standardised/site-header-standardised.html.twig
@@ -271,7 +271,15 @@
   </div>
 {% if banner_top is defined and banner_top is not empty %}
   <div class="ecl-site-header-standardised__banner-top">
-    <div class="ecl-container">{{ banner_top|raw }}</div>
+    <div class="ecl-container">
+    {%- if banner_top.link is defined and banner_top.link is not empty %}
+      {% include '@ecl-twig/ec-component-link/link.html.twig' with banner_top|merge({
+        link: banner_top.link|merge({ type: 'standalone'})
+      }) only %}
+    {% else %}
+      {{ banner_top|raw }}
+    {% endif -%}
+    </div>
   </div>
 {% endif %}
 {% if banner is defined and banner is not empty %}

diff --git a/src/ec/packages/ec-components/package.json b/src/ec/packages/ec-components/package.json
@@ -42,8 +42,8 @@
     "@ecl-twig/ec-component-select": "2.11.2",
     "@ecl-twig/ec-component-site-header": "2.11.2",
     "@ecl-twig/ec-component-site-header-core": "2.12.0",
-    "@ecl-twig/ec-component-site-header-standardised": "2.12.0",
-    "@ecl-twig/ec-component-site-header-harmonised": "2.12.0",
+    "@ecl-twig/ec-component-site-header-standardised": "2.14.0",
+    "@ecl-twig/ec-component-site-header-harmonised": "2.14.0",
     "@ecl-twig/ec-component-skip-link": "2.11.2",
     "@ecl-twig/ec-component-social-media-follow": "2.11.2",
     "@ecl-twig/ec-component-social-media-share": "2.11.2",