Skip to content

Commit

Permalink
docs: 📚 Adding tokens and a11y to CONTRIBUTING.md (#328)
Browse files Browse the repository at this point in the history
## Description:
Added the usage of design tokens and the optimization of accessibility to CONTRIBUTING.md

## Definition of Reviewable:
- [x] PR is assigned to project board

---------

Co-authored-by: Karl Baumhauer <[email protected]>
  • Loading branch information
MarcMatthiae and karlbaumhauer authored Aug 15, 2023
1 parent e1c4e60 commit 45376b9
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,9 @@

- Development closely works with Design.
- We heavily utilize slots and parts with reduced business logic within individual components.
- Extensive documentation and examples for each component can be found in Storybook. [Explore components and interact with them](https://solid-design-system.fe.union-investment.de/x.x.x/storybook/).
- We provide extensive documentation and examples for each component in Storybook. [Explore components and interact with them](https://solid-design-system.fe.union-investment.de/x.x.x/storybook/).
- We provide End-to-End (E2E) tests with Playwright and Visual Regression Tests with Chromatic. The latter are automatically generated from the created Storybook stories.
- We optimize our components for accessibility.

## Development Guidelines

Expand All @@ -32,6 +33,9 @@
- Packages have to be run individually (eg: `cd packages/components``pnpm dev` to start development server)
- Run `pnpm verify` at the root directory periodically, particularly, before pushing changes when a pull request is already opened.
- Every branch should be associated with a PR.
- Nearly all styles (colors, fonts, sizes etc.) are defined by our design team and provided for usage in our code via tokens (`packages/tokens/src/token.json`).
Components should use these tokens instead of individual styles as much as possible. Only where the tokens do not provide a styling, component specific styles should be added inside the [component-name].ts file
- Components should be optimized for accessibility. Check the website of the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) for more information on accessibility.

## Pull Requests

Expand Down Expand Up @@ -76,7 +80,6 @@ Install `pnpm` package manager globally.
pnpm i
cd packages/components
pnpm dev
```

These steps will install the necessary dependencies, navigate to the "packages/components" directory, and start the development server. You can now begin working on the components.
Expand All @@ -86,7 +89,7 @@ These steps will install the necessary dependencies, navigate to the "packages/c
```
$ pnpm fix // fix all formatting and linting in repo
$ pnpm verify // run tests and builds in repo
$ cd components
$ cd packages/components
&& pnpm dev // start dev server
&& pnpm test // run tests
```
Expand Down

0 comments on commit 45376b9

Please sign in to comment.