stories/atoms/components/typography/Typography.stories.mdx
import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs'
import { Typography } from 'ui/atoms/typography/Typography'
import { ThemeProvider } from 'ui/atoms/theme/ThemeProvider'
import { ThemeSwitcher } from 'ui/atoms/theme/ThemeSwitcher'
import { useBreakpoint } from 'hook/useBreakpoint'
import '../component.scss'
import './typography.scss'
<Meta
title="Atoms/Typography"
component={Typography}
decorators={[
Story => (
<ThemeProvider>
<div className="story-theme-switcher">
<ThemeSwitcher />
</div>
<div className="component-story-main">
<Story />
</div>
</ThemeProvider>
)
]}
/>
# Typography
> Simplifies the creation of typographic elements.
[](https://github.com/emersion/stability-badges#unstable)
## Description
Typography is the primitive component to display text or pure HTML. It comes with limited styling
capabilities for easy use within the ØKP4 design system.
With Typography users have a ready to go typographic design that is readable and optimized for
usability, to direct reader attention and to increase conversion rates.
## Overview
<Story
name="Overview"
argTypes={{
children: {
table: {
type: { summary: 'Node' }
},
control: {
type: 'text'
}
},
textDecoration: {
control: {
type: 'select'
}
}
}}
args={{
children:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium sodales mi, quis\
ultricies sapien convallis sed. Vivamus accumsan tortor quis molestie tempus.',
as: 'div',
color: 'text',
textDecoration: undefined,
fontFamily: 'brand',
fontSize: 'medium',
fontWeight: 'light',
noWrap: false
}}
>
{args => <Typography {...args} />}
</Story>
## Properties
<ArgsTable story="Overview" />
## Children
`Children` is the content upon which Typography applies itself. Most of the time `children` will
be made up of text but really it can contain any valid node object.
<Canvas>
<Story name="Children">
{() => {
const { isXSmall } = useBreakpoint()
return (
<>
<Typography as="div" fontSize={isXSmall ? 'small' : 'medium'} color="success">
{'<Typography>'}
<Typography fontSize={isXSmall ? 'small' : 'medium'}>
You can pass 👶 inside the tags
</Typography>
{'</Typography>'}
</Typography>
<Typography
color="warning"
children={
<Typography fontSize={isXSmall ? 'small' : 'medium'} as="div" color="success">
{'<Typography children="'}
{
<Typography
fontSize={isXSmall ? 'small' : 'medium'}
color="warning"
children={'Or as an attribute'}
/>
}" />
</Typography>
}
/>
</>
)
}}
</Story>
</Canvas>
## As
With `as` you decide the HTML tag of the element.
Nesting Typography components in one another can be used to apply different style to
targeted parts of the text.
`as` can be any of the following values:
- **div**: Generic container tag with no effect on its content.
- **p**: Paragraph tag, groups related content on a new line.
- **span** (default): Generic inline container tag.
- **h1** - **h6**: Section heading tags.
- **pre**: Preformatted text tag. Used to display text exactly as written inside the tag.
- **ul**: An unordered list containing `<li>`, `<script>` or `<template>` elements.
- **li**: List item tag. Must have a parent element such as `<ul>`, `<ol>` or `<menu>`.
<Canvas>
<Story name="As">
<Typography as="div" color="info" fontWeight="xlight" fontSize="x-small">
<Typography as="h1" fontSize="large">
Typography
</Typography>
<Typography as="p">
<Typography as="span" color="highlighted-text">
{'Typography '}
</Typography>
is the art and technique of arranging type to make written language:
</Typography>
<Typography as="ul" color="highlighted-text">
<Typography as="li">Legible</Typography>
<li>Readable</li>
<Typography as="li">Aesthetically pleasing</Typography>
</Typography>
<Typography as="pre" fontSize="small" color="warning">
{`
<div>
<h1></h1>
<p>
<span></span>
</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<pre></pre>
</div>`}
</Typography>
<i>structure of this story</i>
</Typography>
</Story>
</Canvas>
## Color
There are different `color` values available referring to the ØKP4 palette and themes.
These variations have been developed to allow the Typography component to fit perfectly into any interface,
regardless of the theme selected.
- **text** (default): This color has high contrast and suits large bodies of text.
- **highlighted-text**: Highlights text to draw users attention, to be used scarcely.
- **info**: A lower contrast color meant to convey informative details.
- **success**: Green static color to indicate something has succeeded or have been accepted.
- **warning**: Orange static color to warn users.
- **error**: Red static color to alert users that an error has occurred.
- **inverted-text**: Inverted text color for when the text has a low contrast background.
- **invariant-text**: Static white color.
<Canvas>
<Story name="Color">
{() => {
const colors = [
'text',
'highlighted-text',
'info',
'success',
'warning',
'error',
'inverted-text',
'invariant-text'
]
return colors.map(color => {
const invertedBackground = color === 'inverted-text' || color === 'invariant-text'
const typography = (
<Typography as="div" color={color}>
{color} | ØKP4 - At the core of the stakes of data valorisation
</Typography>
)
return invertedBackground ? (
<div class="typography-story-color-inverted">{typography}</div>
) : (
typography
)
})
}}
</Story>
</Canvas>
## Text decoration
The `textDecoration` property allows additional customization of the typography.
For the moment, there is only one value available:
- **underline** : Underlines the text and attracts readers attention.
More options are under development and will make it possible to take further advantage of this property.
<Canvas>
<Story name="Text decoration">
<Typography as="p" color="highlighted-text">
{'ØKP4 - A proof of stake layer 1 '}
<Typography textDecoration="underline" color="highlighted-text">
Blockchain
</Typography>
{' on the Cøsmos IBC protocol'}
</Typography>
</Story>
</Canvas>
## Font family
`fontFamily` offers two different fonts, **brand** and **secondary**.
These maintain harmony in the text composition while also providing
contrasting choices.
<Canvas>
<Story name="Font family">
{() => {
const fontFamilies = ['brand', 'secondary']
return fontFamilies.map(fontFamily => (
<div>
<Typography
as="h2"
color="highlighted-text"
textDecoration="underline"
fontFamily={fontFamily}
>
{fontFamily.charAt(0).toUpperCase() + fontFamily.slice(1)}
</Typography>
<Typography as="p" color="success" fontFamily={fontFamily}>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</Typography>
<Typography as="p" color="warning" fontFamily={fontFamily}>
abcdefghijklmnopqrstuvwxyz
</Typography>
<Typography as="p" color="error" fontFamily={fontFamily}>
0123456789
</Typography>
</div>
))
}}
</Story>
</Canvas>
## Font size
There are five `fontSize` options: **x-large**, **large**, **medium** (default), **small** and **x-small**.
<Canvas>
<Story name="Font size">
{() => {
const sizes = ['x-large', 'large', 'medium', 'small', 'x-small']
return sizes.map(size => (
<Typography as="div" fontSize={size} noWrap>
{size} | ØKP4 Design System
</Typography>
))
}}
</Story>
</Canvas>
## Font weight
Depending on the need, the `fontWeight` can be modified to indicate the importance of a text or
to make it more readable.
The following font weights are supported:
- **xlight**: Suitable for indicating less important text or to increase readability in a large body of text.
- **light** (default): An easily read font weight. Does not convey a particular importance.
- **bold**: Great for emphasizing part of a text or as a sub-header. Becomes less readable if
used on large bodies of text.
- **black**: The boldest font weight available and a great choice for short headers.
<Canvas>
<Story name="Font weight">
{() => {
const fontWeights = ['xlight', 'light', 'bold', 'black']
return fontWeights.map(fontWeight => (
<Typography as="div" fontWeight={fontWeight}>
{fontWeight} | ØKP4 - Decentralized Data Spaces
</Typography>
))
}}
</Story>
</Canvas>
## No wrap
By default, the element text content will wrap itself to fit the element width dimension.
`noWrap` prevents this behaviour, and will instead truncate the text with an ellipsis
upon reaching the width limit.
<Canvas>
<Story name="No wrap">
<Typography as="div" noWrap>
The greatest minds of ØKP4 are agreed, the secret to happiness is Ubuntu!
</Typography>
</Story>
</Canvas>