change(footer): added managed by section as properties

- This way we can customize what to use and what classes and
  links should be applied to that section
- check if we have social otherwise the template crashes
- copied the eionet and eea svg and named them using the same
  lowercase pattern as the rest of the logo names

src/ui/Footer/Footer.stories.js

@@ -10,14 +10,16 @@ import Cca from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo
 import Copernicus from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/copernicus.svg';
 import Industry from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/industry.svg';
 import Marine from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/marine.svg';
+import Eionet from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eionet.svg';
+import EEA from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea.svg';
 
 export default {
   title: 'Layout/Footer',
   component: Footer,
   argTypes: {},
 };
 
-export const Template = (args) => (
+const Template = (args) => (
   <Footer>
     <Footer.Header>{args.header}</Footer.Header>
     <Footer.Sites sites={args.sites} />
@@ -52,6 +54,30 @@ Default.args = {
     { link: '/#', src: Energy, alt: 'Climate and energy in the EU' },
     { link: '/#', src: Copernicus, alt: 'Copernicus land monitoring service' },
   ],
+  managedBy: [
+    {
+      link: 'https://www.eea.europa.eu/',
+      src: EEA,
+      alt: 'EEA Logo',
+      className: 'site logo',
+      columnSize: {
+        mobile: 12,
+        tablet: 12,
+        computer: 5,
+      },
+    },
+    {
+      link: 'https://www.eionet.europa.eu/',
+      src: Eionet,
+      alt: 'EIONET Logo',
+      className: 'eionet logo',
+      columnSize: {
+        mobile: 12,
+        tablet: 12,
+        computer: 6,
+      },
+    },
+  ],
   social: [
     { name: 'twitter', icon: 'ri-twitter-fill', link: '/#' },
     { name: 'facebook', icon: 'ri-facebook-box-fill', link: '/#' },

src/ui/Footer/Social.jsx

@@ -9,7 +9,7 @@ const Social = (props) => {
 
   return (
     <div className="social">
-      {props.social.map((item, index) => (
+      {props.social?.map((item, index) => (
         <a href={item.link} aria-label={`${item.name} link`} key={index}>
           <Icon className={item.icon}></Icon>
         </a>

src/ui/Footer/SubFooter.jsx

@@ -3,16 +3,13 @@ import Footer from './Footer';
 
 import { Grid, Image } from 'semantic-ui-react';
 
-import EIONETLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/EionetFull.svg';
-import EEALogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/EEA-Logo-White-2.svg';
-
 const SubFooter = (props) => {
   if (props.children) {
     return <div>{props.children}</div>;
   }
 
   return (
-    <div className="subfooter">
+    <div className={'subfooter'}>
       <Grid>
         <Grid.Column mobile={12} tablet={5} computer={6}>
           <div className="item">
@@ -21,16 +18,20 @@ const SubFooter = (props) => {
             </p>
 
             <Grid>
-              <Grid.Column mobile={6} tablet={12} computer={5}>
-                <div className="site logo">
-                  <Image src={EEALogo} alt="EEA Logo"></Image>
-                </div>
-              </Grid.Column>
-              <Grid.Column mobile={6} tablet={12} computer={7}>
-                <div className="eionet logo">
-                  <Image src={EIONETLogo} alt="EIONET Logo"></Image>
-                </div>
-              </Grid.Column>
+              {props.managedBy &&
+                props.managedBy.map((manager, index) => (
+                  <Grid.Column
+                    mobile={manager.columnSize.mobile}
+                    tablet={manager.columnSize.tablet}
+                    computer={manager.columnSize.computer}
+                  >
+                    <div className={manager.className}>
+                      <a href={manager.link}>
+                        <Image src={manager.src} alt={manager.alt}></Image>
+                      </a>
+                    </div>
+                  </Grid.Column>
+                ))}
             </Grid>
           </div>
         </Grid.Column>