Merge pull request #80 from joquendo/footer

Footer

Author: abe-m1

src/components/Footer/Footer.css

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import FooterBrand from './FooterBrand';
 import FooterLinks from './FooterLinks';
 import FooterDisclaimer from './FooterDisclaimer';
 
-import './Footer.css';
+import './footer.scss';
 
 const Footer = ({ theme, backgroundColor, fontColor, linkColor, columns, linksList}) => {
     const cssStyles = {
@@ -16,7 +15,6 @@ const Footer = ({ theme, backgroundColor, fontColor, linkColor, columns, linksLi
 
     return (
         <footer className={ theme } style={ cssStyles }>
-            <FooterBrand position="center" />
             <FooterLinks linkColor = {linkColor} linksList = {linksList} numberOfColumns={columns} />
             <FooterDisclaimer position="center sm:left" />
         </footer>

src/components/Footer/Footer.js

@@ -17,16 +17,16 @@ export default {
         },
     },
     args: {
-        columns: 1,
+        columns: 3,
         linksList: [
-            { ...FooterLinkStories.Default.args.FooterLink, id: '1', title: 'About', url: '#0'},
-            { ...FooterLinkStories.Default.args.FooterLink, id: '2', title: 'Projects', url: '#0'},
-            { ...FooterLinkStories.Default.args.FooterLink, id: '3', title: 'Blog', url: '#0'},
-            { ...FooterLinkStories.Default.args.FooterLink, id: '4', title: 'Contact', url: '#0'},
-            { ...FooterLinkStories.Default.args.FooterLink, id: '5', title: 'Forum', url: '#0'},
-            { ...FooterLinkStories.Default.args.FooterLink, id: '6', title: 'Archive', url: '#0'},
-            { ...FooterLinkStories.Default.args.FooterLink, id: '7', title: 'Gallery', url: '#0'},
-            { ...FooterLinkStories.Default.args.FooterLink, id: '8', title: 'Foo', url: '#0'},
+            { ...FooterLinkStories.Default.args.FooterLink, id: '1', title: 'About Us', url: '#0'},
+            { ...FooterLinkStories.Default.args.FooterLink, id: '2', title: 'Terms of Service', url: '#0'},
+            { ...FooterLinkStories.Default.args.FooterLink, id: '3', title: 'Code of Conduct', url: '#0'},
+            { ...FooterLinkStories.Default.args.FooterLink, id: '4', title: 'Contact Us', url: '#0'},
+            { ...FooterLinkStories.Default.args.FooterLink, id: '5', title: 'Chat', url: '#0'},
+            { ...FooterLinkStories.Default.args.FooterLink, id: '6', title: 'Meetups', url: '#0'},
+            { ...FooterLinkStories.Default.args.FooterLink, id: '7', title: 'Team Hack', url: '#0'},
+            { ...FooterLinkStories.Default.args.FooterLink, id: '8', title: 'Mentorships', url: '#0'},
         ],
     },
 
@@ -46,6 +46,7 @@ Dark.args = {
 
 export const OneColumn = Template.bind({})
 OneColumn.args = {
+    columns: 1,
 }
 
 export const TwoColumn = Template.bind({})

src/components/Footer/Footer.stories.js

@@ -0,0 +1,67 @@
+footer {
+  color: #fff;
+  background-color: #4e4e4e;
+  font-family: 'Oxygen', sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  padding: 35px 66px;
+  a {
+    color: #fff;
+    display: block;
+    margin: 5px;
+    padding: 5px;
+    width: 100%;
+  }
+  .row {
+    padding: 5px 0;
+    &:after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+  .flex {
+    display: flex;
+    justify-content: space-evenly;
+  }
+  .flex-justify-left {
+    justify-content: flex-start;
+  }
+  /* Setting column widths with flex display */
+  ul {
+    li {
+      flex: 1 0 25%;
+    }
+    &.column {
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      justify-content: flex-start;
+    }
+    &.column-1 li {
+      flex: 1 0 100%;
+    }
+    &.column-2 li {
+      flex: 0 0 50%;
+    }
+    &.column-3 li {
+      flex: 0 0 33.33%;
+    }
+  }
+}
+
+@media (min-width: 640px) {
+  /* Responsive Default for small view */
+  .sm\:center {
+    text-align: center;
+  }
+  .sm\:left {
+    text-align: left;
+  }
+  .sm\:right {
+    text-align: right;
+  }
+  .sm\:flex-justify-left {
+    justify-content: flex-start;
+  }
+}