Overview

Contents

What are components?

Components are the backbone of the Mosaic design system and will be used in your application's UI to create a consistent look and feel across different areas of functionality. In this section of the Mosaic Design System, you will find a page for each of the components that has four separate tabs that will guide you through using them.

Usage

The Usage tab of each component will spell out the golden rules for each component. On this tab you'll be able to find out:

• what exactly the component is, and where it should be used
• the different types of that component (some components will have a few different options to choose from, such as compacted versions or coloured ones)
• if the component is context-sensitive, the different types of context will be explained - this can be things like the difference between a Success and Danger Alert
• the different properties available to the component, which are additional pieces of functionality that can be configured
• some example compositions of the component - compositions are components that contain other components, e.g. a Button inside an Accordion
• guidance on how to use the component, with clear instructions around special considerations that need to be made when including it in your software

Code

The Code tab contains a link to the Storybook page for that component. On Storybook, you'll be able to read the documentation for the actual code of each component, and get a comprehensive list of things you can do to that component to alter it to suit your needs.

You will also be able to find a working demo of the component so you can see it in action.

Accessibility

Each component also has a tab that covers the specific accessibility considerations you need to make when using it. This covers things like colour combinations for colour blind users, keyboard shortcuts, and the usage of icons. Make sure to read this tab to make your software as accessible as possible for all of your users.

Component status

The Status tab will show you the current status of the component - you will be able to see a breakdown of whether the component has been designed, documented, has available HTML/CSS documentation and whether it has a web component (a web component will include additional JavaScript for expanded functionality).

Below you can find a list of each component and its current status.