fix: update templates for easier shadowing

- Remove broken images in markdown - Remove extra / in sidebar links - fix callout widths - create Main component
carbon-design-system · May 7, 2019 · c18d7b8 · c18d7b8
1 parent 2479ea5
commit c18d7b8
Show file tree

Hide file tree

Showing 17 changed files with 45 additions and 57 deletions.
diff --git a/packages/example/src/pages/component-examples/demo.mdx b/packages/example/src/pages/component-examples/demo.mdx
@@ -33,7 +33,6 @@ import {
 
 ![blossom](../../images/blossom.jpg)
 
-
 Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
 
 ## Heading 2
@@ -99,9 +98,7 @@ Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pin
   </Column>
 </Row>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/example/src/pages/contributing/agreement.mdx b/packages/example/src/pages/contributing/agreement.mdx
@@ -26,9 +26,7 @@ import {
   <AnchorLink>The foundation</AnchorLink>
 </AnchorLinks>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/example/src/pages/contributing/governance.mdx b/packages/example/src/pages/contributing/governance.mdx
@@ -26,9 +26,7 @@ import {
   <AnchorLink>The foundation</AnchorLink>
 </AnchorLinks>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/example/src/pages/getting-started/about-carbon.mdx b/packages/example/src/pages/getting-started/about-carbon.mdx
@@ -26,9 +26,7 @@ import {
   <AnchorLink>The foundation</AnchorLink>
 </AnchorLinks>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/example/src/pages/getting-started/designers.mdx b/packages/example/src/pages/getting-started/designers.mdx
@@ -26,9 +26,7 @@ import {
   <AnchorLink>The foundation</AnchorLink>
 </AnchorLinks>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/example/src/pages/getting-started/developers/angular.mdx b/packages/example/src/pages/getting-started/developers/angular.mdx
@@ -27,9 +27,7 @@ import {
   <AnchorLink>The foundation</AnchorLink>
 </AnchorLinks>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/example/src/pages/getting-started/developers/other.mdx b/packages/example/src/pages/getting-started/developers/other.mdx
@@ -27,9 +27,7 @@ import {
   <AnchorLink>The foundation</AnchorLink>
 </AnchorLinks>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/example/src/pages/getting-started/developers/react.mdx b/packages/example/src/pages/getting-started/developers/react.mdx
@@ -27,9 +27,7 @@ import {
   <AnchorLink>The foundation</AnchorLink>
 </AnchorLinks>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/example/src/pages/getting-started/developers/vanilla.mdx b/packages/example/src/pages/getting-started/developers/vanilla.mdx
@@ -27,9 +27,7 @@ import {
   <AnchorLink>The foundation</AnchorLink>
 </AnchorLinks>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/example/src/pages/resources/index.mdx b/packages/example/src/pages/resources/index.mdx
@@ -2,7 +2,12 @@
 title: Resources
 ---
 
-import { AnchorLinks, AnchorLink, PageDescription, Video } from "gatsby-theme-carbon";
+import {
+  AnchorLinks,
+  AnchorLink,
+  PageDescription,
+  Video,
+} from 'gatsby-theme-carbon';
 
 <PageDescription>
   Add-on repositories, or repos, are components built for a specific product or
@@ -21,9 +26,7 @@ import { AnchorLinks, AnchorLink, PageDescription, Video } from "gatsby-theme-ca
   <AnchorLink>The foundation</AnchorLink>
 </AnchorLinks>
 
-### Images
-
-![mirror](./mirror.jpg)
+## Images
 
 ![blossom](../../images/blossom.jpg)
 

diff --git a/packages/gatsby-theme-carbon/src/components/AnchorLinks/AnchorLinks.js b/packages/gatsby-theme-carbon/src/components/AnchorLinks/AnchorLinks.js
@@ -18,8 +18,10 @@ export default class AnchorLinks extends React.Component {
 
     return (
       <ul css={responsiveStyles} className={classNames}>
-        {children.map(item => (
-          <li className={`${prefix}--anchor-links__item`}>{item}</li>
+        {children.map((item, i) => (
+          <li key={i} className={`${prefix}--anchor-links__item`}>
+            {item}
+          </li>
         ))}
       </ul>
     );

diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js b/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js
@@ -13,7 +13,6 @@ const StyledGrid = styled(Grid)`
     props.color ||
     props.theme.colors.black100};};
   width: 100%;
-  max-width: 100%;
 `;
 
 const StyledRow = styled.section`
@@ -23,6 +22,7 @@ const StyledRow = styled.section`
   align-items: flex-start;
   padding-top: ${props => props.theme.layout[4]};
   padding-bottom: ${props => props.theme.layout[4]};
+  max-width: 74.25rem;
   flex-direction: column;
   ${mq.md} {
     flex-direction: row;
@@ -36,7 +36,7 @@ const firstColumn = ({ typeStyles, layout }) => [
     paddingBottom: layout[2],
     width: '100%',
     [mq.md]: {
-      width: '45%',
+      width: '33%',
     },
   },
 ];
@@ -46,6 +46,9 @@ const secondColumn = ({ typeStyles }) => [
   {
     padding: '0 1rem',
     width: '100%',
+    [mq.md]: {
+      width: '66%',
+    },
   },
 ];
 

diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss b/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss
@@ -60,15 +60,6 @@
   margin-top: -25%;
 }
 
-// Headings on homepage
-
-.container--homepage h3,
-.container--homepage .page-content > div > .#{$prefix}--row:first-child h3 {
-  @include carbon--type-style('expressive-heading-03', true);
-  margin-top: rem(64px);
-  margin-bottom: $spacing-lg;
-}
-
 // Dots background pattern
 
 .homepage--dots {

diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js
@@ -23,7 +23,7 @@ const LeftNavItem = props => {
         element={Link}
         partiallyActive
         activeClassName="bx--side-nav__link--current"
-        to={`/${items[0].path}`}
+        to={`${items[0].path}`}
       >
         {category}
       </SideNavLink>
@@ -63,7 +63,7 @@ const SubNavItems = ({ items, location, onClick }) => {
     const active = isActive(item);
     return (
       <SideNavMenuItem
-        to={`/${item.path}`}
+        to={`${item.path}`}
         onClick={onClick}
         element={Link}
         isActive={active}

diff --git a/packages/gatsby-theme-carbon/src/components/Main.js b/packages/gatsby-theme-carbon/src/components/Main.js
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+import { Grid } from './Grid';
+
+const Main = styled(Grid)`
+  padding-top: ${props => (props.padded ? '80px' : 0)};
+  padding-bottom: 80px;
+`;
+
+export default Main;
diff --git a/packages/gatsby-theme-carbon/src/templates/Default.js b/packages/gatsby-theme-carbon/src/templates/Default.js
@@ -1,27 +1,24 @@
 import React from 'react';
 import { WebsiteBackToTopBtn } from '@carbon/addons-website';
+import styled from '@emotion/styled';
 import Layout from '../components/Layout';
 import PageHeader from '../components/PageHeader';
 // import EditLink from '../components/EditLink';
 // import NextPrevious from '../components/NextPrevious';
 import PageTabs from '../components/PageTabs';
+import Main from '../components/Main';
 
-const Default = ({ pathContext: { frontmatter }, children, ...props }) => {
+const Default = ({ pathContext, children, location, ...rest }) => {
+  const { frontmatter = {} } = pathContext;
   const { tabs, title } = frontmatter;
-  const slug = props.location.pathname;
+  const slug = location.pathname;
   const currentTab = slug.split('/').slice(-1)[0];
   return (
     <Layout homepage={false}>
       <PageHeader title={title} label="label">
         {tabs && <PageTabs slug={slug} tabs={tabs} currentTab={currentTab} />}
       </PageHeader>
-      <main
-        style={{ paddingTop: '80px' }}
-        className="page-content bx--grid"
-        id="maincontent"
-      >
-        {children}
-      </main>
+      <Main padded>{children}</Main>
       {/* <NextPrevious slug={slug} currentTabs={tabs} currentPage={currentTab} /> */}
       <WebsiteBackToTopBtn />
     </Layout>

diff --git a/packages/gatsby-theme-carbon/src/templates/Home.js b/packages/gatsby-theme-carbon/src/templates/Home.js
@@ -4,17 +4,19 @@ import Layout from '../components/Layout';
 import Banner from '../components/Homepage/Banner';
 import Callout from '../components/Homepage/Callout';
 import Light from '../images/blossom.jpg';
+import Main from '../components/Main';
 
 const Homepage = ({
   children,
   Banner: UserBanner,
   FirstCallout,
   SecondCallout,
+  ...rest
 }) => (
   <Layout homepage>
     {UserBanner}
     {FirstCallout}
-    <main className="bx--grid">{children}</main>
+    <Main>{children}</Main>
     {SecondCallout}
     <WebsiteBackToTopBtn />
   </Layout>