feat: refactor Footer to css modules with correct styling

carbon-design-system · Jul 17, 2019 · 0f129d6 · 0f129d6
1 parent daaf17e
commit 0f129d6
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 96 deletions.
diff --git a/packages/example/src/gatsby-theme-carbon/components/Footer.js b/packages/example/src/gatsby-theme-carbon/components/Footer.js
@@ -4,18 +4,18 @@ import Footer from 'gatsby-theme-carbon/src/components/Footer';
 const Content = () => (
   <>
     <p>
-      By importing the <code>Footer</code> component from gatsby-theme-carbon,
-      we can supply our own props.
+      By importing the <strong>Footer</strong> component from
+      gatsby-theme-carbon, we can supply our own props.
     </p>
-    <br />
     <p>
       The default export from a shadowed component will replace that component
       in the theme.
     </p>
-    <br />
-    <a href="https://www.gatsbyjs.org/docs/themes/api-reference/#component-shadowing">
-      More about component shadowing
-    </a>
+    <p>
+      <a href="https://www.gatsbyjs.org/docs/themes/api-reference/#component-shadowing">
+        More about component shadowing
+      </a>
+    </p>
   </>
 );
 

diff --git a/...sby-theme-carbon/src/components/Footer.js → ...me-carbon/src/components/Footer/Footer.js b/...sby-theme-carbon/src/components/Footer.js → ...me-carbon/src/components/Footer/Footer.js
@@ -1,95 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Grid, Column } from './Grid';
-import mq from '../util/media-queries';
-
-const footerStyles = () => ({
-  width: '100%',
-  display: 'flex',
-  margin: 0,
-  color: '#bebebe',
-  backgroundColor: '#000',
-  overflowX: 'hidden',
-});
-
-const gridStyles = () => ({
-  margin: 0,
-  display: 'flex',
-  justifyContent: 'space-between',
-  flexDirection: 'column',
-  padding: '1.5rem 0 2rem 0',
-  paddingLeft: '1rem',
-  width: '100%',
-  maxWidth: '99rem !important',
-});
-
-const listStyles = ({ colors, typeStyles }) => ({
-  padding: 0,
-  paddingBottom: '2.5rem',
-  marginBottom: '1.5rem',
-  marginRight: '1rem',
-  ...typeStyles.bodyLong01,
-  a: {
-    color: colors.ui02,
-    textDecoration: 'none',
-  },
-  'a:hover': {
-    textDecoration: 'underline',
-  },
-  borderBottom: '1px solid rgb(86, 86, 86)',
-  [mq.sm]: {
-    li: {
-      lineHeight: '18px',
-      marginBottom: '0.5rem',
-    },
-  },
-  [mq.md]: {
-    borderBottom: 'none',
-  },
-});
-
-const contentStyles = ({ colors, typeStyles }) => ({
-  maxWidth: '33ch',
-  paddingBottom: '1.5rem',
-  marginBottom: '2.5rem',
-  color: '#bebebe',
-  padding: 0,
-  paddingLeft: '1rem',
-  ...typeStyles.bodyLong01,
-  a: {
-    color: colors.ui02,
-  },
-  [mq.sm]: {
-    paddingBottom: '3rem',
-  },
-  [mq.md]: {
-    paddingLeft: 0,
-  },
-  [mq.lg]: {
-    paddingLeft: '0.5rem',
-  },
-});
-
-const rowStyles = () => ({
-  [mq.md]: {
-    paddingLeft: '1rem',
-  },
-  [mq.lg]: {
-    paddingLeft: 0,
-  },
-});
+import { Row, Grid, Column } from '../Grid';
+import { footer, grid, nav, list, logo } from './Footer.module.scss';
 
 const Footer = ({ Content, links, Logo }) => {
   const { firstCol, secondCol } = links;
   return (
-    <footer className="container--homepage" css={footerStyles}>
-      <Grid css={gridStyles}>
-        <Row css={rowStyles}>
+    <footer className={footer}>
+      <Grid className={grid}>
+        <Row>
           <Column colLg={2} colMd={2}>
-            <ul css={listStyles}>
+            <ul className={nav}>
               {firstCol &&
                 firstCol.map((link, i) => (
-                  <li key={i}>
+                  <li key={i} className={list}>
                     <a href={link.href} aria-label={link.linkText}>
                       {link.linkText}
                     </a>
@@ -98,22 +22,22 @@ const Footer = ({ Content, links, Logo }) => {
             </ul>
           </Column>
           <Column colLg={2} colMd={2}>
-            <ul css={listStyles}>
+            <ul className={nav}>
               {secondCol &&
                 secondCol.map((link, i) => (
-                  <li key={i}>
+                  <li key={i} classNam={list}>
                     <a href={link.href} aria-label={link.linkText}>
                       {link.linkText}
                     </a>
                   </li>
                 ))}
             </ul>
           </Column>
-          <Column css={contentStyles} colLg={4} colMd={4} offsetLg={2}>
+          <Column colLg={4} colMd={4} colSm={3} offsetLg={2}>
             <Content />
           </Column>
         </Row>
-        <Row css={rowStyles}>
+        <Row>
           <Column colLg={3}>
             <Logo />
           </Column>
@@ -124,8 +48,13 @@ const Footer = ({ Content, links, Logo }) => {
 };
 
 const IBMLogo = () => (
-  <svg width="81" height="32" xmlns="http://www.w3.org/2000/svg">
-    <g css={({ colors }) => ({ fill: colors.active01 })} fillRule="evenodd">
+  <svg
+    className={logo}
+    width="81"
+    height="32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fillRule="evenodd">
       <path d="M0 32h15.689v-2.038H0zM0 27.721h15.689v-2.038H0zM4.483 23.442h6.724v-2.037H4.483zM4.483 19.164h6.724v-2.038H4.483zM4.483 14.885h6.724v-2.037H4.483zM4.482 10.606h6.724V8.568H4.482zM0 6.327h15.689V4.29H0zM0 2.049h15.689V.011H0zM17.93 29.963V32h16.504a8.521 8.521 0 0 0 5.54-2.037H17.93zM17.93 25.683v2.038h23.914a8.535 8.535 0 0 0 .85-2.038H17.93zM22.412 23.442h6.724v-2.037h-6.724zM40.124 17.126H22.412v2.038H41.77a8.62 8.62 0 0 0-1.645-2.038M22.413 12.848v2.036h17.786a8.612 8.612 0 0 0 1.644-2.037h-19.43zM42.693 6.327a8.447 8.447 0 0 0-.85-2.037H17.93v2.037h24.763zM39.974 2.049a8.521 8.521 0 0 0-5.54-2.037H17.93v2.037h22.044zM22.412 10.606h6.724V8.568h-6.724zM35.453 10.606h7.29a8.603 8.603 0 0 0 .248-2.038h-7.538v2.038zM35.453 21.405v2.037h7.538c0-.703-.09-1.384-.248-2.037h-7.29zM57.457 0H44.825v2.038h13.34zM44.826 32h11.21v-2.038h-11.21zM44.826 27.72h11.21v-2.038h-11.21zM49.309 23.439h6.727v-2.038h-6.727zM49.309 19.159h6.727v-2.038h-6.727zM69.488 32h11.21v-2.038h-11.21zM69.488 27.72h11.21v-2.038h-11.21zM69.488 23.439h6.726v-2.038h-6.726zM69.487 19.159h6.726v-2.038h-6.726zM69.488 14.879h6.726V12.84H63.606l-.707 2.038h5.903l.686-1.94zM61.916 12.84H49.31v2.039h6.726v-1.94l.686 1.94h5.903zM76.213 8.56H65.091l-.707 2.038h11.83zM68.06 0l-.706 2.038h13.344V0zM62.757 32l.72-2.038h-1.432zM61.254 27.72h3.015l.72-2.038h-4.455zM59.743 23.44h6.037l.72-2.039h-7.476zM58.232 19.159h9.06l.719-2.038h-10.5zM49.309 10.598h11.83l-.707-2.038H49.309zM65.868 6.318h14.83V4.28H66.576zM58.947 4.28H44.826v2.038h14.828z" />
     </g>
   </svg>

diff --git a/packages/gatsby-theme-carbon/src/components/Footer/Footer.module.scss b/packages/gatsby-theme-carbon/src/components/Footer/Footer.module.scss
@@ -0,0 +1,88 @@
+.footer {
+  @include carbon--type-style('body-short-01');
+  width: 100%;
+  background: $carbon--black-100;
+  color: $carbon--gray-30;
+  position: relative;
+  z-index: 2;
+}
+
+.grid {
+  min-height: 370px;
+  padding-top: $spacing-06;
+  padding-bottom: $spacing-07;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.nav {
+  padding-bottom: $spacing-08;
+  margin-bottom: $spacing-06;
+  position: relative;
+
+  &:after {
+    @include carbon--breakpoint('sm') {
+      content: '';
+      background: $carbon--gray-80;
+      width: calc(100% - 2rem);
+      height: 1px;
+      display: block;
+      position: absolute;
+      bottom: 0;
+    }
+
+    @include carbon--breakpoint('md') {
+      display: none;
+    }
+  }
+}
+
+.list {
+  display: block;
+
+  @include carbon--breakpoint('sm') {
+    margin: 0 0 $spacing-03 0;
+  }
+
+  @include carbon--breakpoint('lg') {
+    margin: 0;
+  }
+}
+
+.footer a {
+  @include carbon--type-style('body-long-01');
+  color: $carbon--gray-10 !important; //needed to get the color correct on the homepage, we are setting all homepage links to a light blue in the homepage sass file.
+  text-decoration: none;
+  outline: none;
+  transition: $duration--fast-01 motion(standard, productive);
+
+  &:hover {
+    color: $carbon--gray-10;
+    text-decoration: underline;
+  }
+
+  &:active,
+  &:active:visited {
+    color: $carbon--gray-10;
+    text-decoration: underline;
+  }
+}
+
+.footer p {
+  @include carbon--type-style('body-short-01');
+  padding-bottom: $spacing-05;
+}
+
+.footer p a {
+  text-decoration: underline;
+}
+
+.footer p:last-child {
+  padding-bottom: rem(48px);
+}
+
+.logo {
+  fill: $carbon--gray-10;
+  margin-top: $spacing-07;
+}
diff --git a/packages/gatsby-theme-carbon/src/components/Footer/index.js b/packages/gatsby-theme-carbon/src/components/Footer/index.js
@@ -0,0 +1,3 @@
+import Footer from './Footer';
+
+export default Footer;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Footer from './Footer';

		export default Footer;