fix: homepage typography updates, alt tag and asset updates

carbon-design-system · Jul 9, 2019 · b09ff9c · b09ff9c
1 parent 92bcde7
commit b09ff9c
Show file tree

Hide file tree

Showing 20 changed files with 100 additions and 88 deletions.
diff --git a/packages/example/src/gatsby-theme-carbon/templates/Homepage.js b/packages/example/src/gatsby-theme-carbon/templates/Homepage.js
@@ -1,33 +1,36 @@
 import React from 'react';
 import { HomepageBanner, HomepageCallout } from 'gatsby-theme-carbon';
-
-// Component to be shadowed
 import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
+import { calloutLink } from './Homepage.module.scss';
 
 import Carbon from '../../images/carbon.jpg';
 
-const FirstLeftText = () => <p>Callout #1</p>;
+const FirstLeftText = () => <p>Callout component</p>;
 
 const FirstRightText = () => (
   <p>
     This is a callout component. You can edit the contents by updating the
-    pre-shadowed homepage template. You can provide a color and backgroundColor
-    props to suit your theme.
-    <br />
-    <a href="https://github.com/carbon-design-system/gatsby-theme-carbon/blob/master/packages/example/src/gatsby-theme-carbon/templates/Homepage.js">
+    pre-shadowed homepage template. You can provide <code>color</code> and{' '}
+    <code>backgroundColor</code> props to suit your theme.
+    <a
+      className={calloutLink}
+      href="https://github.com/carbon-design-system/gatsby-theme-carbon/blob/master/packages/example/src/gatsby-theme-carbon/templates/Homepage.js"
+    >
       Homepage source →
     </a>
   </p>
 );
 
-const SecondLeftText = () => <p>Callout #2</p>;
+const SecondLeftText = () => <p>Callout component</p>;
 
 const SecondRightText = () => (
   <p>
     You can also not use these components at all by not providing the callout
     props to the template or writing your own template.
-    <br />
-    <a href="https://github.com/carbon-design-system/gatsby-theme-carbon/blob/master/packages/example/src/gatsby-theme-carbon/templates/Homepage.js">
+    <a
+      className={calloutLink}
+      href="https://github.com/carbon-design-system/gatsby-theme-carbon/blob/master/packages/example/src/gatsby-theme-carbon/templates/Homepage.js"
+    >
       Homepage source →
     </a>
   </p>
@@ -38,7 +41,12 @@ const BannerText = () => <h1>Banner component</h1>;
 const customProps = {
   Banner: <HomepageBanner renderText={BannerText} image={Carbon} />,
   FirstCallout: (
-    <HomepageCallout leftText={FirstLeftText} rightText={FirstRightText} />
+    <HomepageCallout
+      backgroundColor="#030303"
+      color="white"
+      leftText={FirstLeftText}
+      rightText={FirstRightText}
+    />
   ),
   SecondCallout: (
     <HomepageCallout

diff --git a/packages/example/src/gatsby-theme-carbon/templates/Homepage.module.scss b/packages/example/src/gatsby-theme-carbon/templates/Homepage.module.scss
@@ -0,0 +1,4 @@
+.callout-link {
+  margin-top: $spacing-06;
+  display: block;
+}
diff --git a/packages/example/src/images/Light_theme_01.png b/packages/example/src/images/Light_theme_01.png
diff --git a/packages/example/src/images/blossom.jpg b/packages/example/src/images/blossom.jpg
diff --git a/packages/example/src/pages/components/ArticleCard.mdx b/packages/example/src/pages/components/ArticleCard.mdx
@@ -21,7 +21,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       href="/"
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -33,7 +33,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       actionIcon="arrowRight"
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -44,7 +44,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       disabled
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -56,7 +56,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       actionIcon="download"
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -70,7 +70,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       actionIcon="email"
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -84,7 +84,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       disabled
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -105,7 +105,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       href="/"
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -117,7 +117,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       actionIcon="arrowRight"
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -128,7 +128,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       disabled
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -140,7 +140,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       actionIcon="download"
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -154,7 +154,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       actionIcon="email"
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>
@@ -168,7 +168,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
       disabled
       >
 
-![](/images/Article_05.png)
+![Dark article layout mockup](/images/Article_05.png)
 
   </ArticleCard>
 </Column>

diff --git a/packages/example/src/pages/components/DoDontExample.mdx b/packages/example/src/pages/components/DoDontExample.mdx
@@ -17,7 +17,7 @@ The `<DoDontExample>` component will generally need to be placed inside `<Row>`
 
 <DoDontExample type="do" captionTitle="Caption title" caption="Caption">
 
-![Alt text](images/Light_theme_02.png)
+![Alt text](./images/light-theme.png)
 
 </DoDontExample>
 </Column>
@@ -48,7 +48,7 @@ The `<DoDontExample>` component will generally need to be placed inside `<Row>`
 ```
 <DoDontExample type="do" captionTitle="Caption title" caption="Caption">
 
-![Alt text](images/Light_theme_02.png)
+![Alt text](images/light-theme.png)
 
 </DoDontExample>
 ```

diff --git a/packages/example/src/pages/components/Grid.mdx b/packages/example/src/pages/components/Grid.mdx
@@ -79,17 +79,17 @@ The `<Column>` component is used to define column widths for your content, you c
 <Row>
 <Column colMd={4} colLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 </Row>
@@ -99,17 +99,17 @@ The `<Column>` component is used to define column widths for your content, you c
 <Row>
 <Column colMd={4} colLg={4} noGutterMdLeft>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4} noGutterMdLeft>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4} noGutterMdLeft>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 </Row>
@@ -119,17 +119,17 @@ The `<Column>` component is used to define column widths for your content, you c
 <Row>
 <Column colMd={4} colLg={4} noGutterSm>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 </Row>
@@ -139,12 +139,12 @@ The `<Column>` component is used to define column widths for your content, you c
 <Row>
 <Column colMd={4} colLg={4} offsetLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 </Row>
@@ -155,17 +155,17 @@ The `<Column>` component is used to define column widths for your content, you c
 <Row>
 <Column colMd={4} colLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 </Row>
@@ -177,17 +177,17 @@ The `<Column>` component is used to define column widths for your content, you c
 <Row>
 <Column colMd={4} colLg={4} noGutterMdLeft>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4} noGutterMdLeft>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4} noGutterMdLeft>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 </Row>
@@ -199,17 +199,17 @@ The `<Column>` component is used to define column widths for your content, you c
 <Row>
 <Column colMd={4} colLg={4} noGutterSm>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 </Row>
@@ -221,12 +221,12 @@ The `<Column>` component is used to define column widths for your content, you c
 <Row>
 <Column colMd={4} colLg={4} offsetLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 <Column colMd={4} colLg={4}>
 
-![Colors](images/Article_05.png)
+![Grid Example](images/Article_05.png)
 
 </Column>
 </Row>