@rws-aoa/design-system

RWS AOA Design System

Welcome to our main library! This library contains web components built with Stencil and our Design System built with Storybook.

Getting Started

If this is the first time you are cloning and opening this library, start of by installing all dependencies by running:

yarn

This library exists of two parts: Stencil and Storybook. To be able to use a component in Storybook, it must first be build by Stencil. To build the components, run:

yarn build

This will automatically also run the postbuild script that copies the assets to the dist folder. The downside is that this build command does not watch for changes, which means you need to run it everytime after you change something to see it reflected in Storybook.

There is also a build command with a --watch property, meaning Stencil will keep watching for changes and rebuild the project when they occur. This means when we save a change, that change will be visible in Storybook. It does however NOT run the postbuild script, so you won't have access to the assets if you use this command.

yarn build:watch

As mentioned, components need to be build before they become available in Storybook. In VS Code you can start split your terminal. Run the Stencil build in one half and run Storybook in the other by running:

yarn storybook

To run the unit tests for the components, run:

yarn test

Naming Components

When creating new component tags, you will need to use a prefix. All of the AOA generated web components use the prefix aoa-. The component name follows the Kebab case naming convention (e.g. aoa-menu-item).

Using components

More information on how to use the components from this design system can be found by running storybook. In the menu on the lefthand side you will find a page called Getting Started. There you will find all the information you need regarding installing the library & importing, creating and using components.

Making changes to components

More information on how to contribute changes to the design system can be found by running Storybook. In the menu on the lefthand side you will find a page called Contribute. There you will find the information you need.