fix: update exports and fix console errors

- Update exports to include homepage components and template - Add Homepage prefix to Callout/Banner to suggest proper usage - Fix several console errors (need release from @carbon/icons-react) - add column padding paragraph component
carbon-design-system · May 7, 2019 · 0ebfd10 · 0ebfd10
1 parent 26c7ec8
commit 0ebfd10
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 46 deletions.
diff --git a/...src/gatsby-theme-carbon/templates/Home.js → ...gatsby-theme-carbon/templates/Homepage.js b/...src/gatsby-theme-carbon/templates/Home.js → ...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: (
-    <Banner
+    <HomepageBanner
       renderText={() => (
         <h1>
           Carbon
@@ -52,9 +52,11 @@ const customProps = {
       image={Carbon}
     />
   ),
-  FirstCallout: <Callout leftText={FirstLeftText} rightText={FirstRightText} />,
+  FirstCallout: (
+    <HomepageCallout leftText={FirstLeftText} rightText={FirstRightText} />
+  ),
   SecondCallout: (
-    <Callout
+    <HomepageCallout
       leftText={SecondLeftText}
       rightText={SecondRightText}
       color="white"
@@ -64,8 +66,8 @@ const customProps = {
 };
 
 // spreading the original props gives us props.children (mdx content)
-function ShadowedHomeTemplate(props) {
-  return <Home {...props} {...customProps} />;
+function ShadowedHomepage(props) {
+  return <Homepage {...props} {...customProps} />;
 }
 
-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
@@ -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.
 
-<h2>Design is how <br/>
-we <em>build</em> bonds.</h2>
+## Design is how<br />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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -54,7 +54,7 @@ const secondColumn = ({ typeStyles }) => [
   },
 ];
 
-const Callout = ({ leftText, rightText, ...rest }) => (
+const HomepageCallout = ({ leftText, rightText, ...rest }) => (
   <StyledGrid {...rest}>
     <StyledRow>
       <div css={firstColumn}>{leftText()}</div>
@@ -63,7 +63,7 @@ const Callout = ({ leftText, rightText, ...rest }) => (
   </StyledGrid>
 );
 
-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
@@ -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
@@ -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
@@ -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
@@ -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/...gatsby-theme-carbon/src/templates/Home.js → ...by-theme-carbon/src/templates/Homepage.js b/...gatsby-theme-carbon/src/templates/Home.js → ...by-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
 }) => (
   <Layout homepage>
-    {UserBanner}
+    {Banner}
     {FirstCallout}
     <Main>{children}</Main>
     {SecondCallout}
@@ -24,7 +23,7 @@ const Homepage = ({
 
 Homepage.defaultProps = {
   Banner: (
-    <Banner
+    <HomepageBanner
       renderText={() => (
         <h1>
           Carbon
@@ -35,8 +34,10 @@ Homepage.defaultProps = {
       image={Light}
     />
   ),
-  FirstCallout: <Callout />,
-  SecondCallout: <Callout color="inverse01" backgroundColor="#061f80" />,
+  FirstCallout: <HomepageCallout />,
+  SecondCallout: (
+    <HomepageCallout color="inverse01" backgroundColor="#061f80" />
+  ),
 };
 
 export default Homepage;
diff --git 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"