change(footer): Footer updates 147837 #222

src/ui/Footer/Contact.jsx

@@ -1,30 +1,32 @@
 import React from 'react';
-import { Icon } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
-const Contact = ({ children, contacts, header, address }) =>
+const Contact = ({ children, contacts }) =>
   children?.length ? (
     children
   ) : (
     <div className="contact-block">
-      <p className="header">{header}</p>
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
-          <Link to={contact.link}>
-            <Icon className={contact.icon} size="big"></Icon>
+          <Link to={contact.link} className="bold">
             {contact.text}
           </Link>
+          {contact.children && (
+            <div className="subcontact">
+              {contact.children.map((child, index) => (
+                <Link to={child.link}>{child.text}</Link>
+              ))}
+            </div>
+          )}
         </div>
       ))}
-      {address && <p className="address">{address}</p>}
     </div>
   );
 
 Contact.propTypes = {
   contacts: PropTypes.array,
   header: PropTypes.string,
-  address: PropTypes.string,
 };
 
 export default Contact;

src/ui/Footer/Footer.jsx

@@ -24,7 +24,7 @@ const Footer = (props) => {
   const { children } = props;
   return (
     <footer>
-      <div className="wrapper">
+      <div className="footer-wrapper">
         <Container>{children}</Container>
       </div>
     </footer>

src/ui/Footer/Footer.stories.js

@@ -21,38 +21,37 @@ export default {
 
 const Template = (args) => (
   <Footer>
+    <Footer.SubFooter {...args} />
     <Footer.Header>{args.header}</Footer.Header>
     <Footer.Sites sites={args.sites} />
-    <Footer.SubFooter {...args} />
+    <Footer.Actions actions={args.actions} copyright={args.copyright} />
   </Footer>
 );
 
 export const Default = Template.bind({});
 Default.args = {
-  header: 'EEA information systems',
-  logosHeader: 'Managed by',
-  contactHeader: 'Contact Us',
+  header: 'Thematic information platforms',
   actions: [
-    { link: '/#', title: 'CMS Login', copy: false },
-    { link: '/#', title: 'Sitemap', copy: false },
-    { link: '/#', title: 'Privacy', copy: false },
-    { link: '/#', title: 'Copyright', copy: true },
+    { link: '/#', title: 'Privacy' },
+    { link: '/#', title: 'Sitemap' },
+    { link: '/#', title: 'CMS Login' },
   ],
+  copyright: [{ link: '/#', site: 'EEA' }],
   sites: [
     { link: '/#', src: Marine, alt: 'WISE marine' },
+    { link: '/#', src: Freshwater, alt: 'WISE freshwater' },
     { link: '/#', src: Bise, alt: 'Biodiversity' },
+    { link: '/#', src: Fise, alt: 'Forest information system for europe' },
     {
       link: '/#',
       src: ClimateHealth,
       alt: 'Information platform for chemical monitoring',
     },
-    { link: '/#', src: Industry, alt: 'European industrial emissions portal' },
-    { link: '/#', src: Insitu, alt: 'Copernicus in situ' },
-    { link: '/#', src: Freshwater, alt: 'WISE freshwater' },
-    { link: '/#', src: Fise, alt: 'Forest information system for europe' },
     { link: '/#', src: Cca, alt: 'Climate adapt' },
+    { link: '/#', src: Industry, alt: 'European industrial emissions portal' },
     { link: '/#', src: Energy, alt: 'Climate and energy in the EU' },
     { link: '/#', src: Copernicus, alt: 'Copernicus land monitoring service' },
+    { link: '/#', src: Insitu, alt: 'Copernicus in situ' },
   ],
   managedBy: [
     {
@@ -61,9 +60,9 @@ Default.args = {
       alt: 'EEA Logo',
       className: 'site logo',
       columnSize: {
-        mobile: 6,
-        tablet: 12,
-        computer: 5,
+        mobile: 5,
+        tablet: 4,
+        computer: 4,
       },
     },
     {
@@ -72,9 +71,9 @@ Default.args = {
       alt: 'EIONET Logo',
       className: 'eionet logo',
       columnSize: {
-        mobile: 6,
-        tablet: 12,
-        computer: 6,
+        mobile: 7,
+        tablet: 4,
+        computer: 4,
       },
     },
   ],
@@ -87,8 +86,15 @@ Default.args = {
     { name: 'rss', icon: 'ri-rss-fill', link: '/#' },
   ],
   contacts: [
-    { icon: 'ri-chat-1-line', text: 'Ask your question', link: '/#' },
-    { icon: 'ri-mail-line', text: 'Sign up to our newsletter', link: '/#' },
+    {
+      text: 'About us',
+      link: '/#',
+      children: [
+        { text: 'FAQs', link: '/#' },
+        { text: 'Careers', link: '/#' },
+      ],
+    },
+    { text: 'Contact us', link: '/#' },
+    { text: 'Sign up to our newsletter', link: '/#' },
   ],
-  address: 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00',
 };

src/ui/Footer/FooterActions.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Grid } from 'semantic-ui-react';
 
 const FooterActions = (props) => {
   if (props.children) {
@@ -8,13 +9,29 @@ const FooterActions = (props) => {
 
   return (
     <div className="menu">
-      {props.actions &&
-        props.actions.map((action, index) => (
-          <Link to={action.link} key={index}>
-            {action.copy && <>&copy;</>}
-            {action.title}
-          </Link>
-        ))}
+      <Grid>
+        <Grid.Column mobile={12} tablet={6} computer={6}>
+          <div className="actions">
+            {props.actions &&
+              props.actions.map((action, index) => (
+                <Link to={action.link} key={index}>
+                  {action.title}
+                </Link>
+              ))}
+          </div>
+        </Grid.Column>
+
+        <Grid.Column mobile={12} tablet={6} computer={6}>
+          <div className="copyright">
+            {props.copyright &&
+              props.copyright.map((copyright, index) => (
+                <Link to={copyright.link}>
+                  &copy; Copyright {new Date().getFullYear()} {copyright.site}
+                </Link>
+              ))}
+          </div>
+        </Grid.Column>
+      </Grid>
     </div>
   );
 };

src/ui/Footer/FooterHeader.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const FooterHeader = (props) => {
   return (
-    <div className="theme-sites mobile hidden">
+    <div className="theme-sites">
       <p className="header text-center">{props.children}</p>
     </div>
   );

src/ui/Footer/FooterSites.jsx

@@ -3,23 +3,35 @@ import { Grid, Image } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
 const Sites = (props) => {
+  const getLogoColumns = (logos) => {
+    let column = [];
+    for (let i = 0; i < logos.length; i += 2) {
+      const item = logos[i];
+      const nextItem = logos[i + 1];
+      column.push(
+        <Grid.Column className="logo" key={i}>
+          <a className="logo" href={item.link}>
+            <Image src={item.src} alt={item.alt}></Image>
+          </a>
+          <a className="logo" href={nextItem.link}>
+            <Image src={nextItem.src} alt={nextItem.alt}></Image>
+          </a>
+        </Grid.Column>,
+      );
+    }
+    return column;
+  };
+
   if (props.children) {
     return <div>{props.children}</div>;
   }
 
   //fallback to props
   return (
-    <div className="theme-sites mobile hidden">
+    <div className="theme-sites">
       <div className="logos">
-        <Grid columns={5}>
-          {props.sites &&
-            props.sites.map((site, index) => (
-              <Grid.Column className="logo" key={index}>
-                <a href={site.link}>
-                  <Image src={site.src} alt={site.alt}></Image>
-                </a>
-              </Grid.Column>
-            ))}
+        <Grid columns={5} stackable>
+          {getLogoColumns(props.sites)}
         </Grid>
       </div>
     </div>

src/ui/Footer/SubFooter.jsx

@@ -11,51 +11,55 @@ const SubFooter = (props) => {
   return (
     <div className={'subfooter'}>
       <Grid>
-        <Grid.Column mobile={12} tablet={5} computer={6}>
-          <div className="item">
-            <p className="header text-center logo-header">
-              {props.logosHeader}
-            </p>
+        {props.managedBy &&
+          props.managedBy.map((manager, index) => (
+            <Grid.Column
+              mobile={manager.columnSize.mobile}
+              tablet={manager.columnSize.tablet}
+              computer={manager.columnSize.computer}
+              key={index}
+              className="mobile hidden"
+            >
+              <div className="item">
+                <div className={manager.className}>
+                  <a href={manager.link}>
+                    <Image src={manager.src} alt={manager.alt}></Image>
+                  </a>
+                </div>
+              </div>
+            </Grid.Column>
+          ))}
 
-            <Grid>
-              {props.managedBy &&
-                props.managedBy.map((manager, index) => (
-                  <Grid.Column
-                    mobile={manager.columnSize.mobile}
-                    tablet={manager.columnSize.tablet}
-                    computer={manager.columnSize.computer}
-                    key={index}
-                  >
-                    <div className={manager.className}>
-                      <a href={manager.link}>
-                        <Image src={manager.src} alt={manager.alt}></Image>
-                      </a>
-                    </div>
-                  </Grid.Column>
-                ))}
-            </Grid>
-          </div>
-        </Grid.Column>
-        <Grid.Column
-          mobile={6}
-          tablet={2}
-          computer={2}
-          className="mobile hidden"
-        ></Grid.Column>
-        <Grid.Column mobile={12} tablet={5} computer={4}>
+        <Grid.Column mobile={12} tablet={4} computer={4}>
           <div className="item">
-            <Footer.Contact
-              contacts={props.contacts}
-              header={props.contactHeader}
-              address={props.address}
-            />
-            <Footer.Social social={props.social} />
+            <Footer.Contact contacts={props.contacts} />
           </div>
         </Grid.Column>
       </Grid>
+
       <Grid.Row>
-        <Footer.Actions actions={props.actions} />
+        <Footer.Social social={props.social} />
       </Grid.Row>
+
+      <Grid className="mobile only">
+        {props.managedBy &&
+          props.managedBy.map((manager, index) => (
+            <Grid.Column
+              mobile={manager.columnSize.mobile}
+              tablet={manager.columnSize.tablet}
+              computer={manager.columnSize.computer}
+              key={index}
+            >
+              <div className="item">
+                <div className={manager.className}>
+                  <a href={manager.link}>
+                    <Image src={manager.src} alt={manager.alt}></Image>
+                  </a>
+                </div>
+              </div>
+            </Grid.Column>
+          ))}
+      </Grid>
     </div>
   );
 };