refactor(Footer): create Actions & Sites sub components

eea · Feb 10, 2022 · 446840b · 446840b
1 parent 8b58d02
commit 446840b
Showing 1 changed file with 75 additions and 4 deletions.
diff --git a/src/customizations/components/theme/Footer/Footer.jsx b/src/customizations/components/theme/Footer/Footer.jsx
@@ -5,14 +5,26 @@
 
 import React, { Component } from 'react';
 import { Icon, Image, Grid, Container } from 'semantic-ui-react';
-import ThemeSites from './ThemeSites.js';
-import Actions from './Actions.js';
+import { Link } from 'react-router-dom';
+//import ThemeSites from './ThemeSites.js';
+//import Actions from './Actions.js';
 
 //import AbstractImg from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/abstract-visual.svg';
 //import EULogo from '../../../../../theme/themes/eea/assets/images/Footer/EULogo.png';
 import EIONETLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/EIONETLogo.png';
 import EEALogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/EEA-Logo-white.svg';
 
+import Logo1 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group.svg';
+import Logo2 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-3.svg';
+import Logo3 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-154.svg';
+import Logo4 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-95.svg';
+import Logo5 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-2.svg';
+import Logo6 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-98.svg';
+import Logo7 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-5.svg';
+import Logo8 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-96.svg';
+import Logo9 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-4.svg';
+import Logo10 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-1.svg';
+
 /**
  * Component to display the footer.
  * @function Footer
@@ -22,13 +34,37 @@ import EEALogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/
 
 class Footer extends Component {
   render() {
+    const actions = [
+      { link: '/#', title: 'CMS Login', copy: false },
+      { link: '/#', title: 'Sitemap', copy: false },
+      { link: '/#', title: 'Privacy', copy: false },
+      { link: '/#', title: 'Copyright', copy: true },
+    ];
+
+    const sites = [
+      { link: '/#', src: Logo1, alt: 'Biodiversity' },
+      { link: '/#', src: Logo2, alt: 'Climate and energy in the EU' },
+      { link: '/#', src: Logo3, alt: 'Copernicus in situ' },
+      {
+        link: '/#',
+        src: Logo4,
+        alt: 'Information platform for chemical monitoring',
+      },
+      { link: '/#', src: Logo5, alt: 'WISE freshwater' },
+      { link: '/#', src: Logo6, alt: 'Forest information system for europe' },
+      { link: '/#', src: Logo7, alt: 'Climate adapt' },
+      { link: '/#', src: Logo8, alt: 'Copernicus land monitoring service' },
+      { link: '/#', src: Logo9, alt: 'European industrial emissions portal' },
+      { link: '/#', src: Logo10, alt: 'WISE marine' },
+    ];
+
     return (
       <footer>
         <div className="visual">
           <Container>
             <div className="theme-sites">
               <p className="header">The EEA also contributes to</p>
-              <ThemeSites />
+              <Footer.Sites sites={sites}></Footer.Sites>
             </div>
             <div className="subfooter">
               <Grid>
@@ -89,7 +125,7 @@ class Footer extends Component {
                 </Grid.Column>
               </Grid>
               <Grid.Row>
-                <Actions />
+                <Footer.Actions actions={actions} />
               </Grid.Row>
             </div>
           </Container>
@@ -99,6 +135,41 @@ class Footer extends Component {
   }
 }
 
+Footer.Actions = class Actions extends Component {
+  render() {
+    return (
+      <div className="menu">
+        {this.props.actions &&
+          this.props.actions.map((action) => (
+            <a href={action.link}>
+              {action.copy && <>&copy;</>}
+              {action.title}
+            </a>
+          ))}
+      </div>
+    );
+  }
+};
+
+Footer.Sites = class Sites extends Component {
+  render() {
+    return (
+      <div className="logos">
+        <Grid columns={5}>
+          {this.props.sites &&
+            this.props.sites.map((site) => (
+              <Grid.Column className="logo">
+                <Link to={site.link}>
+                  <Image src={site.src} alt={site.alt}></Image>
+                </Link>
+              </Grid.Column>
+            ))}
+        </Grid>
+      </div>
+    );
+  }
+};
+
 /**
  * Property types.
  * @property {Object} propTypes Property types.