From dd7ccfb642f00848f7b60129b91c71eed0560af4 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Mon, 22 Apr 2019 20:44:20 -0500 Subject: [PATCH] feat: make footer shadowable and add example --- .../gatsby-theme-carbon-starter/package.json | 2 +- .../gatsby-theme-carbon/components/Footer.js | 40 + .../src/components/Footer.js | 149 ++-- .../src/components/Layout.js | 51 +- .../src/templates/Default.js | 2 +- yarn.lock | 713 ++++++++++-------- 6 files changed, 522 insertions(+), 435 deletions(-) create mode 100644 packages/gatsby-theme-carbon-starter/src/gatsby-theme-carbon/components/Footer.js diff --git a/packages/gatsby-theme-carbon-starter/package.json b/packages/gatsby-theme-carbon-starter/package.json index 196ad1143..e2fc0d668 100644 --- a/packages/gatsby-theme-carbon-starter/package.json +++ b/packages/gatsby-theme-carbon-starter/package.json @@ -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" } diff --git a/packages/gatsby-theme-carbon-starter/src/gatsby-theme-carbon/components/Footer.js b/packages/gatsby-theme-carbon-starter/src/gatsby-theme-carbon/components/Footer.js new file mode 100644 index 000000000..8dd15d477 --- /dev/null +++ b/packages/gatsby-theme-carbon-starter/src/gatsby-theme-carbon/components/Footer.js @@ -0,0 +1,40 @@ +import React from 'react'; +import Footer from 'gatsby-theme-carbon/src/components/Footer'; + +const FooterContent = () => ( + <> +

+ By importing the Footer component from gatsby-carbon-theme, + we can supply our own props. +

+
+

+ The default export from a shadowed component will replace that component + in the theme. +

+
+ + More about component shadowing + + +); + +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 => ( + +const WebsiteFooter = ({ content, links }) => { + const { firstCol, secondCol } = links; + return ( + + ); +}; + +const DefaultContent = () => ( +

+ Shadow this content by importing the theme Footer and supplying your own + props. +

); +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: , +}; + 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; diff --git a/packages/gatsby-theme-carbon/src/components/Layout.js b/packages/gatsby-theme-carbon/src/components/Layout.js index d5a88c14d..302e6b558 100644 --- a/packages/gatsby-theme-carbon/src/components/Layout.js +++ b/packages/gatsby-theme-carbon/src/components/Layout.js @@ -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'; @@ -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 ( @@ -56,49 +49,7 @@ const Layout = ({ children, ...rest }) => { > {children} -
-

- Have questions? Email us or open an issue on - - {' '} - GitHub. - -

-
-

- Vanilla Components version {version} -
- React Components version {reactVersion} -
- {/* Last updated {lastUpdated} */} -
- Copyright © {currentYear} IBM -

-
+