fix(standardised-footer): update markup - INNO-1832

src/systems/ec/ec-component/ec-component-footer-standardised/ec-component-footer-standardised.scss

@@ -51,8 +51,8 @@
     padding: 0;
   }
 
-  .ecl-footer-standardised__description--white {
-    color: #fff;
+  .ecl-footer-standardised__icon::before {
+    margin-right: map-get($ecl-spacing, 'xxs');
   }
 
   .ecl-footer-standardised__list-item {
@@ -65,6 +65,16 @@
     padding: 0;
   }
 
+  .ecl-footer-standardised__list-inline {
+    .ecl-footer-standardised__list-item {
+      margin-left: map-get($ecl-spacing, 'm');
+    }
+
+    .ecl-footer-standardised__list-item:first-child {
+      margin-left: 0;
+    }
+  }
+
   .ecl-footer-standardised__list-vertical
     .ecl-footer-standardised__list-item
     + .ecl-footer-standardised__list-item {

src/systems/ec/ec-component/ec-component-footer-standardised/ec-component-footer-standardised.twig

@@ -3,7 +3,12 @@
     <div class="ecl-row">
       <div class="ecl-col-md-4">
         <h2 class="ecl-footer-standardised__title">
-          Site name
+          <a
+            class="ecl-link ecl-link--standalone ecl-link--inverted"
+            href="../../example.html#"
+          >
+            Site name
+          </a>
         </h2>
         <p class="ecl-footer-standardised__description ecl-u-mt-xxs ecl-u-mt-md-l">
           This site is managed by the Directorate-General for "DG
@@ -17,22 +22,27 @@
           Contact us
         </h3>
         <p
-          class="ecl-footer-standardised__description ecl-footer-standardised__description--white"
+          class="ecl-footer-standardised__description"
         >
-          Contact information of the DG
+          <a
+            class="ecl-link ecl-link--standalone ecl-link--inverted"
+            href="../../example.html#"
+          >
+            Contact information of the DG
+          </a>
         </p>
         <h3
           class="ecl-footer-standardised__title ecl-footer-standardised__title--bordered ecl-u-mt-m ecl-u-mt-md-l"
         >
           Follow us on
         </h3>
-        <ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-u-ma-none">
+        <ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-u-ma-none ecl-footer-standardised__list-inline">
           <li class="ecl-footer-standardised__list-item">
             <a
               class="ecl-link ecl-link--standalone ecl-link--inverted"
               href="../../example.html#"
             >
-              <span class="ecl-icon ecl-icon--facebook"></span
+              <span class="ecl-icon ecl-icon--facebook ecl-footer-standardised__icon"></span
               ><span>Facebook</span>
             </a>
           </li>
@@ -41,7 +51,7 @@
               class="ecl-link ecl-link--standalone ecl-link--inverted"
               href="../../example.html#"
             >
-              <span class="ecl-icon ecl-icon--twitter"></span
+              <span class="ecl-icon ecl-icon--twitter ecl-footer-standardised__icon"></span
               ><span>Twitter</span>
             </a>
           </li>
@@ -50,7 +60,7 @@
               class="ecl-link ecl-link--standalone ecl-link--inverted"
               href="../../example.html#"
             >
-              <span class="ecl-icon ecl-icon--linkedin"></span
+              <span class="ecl-icon ecl-icon--linkedin ecl-footer-standardised__icon"></span
               ><span>Linkedin</span>
             </a>
           </li>
@@ -63,9 +73,14 @@
           About us
         </h3>
         <p
-          class="ecl-footer-standardised__description ecl-footer-standardised__description--white"
+          class="ecl-footer-standardised__description"
         >
-          Information about the DG
+          <a
+            class="ecl-link ecl-link--standalone ecl-link--inverted"
+            href="../../example.html#"
+          >
+            Information about the DG
+          </a>
         </p>
         <h3
           class="ecl-footer-standardised__title ecl-footer-standardised__title--bordered ecl-u-mt-m ecl-u-mt-md-l"
@@ -121,7 +136,7 @@
     <div class="ecl-row ecl-footer-standardised__bordered-row ecl-u-mt-l">
       <div class="ecl-col-md">
         <p
-          class="ecl-footer-standardised__description ecl-footer-standardised__description--white"
+          class="ecl-footer-standardised__description"
         >
           More information on:
         </p>