Skip to content

Commit

Permalink
docs(card): add coloured examples
Browse files Browse the repository at this point in the history 
- fix 'lilac' to 'lavender'
- provide usage notes
- has parity with Sketch
  • Loading branch information
@theetrain
theetrain committed Oct 23, 2017
1 parent a172ed6 commit c80c99a
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 11 deletions.
2 changes: 0 additions & 2 deletions docs/scss/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@
```
*/



.docs__layout-vertically {
.wrapper {
display: flex;
Expand Down
21 changes: 12 additions & 9 deletions src/components/Card/Card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,28 +16,31 @@ Cards will stretch to fill their container. Wrap the card in another element to
### Coloured variants
Card also supports a grey or lilac `variant`. These appear flat, while the default white Card appears floating.
Card also supports a 'grey' or 'lavender' `variant`. These appear flat, while the default white Card appears floating.
Note:
- Headings should use their natural colour

This comment has been minimized.

Sign in to view

Copy link
@ryanoglesby08

ryanoglesby08 Oct 23, 2017

Contributor

Not sure what this means... all Headings have an explicit color set by the component and that cannot be overridden. So there is no way to NOT use their natural color.

This comment has been minimized.

Sign in to view

Copy link
@theetrain

theetrain Oct 23, 2017

Author Contributor

If someone goes rogue and wraps the header text with a <span style={{ color: 'purple' }}>, they would be going against the intended use. I think since I had seen designs with purple headings, it's tempting for me to make that happen in code.

This comment has been minimized.

Sign in to view

Copy link
@ryanoglesby08

ryanoglesby08 Oct 23, 2017

Contributor

I see, still this note does not seem appropriate here. We will never be able to fully prevent people from going rogue. We can only do the best we can. Otherwise we will have to put this same note all over the docs.
- Spacing between Headings and content should be `1rem`

This comment has been minimized.

Sign in to view

Copy link
@ryanoglesby08

ryanoglesby08 Oct 23, 2017

Contributor

I think its best not to put this here as this is not really the place for spacing documentation and encourages more hard coding. I realize the docs site is currently lacking that. But we will have the Spacing components soon.
```jsx {"props": {"className": "docs__layout-horizontally"}}
<div className="wrapper">
<Card variant="grey">
<Heading level="h4">I am new to TELUS.</Heading>
<Card variant="lavender">
<Heading level="h4">Holiday deal</Heading>
<div style={{ margin: "1rem 0" }}>
<Paragraph size="small">Order Pik TV, Internet and media box.</Paragraph>
<Paragraph size="medium">Get a new smartphone for $0<br/>on a 2-year plan.</Paragraph>
</div>
<ButtonLink href="#" variant="secondary">Get started</ButtonLink>
</Card>
<Card variant="grey">
<Heading level="h4">I am an existing TELUS customer.</Heading>
<Heading level="h4">Find the right gift</Heading>
<div style={{ margin: "1rem 0" }}>
<Paragraph size="small">Add Pik TV to My Account.</Paragraph>
<Paragraph>Find something they'll love from our<br/>selection of great devices.</Paragraph>
</div>

<ButtonLink href="#" variant="secondary">Continue</ButtonLink>
<ChevronLink variant="primary" href="">Explore latest devices</ChevronLink>
</Card>
</div>
```
Expand Down

0 comments on commit c80c99a

Please sign in to comment.