Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Coding standards

Tech stack

...

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