diff --git a/packages/example/src/gatsby-theme-carbon/templates/Home.js b/packages/example/src/gatsby-theme-carbon/templates/Homepage.js similarity index 77% rename from packages/example/src/gatsby-theme-carbon/templates/Home.js rename to packages/example/src/gatsby-theme-carbon/templates/Homepage.js index ec7ef1bf8..1ef65607f 100644 --- a/packages/example/src/gatsby-theme-carbon/templates/Home.js +++ b/packages/example/src/gatsby-theme-carbon/templates/Homepage.js @@ -1,8 +1,8 @@ import React from 'react'; -import { Banner, Callout } from 'gatsby-theme-carbon'; +import { HomepageBanner, HomepageCallout } from 'gatsby-theme-carbon'; // Component to be shadowed -import Home from 'gatsby-theme-carbon/src/templates/Home'; +import Homepage from 'gatsby-theme-carbon/src/templates/Homepage'; import Carbon from '../../images/carbon.jpg'; @@ -41,7 +41,7 @@ const SecondRightText = () => ( const customProps = { Banner: ( - (

Carbon @@ -52,9 +52,11 @@ const customProps = { image={Carbon} /> ), - FirstCallout: , + FirstCallout: ( + + ), SecondCallout: ( - ; +function ShadowedHomepage(props) { + return ; } -export default ShadowedHomeTemplate; +export default ShadowedHomepage; diff --git a/packages/example/src/pages/component-examples/demo.mdx b/packages/example/src/pages/component-examples/demo.mdx index 5c437e89f..f7a06662d 100644 --- a/packages/example/src/pages/component-examples/demo.mdx +++ b/packages/example/src/pages/component-examples/demo.mdx @@ -52,8 +52,7 @@ IBMers believe in progress—that application of intelligence, reason and scienc Given our scale and scope, ‘good design’ is not only a requirement, it’s a deeper responsibility to relationships we seek to serve. -

Design is how
-we build bonds.

+## Design is how
we **build** bonds Today, the talent, techniques, thinking and tools of design, like technology, have become more and more abundant and accessible to all alike. diff --git a/packages/example/src/pages/index.mdx b/packages/example/src/pages/index.mdx index c2c101f1c..de44936f2 100755 --- a/packages/example/src/pages/index.mdx +++ b/packages/example/src/pages/index.mdx @@ -1,4 +1,4 @@ -import Home from 'gatsby-theme-carbon/src/templates/Home.js'; -export default Home; +import { HomepageTemplate } from 'gatsby-theme-carbon'; +export default HomepageTemplate; ## Content starts here diff --git a/packages/gatsby-theme-carbon/gatsby-config.js b/packages/gatsby-theme-carbon/gatsby-config.js index bd7a64e3e..a3ef52496 100644 --- a/packages/gatsby-theme-carbon/gatsby-config.js +++ b/packages/gatsby-theme-carbon/gatsby-config.js @@ -46,8 +46,8 @@ module.exports = themeOptions => { }, ], defaultLayouts: { - pages: require.resolve('./src/templates/Default.js'), - home: require.resolve('./src/templates/Home.js'), + default: require.resolve('./src/templates/Default.js'), + home: require.resolve('./src/templates/Homepage.js'), }, }, }, diff --git a/packages/gatsby-theme-carbon/index.js b/packages/gatsby-theme-carbon/index.js index 03d1937f9..bd1a942e4 100644 --- a/packages/gatsby-theme-carbon/index.js +++ b/packages/gatsby-theme-carbon/index.js @@ -6,7 +6,8 @@ export { Row, Column, Grid } from './src/components/Grid'; export { default as Caption } from './src/components/Caption'; export { default as ResourceCard } from './src/components/ResourceCard'; export { default as ArticleCard } from './src/components/ArticleCard'; -export { Callout, Banner } from './src/components/Homepage'; +export { HomepageCallout, HomepageBanner } from './src/components/Homepage'; +export { default as HomepageTemplate } from './src/templates/Homepage'; export { default as Aside } from './src/components/Aside'; // export { default as ImageComponent } from './src/components/ImageComponent'; // in progress diff --git a/packages/gatsby-theme-carbon/src/components/Grid.js b/packages/gatsby-theme-carbon/src/components/Grid.js index 4420b9117..eb5330234 100644 --- a/packages/gatsby-theme-carbon/src/components/Grid.js +++ b/packages/gatsby-theme-carbon/src/components/Grid.js @@ -68,7 +68,7 @@ export const Column = ({ }; Column.defaultProps = { - colLg: '12', + colLg: 12, }; Column.propTypes = { diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js b/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js index 956f7cac8..fb45f1b11 100644 --- a/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js +++ b/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js @@ -54,7 +54,7 @@ const secondColumn = ({ typeStyles }) => [ }, ]; -const Callout = ({ leftText, rightText, ...rest }) => ( +const HomepageCallout = ({ leftText, rightText, ...rest }) => (
{leftText()}
@@ -63,7 +63,7 @@ const Callout = ({ leftText, rightText, ...rest }) => (
); -Callout.defaultProps = { +HomepageCallout.defaultProps = { leftText: function renderLeftText() { return ( <> @@ -84,4 +84,4 @@ Callout.defaultProps = { }, }; -export default Callout; +export default HomepageCallout; diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/index.js b/packages/gatsby-theme-carbon/src/components/Homepage/index.js index 33ae9dc20..aebaf216f 100644 --- a/packages/gatsby-theme-carbon/src/components/Homepage/index.js +++ b/packages/gatsby-theme-carbon/src/components/Homepage/index.js @@ -1,2 +1,2 @@ -export { default as Banner } from './Banner'; -export { default as Callout } from './Callout'; +export { default as HomepageBanner } from './Banner'; +export { default as HomepageCallout } from './Callout'; diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js b/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js index 9cc93fc0a..9db74be8e 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/ResourceLinks.js @@ -1,7 +1,7 @@ import React from 'react'; import { SideNavLink } from 'carbon-components-react/lib/components/UIShell'; import { Link } from 'gatsby'; -import LaunchIcon from '@carbon/icons-react/lib/launch/16'; +import LaunchIcon from '@carbon/icons-react/es/launch/16'; const LeftNavResourceLinks = ({ links }) => links ? ( diff --git a/packages/gatsby-theme-carbon/src/components/PageHeader/page-header.scss b/packages/gatsby-theme-carbon/src/components/PageHeader/page-header.scss index f0c331726..ade8492d7 100644 --- a/packages/gatsby-theme-carbon/src/components/PageHeader/page-header.scss +++ b/packages/gatsby-theme-carbon/src/components/PageHeader/page-header.scss @@ -8,16 +8,8 @@ height: rem(240px); } -.#{$prefix}--grid.page-header__label-wrapper { - padding-top: rem(24px); - margin-bottom: auto; -} - -.page-header__label { - @include carbon--type-style('expressive-heading-03', true); -} - .page-header__title { + padding-left: 1rem; margin-bottom: $layout-xs; margin-top: auto; } diff --git a/packages/gatsby-theme-carbon/src/components/markdown/markdown.scss b/packages/gatsby-theme-carbon/src/components/markdown/markdown.scss index 4b5446093..3637b66eb 100644 --- a/packages/gatsby-theme-carbon/src/components/markdown/markdown.scss +++ b/packages/gatsby-theme-carbon/src/components/markdown/markdown.scss @@ -8,6 +8,10 @@ // Responsive by default .#{$prefix}--paragraph--responsive { + // simulate column padding + padding-left: 1rem; + padding-right: 1rem; + // 7 columns wide @include carbon--breakpoint('md') { width: 62.5%; diff --git a/packages/gatsby-theme-carbon/src/templates/Home.js b/packages/gatsby-theme-carbon/src/templates/Homepage.js similarity index 71% rename from packages/gatsby-theme-carbon/src/templates/Home.js rename to packages/gatsby-theme-carbon/src/templates/Homepage.js index 49d14821a..237e3980d 100644 --- a/packages/gatsby-theme-carbon/src/templates/Home.js +++ b/packages/gatsby-theme-carbon/src/templates/Homepage.js @@ -1,20 +1,19 @@ import React from 'react'; import { WebsiteBackToTopBtn } from '@carbon/addons-website'; import Layout from '../components/Layout'; -import Banner from '../components/Homepage/Banner'; -import Callout from '../components/Homepage/Callout'; +import { HomepageBanner, HomepageCallout } from '../components/Homepage'; import Light from '../images/blossom.jpg'; import Main from '../components/Main'; const Homepage = ({ children, - Banner: UserBanner, + Banner, FirstCallout, SecondCallout, ...rest }) => ( - {UserBanner} + {Banner} {FirstCallout}
{children}
{SecondCallout} @@ -24,7 +23,7 @@ const Homepage = ({ Homepage.defaultProps = { Banner: ( - (

Carbon @@ -35,8 +34,10 @@ Homepage.defaultProps = { image={Light} /> ), - FirstCallout: , - SecondCallout: , + FirstCallout: , + SecondCallout: ( + + ), }; export default Homepage; diff --git a/yarn.lock b/yarn.lock index 778620b22..afa44976a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1623,9 +1623,9 @@ write-file-atomic "^2.3.0" "@mdx-js/mdx@^1.0.5": - version "1.0.16" - resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.0.16.tgz#cfeca91a70b37bc5bfcf6f8e94dbf16048f1531e" - integrity sha512-d4YD7utmW850UVQdb4GjD6MRnRlB5NspheS6x48PiewuW7DuoNPTEnQ+ZjJYzZg5dWRy52yWtaZvDj39a7DMgg== + version "1.0.18" + resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.0.18.tgz#42bb35e36b7566aed88c5c11a381705f974bc03b" + integrity sha512-KO2odMrZC77Yf9bhL0Qu0GtvVivVV6dL5DWJeuMeSkc9wkL9fBT06re67TfgeJ37R+lyslkG+uPUahIj4/SOoQ== dependencies: "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-jsx" "^7.2.0" @@ -1635,7 +1635,7 @@ hast-util-raw "^5.0.0" lodash.uniq "^4.5.0" mdast-util-to-hast "^4.0.0" - remark-mdx "^1.0.15" + remark-mdx "^1.0.18" remark-parse "^6.0.0" remark-squeeze-paragraphs "^3.0.1" to-style "^1.3.3" @@ -11814,10 +11814,10 @@ relay-runtime@2.0.0: "@babel/runtime" "^7.0.0" fbjs "^1.0.0" -remark-mdx@^1.0.15: - version "1.0.15" - resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.0.15.tgz#6f2de2dcf3b94d5ed027d4140e1bd9c748c26a73" - integrity sha512-X9nQjfHLettXJ+DqIzHwLU6sIVFCjseJlCyaNsLVrIIRqxRcwm4MKifw1jcHa1Rb+uBf1CxJX2B/+qI9X2QAmA== +remark-mdx@^1.0.18: + version "1.0.18" + resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.0.18.tgz#a686bcb1166ae673bc77d9e459dbd576443bf854" + integrity sha512-PLsY2LNXuJ8YHaxjuOpRk+hDviB7jBFwLmLN4m4P5/Ev+NlmG8uXisAkP4P4Al47CPmJyKHQRJMjA8mWu4exVw== dependencies: "@babel/core" "^7.2.2" "@babel/helper-plugin-utils" "^7.0.0"