ca6cc5ab6c
feat(SW-3636): Storybook structure * New sections in Storybook sidebar * Group Storybook content files and add token files for spacing, border radius and shadows Approved-by: Joakim Jäderberg
44 lines
1.7 KiB
Plaintext
44 lines
1.7 KiB
Plaintext
import { Meta } from '@storybook/addon-docs/blocks'
|
|
|
|
<Meta title="Introduction" />
|
|
|
|
# Scandic Hotels Design System ✨
|
|
|
|
The Scandic Hotels Design System is a collection of components, patterns, and utilities that are used to build the Scandic Hotels websites and apps.
|
|
|
|
## Storybook structure
|
|
|
|
- Tokens
|
|
- Core Components
|
|
- Product Components
|
|
- Patterns
|
|
- Compositions
|
|
|
|
## File structure
|
|
|
|
```
|
|
[Component]
|
|
├── [component].module.css # The CSS for the component
|
|
├── [Component].stories.tsx # Storybook stories for the component
|
|
├── [Component].tsx # The main component file
|
|
├── index.tsx # Entrypoint for the component exports
|
|
├── types.ts # TypeScript typings for the component
|
|
└── variants.ts # Class Variance Authority configuration for variants of the component
|
|
```
|
|
|
|
## Components
|
|
|
|
Each component of the design system is defined in `lib/components`.
|
|
|
|
Each component has an `index.tsx` file that exports the component and its optional subcomponents. Subcomponents are components that are meant to be used together/nested with the component.
|
|
|
|
The components that are considered public API from a consumer standpoint **must** have Storybook stories that showcases and documents their use. It should at least contain one default story that showcases the component by itself in its default state. More stories are added to showcase other variants or usages of the component.
|
|
|
|
The typings for each components live in their respective `types.ts` file inside the component folder.
|
|
|
|
## Styling
|
|
|
|
Styling is done with CSS modules.
|
|
|
|
Variants are implemented with [Class Variance Authority](https://cva.style/).
|