braposo / braid-design-system

Themeable design system for the SEEK Group

Themeable design system for the SEEK Group.

$ npm install --save braid-design-system

NOTE: This project is currently in alpha. The API is extremely unstable. Avoid using in production without guidance from project contributors.

Setup

This guide is currently optimised for usage with sku, since it's configured to support Braid out of the box. If your project has a custom build setup, you'll need some extra guidance from project contributors to configure your bundler.

In your sku project, first install this library:

$ npm install --save braid-design-system

Then, import the desired theme at the very top of your application (e.g. src/client.js), before importing anything else.

WARNING: Since the theme contains styles that may be overridden by invididual components, the theme needs to be imported first to avoid CSS ordering issues.

For example:

import jobStreetTheme from 'braid-design-system/lib/themes/jobStreet';
import React from 'react';
// ...etc.

Finally, render the ThemeProvider component, providing the imported theme via the theme prop:

import { ThemeProvider, Text } from 'braid-design-system';

export default () => (
  <ThemeProvider theme={jobStreetTheme}>
    <Text>Hello World!</Text>
  </ThemeProvider>
);

Themes

List of available themes.

Components

List of available components.

Local Development

This project uses Yarn for development dependencies.

Installing with yarn is required to ensure dependencies match the current yarn.lock.

$ yarn
$ yarn start

Start a local Storybook server:

$ yarn storybook

Thanks

Chromatic for providing component screenshot testing, powered by Storybook.

License

MIT.