From d07b37e059e06e41455f15ed278e847da07230b9 Mon Sep 17 00:00:00 2001
From: Matthew Heroux <matthew.heroux@gmail.com>
Date: Thu, 14 Dec 2023 08:38:58 -0600
Subject: [PATCH] feat: flesh in social bar (#755)

Signed-off-by: hxtree <matthew.heroux@gmail.com>
---
 .../src/components/PageFooter/PageFooter.tsx  |  6 ++--
 .../components/PageFooter/style.module.scss   | 29 ++++++++++++++--
 .../SocialMediaBar/SocialMediaBar.tsx         | 33 +++++++++++++++++++
 .../SocialMediaBar/style.module.scss          | 33 +++++++++++++++++++
 4 files changed, 97 insertions(+), 4 deletions(-)
 create mode 100644 services/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx
 create mode 100644 services/design-system/src/components/SocialMediaBar/style.module.scss

diff --git a/services/design-system/src/components/PageFooter/PageFooter.tsx b/services/design-system/src/components/PageFooter/PageFooter.tsx
index 999f38eb..9f4b9acf 100644
--- a/services/design-system/src/components/PageFooter/PageFooter.tsx
+++ b/services/design-system/src/components/PageFooter/PageFooter.tsx
@@ -1,3 +1,4 @@
+import SocialMediaBar from '../SocialMediaBar/SocialMediaBar';
 import { Typography } from '../Typography/Typography';
 import './style.module.scss';
 
@@ -18,10 +19,11 @@ export const PageFooter = (props: PageFooterProps) => {
 
   return (
     <footer className='page-footer'>
-      {links && <ul>
+      <SocialMediaBar/>
+      {links && <Typography variant="body"><ul>
         {links.map((link: PageFooterLink) => (
           <li><a href={link.url}>{link.label}</a></li>
-        ))}</ul>
+        ))}</ul></Typography>
       }
       <hr/>
       <Typography variant="body">
diff --git a/services/design-system/src/components/PageFooter/style.module.scss b/services/design-system/src/components/PageFooter/style.module.scss
index b2ffa0cd..fe1bba62 100644
--- a/services/design-system/src/components/PageFooter/style.module.scss
+++ b/services/design-system/src/components/PageFooter/style.module.scss
@@ -1,7 +1,32 @@
+@import '../../styles/utils/color-pallette';
 .page-footer {
-  background-color: #000;
-  color: #fff;
+  background-color: $color-primary;
+  color: $color-white;
   margin: 0;
   margin-top: 3rem;
   padding: 3rem;
+  a {
+    opacity: 0.9;
+    text-decoration: none;
+    color: $color-white;
+    &:hover {
+      color: $color-white;
+      opacity: 1;
+      font-weight: bold;
+    }
+  }
+  ul {
+    display: block;
+    margin: 0;
+    padding: 0;
+    li {
+      width: 33%;
+      margin: 0;
+      display: inline-block;
+      a {
+        padding: 0.2rem;
+        display: block;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/services/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx b/services/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx
new file mode 100644
index 00000000..b42bcdb8
--- /dev/null
+++ b/services/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx
@@ -0,0 +1,33 @@
+import { Typography } from '../Typography/Typography';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faYoutube, faXTwitter } from '@fortawesome/free-brands-svg-icons';
+import './style.module.scss';
+
+export type SocialMediaBarLink = {
+  label: string;
+  url: string;
+}
+
+export type SocialMediaBarProps = {
+  links?: SocialMediaBarLink[];
+};
+
+export const SocialMediaBar = (props: SocialMediaBarProps) => {
+  const { links } = props;
+
+  return (
+    <div className='social-media-bar'>
+      <FontAwesomeIcon icon={faGithub} size="2xl"/>
+      <FontAwesomeIcon icon={faYoutube} size="2xl"/>
+      <FontAwesomeIcon icon={faXTwitter} size="2xl"/>
+
+      {links && <Typography variant="body"><ul>
+        {links.map((link: SocialMediaBarLink) => (
+          <li><a href={link.url}>{link.label}</a></li>
+        ))}</ul></Typography>
+      }
+    </div>
+  );
+};
+
+export default SocialMediaBar;
\ No newline at end of file
diff --git a/services/design-system/src/components/SocialMediaBar/style.module.scss b/services/design-system/src/components/SocialMediaBar/style.module.scss
new file mode 100644
index 00000000..45ec00c1
--- /dev/null
+++ b/services/design-system/src/components/SocialMediaBar/style.module.scss
@@ -0,0 +1,33 @@
+@import '../../styles/utils/color-pallette';
+
+.social-media-bar {
+  background-color: $color-gray;
+  color: $color-white;
+  margin: 0;
+  margin-top: 3rem;
+  padding: 3rem;
+  a {
+    opacity: 0.9;
+    text-decoration: none;
+    color: $color-white;
+    &:hover {
+      color: $color-white;
+      opacity: 1;
+      font-weight: bold;
+    }
+  }
+  ul {
+    display: block;
+    margin: 0;
+    padding: 0;
+    li {
+      width: 33%;
+      margin: 0;
+      display: inline-block;
+      a {
+        padding: 0.2rem;
+        display: block;
+      }
+    }
+  }
+}
\ No newline at end of file