Skip to content

Commit

Permalink
Merge pull request #242 from vpicone/code-snippet
Browse files Browse the repository at this point in the history 
Code snippet
  • Loading branch information
@vpicone
vpicone authored Jul 17, 2019
2 parents 29155eb + d2090ae commit daaf17e
Show file tree
Hide file tree
Showing 27 changed files with 657 additions and 534 deletions.
2 changes: 2 additions & 0 deletions packages/example/src/data/nav-items.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
path: /components/DoDontExample
- title: Caption
path: /components/Caption
- title: Code blocks
path: /components/code-blocks
- title: Aside
path: /components/Aside
- title: AnchorLinks
Expand Down
8 changes: 4 additions & 4 deletions packages/example/src/pages/components/Accordion.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ The `<Accordion>` and `<AccordionItem>` components are used together to display

## Code

```
```jsx https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Accordion
<Accordion>
<AccordionItem title='Title 1'>Content Section</AccordionItem>
<AccordionItem title='Title 2'>Content Section</AccordionItem>
<AccordionItem title='Title 3'>Content Section</AccordionItem>
<AccordionItem title="Title 1">Content Section</AccordionItem>
<AccordionItem title="Title 2">Content Section</AccordionItem>
<AccordionItem title="Title 3">Content Section</AccordionItem>
</Accordion>
```

Expand Down
4 changes: 2 additions & 2 deletions packages/example/src/pages/components/AnchorLinks.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ For most pages, we recommend starting with a `PageDescription` followed by `Anch

#### Normal

```
```jsx https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/AnchorLinks
<AnchorLinks>
<AnchorLink>Link 1</AnchorLink>
<AnchorLink>Link 2</AnchorLink>
Expand All @@ -42,7 +42,7 @@ For most pages, we recommend starting with a `PageDescription` followed by `Anch

#### Small

```
```jsx https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/AnchorLinks
<AnchorLinks small>
<AnchorLink>Small link 1</AnchorLink>
<AnchorLink>Small link 2</AnchorLink>
Expand Down
75 changes: 31 additions & 44 deletions packages/example/src/pages/components/ArticleCard.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,86 +92,73 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `

## Code

```
```jsx 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>
<Column colMd={4} colLg={4} noGutterMdLeft>
<ArticleCard
subTitle="subTitle"
title="Title"
author="Josh Black"
date="April 29, 2019"
readTime="Read time: 5 min"
href="/"
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
<ArticleCard
title="Explore & Create"
author="Josh Black"
href="https://www.ibm.com"
actionIcon="arrowRight"
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
<ArticleCard
title="Explore & Create a longer title example in this space"
href="https://www.ibm.com"
disabled
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
<ArticleCard
title="Explore & Create"
color="dark"
href="https://www.ibm.com"
actionIcon="download"
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
<ArticleCard
title="Explore & Create"
author="Josh Black"
readTime="Read time: 5 min"
color="dark"
href="https://www.ibm.com"
actionIcon="email"
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
<ArticleCard
title="Explore & Create"
author="Josh Black"
date="April 29, 2019"
readTime="Read time: 5 min"
color="dark"
disabled
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
>
![Dark article layout mockup](/images/Article_05.png)
</ArticleCard>
</Column>
</Row>
```

Expand Down
15 changes: 6 additions & 9 deletions packages/example/src/pages/components/Aside.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,13 @@ What we borrow from our own design history is not a mid-century aesthetic in sty

## Code

```
```jsx https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Aside
<Column colSm={0} colMd={2} colLg={3} offsetMd={1} noGutterSm>
<Aside>
**Good design is always good design.**
What we borrow from our own design history is not a mid-century aesthetic in stylistic terms, but the modernist attitudes and approach used at the time.
</Aside>
<Aside>
**Good design is always good design.** What we borrow from our own design
history is not a mid-century aesthetic in stylistic terms, but the modernist
attitudes and approach used at the time.
</Aside>
</Column>
```

Expand Down
5 changes: 3 additions & 2 deletions packages/example/src/pages/components/Caption.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,10 @@ The `<Caption>` component is typically used below images or videos. They will de

#### Normal

```
```jsx https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Caption
<Caption>
This is a regular caption. It will attempt to respond to it's container element appropriately.
This is a regular caption. It will attempt to respond to it's container
element appropriately.
</Caption>
```
Expand Down
25 changes: 14 additions & 11 deletions packages/example/src/pages/components/DoDontExample.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ The `<DoDontExample>` component will generally need to be placed inside `<Row>`

#### Text

<DoDontExample type="dont" aspectRatio="1:1" color="dark" captionTitle="Caption title" caption="Caption" text="This is some text"></DoDontExample>
<DoDontExample type="dont" aspectRatio="1:1" color="dark" captionTitle="Caption title" caption="Caption" text="This is some text" />
</Column>
</Row>
<Row>
Expand All @@ -45,27 +45,30 @@ The `<DoDontExample>` component will generally need to be placed inside `<Row>`

#### Image

```
```jsx 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>
```

#### Text

```
<DoDontExample type="dont" aspectRatio="1:1" color="dark" captionTitle="Caption title" caption="Caption" text="This is some text"></DoDontExample>
```jsx https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/DoDontExample
<DoDontExample
type="dont"
aspectRatio="1:1"
color="dark"
captionTitle="Caption title"
caption="Caption"
text="This is some text"
/>
```

#### Video

```
```jsx https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/DoDontExample
<DoDontExample type="do" caption="Caption" captionTitle="Caption title">
<Video vimeoId="310583077" />
<Video vimeoId="310583077" />
</DoDontExample>
```

Expand Down
10 changes: 3 additions & 7 deletions packages/example/src/pages/components/FeatureCard.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,21 +36,17 @@ The `<FeatureCard>` component takes the same props as the `<ResourceCard>` compo

## Code

```
```jsx https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/FeatureCard
<FeatureCard
subTitle="With subtitle"
title="Title"
actionIcon="arrowRight"
href="/"
disabled
color="dark"
>
![demo image](/images/large-image.png)
>
![demo image](/images/large-image.png)
</FeatureCard>
```

## Props
Expand Down
Loading

1 comment on commit daaf17e

@vercel
Copy link

@vercel vercel bot commented on daaf17e Jul 17, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully aliased the URL https://gatsby-theme-carbon-rgps4v2b7.now.sh to the following aliases:

Please sign in to comment.