From a003f8f99ee3dfe38341907d7ce425bc5cb4c1be Mon Sep 17 00:00:00 2001
From: hxtree <matthew.heroux@gmail.com>
Date: Mon, 25 Dec 2023 18:47:26 +0000
Subject: [PATCH] feat: social media props

Signed-off-by: hxtree <matthew.heroux@gmail.com>
---
 clients/admin-client/src/App.tsx              | 10 ++++++++--
 .../src/components/AppBar/AppBar.tsx          |  2 +-
 .../src/components/AppBar/style.scss          |  4 ++--
 .../src/components/PageFooter/PageFooter.tsx  | 11 ++++++-----
 .../SocialMediaBar/SocialMediaBar.tsx         | 13 ++++---------
 clients/design-system/src/components/index.ts |  1 +
 .../organisms/PageFooter.stories.tsx          |  8 ++++++++
 .../organisms/SocialMediaBar.stories.tsx      | 19 +++++++++++++++++++
 8 files changed, 49 insertions(+), 19 deletions(-)
 create mode 100644 clients/design-system/stories/components/organisms/SocialMediaBar.stories.tsx

diff --git a/clients/admin-client/src/App.tsx b/clients/admin-client/src/App.tsx
index 3dd05cde8..90495d537 100644
--- a/clients/admin-client/src/App.tsx
+++ b/clients/admin-client/src/App.tsx
@@ -1,12 +1,18 @@
 import '@cats-cradle/design-system/dist/assets/style.css';
-import { PageFooter } from '@cats-cradle/design-system/dist/main';
+import { PageFooter, faGithub } from '@cats-cradle/design-system/dist/main';
 import { Router } from './routing/Router';
 
 function App() {
   return (
     <>
       <Router/>
-      <PageFooter siteOwner="Cats Cradle" links={[]}/>
+      <PageFooter
+        socialMedias={[
+          {icon: faGithub, label: 'Github', url: 'https://github.com/hxtree/cats-cradle'},
+        ]}
+        links={[]}
+        siteOwner="Cats Cradle"
+      />
     </>
   );
 }
