Skip to content

Commit

Permalink
🎨 Add Examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@martalalik
martalalik committed Aug 12, 2022
1 parent 54113a2 commit b91d4ff
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 60 deletions.
19 changes: 18 additions & 1 deletion packages/eds-core-react/src/components/Typography/Typography.docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,21 @@ import { Typography } from '@equinor/eds-core-react'
<Typography>Sample text</Typography>
```

## Examples
## Examples

### Colors

<Story id="typography-typography--colors" />

### Custom

<Story id="typography-typography--custom" />

### Lines

<Story id="typography-typography--lines" />

### Link
Link used in body of text.

<Story id="typography-typography--link" />
126 changes: 67 additions & 59 deletions packages/eds-core-react/src/components/Typography/Typography.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default {
decorators: [
(Story) => {
return (
<Stack>
<Stack align="baseline">
<Story />
</Stack>
)
Expand All @@ -40,7 +40,7 @@ export const Introduction: Story<TypographyProps> = (args) => {
return <Typography {...args}>Sample text</Typography>
}

export const headings: Story<TypographyProps> = () => (
export const Headings: Story<TypographyProps> = () => (
<Grid>
<Typography variant="h1" bold>
Heading 1 bold
Expand All @@ -54,7 +54,7 @@ export const headings: Story<TypographyProps> = () => (
</Grid>
)

export const paragraphs = (): JSX.Element => (
export const Paragraphs = (): JSX.Element => (
<Grid>
<Typography variant="body_short" link href="#">
Body short link
Expand Down Expand Up @@ -236,8 +236,8 @@ GroupsOverview.parameters = {
},
}

export const colors = (): JSX.Element => (
<Grid>
export const Colors = (): JSX.Element => (
<>
<Typography color="primary"> Primary</Typography>
<Typography color="secondary">Secondary</Typography>
<Typography color="danger">Danger</Typography>
Expand All @@ -246,57 +246,62 @@ export const colors = (): JSX.Element => (
<Typography color="disabled">Disabled</Typography>
<Typography color="currentColor">CSS currentColor</Typography>
<Typography color="pink">CSS pink</Typography>
</Grid>
</>
)

export const custom = (): JSX.Element => (
<Grid>
<Typography group="navigation" variant="label">
Navigation / Label
</Typography>
<Typography group="navigation" variant="menu_title">
Navigation / Menu / Title
</Typography>
<Typography group="table" variant="cell_text">
Table / Cell / Text
</Typography>
<Typography
group="table"
variant="cell_text"
token={{ fontWeight: 'medium' }}
>
Table / Cell / Text / Medium
</Typography>
<Typography group="table" variant="cell_text" bold>
Table / Cell / Text / Bold
</Typography>
<Typography group="table" variant="cell_text" link href="#">
Table / Cell / Text / Bold / Link
</Typography>

<Typography variant="h3" token={{ fontWeight: 700 }}>
Heading 3 Bold
</Typography>
<Typography variant="ingress" token={{ fontWeight: 'bold' }}>
Ingress Bold
</Typography>
<Typography
token={{
color: 'purple',
fontFamily: 'Arial',
fontSize: '1.875rem',
fontWeight: 300,
lineHeight: '1.714em',
textTransform: 'uppercase',
}}
>
Custom token
</Typography>
</Grid>
export const Custom = (): JSX.Element => (
<>
<div>
<Typography group="navigation" variant="label">
Navigation / Label
</Typography>
<Typography group="navigation" variant="menu_title">
Navigation / Menu / Title
</Typography>
</div>
<div>
<Typography group="table" variant="cell_text">
Table / Cell / Text
</Typography>
<Typography
group="table"
variant="cell_text"
token={{ fontWeight: 'medium' }}
>
Table / Cell / Text / Medium
</Typography>
<Typography group="table" variant="cell_text" bold>
Table / Cell / Text / Bold
</Typography>
<Typography group="table" variant="cell_text" link href="#">
Table / Cell / Text / Bold / Link
</Typography>
</div>
<div>
<Typography variant="h3" token={{ fontWeight: 700 }}>
Heading 3 Bold
</Typography>
<Typography variant="ingress" token={{ fontWeight: 'bold' }}>
Ingress Bold
</Typography>
<Typography
token={{
color: 'purple',
fontFamily: 'Arial',
fontSize: '1.875rem',
fontWeight: 300,
lineHeight: '1.714em',
textTransform: 'uppercase',
}}
>
Custom token
</Typography>
</div>
</>
)

export const Lines = (): JSX.Element => (
<Wrapper>
<>
<Typography variant="body_long" lines={2}>
Cupcake ipsum dolor sit amet caramels powder. Chocolate powder donut
bonbon candy canes brownie donut wafer. Cake topping oat cake cheesecake.
Expand All @@ -308,11 +313,11 @@ export const Lines = (): JSX.Element => (
lollipop cake. Jelly-o bonbon marshmallow powder carrot cake icing carrot
cake. Cheesecake brownie jelly beans soufflé icing.
</Typography>
</Wrapper>
</>
)

export const Link: Story<TypographyProps> = () => (
<Grid>
<>
<Typography link href="#">
Link
</Typography>
Expand All @@ -336,11 +341,14 @@ export const Link: Story<TypographyProps> = () => (
marshmallow wafer marzipan. Sesame snaps wafer apple pie sweet roll
chocolate bar fruitcake.
</Typography>
</Grid>
</>
)

Link.parameters = {
docs: {
storyDescription: 'Link used in body of text',
Link.decorators = [
(Story) => {
return (
<Stack style={{ justifyContent: 'start' }}>
<Story />
</Stack>
)
},
}
]

0 comments on commit b91d4ff

Please sign in to comment.