f531c7a49f
Feature/storybook tests * feature: add interaction tests for storybook and upgrade storybook@9 * add a11y testing for storybook * Merge branch 'master' of bitbucket.org:scandic-swap/web into feature/storybook-tests * Test and build only required packages * . * . * . * . * . * . * . * disable playwright tests in netlify ci * . * debug out process.env * don't run playwright on CI * remove unused netlify-plugin-playwright-cache * . * . * . * . * . * . * remove turbo dependancy to design-system#test * merge * merge Approved-by: Anton Gunnarsson
118 lines
3.8 KiB
Plaintext
118 lines
3.8 KiB
Plaintext
import {
|
|
Meta,
|
|
Title,
|
|
Subtitle,
|
|
Description,
|
|
Controls,
|
|
Stories,
|
|
} from '@storybook/addon-docs/blocks'
|
|
|
|
import * as TypographyStories from './Typography.stories.tsx'
|
|
|
|
<Meta of={TypographyStories} />
|
|
|
|
<Title />
|
|
|
|
The source of the design system lives in Figma. Here, source means design tokens _and_ Figma styles.
|
|
|
|
Figma styles are a collection of design tokens that together define a style. For the most part it is used for typography. Design tokens define things like font family, font weight, font size, etc. On their own they don't do much as their meaning is lost without context of each other. Together though they define the typography to render.
|
|
|
|
To help communication between designers and developers it helps to have the same nomenclature. To achieve this goal the technical implementation of the design system in this repository uses two approaches; a `Typography` component and a higher order function.
|
|
|
|
<Subtitle>The component</Subtitle>
|
|
|
|
> The approach described in this section is platform agnostic. However this documentation is for the implementation aimed at web. The same can be achived for other platforms but currently it is only implemented for web.
|
|
|
|
The `Typography` component implements all the Figma styles for typography with [Class Variance Authority](https://cva.style/). This allows the consumers to use this component to apply typography styling to any component that accepts a class (the `className` prop) by wrapping them. The implementation is also supported by code completion furthering promoting the same nomenclature.
|
|
|
|
Example:
|
|
|
|
```
|
|
import { Typography } from '@scandic-hotels/design-system'
|
|
|
|
function SomeTitleComponent () {
|
|
return (
|
|
<Typography variant="Title/lg">
|
|
<h1>A title with proper typography</h1>
|
|
</Typography>
|
|
)
|
|
}
|
|
```
|
|
|
|
It also takes care of merging with any class already present.
|
|
|
|
```
|
|
import { Typography } from '@scandic-hotels/design-system'
|
|
|
|
import styles from './my-component.module.css'
|
|
|
|
function MyComponent () {
|
|
return (
|
|
<Typography variant="Title/lg">
|
|
<h1 className={styles.title}>A title with proper typography</h1>
|
|
</Typography>
|
|
)
|
|
}
|
|
```
|
|
|
|
<Subtitle>The higher order function</Subtitle>
|
|
|
|
> The approach described in this section is platform agnostic. However this documentation is for the implementation aimed at web. The same can be achived for other platforms but currently it is only implemented for web.
|
|
|
|
The higher order function for typography implements all the Figma styles for typography with Class Variance Authority. The implementation merges any components CVA variants with the CVA variants for typography. It does this by exporting a higher order function named `withTypography`.
|
|
|
|
The higher order function named `withTypography` accepts a CVA config and returns a new CVA config enhanced with a `typography` variant. This will give the component implementing the CVA config a prop named `typography`. This prop works the same as the `variant` prop for the `Typography` component with handling merging of classes already preset, code completion and everything.
|
|
|
|
Example:
|
|
|
|
```
|
|
// variants.ts
|
|
import { cva } from 'class-variance-authority'
|
|
|
|
import { withTypography } from '@scandic-hotels/design-system'
|
|
|
|
import styles from './my-component.module.css'
|
|
|
|
export const config = {
|
|
variants: {
|
|
...
|
|
},
|
|
defaultVariants: {
|
|
...
|
|
},
|
|
} as const
|
|
|
|
export const variants = cva(styles.myComponent, withTypography(config))
|
|
```
|
|
|
|
```
|
|
// MyComponent.tsx
|
|
import { variants } from './variants'
|
|
|
|
export function MyComponent (props) {
|
|
const classNames = variants(...)
|
|
return <div {...props} className={classNames} />
|
|
}
|
|
```
|
|
|
|
```
|
|
// OtherComponent.tsx
|
|
...
|
|
<MyComponent typography="Title/lg">
|
|
...
|
|
```
|
|
|
|
## Props
|
|
|
|
The component accepts the following props.
|
|
|
|
> For the component to work the nested child component needs to handle `className` prop.
|
|
|
|
<Controls />
|
|
|
|
---
|
|
|
|
## All typography styles
|
|
|
|
<Stories />
|