Introduction

Here you can find a library of components we use, inspired by Atomic with a Codebots twist.

Componetns are broken into three sections: tokens, elements, components

Tokens

Tokens are the base styles of the components, they are not the element or component itself. You require an element or a component to use tokens. An example of tokens would be colours.

Elements

Elements are the base form of a component, it is a standalone component that does not require multiple components to create one. The only requirement for an element is a minimal token assignment. For example, an element is a button.

Components

Components are tokens and elements combined to create a unity of multiple things to perform one thing. An example of a component is Tabs - the tabs component contains a group of links that displays content accordign to the link clicked.

There are a few things you might want to know before going through the components.

States

There are 4 types of states available for components:

Passive: default state, no interaction Hover: hover state, mouse hover interaction Active: active state, mouse on click Focus: focus state, on focus, after mouse has clicked and the component is focused

Implementation

One implemention of these components exists in the solaris-react library