@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. Storybook contains all Stencil components and ideally we test and verify our components from there. But sometimes it's easier to test or bug fix a component in Stencil first. In that case make sure to add your component to the index.html file in src and start Stencil by running:

yarn start

To be able to use a component in Storybook, it must first be build by Stencil. The build command has 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. To build the components, run:

yarn build

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.