Skip to content

Commit

Permalink
feat: make footer shadowable and add example
Browse files Browse the repository at this point in the history
  • Loading branch information
@vpicone
vpicone committed Apr 23, 2019
1 parent 335c479 commit dd7ccfb
Show file tree
Hide file tree
Showing 6 changed files with 522 additions and 435 deletions.
2 changes: 1 addition & 1 deletion packages/gatsby-theme-carbon-starter/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"dependencies": {
"gatsby": "^2.3.5",
"gatsby-theme-carbon": "^1.0.0",
"gatsby-theme-carbon": "^0.0.2",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
Expand Down
40 changes: 40 additions & 0 deletions packages/gatsby-theme-carbon-starter/src/gatsby-theme-carbon/components/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';
import Footer from 'gatsby-theme-carbon/src/components/Footer';

const FooterContent = () => (
<>
<p>
By importing the <code>Footer</code> component from gatsby-carbon-theme,
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>
</>
);

const links = {
firstCol: [
{ href: 'https://ibm.com/design', linkText: 'Shadowed link' },
{ href: 'https://ibm.com/design', linkText: 'Shadowed link' },
{ href: 'https://ibm.com/design', linkText: 'Shadowed link' },
],
secondCol: [
{ href: 'https://ibm.com/design', linkText: 'Shadowed link' },
{ href: 'https://ibm.com/design', linkText: 'Shadowed link' },
{ href: 'https://ibm.com/design', linkText: 'Shadowed link' },
{ href: 'https://ibm.com/design', linkText: 'Shadowed link' },
],
};

const CustomFooter = props => (
<Footer {...props} links={links} content={<FooterContent />} />
);

export default CustomFooter;
149 changes: 101 additions & 48 deletions packages/gatsby-theme-carbon/src/components/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { settings } from 'carbon-components';
import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Row, Grid, Column } from './Grid';
import mq from '../util/media-queries';

const { prefix } = settings;

