diff --git a/packages/example/src/gatsby-theme-carbon/components/Footer.js b/packages/example/src/gatsby-theme-carbon/components/Footer.js
index 5d3f20a8e..100a047ac 100644
--- 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 = () => (
<>
- By importing the Footer component from gatsby-theme-carbon,
- we can supply our own props.
+ By importing the Footer component from
+ gatsby-theme-carbon, we can supply our own props.
-
The default export from a shadowed component will replace that component
in the theme.
-
- More about component shadowing
-
+
+
+ More about component shadowing
+
+
);
diff --git a/packages/gatsby-theme-carbon/src/components/Footer.js b/packages/gatsby-theme-carbon/src/components/Footer/Footer.js
similarity index 67%
rename from packages/gatsby-theme-carbon/src/components/Footer.js
rename to packages/gatsby-theme-carbon/src/components/Footer/Footer.js
index 6ff1363bb..6ca2a5820 100644
--- a/packages/gatsby-theme-carbon/src/components/Footer.js
+++ b/packages/gatsby-theme-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 (
-
-
-
+
+
+
-
+
{firstCol &&
firstCol.map((link, i) => (
-
+
{link.linkText}
@@ -98,10 +22,10 @@ const Footer = ({ Content, links, Logo }) => {
-
+
{secondCol &&
secondCol.map((link, i) => (
-
+
{link.linkText}
@@ -109,11 +33,11 @@ const Footer = ({ Content, links, Logo }) => {
))}
-
+
-
+
@@ -124,8 +48,13 @@ const Footer = ({ Content, links, Logo }) => {
};
const IBMLogo = () => (
-
- ({ fill: colors.active01 })} fillRule="evenodd">
+
+
diff --git a/packages/gatsby-theme-carbon/src/components/Footer/Footer.module.scss b/packages/gatsby-theme-carbon/src/components/Footer/Footer.module.scss
new file mode 100644
index 000000000..2e9211929
--- /dev/null
+++ 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
new file mode 100644
index 000000000..ced11e525
--- /dev/null
+++ b/packages/gatsby-theme-carbon/src/components/Footer/index.js
@@ -0,0 +1,3 @@
+import Footer from './Footer';
+
+export default Footer;