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

feat: add title component #647

Merged
merged 5 commits into from
Jan 17, 2020
Merged

feat: add title component #647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
836a20c
feat: add title component
vpicone Jan 13, 2020
7e79fa3
docs: add documentation, use inline block
vpicone Jan 14, 2020
f6cc1d2
docs: use Title component and normalize documentation heading hierarchy
vpicone Jan 16, 2020
2c728b9
Merge branch 'master' into title-component
vpicone Jan 16, 2020
28e09db
Merge branch 'master' into title-component
vpicone Jan 17, 2020
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
2 changes: 2 additions & 0 deletions packages/example/src/data/nav-items.yaml
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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