CDS-1154 Update footer to match CRDC

packages/bento-frontend/src/bento/globalFooterData.js

@@ -1,12 +1,16 @@
+import instagramIcon from '../assets/footer/Instgram_Logo.svg';
+import twitterIcon from '../assets/footer/Twitter_Logo.svg';
+import facebookIcon from '../assets/footer/Facebook_Logo.svg';
+import youtubeIcon from '../assets/footer/Youtube_Logo.svg';
+import linkedInIcon from '../assets/footer/LinkedIn_Logo.svg';
 import env from '../utils/env';
 // footerLogoImage ideal image size 310x80 px
 
 export default {
-  // footerLogoImage: 'https://raw.githubusercontent.com/cbiit/datacommons-assets/main/bento/images/icons/png/footerlogo.png',
-  // footerLogoAltText: 'Footer Logo',
-  footerLogoText: 'National Cancer Institute',
-  footerLogoSubText: 'at the National Institutes of Health',
-  footerLogoHyperlink: 'https://cancer.gov/',
+  footerLogoImage: 'https://raw.githubusercontent.com/cbiit/datacommons-assets/main/bento/images/icons/png/footerlogo.png',
+  footerLogoAltText: 'Footer Logo',
+  footerLogoHyperlink: 'https://www.cancer.gov/',
+  footerStaticText: 'NIH … Turning Discovery Into Health®',
   version: env.REACT_APP_FE_VERSION,
   BEversion: env.REACT_APP_BE_VERSION,
   // A maximum of 3 Subsections (link_sections) are allowed
@@ -22,78 +26,121 @@ export default {
           link: '[email protected]',
         },
       ],
-    },
+      },
+      {
+        title: 'More Information',
+        items: [
+          {
+            text: 'Bento Home',
+            link: 'https://bento-tools.org/',
+          },
+          {
+            text: 'Bento Documentation',
+            link: 'https://cbiit.github.io/bento-docs/master/index.html',
+          },
+        ],
+      },
+      {
+        title: 'System Info',
+        systemInfoInLinkSection: true,
+        items: [
+          {
+            text: 'Release Notes',
+            link: 'https://github.com/CBIIT/bento-frontend/releases',
+          },
+          {
+            text: `FE Version: ${env.REACT_APP_FE_VERSION || '0.0.0'}`,
+          },
+          {
+            text: 'BE Version: 0.0.0',
+          },
+          {
+            text: 'System Info Page',
+            link: '/sysinfo',
+          },
+        ],
+      },
 
+      {
+        title: 'Policies',
+        items: [
+          {
+            text: 'Disclaimer',
+            link: 'https://www.cancer.gov/policies/disclaimer',
+          },
+          {
+            text: 'Accessibility',
+            link: 'https://www.cancer.gov/policies/accessibility',
+          },
+          {
+            text: 'FOIA',
+            link: 'https://www.cancer.gov/policies/foia',
+          },
+          {
+            text: 'HHS Vulnerability Disclosure',
+            link: 'https://www.hhs.gov/vulnerability-disclosure-policy/index.html',
+          },
+        ],
+      },
+  ],
+  followUs_links: [
     {
-      title: 'More Information',
-      items: [
-        {
-          text: 'Bento Home',
-          link: 'https://bento-tools.org/',
-        },
-        {
-          text: 'Bento Documentation',
-          link: 'https://cbiit.github.io/bento-docs/master/index.html',
-        },
-      ],
+      img: instagramIcon,
+      link: 'https://www.instagram.com/nationalcancerinstitute/',
+      description: 'instagramIcon',
     },
-
     {
-      title: 'System Info',
-      systemInfoInLinkSection: true,
-      items: [
-        {
-          text: 'Release Notes',
-          link: 'https://github.com/CBIIT/bento-frontend/releases',
-        },
-        {
-          text: `FE Version: ${env.REACT_APP_FE_VERSION || '0.0.0'}`,
-        },
-        {
-          text: 'BE Version: 0.0.0',
-        },
-        {
-          text: 'System Info Page',
-          link: '/sysinfo',
-        },
-      ],
+      img: twitterIcon,
+      link: 'https://twitter.com/thenci',
+      description: 'twitterIcon',
     },
-
     {
-      title: 'Policies',
-      items: [
-        {
-          text: 'Disclaimer',
-          link: 'https://www.cancer.gov/policies/disclaimer',
-        },
-        {
-          text: 'Accessibility',
-          link: 'https://www.cancer.gov/policies/accessibility',
-        },
-        {
-          text: 'FOIA',
-          link: 'https://www.cancer.gov/policies/foia',
-        },
-        {
-          text: 'HHS Vulnerability Disclosure',
-          link: 'https://www.hhs.gov/vulnerability-disclosure-policy/index.html',
-        },
-      ],
+      img: facebookIcon,
+      link: 'https://www.facebook.com/cancer.gov',
+      description: 'facebookIcon',
+    },
+    {
+      img: youtubeIcon,
+      link: 'https://www.youtube.com/NCIgov',
+      description: 'youtubeIcon',
+    },
+    {
+      img: linkedInIcon,
+      link: 'https://www.linkedin.com/company/nationalcancerinstitute/',
+      description: 'linkedInIcon',
+    },
+  ],
+  contact_links: [
+    {
+      text: 'Live chat',
+      link: 'https://livehelp.cancer.gov/',
+    },
+    {
+      text: '1-800-4-CANCER',
+      link: 'tel:1-800-4-CANCER',
+    },
+    {
+      text: '[email protected]',
+      link: 'mailto:[email protected]',
+    },
+    {
+      text: 'Site Feedback',
+      link: 'https://nci.az1.qualtrics.com/jfe/form/SV_aeLLobt6ZeGVn5I',
     },
   ],
   global_footer_links: [
     {
       text: 'U.S. Department of Health and Human Services',
       link: 'https://www.hhs.gov',
     },
-    {
-      text: 'National Institutes of Health',
-      link: 'https://www.nih.gov',
-    },
     {
       text: 'National Cancer Institute',
       link: 'https://www.cancer.gov',
     },
+    {
+      text: 'National Institutes of Health',
+      link: 'https://www.nih.gov',
+    },
     {
       text: 'USA.gov',
       link: 'https://www.usa.gov',

packages/footer/package.json

@@ -15,7 +15,8 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
-    "react-redux": "^7.2.1"
+    "react-redux": "^7.2.1",
+    "react-router-dom": "^5.1.2"
   },
   "dependencies": {
     "@bento-core/util": "^1.0.0",

packages/footer/src/FooterController.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useMediaQuery } from '@material-ui/core';
+import FooterDesktop from './FooterDesktop';
+import FooterTablet from './FooterTablet';
+import FooterMobile from './FooterMobile';
+
+const FooterController = ({ data = {} }) => {
+  const tablet = useMediaQuery('(min-width: 768px) and (max-width: 1024px)');
+  const mobile = useMediaQuery('(max-width: 767px)');
+
+  if (mobile) {
+    return <FooterMobile data={data} />;
+  }
+
+  if (tablet) {
+    return <FooterTablet data={data} />;
+  }
+
+  return <FooterDesktop data={data} />;
+};
+
+export default FooterController;