| Table of Contents |
|---|
Coding standards
Tech stack
...
Naming conventions
Packages
Each component must be created as a separate package and contain package.json file with its name, version and other information.
the package must be in one of the folders:
components,blocks,foundationsand have the same name as the package name.package name should contain scope (
design-system) and name in the kebab-case format. e.q.:@design-system/my-awesome-component.component name should be in the PascalCase format. e.q.:
MyAwesomeComponent.story title should be in the human-readable case format. e.q.:
My Awesome Component.story id should be in the camelCase format. e.q.:
myAwesomeComponent.
Classes methods
Component css class should have prefix cds- (Chameleon Design System).
Variables
Should be in the camelCase.
Tokens
There are 2 layers of tokens:
Global tokens. Located in
design-tokens/srcfolder. That define the standards for the entire site.Component tokens. Located in component package
src/*.tokens.scss. Which can override the values of global tokens for a component.
Tokens should have prefix cds- (Chameleon Design System).
Token naming rules are yet TBD.
File and folder naming and organization
This section explains how your file and folder should be named and structured.Component package should be placed in to packages/design-system/(components|blocks|foundations)/<component-name> folder. Structure of the package is following:
docs
overview.stories.mdx – explanation of what is this component for
tokens.stories.mdx – component specific tokens
stories
properties.stories.tsx – playground for developers to play with props options
variations.stories.tsx – display all possible configuration options
src
component-name.scss – component styles entry point
component-name.tokens.scss – component specific tokens
component-name.test.tsx – unit tests
component-name.tsx – component code
models.ts – component interface
index.tsx – entry point
package.json – package configuration
tsconfig.json – ts configuration