Talend Design System

Coral is the design system used to build accessible, consistent, customizable and high quality customer experiences at Talend.

Getting Started

Clone the repository

$> git clone [email protected]:Talend/ui.git

Install the dependencies

$> yarn

Start Storybook and start editing

$> yarn start

Contributions

Check our exhaustive contribution guidelines here.

Please get to know our Architecture Decision Records:

• Using CSS modules to style our components.
• Use [data-test] attributes for generic automated tests.

Named exports

Please use named exports and link them at the root index to be embedded into the UMD.

Mobile-first

Style should be designed for mobile and adapted for tablet and desktop.

Style as separated files

Use CSS modules (ComponentName.module.scss) and BEM in your style files.

Variations

Variations should extend of the basic components in separated files. Limit changes to styled-components scope.

End-to-End tests

Visual non-regression testing will be covered by Chromatic. Use Cypress if you have to perform interaction tests, in real browsers.

To launch non the tests you first need to have cypress installed on your environment. Then you can just execute the corresponding npm scripts:

yarn workspace @talend/design-system run test:cy

License

Apache 2.0