Skip to content

Commit

Permalink
feat: add title component (#647)
Browse files Browse the repository at this point in the history 
* feat: add title component

* docs: add documentation, use inline block

* docs: use Title component and normalize documentation heading hierarchy
  • Loading branch information
@vpicone @jeanservaas
vpicone authored and jeanservaas committed Jan 17, 2020
1 parent a0d7ce2 commit 298b43a
Show file tree
Hide file tree
Showing 25 changed files with 121 additions and 203 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 @@ -60,5 +60,7 @@
path: /components/ResourceCard
- title: Tabs
path: /components/Tabs
- title: Title
path: /components/Title
- title: Video
path: /components/Video
6 changes: 4 additions & 2 deletions packages/example/src/pages/components/Accordion.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,16 @@ Nullam vestibulum blandit libero, ac tempus felis tristique id. Aliquam rhoncus
</Accordion>
```

### `Accordion` Props
### Props

<Title>Accordion</Title>

| property | propType | required | default | description |
| --------- | -------- | -------- | ------- | ----------------------------------------------------------------- |
| children | node | | | Pass in the children that will be rendered within the Accordion |
| className | string | | | Specify an optional className to be applied to the container node |

### `AccordionItem` Props
<Title>AccordionItem</Title>

| property | propType | required | default | description |
| --------------- | -------- | -------- | ------------------------------ | ----------------------------------------------------------------------------------- |
Expand Down
14 changes: 8 additions & 6 deletions packages/example/src/pages/components/AnchorLinks.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ For most pages, we recommend starting with a `PageDescription` followed by `Anch

## Example

#### Normal
<Title>Normal</Title>

<AnchorLinks>
<AnchorLink>Link 1</AnchorLink>
Expand All @@ -25,7 +25,7 @@ For most pages, we recommend starting with a `PageDescription` followed by `Anch
<AnchorLink>Link 7</AnchorLink>
</AnchorLinks>

#### Small
<Title>Small</Title>

<AnchorLinks small>
<AnchorLink>Small link 1</AnchorLink>
Expand All @@ -35,7 +35,7 @@ For most pages, we recommend starting with a `PageDescription` followed by `Anch

## Code

#### Normal
<Title>Normal</Title>

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

#### Small
<Title>Small</Title>

```jsx path=components/AnchorLinks/AnchorLinks.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/AnchorLinks
<AnchorLinks small>
Expand All @@ -59,14 +59,16 @@ For most pages, we recommend starting with a `PageDescription` followed by `Anch
</AnchorLinks>
```

### `AnchorLinks` Props
### Props

<Title>AnchorLinks</Title>

| property | propType | required | default | description |
| -------- | -------- | -------- | ------- | ----------------------- |
| children | node | | | |
| small | bool | | | Display small font size |

### `AnchorLink` Props
<Title>AnchorLink</Title>

| property | propType | required | default | description |
| -------- | -------- | -------- | -------------- | -------------------------------------------------------------------------------------------------------- |
Expand Down
2 changes: 1 addition & 1 deletion packages/example/src/pages/components/ArticleCard.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ The `<ArticleCard>` component should generally be used inside of a `<Row>` and `
</Row>
```

## Props
### Props

| property | propType | required | default | description |
| ---------- | -------- | -------- | -------- | --------------------------------------------------------------------------------------------------- |
Expand Down
10 changes: 5 additions & 5 deletions packages/example/src/pages/components/Caption.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The `<Caption>` component is typically used below images or videos. They will de

## Example

#### Normal
<Title>Normal</Title>

![Colors](images/colors.png)

Expand All @@ -20,7 +20,7 @@ The `<Caption>` component is typically used below images or videos. They will de
element appropriately.
</Caption>

#### Full-width
<Title>Full</Title>-width

![Colors](images/colors.png)

Expand All @@ -31,7 +31,7 @@ The `<Caption>` component is typically used below images or videos. They will de

## Code

#### Normal
<Title>Normal</Title>

```jsx path=components/Caption/Caption.js src= https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Caption
<Caption>
Expand All @@ -40,7 +40,7 @@ The `<Caption>` component is typically used below images or videos. They will de
</Caption>
```

#### Full-width
<Title>Full</Title>-width

```jsx path=components/Caption/Caption.js src= https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Caption
<Caption fullWidth>
Expand All @@ -49,7 +49,7 @@ The `<Caption>` component is typically used below images or videos. They will de
</Caption>
```

## Props
### Props

| property | propType | required | default | description |
| --------- | -------- | -------- | ------- | --------------------- |
Expand Down
14 changes: 7 additions & 7 deletions packages/example/src/pages/components/DoDontExample.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ The `<DoDontExample>` component will generally need to be placed inside `<Row>`
<Row>
<Column colMd={4} colLg={4}>

#### Image
<Title>Image</Title>

<DoDontExample type="do" captionTitle="Caption title" caption="Caption">

Expand All @@ -24,15 +24,15 @@ The `<DoDontExample>` component will generally need to be placed inside `<Row>`
</Column>
<Column colMd={4} colLg={4}>

#### Text
<Title>Text</Title>

<DoDontExample type="dont" aspectRatio="1:1" color="dark" captionTitle="Caption title" caption="Caption" text="This is some text" />
</Column>
</Row>
<Row>
<Column colLg={8}>

#### Video
<Title>Video</Title>

<DoDontExample type="do" caption="Caption" captionTitle="Caption title">

Expand All @@ -44,15 +44,15 @@ The `<DoDontExample>` component will generally need to be placed inside `<Row>`

## Code

#### Image
<Title>Image</Title>

```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)
</DoDontExample>
```

#### Text
<Title>Text</Title>

```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
Expand All @@ -65,15 +65,15 @@ The `<DoDontExample>` component will generally need to be placed inside `<Row>`
/>
```

#### Video
<Title>Video</Title>

```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" caption="Caption" captionTitle="Caption title">
<Video vimeoId="310583077" />
</DoDontExample>
```

## Props
### Props

| property | propType | required | default | description |
| ------------ | -------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand Down
2 changes: 1 addition & 1 deletion packages/example/src/pages/components/FeatureCard.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ The `<FeatureCard>` component takes the same props as the `<ResourceCard>` compo
</FeatureCard>
```

