Skip to content

Commit

Permalink
📝 Add Overview
Browse files Browse the repository at this point in the history
  • Loading branch information
@martalalik
martalalik committed Aug 16, 2022
1 parent af5d4a3 commit 3bc09b8
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 209 deletions.
2 changes: 1 addition & 1 deletion packages/eds-core-react/src/components/Dialog/DialogHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const StyledDialogHeader = styled.div(({ theme }) => {
return css`
display: flex;
justify-content: space-betweene;
algin-items: center;
align-items: center;
padding: ${theme.entities.children.spacings.top}
${theme.entities.children.spacings.right} 0
${theme.entities.children.spacings.left};
Expand Down
12 changes: 11 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
@@ -1,4 +1,4 @@
import { Links, PropsTable, Story } from './../../../.storybook/components'
import { Links, PropsTable, Story, Stack, TypographyGroups } from './../../../.storybook/components'
import { Typography } from '.'

# Typography
Expand Down Expand Up @@ -39,12 +39,22 @@ Please do not use <code>light</code> in digital interfaces except in special cas
<li>To ensure readability, line length should be 55-80 characters.</li>
</ul>


```tsx
import { Typography } from '@equinor/eds-core-react'

<Typography>Sample text</Typography>
```

## Overview

Typography groups with included varints:

Example: `<Typography group="input" variant="label"></Typography>`. <br />
Variants under `heading` and `paragraph` don’t require the group parameter.

<Story id="typography-typography--groups-overview" />

## Examples

### Colors
Expand Down
251 changes: 44 additions & 207 deletions packages/eds-core-react/src/components/Typography/Typography.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
import { Typography, TypographyProps, List } from '../..'
import { Card, Divider, Typography, TypographyProps } from '../..'
import styled from 'styled-components'
import { Story, ComponentMeta } from '@storybook/react'
import { Stack } from './../../../.storybook/components'
import page from './Typography.docs.mdx'
import { tokens, Typography as TypographyType } from '@equinor/eds-tokens'

const Wrapper = styled.div`
margin: 32px;
`
const {
colors: {
infographic: {
primary__moss_green_100: { rgba: mossgreen100 },
},
},
typography,
} = tokens

const Grid = styled(Wrapper)`
display: grid;
grid-gap: 32px;
justify-items: start;
const SBCard = styled(Card)`
border: 1px solid ${mossgreen100};
max-width: 290px;
display: table-cell;
`

export default {
Expand All @@ -36,207 +42,38 @@ export default {
],
} as ComponentMeta<typeof Typography>

export const Introduction: Story<TypographyProps> = (args) => {
return <Typography {...args}>Sample text</Typography>
export const GroupsOverview = () => {
return Object.entries(typography).map(([key, group]) => (
<SBCard key={key}>
<Card.Header>
<Card.HeaderTitle>
<Typography variant="h5">{key}</Typography>
</Card.HeaderTitle>
</Card.Header>
<Divider />
{Object.entries(group).map(([key, token]) => (
<Card.Content key={key}>
<Typography token={token as TypographyType}>{key}</Typography>
</Card.Content>
))}
</SBCard>
))
}

export const Headings: Story<TypographyProps> = () => (
<Grid>
<Typography variant="h1" bold>
Heading 1 bold
</Typography>
<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="h3">Heading 3</Typography>
<Typography variant="h4">Heading 4</Typography>
<Typography variant="h5">Heading 5</Typography>
<Typography variant="h6">Heading 6</Typography>
</Grid>
)

export const Paragraphs = (): JSX.Element => (
<Grid>
<Typography variant="body_short" link href="#">
Body short link
</Typography>
<Typography variant="body_short">Body short</Typography>
<Typography variant="body_short" italic>
Body short italic
</Typography>
<Typography variant="body_short" bold>
Body short bold
</Typography>
<Typography variant="body_short" bold italic>
Body short bold italic
</Typography>
<Typography variant="body_long" link href="#">
Body long link
</Typography>
<Typography variant="body_long">Body long</Typography>
<Typography variant="body_long" italic>
Body long italic
</Typography>
<Typography variant="body_long" bold>
Body long bold
</Typography>

<Typography variant="body_long" bold italic>
Body long bold italic
</Typography>
<Typography variant="overline">Overline</Typography>
<Typography variant="ingress">Ingress</Typography>
<Typography variant="caption">Caption</Typography>
<Typography variant="meta">Meta</Typography>
</Grid>
)

export const GroupsOverview = (): JSX.Element => (
<List>
<List.Item>
input
<List>
<List.Item>
<Typography group="input" variant="label">
label
</Typography>
</List.Item>
<List.Item>
<Typography group="input" variant="text">
text
</Typography>
</List.Item>
<List.Item>
<Typography group="input" variant="text_monospaced">
text_monospaced
</Typography>
</List.Item>
<List.Item>
<Typography group="input" variant="helper">
helper
</Typography>
</List.Item>
</List>
</List.Item>
<List.Item>
navigation
<List>
<List.Item>
<Typography group="navigation" variant="menu_title">
menu_title
</Typography>
</List.Item>
<List.Item>
<Typography group="navigation" variant="menu_title_hover">
menu_title_hover
</Typography>
</List.Item>
<List.Item>
<Typography group="navigation" variant="menu_tabs">
menu_tabs
</Typography>
</List.Item>
<List.Item>
<Typography group="navigation" variant="label">
label
</Typography>
</List.Item>
<List.Item>
<Typography group="navigation" variant="drawer_active">
drawer_active
</Typography>
</List.Item>
<List.Item>
<Typography group="navigation" variant="drawer_inactive">
drawer_inactive
</Typography>
</List.Item>
<List.Item>
<Typography group="navigation" variant="button">
button
</Typography>
</List.Item>
<List.Item>
<Typography group="navigation" variant="breadcrumb">
breadcrumb
</Typography>
</List.Item>
<List.Item>
<Typography group="navigation" variant="breadcrumb_hover">
breadcrumb_hover
</Typography>
</List.Item>
</List>
</List.Item>
<List.Item>
table
<List>
<List.Item>
<Typography group="table" variant="cell_header">
cell_header
</Typography>
</List.Item>
<List.Item>
<Typography group="table" variant="cell_text">
cell_text
</Typography>
</List.Item>
<List.Item>
<Typography group="table" variant="cell_text_bold">
cell_text_bold
</Typography>
</List.Item>
<List.Item>
<Typography group="table" variant="cell_text_link">
cell_text_link
</Typography>
</List.Item>
<List.Item>
<Typography group="table" variant="cell_numeric_monospaced">
cell_numeric_monospaced
</Typography>
</List.Item>
</List>
</List.Item>
<List.Item>
ui
<List>
<List.Item>
<Typography group="ui" variant="tooltip">
tooltip
</Typography>
</List.Item>
<List.Item>
<Typography group="ui" variant="snackbar">
snackbar
</Typography>
</List.Item>
<List.Item>
<Typography group="ui" variant="accordion_header">
accordion_header
</Typography>
</List.Item>
<List.Item>
<Typography group="ui" variant="chip__badge">
chip__badge
</Typography>
</List.Item>
<List.Item>
<Typography group="ui" variant="chart">
chart
</Typography>
</List.Item>
</List>
</List.Item>
</List>
)
GroupsOverview.parameters = {
docs: {
storyDescription:
'Variants ordered by their required group parameter. Example `<Typography group="input" variant="label"></Typography>`. Variants under `heading` and `paragraph` don’t require the group parameter and are therefore not included here.',
GroupsOverview.decorators = [
(Story) => {
return (
<Stack align="start" style={{ justifyContent: 'flex-start' }}>
<Story />
</Stack>
)
},
]

export const Introduction: Story<TypographyProps> = (args) => {
return <Typography {...args}>Sample text</Typography>
}

export const Colors = (): JSX.Element => (
export const Colors: Story<TypographyProps> = () => (
<>
<Typography color="primary"> Primary</Typography>
<Typography color="secondary">Secondary</Typography>
Expand All @@ -249,7 +86,7 @@ export const Colors = (): JSX.Element => (
</>
)

export const Custom = (): JSX.Element => (
export const Custom: Story<TypographyProps> = () => (
<>
<div>
<Typography group="navigation" variant="label">
Expand Down Expand Up @@ -300,7 +137,7 @@ export const Custom = (): JSX.Element => (
</>
)

export const Lines = (): JSX.Element => (
export const Lines: Story<TypographyProps> = () => (
<>
<Typography variant="body_long" lines={2}>
Cupcake ipsum dolor sit amet caramels powder. Chocolate powder donut
Expand Down

0 comments on commit 3bc09b8

Please sign in to comment.