Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update markdown docs #438

Closed
wants to merge 2 commits into from
Closed

docs: update markdown docs #438

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c8fdf49
docs: update markdown docs
alisonjoseph Sep 20, 2019
1465281
Merge branch 'master' into add-warning
vpicone Sep 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions packages/example/src/pages/components/ArticleCard.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,13 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `

## Code

<InlineNotification>

**Note:** Images will not render if there is any extra whitespace in the lines above/below or before the image.
We reccomend using an editor where you can show whitespace to help.

</InlineNotification>

```jsx path=components/ArticleCard/ArticleCard.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/ArticleCard
<Row>
<Column colMd={4} colLg={4} noGutterMdLeft>
Expand All @@ -104,7 +111,8 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
readTime="Read time: 5 min"
href="/"
>
![Dark article layout mockup](/images/Article_05.png)

![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
Expand All @@ -114,7 +122,9 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
href="https://www.ibm.com"
actionIcon="arrowRight"
>
![Dark article layout mockup](/images/Article_05.png)

![Dark article layout mockup](/images/Article_05.png)

</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
Expand All @@ -123,7 +133,9 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
href="https://www.ibm.com"
disabled
>
![Dark article layout mockup](/images/Article_05.png)

![Dark article layout mockup](/images/Article_05.png)

</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
Expand All @@ -133,7 +145,9 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
href="https://www.ibm.com"
actionIcon="download"
>
![Dark article layout mockup](/images/Article_05.png)

![Dark article layout mockup](/images/Article_05.png)

</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
Expand All @@ -145,7 +159,9 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
href="https://www.ibm.com"
actionIcon="email"
>
![Dark article layout mockup](/images/Article_05.png)

![Dark article layout mockup](/images/Article_05.png)

</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
Expand All @@ -157,7 +173,9 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
color="dark"
disabled
>
![Dark article layout mockup](/images/Article_05.png)

![Dark article layout mockup](/images/Article_05.png)

</ArticleCard>
</Column>
</Row>
Expand Down
4 changes: 3 additions & 1 deletion packages/example/src/pages/components/DoDontExample.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ The `<DoDontExample>` component will generally need to be placed inside `<Row>`

```jsx path=components/DoDontExample/DoDontExample.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/DoDontExample
<DoDontExample type="do" captionTitle="Caption title" caption="Caption">
![Alt text](images/light-theme.png)

![Alt text](images/light-theme.png)

</DoDontExample>
```

Expand Down
11 changes: 10 additions & 1 deletion packages/example/src/pages/components/FeatureCard.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,13 @@ The `<FeatureCard>` component takes the same props as the `<ResourceCard>` compo

## Code

<InlineNotification>

**Note:** Images will not render if there is any extra whitespace in the lines above/below or before the image.
We reccomend using an editor where you can show whitespace to help.

</InlineNotification>

```jsx path=components/FeatureCard/FeatureCard.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/FeatureCard
<FeatureCard
subTitle="With subtitle"
Expand All @@ -46,7 +53,9 @@ The `<FeatureCard>` component takes the same props as the `<ResourceCard>` compo
disabled
color="dark"
>
![demo image](/images/large-image.png)

![demo image](/images/large-image.png)

</FeatureCard>
```

Expand Down
27 changes: 22 additions & 5 deletions packages/example/src/pages/components/ImageCard.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,21 @@ The `<ImageCard>` component should generally be used inside of a `<Row>` and `<C

## Code

<InlineNotification>

**Note:** Images will not render if there is any extra whitespace in the lines above/below or before the image.
We reccomend using an editor where you can show whitespace to help.

</InlineNotification>

```jsx path=components/ImageCard/ImageCard.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/ImageCard
<Row className="image-card-group">
<Column colMd={4} colLg={4} noGutterSm>
<ImageCard title="Title" subTitle="Subtitle" href="/">
![Square](/images/square.png)

![Square](/images/square.png)
</ImageCard>

<ImageCard
title="Dark title"
titleColor="dark"
Expand All @@ -90,7 +99,9 @@ The `<ImageCard>` component should generally be used inside of a `<Row>` and `<C
subTitleColor="light"
subTitle="Light subtitle"
>
![Light dark](./images/light-dark.jpg)

![Light dark](./images/light-dark.jpg)

</ImageCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
Expand All @@ -103,15 +114,21 @@ The `<ImageCard>` component should generally be used inside of a `<Row>` and `<C
titleColor="light"
subTitleColor="light"
>
![Plane image](./images/plane.jpg)

![Plane image](./images/plane.jpg)

</ImageCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ImageCard aspectRatio="1:1" href="/" hoverColor="dark">
![color pallete array](/images/color-grid.svg)

![color pallete array](/images/color-grid.svg)

</ImageCard>
<ImageCard disabled aspectRatio="1:1" href="/">
![Square](/images/square.png)

![Square](/images/square.png)

</ImageCard>
</Column>
</Row>
Expand Down
27 changes: 22 additions & 5 deletions packages/example/src/pages/components/ResourceCard.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,13 @@ The `<ResourceCard>` component should be wrapped with a `<Column>` inside of `<R

## Code

<InlineNotification>

**Note:** Images will not render if there is any extra whitespace in the lines above/below or before the image.
We reccomend using an editor where you can show whitespace to help.

</InlineNotification>

#### Group

```jsx path=components/ResourceCard/ResourceCard.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/ResourceCard
Expand All @@ -76,15 +83,19 @@ The `<ResourceCard>` component should be wrapped with a `<Column>` inside of `<R
subTitle="Carbon Design System"
href="https://www.carbondesignsystem.com"
>
![Github icon](/images/github-icon.png)

![Github icon](/images/github-icon.png)

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Carbon Design System"
href="https://www.carbondesignsystem.com"
>
![Github icon](/images/github-icon.png)

![Github icon](/images/github-icon.png)

</ResourceCard>
</Column>
</Row>
Expand All @@ -101,7 +112,9 @@ The `<ResourceCard>` component should be wrapped with a `<Column>` inside of `<R
actionIcon="arrowRight"
href="https://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
>
![Github icon](/images/github-icon.png)

![Github icon](/images/github-icon.png)

</ResourceCard>
</Column>
```
Expand All @@ -116,7 +129,9 @@ The `<ResourceCard>` component should be wrapped with a `<Column>` inside of `<R
aspectRatio="2:1"
href="https://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
>
![Github icon](/images/github-icon.png)

![Github icon](/images/github-icon.png)

</ResourceCard>
</Column>
```
Expand All @@ -133,7 +148,9 @@ The `<ResourceCard>` component should be wrapped with a `<Column>` inside of `<R
actionIcon="email"
href="https://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
>
![Sketch icon](/images/sketch-icon.png)

![Sketch icon](/images/sketch-icon.png)

</ResourceCard>
</Column>
```
Expand Down