## Props
### Props

| property | propType | required | default | description |
| ---------- | -------- | -------- | -------- | --------------------------------------------------------------------------------------------------- |
Expand Down
60 changes: 9 additions & 51 deletions packages/example/src/pages/components/Grid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,53 +5,15 @@ description: Usage instructions for the Grid component

<PageDescription>

The `<Grid>`, `<Row>` and `<Column>` components are used to arrange content and components on the grid within a page.

</PageDescription>

The math for the website is calculated using a 12 column grid at the large breakpoint, 8 column at medium (tablet) breakpoint and 4 column at the small (mobile) breakpoint. The design is based on a 16 column grid, however the math is calcualted with 12 to prevent having to add a `offset` class to each row.

`<Row>` and `<Column>` components are used to arrange content and components on the grid within a page.
To learn more about the grid is built, you can read the docs in the [Carbon](https://github.com/carbon-design-system/carbon/tree/master/packages/grid) repo.

<AnchorLinks>
<AnchorLink>Grid</AnchorLink>
<AnchorLink>Row</AnchorLink>
<AnchorLink>Column</AnchorLink>
</AnchorLinks>

## Grid

<PageDescription>

The `<Grid>` component is a wrapper that adds the `bx--grid` class to a wrapper div. **You won’t need this** when adding components to `.mdx` pages as this is already built into the template.

</PageDescription>

### Code

```jsx path=components/Grid.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Grid
<Grid>
<Row>
<Column>Contents</Column>
</Row>
</Grid>
```

### Props

| property | propType | required | default | description |
| --------- | -------- | -------- | ------- | --------------------- |
| children | node | | | |
| className | string | | | Add custom class name |

## Row

<PageDescription>

The `<Row>` component is a wrapper that adds the `bx--row` class to a wrapper div. You will want to use this to define rows that you will place `<Column>` components inside of.

</PageDescription>

### Code

```jsx path=components/Grid.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Grid
Expand All @@ -62,7 +24,7 @@ The `<Row>` component is a wrapper that adds the `bx--row` class to a wrapper di
</Row>
```

### Props
<Title>Row props</Title>

| property | propType | required | default | description |
| --------- | -------- | -------- | ------- | --------------------- |
Expand All @@ -71,12 +33,8 @@ The `<Row>` component is a wrapper that adds the `bx--row` class to a wrapper di

## Column

<PageDescription>

The `<Column>` component is used to define column widths for your content, you can set the rules at different breakpoints with the props.

</PageDescription>

### Example

<Row>
Expand All @@ -97,7 +55,7 @@ The `<Column>` component is used to define column widths for your content, you c
</Column>
</Row>

#### No gutter left
<Title>No gutter left</Title>

<Row>
<Column colMd={4} colLg={4} noGutterMdLeft>
Expand All @@ -117,7 +75,7 @@ The `<Column>` component is used to define column widths for your content, you c
</Column>
</Row>

#### No gutter
<Title>No gutter</Title>

<Row>
<Column colMd={4} colLg={4} noGutterSm>
Expand All @@ -137,7 +95,7 @@ The `<Column>` component is used to define column widths for your content, you c
</Column>
</Row>

#### Offset
<Title>Offset</Title>

<Row>
<Column colMd={4} colLg={4} offsetLg={4}>
Expand Down Expand Up @@ -168,7 +126,7 @@ The `<Column>` component is used to define column widths for your content, you c
</Row>
```

#### No gutter left
<Title>No gutter left</Title>

```jsx path=components/Grid.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Grid
<Row>
Expand All @@ -184,7 +142,7 @@ The `<Column>` component is used to define column widths for your content, you c
</Row>
```

#### No gutter
<Title>No gutter</Title>

```jsx path=components/Grid.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Grid
<Row>
Expand All @@ -200,7 +158,7 @@ The `<Column>` component is used to define column widths for your content, you c
</Row>
```

#### Offset
<Title>Offset</Title>

```jsx path=components/Grid.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Grid
<Row>
Expand All @@ -213,7 +171,7 @@ The `<Column>` component is used to define column widths for your content, you c
</Row>
```

### Props
<Title>Column props</Title>

| property | propType | required | default | description |
| --------------- | -------- | -------- | ------- | -------------------------------------------- |
Expand Down
2 changes: 1 addition & 1 deletion packages/example/src/pages/components/ImageCard.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ The `<ImageCard>` component should generally be used inside of a `<Row>` and `<C
</Row>
```

## Props
### Props

| property | propType | required | default | description |
| ------------- | -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
Expand Down
Loading

1 comment on commit 298b43a

@vercel
Copy link

@vercel vercel bot commented on 298b43a Jan 17, 2020

Choose a reason for hiding this comment

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

Successfully deployed to following URLs:

Please sign in to comment.