From 45376b9fe32d5e7ec01f6b797142d3fb351fa07d Mon Sep 17 00:00:00 2001 From: Marc Matthiae Date: Tue, 15 Aug 2023 09:31:03 +0200 Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=93=9A=20Adding=20tokens=20and=20?= =?UTF-8?q?a11y=20to=20CONTRIBUTING.md=20(#328)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 <48211526+karlbaumhauer@users.noreply.github.com> --- CONTRIBUTING.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 34a6e877c..c7f6889af 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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 @@ -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 @@ -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. @@ -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 ```