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

fix: do dont component updates #1220

Merged
merged 4 commits into from
Feb 14, 2022
Merged

fix: do dont component updates #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1b68d7
fix: do dont component updates
alisonjoseph Feb 9, 2022
ace8060
fix: spelling
alisonjoseph Feb 9, 2022
70bfa0c
Merge branch 'main' into dodontupdates
alisonjoseph Feb 14, 2022
e3ea478
fix: add color token
alisonjoseph Feb 14, 2022
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
8 changes: 8 additions & 0 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 @@ -3,6 +3,14 @@ title: DoDontExample
description: Usage instructions for the DoDontExample component
---

<InlineNotification kind="warning">

**Warning:** This component will be deprecated in a future release. Please use
the [DoDontRow](/components/DoDontRow) and [DoDont](/components/DoDontRow)
component instead.

</InlineNotification>

<PageDescription>

The `<DoDontExample>` component will generally need to be placed inside `<Row>`
Expand Down
63 changes: 53 additions & 10 deletions packages/example/src/pages/components/DoDontRow.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,31 @@ component, which now includes built in columns.

</DoDontRow>

<DoDontRow>

<DoDont aspectRatio="4:3" text="4:3" />

<DoDont aspectRatio="16:9" text="16:9" />

<DoDont aspectRatio="2:1" text="2:1" />

</DoDontRow>

<DoDontRow>

<DoDont aspectRatio="9:16" text="9:16" />

<DoDont aspectRatio="1:2" text="1:2" />

<DoDont aspectRatio="3:4" text="3:4" />

</DoDontRow>
<DoDontRow>

<DoDont aspectRatio="1:1" text="1:1" />

</DoDontRow>

## Code

### Image
Expand Down Expand Up @@ -99,6 +124,24 @@ component, which now includes built in columns.
</DoDontRow>
```

### Aspect Ratios

```mdx path=components/DoDontRow/DoDontRow.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/DoDontRow
<DoDontRow>
<DoDont aspectRatio="4:3" text="4:3" />
<DoDont aspectRatio="16:9" text="16:9" />
<DoDont aspectRatio="2:1" text="2:1" />
</DoDontRow>
<DoDontRow>
<DoDont aspectRatio="9:16" text="9:16" />
<DoDont aspectRatio="1:2" text="1:2" />
<DoDont aspectRatio="3:4" text="3:4" />
</DoDontRow>
<DoDontRow>
<DoDont aspectRatio="1:1" text="1:1" />
</DoDontRow>
```

## Props

### DoDontRow
Expand All @@ -109,13 +152,13 @@ component, which now includes built in columns.

### Do & Dont

| property | propType | required | default | description |
| -------------- | -------- | -------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| children | node | | | child node, expects a markdown image or `<Video>` component |
| text | string | | | text to display inside the component instead of an image or video |
| caption | string | | | caption |
| captionTitle | string | | | caption title |
| color | string | | light | set to `dark` for dark background card |
| aspectRatio | string | | | set to `1:1` to force square example <br/>_(We welcome [contributions](https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/DoDontExample) to add additional aspect ratio options)_ |
| type | string | | `do` | specify the type of example with `do` or `dont` |
| ...columnProps | number | | `colMd=4, colLg=4` | specify any `<Column>` props to pass down |
| property | propType | required | default | description |
| -------------- | -------- | -------- | ------------------ | ----------------------------------------------------------------- |
| children | node | | | child node, expects a markdown image or `<Video>` component |
| text | string | | | text to display inside the component instead of an image or video |
| caption | string | | | caption |
| captionTitle | string | | | caption title |
| color | string | | light | set to `dark` for dark background card |
| aspectRatio | string | | | `1:1`,`1:2`,`2:1`,`3:4`,`4:3`,`16:9`,`9:16` |
| type | string | | `do` | specify the type of example with `do` or `dont` |
| ...columnProps | number | | `colMd=4, colLg=4` | specify any `<Column>` props to pass down |
4 changes: 2 additions & 2 deletions packages/gatsby-theme-carbon/src/components/DoDontExample/do-dont-example.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
}

.#{$prefix}--example--correct .#{$prefix}--example-card::before {
background: $support-02;
background: $carbon--green-50;
}

.#{$prefix}--example--incorrect .#{$prefix}--example-card::before {
Expand All @@ -118,7 +118,7 @@
}

.#{$prefix}--example__icon--correct {
fill: $support-02;
fill: $carbon--green-50;
}

.#{$prefix}--example__icon--incorrect {
Expand Down
16 changes: 15 additions & 1 deletion packages/gatsby-theme-carbon/src/components/DoDontRow/DoDont.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,22 @@ export default class DoDont extends React.Component {
const wrapperClassNames = cx(className, styles.example, {
[styles.correct]: type === 'do',
[styles.incorrect]: type === 'dont',
[styles.square]: aspectRatio === '1:1',
[styles.dark]: color === 'dark',
[styles.ratio]:
aspectRatio === '1:1' ||
aspectRatio === '2:1' ||
aspectRatio === '1:2' ||
aspectRatio === '4:3' ||
aspectRatio === '3:4' ||
aspectRatio === '9:16' ||
aspectRatio === '16:9',
[styles.ratio1x1]: aspectRatio === '1:1',
[styles.ratio2x1]: aspectRatio === '2:1',
[styles.ratio1x2]: aspectRatio === '1:2',
[styles.ratio4x3]: aspectRatio === '4:3',
[styles.ratio3x4]: aspectRatio === '3:4',
[styles.ratio9x16]: aspectRatio === '9:16',
[styles.ratio16x9]: aspectRatio === '16:9',
});

return (
Expand Down
28 changes: 26 additions & 2 deletions packages/gatsby-theme-carbon/src/components/DoDontRow/DoDontRow.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,10 +103,34 @@
color: $carbon--white-0;
}

.square .card {
.ratio1x1 .card {
padding-top: 100%;
}

.ratio4x3 .card {
padding-top: 75%;
}

.ratio3x4 .card {
padding-top: 133.3333333333%;
}

.ratio2x1 .card {
padding-top: 50%;
}

.ratio1x2 .card {
padding-top: 150%;
}

.ratio9x16 .card {
padding-top: 177.7777777778%;
}

.ratio16x9 .card {
padding-top: 56.25%;
}

.card::before {
content: '';
position: absolute;
Expand Down Expand Up @@ -145,7 +169,7 @@
position: relative;
}

.square .card-content {
.ratio .card-content {
position: absolute;
top: 0;
left: 0;
Expand Down