Merge pull request #195 from scientist-softserv/194-footer-component-update

194 footer component update

Author: summer-cook

src/assets/img/thank-you.md

@@ -11,3 +11,4 @@ Our icons were sourced from the following:
 * [Twitter social badge icons created by Freepik - Flaticon](https://www.flaticon.com/free-icons/twitter-social-badge)
 * [Vimeo icons created by Md Tanvirul Haque - Flaticon](https://www.flaticon.com/free-icons/vimeo)
 * [Youtube icons created by Freepik - Flaticon](https://www.flaticon.com/free-icons/youtube)
+* [LinkedIn icons created by mohammed mahdi - Flaticon](https://www.flaticon.com/free-icons/mass-media)

src/assets/svg/LinkedIn.jsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+const LinkedIn = ({ height, fill }) => (
+  <svg
+    height={height}
+    width={height}
+    fill={fill}
+    viewBox='0 0 144 144'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d='M67.5 0h9c.4.1.7.2 1.1.2 10.8.8 21 3.8 30.3 9.4 19.1 11.4 30.9 28 35 50 .5 2.6.7 5.3 1.1 7.9v9c-.1.4-.2.7-.2 1.1-.9 12.3-4.8 23.7-11.7 34-11.5 17-27.3 27.5-47.6 31.3-2.7.5-5.4.8-8 1.1h-9c-.4-.1-.7-.2-1.1-.2-14.3-1.1-27.3-6.1-38.6-14.9-14.5-11.5-23.5-26.4-26.7-44.6-.5-2.6-.7-5.2-1.1-7.8v-9l.6-5.1c2.1-14.7 8-27.6 18-38.6C29.7 11.5 43.4 3.9 59.7 1.1 62.3.6 64.9.4 67.5 0zm41.8 107.6c0-.3.1-.5.1-.7 0-11.5.1-23.1-.1-34.6 0-2.1-.7-4.4-1.5-6.4-5.3-11.9-22.5-13.6-30.7-3.2-.3.4-.6.8-1 1.2-.1 0-.2-.1-.3-.1v-6.4H61v50.2h15.6V83.1c0-1.6 0-3.3.1-4.9.2-2.6 1.4-4.8 3.4-6.6 4.8-4.2 11.4-2.3 13 3.9.4 1.5.5 3.1.5 4.7v27.4h15.7zm-57.8 0V57.5H35.6v50.1h15.9zm-8-56.9c5 0 9-4 9.1-9 0-5-4-9-9-9.1-5 0-9 4-9 9s3.9 9 8.9 9.1z' />
+  </svg>
+)
+
+export default LinkedIn

src/components/Link/link.css

@@ -1,7 +1,4 @@
 .link-group-links {
 	color: #000000;
-	display: block;
-	font-size: 16px;
-	margin-bottom: 5px;
-	text-decoration: none;
+	font-size: 13px;
 }

src/components/SocialIcon/SocialIcon.jsx

@@ -7,6 +7,7 @@ import TikTok from '../../assets/svg/TikTok'
 import Twitter from '../../assets/svg/Twitter'
 import Vimeo from '../../assets/svg/Vimeo'
 import YouTube from '../../assets/svg/YouTube'
+import LinkedIn from '../../assets/svg/LinkedIn'
 import './social-icon.css'
 
 const iconsList = {
@@ -17,6 +18,7 @@ const iconsList = {
   twitter: (height, color) => <Twitter height={height} fill={color} />,
   vimeo: (height, color) => <Vimeo height={height} fill={color} />,
   youtube: (height, color) => <YouTube height={height} fill={color} />,
+  linkedin: (height, color) => <LinkedIn height={height} fill={color}/>,
 }
 
 const SocialIcon = ({ addClass, color, height, icon, url }) => (
@@ -29,7 +31,7 @@ SocialIcon.propTypes = {
   addClass: PropTypes.string,
   color: PropTypes.string,
   height: PropTypes.number,
-  icon: PropTypes.oneOf(['facebook', 'instagram', 'rss', 'tiktok', 'twitter', 'vimeo', 'youtube']).isRequired,
+  icon: PropTypes.oneOf(['facebook', 'instagram', 'rss', 'tiktok', 'twitter', 'vimeo', 'youtube', 'linkedin']).isRequired,
   url: PropTypes.string.isRequired,
 }
 

src/compounds/Footer/Footer.jsx

@@ -1,14 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import LinkGroup from '../LinkGroup/LinkGroup'
+import Link from '../../components/Link/Link'
 import SocialIcon from '../../components/SocialIcon/SocialIcon'
 
 const Footer = ({ companyName, sections, socials, color, ...props }) => (
-  <footer id='footer' className={`container-fluid bg-primary py-4 text-${color}`}>
+  <footer id='footer' className={`container-fluid bg-primary py-3 text-${color}`}>
     <div className='container'>
       <div className='row'>
         <div className='col-12 col-md-3 text-center text-md-start'>
-          <h5>© {companyName} {new Date().getFullYear()}</h5>
+          <h6>© {companyName} {new Date().getFullYear()}</h6>
+          <Link label='Legal Notices' href='/legal-notices' className={`text-${color} link-group-links text-decoration-none`}/>
         </div>
         <div
           className='col-12 col-md-7 d-flex flex-column flex-sm-row

src/compounds/LinkGroup/LinkGroup.jsx

@@ -12,7 +12,7 @@ const LinkGroup = ({ header, headerStyle, links, linkStyle }) => (
         key={name}
         label={name}
         target={target}
-        addClass='link-group-links'
+        addClass='link-group-links text-decoration-none mb-1 d-block'
         style={linkStyle}
       />
     )}

src/compounds/LinkGroup/LinkGroup.stories.jsx

@@ -18,7 +18,7 @@ Default.args = {
 export const Alternate = Template.bind({})
 Alternate.args = {
   header: 'Header',
-  headerStyle: { fontSize: 20, color: '#EC88EE' },
+  headerStyle: { fontSize: 13, color: '#EC88EE' },
   links,
-  linkStyle: { fontSize: 14, color: '#5E5CCF' },
+  linkStyle: { fontSize: 13, color: '#5E5CCF' },
 }

src/resources/args.js

@@ -110,6 +110,10 @@ export const socials = [
     icon: 'facebook',
     url: 'www.facebook.com',
   },
+  {
+    icon: 'linkedin',
+    url: 'www.linkedin.com',
+  },
 ]
 
 export const shipTo = {