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
36 lines
1.7 KiB
Plaintext
36 lines
1.7 KiB
Plaintext
import { Meta } from '@storybook/addon-docs/blocks'
|
|
|
|
<Meta title="Introduction" />
|
|
|
|
# Scandic Hotels design system ✨
|
|
|
|
## Components
|
|
|
|
### File structure
|
|
|
|
```
|
|
[Component]
|
|
├── Compositions/ # A folder with Storybook stories to showcase compositions with other components
|
|
├──── [CompositionX].stories.tsx # Storybook stories that showcase component compositions
|
|
├── [component].module.css # The CSS for the component
|
|
├── [Component].stories.tsx # Storybook stories for the component, without compositions
|
|
├── [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.
|
|
|
|
Styling is done with CSS modules.
|
|
|
|
Variants are implemented with [Class Variance Authority](https://cva.style/).
|
|
|
|
The typings for each components live in their respective `types.ts` file inside the component folder.
|