@cultureamp/kaizen-component-library

Kaizen Component Library

Culture Amp’s Component Library

---

Table of contents

• Introductions
  • What is the Kaizen Component Library?
• Getting started
  • Prerequisites
• Component API Documentation
  • Using Kaizen Component Library
  • Draft components
    • Draft components folder structure
    • Draft component checklist
    • Migrating draft components to Kaizen Component Library
• Development
• Usage with Flow project

---

Introductions

What is the Kaizen Component Library?

The Kaizen Component Library is one of three parts of the Kaizen Design System (the other two are the Kaizen UI Kit and Kaizen Site – see diagram below). It is a collection of all the reusable components that we use to make things here at Culture Amp.

Getting started

Prerequisites

This guide assumes you have already cloned the big-frontend-repo (BFR) and have followed the Getting Started guide. This should provide all the information you will need to start using the Kaizen Component Library on your local development machine.

Component API Documentation

Detailed individual component API documentation and working examples can be found on the Kaizen Site.

Using Kaizen Component Library

You can import a Kaizen Component Library component from the /kaizen-component-library folder inside your application:

import { Button } from "@cultureamp/kaizen-component-library"

Draft components

Draft components are components that can be used live in production, but have not yet met all the requirements of a Kaizen Component Library component. All “draft” components are imported explicitly from the /kaizen-component-library/draft folder:

import { MyExperimentalComponent } from "@cultureamp/kaizen-component-library/draft"

We encourage you to create new draft components. When you add a new draft component, we need to make sure that the component fits in with our overall design vision, so it is important to show it to a designer to make sure they are happy with it. After you have committed the code please announce it via the preferred slack channel/s (#design_systems_team and #pract_front_end_eng) and also at the fortnightly Front End Practice meeting for visibillity, peer review and feedback.

Draft components folder structure

bfr/
└── packages/
    └── kaizen-component-library/
        └── draft/

Draft component checklist

• Design review from a designer
• Unit tests
• ...

Migrating draft components to Kaizen Component Library

• All new component proposals live inside kaizen-component-library/draft folder (this applies for all Design Systems Team (DST) and Product team initiated components)
• Product teams are responsible for ensuring all draft checklist items have been completed for components that they introduce
• Latest draft components should be raised at the Front End Practice meeting to raise awareness amongst Product Teams and Design Systems Team
• DST will be responsible for finishing off components that are in the draft components folder
• DST will communicate additions to Kaizen Component Library at the end of each sprint via Slack, FEP...

Development

We use React Storybook to create isolated prototypes of our components and test component variants and configurations, which are known as "stories" in Storybook.

To start using Storybook, type the following command in the BFR repo:

bfr storybook kaizen-component-library

It is important that all Kaizen Component Library components have accompanying stories in our Storybook. This enables engineers to easily understand how a component works, test any new changes, and work on components in isolation.

Usage with Flow project

This library ships with flow type definitions. These are not yet publicly available through the flow-typed repo so to get the types working please add the following line to your .flowconfig under [libs].

[libs]
./node_modules/@cultureamp/kaizen-component-library/flow-typed/definitions/npm

---

The Kaizen Design System is maintained by the Design Systems Team (DST). Hit us up at #team_design_systems on Slack.