Merged in feat/SW-3636-storybook-structure (pull request #3309)

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
This commit is contained in:
Rasmus Langvad
2025-12-08 12:35:14 +00:00
parent 177c2e7176
commit ca6cc5ab6c
83 changed files with 1272 additions and 525 deletions

View File

@@ -0,0 +1,43 @@
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/).