diff --git a/clients/design-system/src/components/AppBar/AppBar.tsx b/clients/design-system/src/components/AppBar/AppBar.tsx
index cef014563..9ad85fdb6 100644
--- a/clients/design-system/src/components/AppBar/AppBar.tsx
+++ b/clients/design-system/src/components/AppBar/AppBar.tsx
@@ -29,7 +29,7 @@ export const AppBar = (props: AppBarProps) => {
         </div>
       </nav>
 
-      <nav className="navbar navbar-expand-lg navbar-dark app-bar-dark">
+      <nav className="navbar navbar-expand-lg navbar-light app-bar-light">
         <div className="container">
           <div className="collapse navbar-collapse" id="navbarNav">
             {children}
diff --git a/clients/design-system/src/components/AppBar/style.scss b/clients/design-system/src/components/AppBar/style.scss
index 908d700b9..f7d9fe9f2 100644
--- a/clients/design-system/src/components/AppBar/style.scss
+++ b/clients/design-system/src/components/AppBar/style.scss
@@ -1,9 +1,9 @@
 @import '../../styles/utils/color-pallette';
 
 .app-bar-light {
-  background-color: #FFF !important;
+  background-color: #e5e5e5!important;
 }
 
 .app-bar-dark {
-  background-color: $color-berkeley-blue !important;
+  background-color: $color-gray !important;
 }
\ No newline at end of file
diff --git a/clients/design-system/src/components/PageFooter/PageFooter.tsx b/clients/design-system/src/components/PageFooter/PageFooter.tsx
index 75b92d1ee..75bbf7e4b 100644
--- a/clients/design-system/src/components/PageFooter/PageFooter.tsx
+++ b/clients/design-system/src/components/PageFooter/PageFooter.tsx
@@ -1,5 +1,5 @@
 import Link from '../Link/Link';
-import SocialMediaBar from '../SocialMediaBar/SocialMediaBar';
+import SocialMediaBar, { SocialMediaBarLink } from '../SocialMediaBar/SocialMediaBar';
 import { Typography } from '../Typography/Typography';
 import './style.module.scss';
 
@@ -11,25 +11,26 @@ export type PageFooterLink = {
 export type PageFooterProps = {
   siteOwner: string;
   links: PageFooterLink[];
+  socialMedias?: SocialMediaBarLink[]
 };
 
 export const PageFooter = (props: PageFooterProps) => {
-  const { links, siteOwner } = props;
+  const { socialMedias, links, siteOwner } = props;
 
   const year = new Date().getFullYear();
 
   return (
     <>
-      <SocialMediaBar/>
+      <SocialMediaBar socialMedias={socialMedias}/>
       <footer className='page-footer'>
         <div className="container">
           <div className="row">
               {links && links.map((link: PageFooterLink) => (
 
               <div className="col-12 col-sm-6 col-md-4 col-lg-3">
-            <Typography variant="body">
+                  <Typography variant="body">
                     <Link href={link.url}>{link.label}</Link>
-                    </Typography>
+                  </Typography>
                 </div>
               ))}
           </div>
diff --git a/clients/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx b/clients/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx
index abd22099c..cb5ed5840 100644
--- a/clients/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx
+++ b/clients/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx
@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGithub, faYoutube, faXTwitter, IconDefinition } from '@fortawesome/free-brands-svg-icons';
+import { IconDefinition } from '@fortawesome/free-brands-svg-icons';
+
 import { IconButton } from '@mui/material';
 import './style.module.scss';
 
@@ -10,17 +11,11 @@ export type SocialMediaBarLink = {
 }
 
 export type SocialMediaBarProps = {
-  links?: SocialMediaBarLink[];
+  socialMedias?: SocialMediaBarLink[];
 };
 
 export const SocialMediaBar = (props: SocialMediaBarProps) => {
-  const { links } = props;
-
-  const socialMedias = [
-    {icon: faGithub, label: 'Github', url: 'https://github.com/hxtree/cats-cradle'},
-    {icon: faYoutube, label: 'Youtbe',  url: 'https://github.com/hxtree/cats-cradle'},
-    {icon: faXTwitter, label: 'XTwitter',  url: 'https://github.com/hxtree/cats-cradle'}
-  ]
+  const { socialMedias } = props;
 
   return (
     <div className="social-media-bar">
diff --git a/clients/design-system/src/components/index.ts b/clients/design-system/src/components/index.ts
index ccd20ec0b..5964b4175 100644
--- a/clients/design-system/src/components/index.ts
+++ b/clients/design-system/src/components/index.ts
@@ -9,6 +9,7 @@ export * from './Gauge/Gauge';
 export * from './Gauge/GaugeProps';
 export * from './Meter/Meter';
 export * from './PageFooter/PageFooter';
+export * from './SocialMediaBar/SocialMediaBar';
 export * from './Link/NonInteractiveLink';
 export * from './Typography/Typography';
 export * from './Alert/Alert';
diff --git a/clients/design-system/stories/components/organisms/PageFooter.stories.tsx b/clients/design-system/stories/components/organisms/PageFooter.stories.tsx
index d8aa4e3ff..0c7719ea2 100644
--- a/clients/design-system/stories/components/organisms/PageFooter.stories.tsx
+++ b/clients/design-system/stories/components/organisms/PageFooter.stories.tsx
@@ -12,3 +12,11 @@ export const Default = (args: PageFooterProps) => <PageFooter {...args}></PageFo
 Default.args = {
   siteOwner: 'Cat\'s Cradle',
 };
+
+import { faGithub, faYoutube, faXTwitter, IconDefinition } from '@fortawesome/free-brands-svg-icons';
+
+const socialMedias = [
+  {icon: faGithub, label: 'Github', url: 'https://github.com/hxtree/cats-cradle'},
+  {icon: faYoutube, label: 'Youtbe',  url: 'https://github.com/hxtree/cats-cradle'},
+  {icon: faXTwitter, label: 'XTwitter',  url: 'https://github.com/hxtree/cats-cradle'}
+]
diff --git a/clients/design-system/stories/components/organisms/SocialMediaBar.stories.tsx b/clients/design-system/stories/components/organisms/SocialMediaBar.stories.tsx
new file mode 100644
index 000000000..98404b7b0
--- /dev/null
+++ b/clients/design-system/stories/components/organisms/SocialMediaBar.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { SocialMediaBar, SocialMediaBarProps } from '../../../src/main';
+import { faGithub, faYoutube, faXTwitter, IconDefinition } from '@fortawesome/free-brands-svg-icons';
+
+export default {
+  title: 'Organisms/SocialMediaBar',
+  component: SocialMediaBar,
+} as Meta<typeof SocialMediaBar>;
+
+export const Default = (args: SocialMediaBarProps) => <SocialMediaBar {...args}></SocialMediaBar>;
+
+Default.args = {
+  socialMedias: [
+    {icon: faGithub, label: 'Github', url: 'https://github.com/hxtree/cats-cradle'},
+    {icon: faYoutube, label: 'Youtbe',  url: 'https://github.com/hxtree/cats-cradle'},
+    {icon: faXTwitter, label: 'XTwitter',  url: 'https://github.com/hxtree/cats-cradle'}
+  ]
+};