feat(footers): Adding EC logo to all the footers - FRONT-3224 (#2222)

* feat(footers): Adding EC logo to all the footer - front-3224 * feat(footers): Adding 24 svg, EC demoed in all the footers - front-3224 * feat(footers): Fixing selector in footer-core - front-3224 * feat(footers): Logo sizes for harmonised - front-3224 * feat(footers): Logo, adding control - front-3224
ec-europa · Oct 11, 2021 · db2d1d0 · db2d1d0 · github-actions · Oct 11, 2021
1 parent 4d8eebd
commit db2d1d0
Show file tree

Hide file tree

Showing 48 changed files with 2,632 additions and 279 deletions.
diff --git a/src/implementations/twig/components/footer-core/README.md b/src/implementations/twig/components/footer-core/README.md
@@ -10,7 +10,7 @@ npm install --save @ecl/twig-component-footer-core
 
 - **"rows"** (array of objects) (default: [])
   - "section_class_name" (optional) (string) (default: '')
-  - "logo" (EU only)
+  - "logo"
     - "alt" (string) alt attribute for the logo link
     - "path" (string) logo link path
     - "language" (string) Language code
@@ -35,59 +35,59 @@ npm install --save @ecl/twig-component-footer-core
 
 <!-- prettier-ignore -->
 ```twig
-{% include '@ecl/footer-core/footer-core.html.twig' with { 
-  sections: [ 
-    { 
-      title: { 
-        link: { 
-          label: 'European Commission website', 
-          path: '#', 
-        }, 
-      }, 
-      description: 
-        'This site is managed by the Directorate-General for Communication', 
-    }, 
-    { 
-      section_class_name: 'ecl-footer-core__section--separator', 
-      links: [ 
-        { 
-          link: { 
-            label: 'Standalone link', 
-            path: 'http://google.com', 
-          }, 
-        }, 
-        ... 
-      ], 
-      list_class_name: 'ecl-footer-core__list--columns', 
-    }, 
+{% include '@ecl/footer-core/footer-core.html.twig' with {
+  sections: [
+    {
+      title: {
+        link: {
+          label: 'European Commission website',
+          path: '#',
+        },
+      },
+      description:
+        'This site is managed by the Directorate-General for Communication',
+    },
+    {
+      section_class_name: 'ecl-footer-core__section--separator',
+      links: [
+        {
+          link: {
+            label: 'Standalone link',
+            path: 'http://google.com',
+          },
+        },
+        ...
+      ],
+      list_class_name: 'ecl-footer-core__list--columns',
+    },
     {  
-      links: [ 
-        { 
-          link: { 
-            label: 'Follow the European Commission on social media', 
-            path: '/example', 
-            icon_position: 'after', 
-            }, 
-            icon: { 
-              path: '/path-to-the-icon-file', 
-              name: 'external', 
-            }, 
-          }, 
-        }, 
-        ... 
-      ], 
-    }, 
-    { 
-      links: [ 
-        { 
-          link: { 
-            label: 'Language policy', 
-            path: '/example', 
-          }, 
-        }, 
-        ... 
-      ], 
-    }, 
-  ], 
+      links: [
+        {
+          link: {
+            label: 'Follow the European Commission on social media',
+            path: '/example',
+            icon_position: 'after',
+            },
+            icon: {
+              path: '/path-to-the-icon-file',
+              name: 'external',
+            },
+          },
+        },
+        ...
+      ],
+    },
+    {
+      links: [
+        {
+          link: {
+            label: 'Language policy',
+            path: '/example',
+          },
+        },
+        ...
+      ],
+    },
+  ],
 } %}
 ```
diff --git a/src/implementations/twig/components/footer-core/__snapshots__/footer-core.test.js.snap b/src/implementations/twig/components/footer-core/__snapshots__/footer-core.test.js.snap
@@ -17,6 +17,18 @@ exports[`Footer Core EC default renders correctly 1`] = `
           <div
             class="ecl-footer-core__section"
           >
+            <a
+              aria-label="European Commission"
+              class="ecl-link ecl-link--standalone ecl-footer-core__logo-link"
+              href="/example"
+            >
+              <img
+                alt="European Commission logo"
+                class="ecl-footer-core__logo-image-desktop"
+                src="/logo-ec.svg"
+                title="European Commission"
+              />
+            </a>
             <h2
               class="ecl-footer-core__title"
             >
@@ -351,6 +363,18 @@ exports[`Footer Core EC default renders correctly with extra attributes 1`] = `
           <div
             class="ecl-footer-core__section"
           >
+            <a
+              aria-label="European Commission"
+              class="ecl-link ecl-link--standalone ecl-footer-core__logo-link"
+              href="/example"
+            >
+              <img
+                alt="European Commission logo"
+                class="ecl-footer-core__logo-image-desktop"
+                src="/logo-ec.svg"
+                title="European Commission"
+              />
+            </a>
             <h2
               class="ecl-footer-core__title"
             >
@@ -683,6 +707,18 @@ exports[`Footer Core EC default renders correctly with extra class names 1`] = `
           <div
             class="ecl-footer-core__section"
           >
+            <a
+              aria-label="European Commission"
+              class="ecl-link ecl-link--standalone ecl-footer-core__logo-link"
+              href="/example"
+            >
+              <img
+                alt="European Commission logo"
+                class="ecl-footer-core__logo-image-desktop"
+                src="/logo-ec.svg"
+                title="European Commission"
+              />
+            </a>
             <h2
               class="ecl-footer-core__title"
             >
@@ -1023,13 +1059,13 @@ exports[`Footer Core EU default renders correctly 1`] = `
               <img
                 alt="European Union logo"
                 class="ecl-footer-core__logo-image-mobile"
-                src=""
+                src="/logo-mobile-eu.svg"
                 title="European Union"
               />
               <img
                 alt="European Union logo"
                 class="ecl-footer-core__logo-image-desktop"
-                src=""
+                src="/logo-eu.svg"
                 title="European Union"
               />
             </a>
@@ -1478,13 +1514,13 @@ exports[`Footer Core EU default renders correctly with extra attributes 1`] = `
               <img
                 alt="European Union logo"
                 class="ecl-footer-core__logo-image-mobile"
-                src=""
+                src="/logo-mobile-eu.svg"
                 title="European Union"
               />
               <img
                 alt="European Union logo"
                 class="ecl-footer-core__logo-image-desktop"
-                src=""
+                src="/logo-eu.svg"
                 title="European Union"
               />
             </a>
@@ -1931,13 +1967,13 @@ exports[`Footer Core EU default renders correctly with extra class names 1`] = `
               <img
                 alt="European Union logo"
                 class="ecl-footer-core__logo-image-mobile"
-                src=""
+                src="/logo-mobile-eu.svg"
                 title="European Union"
               />
               <img
                 alt="European Union logo"
                 class="ecl-footer-core__logo-image-desktop"
-                src=""
+                src="/logo-eu.svg"
                 title="European Union"
               />
             </a>

diff --git a/src/implementations/twig/components/footer-core/footer-core.html.twig b/src/implementations/twig/components/footer-core/footer-core.html.twig
@@ -3,11 +3,11 @@
 {#
   Parameters:
   - "rows" (array of objects) (default: [])
-    - "logo" (EU only)
+    - "logo"
       - "alt" (string) alt attribute for the logo link
       - "path" (string) logo link path
       - "language" (string) Language code
-      - "src_mobile" (string) Path the mobile logo
+      - "src_mobile" (string) Path the mobile logo (only for EU)
       - "src_desktop" (string) Path to the desktop logo
     - "title" (optional) (string) OR (object with Link component in property)
     - "title_with_separator" (optional) (bolean) (default: false)
@@ -67,6 +67,7 @@
           {# logo (EU) #}
           {% if _sections.logo is defined and _sections.logo is not empty %}
             {% set _label %}
+            {% if _sections.logo.src_mobile is defined and _sections.logo.src_mobile is not empty %}
               <img
                 {% if _sections.logo.alt is defined and _sections.logo.alt is not empty %}
                 alt="{{ _sections.logo.alt }}"
@@ -75,6 +76,7 @@
                 class="ecl-footer-core__logo-image-mobile"
                 src="{{ _sections.logo.src_mobile }}"
               />
+            {% endif %}
               <img
                 {% if _sections.logo.alt is defined and _sections.logo.alt is not empty %}
                 alt="{{ _sections.logo.alt }}"

diff --git a/src/implementations/twig/components/footer-core/footer-core.story.js b/src/implementations/twig/components/footer-core/footer-core.story.js
@@ -5,6 +5,7 @@ import getSystem from '@ecl/builder/utils/getSystem';
 
 import specsEc from '@ecl/specs-component-footer-core/demo/data--ec';
 import specsEu from '@ecl/specs-component-footer-core/demo/data--eu';
+import logoEc from '@ecl/resources-ec-logo/negative/logo-ec--en.svg';
 import logoEuMobile from '@ecl/resources-eu-logo/condensed-version/positive/logo-eu--en.svg';
 import logoEuDesktop from '@ecl/resources-eu-logo/standard-version/positive/logo-eu--en.svg';
 import footer from './footer-core.html.twig';
@@ -15,10 +16,11 @@ const demoData = system === 'eu' ? specsEu : specsEc;
 
 const prepareData = (data) => {
   correctSvgPath(data);
-
-  if (data.rows[0][0][0].logo) {
+  if (system === 'eu') {
     data.rows[0][0][0].logo.src_mobile = logoEuMobile;
     data.rows[0][0][0].logo.src_desktop = logoEuDesktop;
+  } else {
+    data.rows[0][0][0].logo.src_desktop = logoEc;
   }
 
   return data;
@@ -27,7 +29,12 @@ const prepareData = (data) => {
 export default {
   title: 'Components/Footers/Core',
   decorators: [withCode, withNotes],
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
+  },
 };
 
 export const Default = () => footer(prepareData(demoData));