kuali-ui

KualiUI

Colors

The Kuali approved palette consists of these colors.

Colors.lightBlue or --kuali-light-blue

Colors.blue or --kuali-blue

Colors.pink or --kuali-pink

Colors.yellow or --kuali-yellow

Colors.green or --kuali-green

Colors.purple or --kuali-purple

Colors.orange or --kuali-orange

Colors.red or --kuali-red

Colors.grey or --kuali-grey

Colors.darkGrey or --kuali-dark-grey

They can be used in Javascript like this

import Colors from 'kuali-ui/lib/kuali-colors';

function ColorExample() {
  return (
    <div style={{backgroundColor: Colors.orange}} />
  )
}

or in CSS like this (assumes you are using postcss)

@import 'kuali-ui/lib/colors';

.example {
  background-color: var(--kuali-orange);
}

Icons

Kuali-UI utilizes the material-icons font. You will need to load the font on any page needing icons.

Components

• AddButton
• FilterEditor
• KualiHeader

Contributing

Running Storybook

We use a project call storybook to serve and organize components in development. To use:

yarn
yarn storybook:start
open http://localhost:9001

Writing tests

running the test suite

yarn test

running the test suite in watch mode

yarn test:watch

generating a coverage report

yarn test:coverage

Known Issues

if watch mode fails because you're on macOS Sierra you need to reinstall watchman

brew install watchman