dynamically set the footer link, text and social icon colors

Author: alishaevn

src/compounds/Footer/Footer.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import LinkGroup from '../LinkGroup/LinkGroup'
 import SocialIcon from '../../components/SocialIcon/SocialIcon'
 
-const Footer = ({ companyName, sections, socials }) => (
-  <footer id='footer' className='container-fluid bg-secondary py-4'>
+const Footer = ({ companyName, sections, socials, color, ...props }) => (
+  <footer id='footer' className={`container-fluid bg-primary py-4 text-${color}`}>
     <div className='container'>
       <div className='row'>
         <div className='col-12 col-md-3 text-center text-md-start'>
@@ -17,12 +17,24 @@ const Footer = ({ companyName, sections, socials }) => (
         >
           {sections && sections.map((section) => {
             const { header, links } = section
-            return <LinkGroup header={header} links={links} key={header} {...section} />
+            let linkStyle = props.linkStyle || { color }
+
+            return (
+              <LinkGroup
+                header={header}
+                links={links}
+                linkStyle={linkStyle}
+                key={header}
+                {...section}
+              />
+            )
           })}
         </div>
         <div className='col-12 col-md-2 d-flex justify-content-center justify-content-md-end mt-5 mt-md-0'>
           {socials && socials.map((social) => {
             const { icon, url } = social
+            social.color = social.color || color
+
             return <SocialIcon icon={icon} url={url} key={icon} {...social} />
           })}
         </div>
@@ -32,12 +44,14 @@ const Footer = ({ companyName, sections, socials }) => (
 )
 
 Footer.propTypes = {
+  color: PropTypes.string,
   companyName: PropTypes.string.isRequired,
   sections: PropTypes.arrayOf(PropTypes.shape(LinkGroup.propTypes)),
   socials: PropTypes.arrayOf(PropTypes.shape(SocialIcon.propTypes)),
 }
 
 Footer.defaultProps = {
+  color: 'dark',
   sections: [],
   socials: [],
 }

src/compounds/Footer/Footer.stories.jsx

@@ -14,13 +14,15 @@ const Template = (args) => <Footer {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
+  color: 'dark',
   companyName: 'Company A',
   sections: [],
   socials: [],
 }
 
 export const Alternate = Template.bind({})
 Alternate.args = {
+  color: 'white',
   companyName: 'Company B',
   sections,
   socials,