const IBMLogo = () => (
<Column offsetLg={3}>
<svg width="81" height="32" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -42,7 +36,8 @@ const gridStyles = () => ({
});

const listStyles = ({ colors, typeStyles }) => ({
position: 'relative',
paddingBottom: '1.5rem',
marginBottom: '2.5rem',
...typeStyles.bodyLong01,
a: {
lineHeight: '1.25rem',
Expand All @@ -52,10 +47,16 @@ const listStyles = ({ colors, typeStyles }) => ({
'a:hover': {
textDecoration: 'underline',
},
borderBottom: `1px solid ${colors.ui04}`,
[mq.md]: {
borderBottom: 'none',
},
});

const contentStyles = ({ colors, typeStyles }) => ({
maxWidth: '33ch',
paddingBottom: '1.5rem',
marginBottom: '2.5rem',
...typeStyles.bodyLong01,
a: {
color: colors.ui02,
Expand All @@ -66,55 +67,107 @@ const contentStyles = ({ colors, typeStyles }) => ({
},
});

const WebsiteFooter = ({ children, linksCol1, linksCol2 }) => (
<footer css={footerStyles}>
<Grid css={gridStyles}>
<Row>
<Column colLg={2} colMd={2} offsetLg={3}>
<ul css={listStyles}>
{linksCol1 &&
linksCol1.map((link, i) => (
<li key={i}>
<a href={link.href} aria-label={link.linkText}>
{link.linkText}
</a>
</li>
))}
</ul>
</Column>
<Column colLg={2} colMd={2}>
<ul css={listStyles}>
{linksCol2 &&
linksCol2.map((link, i) => (
<li key={i}>
<a href={link.href} aria-label={link.linkText}>
{link.linkText}
</a>
</li>
))}
</ul>
</Column>
<Column css={contentStyles} colLg={4} colMd={4}>
{children}
</Column>
</Row>
<Row>
<IBMLogo />
</Row>
</Grid>
</footer>
const WebsiteFooter = ({ content, links }) => {
const { firstCol, secondCol } = links;
return (
<footer css={footerStyles}>
<Grid css={gridStyles}>
<Row>
<Column colLg={2} colMd={2} offsetLg={3}>
<ul css={listStyles}>
{firstCol &&
firstCol.map((link, i) => (
<li key={i}>
<a href={link.href} aria-label={link.linkText}>
{link.linkText}
</a>
</li>
))}
</ul>
</Column>
<Column colLg={2} colMd={2}>
<ul css={listStyles}>
{secondCol &&
secondCol.map((link, i) => (
<li key={i}>
<a href={link.href} aria-label={link.linkText}>
{link.linkText}
</a>
</li>
))}
</ul>
</Column>
<Column css={contentStyles} colLg={4} colMd={4}>
{content}
</Column>
</Row>
<Row>
<IBMLogo />
</Row>
</Grid>
</footer>
);
};

const DefaultContent = () => (
<p>
Shadow this content by importing the theme Footer and supplying your own
props.
</p>
);

WebsiteFooter.defaultProps = {
links: {
firstCol: [
{ href: 'https://www.ibm.com/design', linkText: 'Sample' },
{ href: 'https://www.ibm.com/design', linkText: 'Links' },
{
href: 'https://www.ibm.com/design',
linkText: 'Column',
},
{ href: 'https://www.ibm.com/design', linkText: 'One' },
],
secondCol: [
{
href: 'https://www.ibm.com/design',
linkText: 'Dribbble',
},
{
href: 'https://www.ibm.com/design',
linkText: 'Medium',
},
{
href: 'https://www.ibm.com/design',
linkText: 'Twitter',
},
],
},
content: <DefaultContent />,
};

WebsiteFooter.propTypes = {
/**
* Specify an array of links
* Specify the first and second columns of your links
*/
linksCol1: PropTypes.array,
links: PropTypes.exact({
firstCol: PropTypes.arrayOf(
PropTypes.shape({
href: PropTypes.string,
linkText: PropTypes.string,
})
),
secondCol: PropTypes.arrayOf(
PropTypes.shape({
href: PropTypes.string,
linkText: PropTypes.string,
})
),
}),

/**
* Specify second array of links
* Specify the first and second columns of your links
*/
linksCol2: PropTypes.array,
content: PropTypes.node,
};

export default WebsiteFooter;
51 changes: 1 addition & 50 deletions packages/gatsby-theme-carbon/src/components/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ import { MDXProvider } from '@mdx-js/react';

import { WebsiteCodeSnippet } from '@carbon/addons-website';

// import timestamp from 'raw-loader!../../../build-timestamp';
import Packages from '../../package.json';

import LeftNav from './LeftNav';
import Meta from './Meta';
import Header from './Header';
Expand All @@ -27,10 +24,6 @@ const Layout = ({ children, ...rest }) => {
useSmoothScroll();
useDocSearch();

const version = Packages.dependencies['carbon-components'];
const reactVersion = Packages.dependencies['carbon-components-react'];
const currentYear = new Date().getFullYear();

const is404 = children.key === null;

return (
Expand All @@ -56,49 +49,7 @@ const Layout = ({ children, ...rest }) => {
>
{children}
</MDXProvider>
<Footer
linksCol1={[
{ href: '/contributing/designers', linkText: 'Contribute' },
{ href: 'https://www.ibm.com/privacy', linkText: 'Privacy' },
{
href: 'https://www.ibm.com/legal',
linkText: 'Terms of Use',
},
{ href: 'https://www.ibm.com', linkText: 'IBM.com' },
]}
linksCol2={[
{
href: 'https://dribbble.com/_carbondesign',
linkText: 'Dribbble',
},
{
href: 'https://medium.com/@_carbondesign',
linkText: 'Medium',
},
{
href: 'https://twitter.com/_carbondesign',
linkText: 'Twitter',
},
]}
>
<p>
Have questions? Email us or open an issue on
<a href="https://github.com/carbon-design-system/carbon-website/issues/new/choose">
{' '}
GitHub.
</a>
</p>
<br />
<p>
Vanilla Components version {version}
<br />
React Components version {reactVersion}
<br />
{/* Last updated {lastUpdated} */}
<br />
Copyright © {currentYear} IBM
</p>
</Footer>
<Footer />
</div>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-theme-carbon/src/templates/Default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { WebsiteBackToTopBtn } from '@carbon/addons-website';
import Layout from '../components/Layout';
import PageHeader from '../components/PageHeader';
import EditLink from '../components/EditLink';
// import EditLink from '../components/EditLink';
import NextPrevious from '../components/NextPrevious';
import PageTabs from '../components/PageTabs';

Expand Down
Loading

0 comments on commit dd7ccfb

Please sign in to comment.