This is a demo version of the design system from Borealis. Right now it's just for testing purposes.

Using the library

This library is using the components that are presented in the storybook.

npm install design-system-borealis --save

After installation you should setup the theme configuration in your root file (App.js) You can choose between "lat" and "borealis".

// Your root file like App.js or index.js 
import { ConfigDesignSystem } from 'design-system-borealis';

...

render() {
	return (
		<ConfigDesignSystem theme="lat"> {/* Theme can also be "borealis" */}
			{/* Your child component using design system components */}
		</ConfigDesignSystem>
	)
}

You can use any component in the following way:

import { Heading } from 'design-system-borealis';

...

render() {
	return (
		<Heading size={1} />
	)
}

How do I find components?

1. Go to the live storybook
2. Pick a storyname which always the same as the component name
3. The props of components are mirrored through the knobs on the right side, you can also check the documentation by clicking "more info" at the right top
4. import the component as explained above
5. Enjoy!

launching storybook locally

You can see a demo of all the components by running the following commands after cloning the git project.

npm install
npm start

npm start will first lint, test and then run storybook. Then you can visit localhost:3000

contributing

We invite everyone to contribute to this project. If you are a developer you can propose code changes via pull requests. Designers can propose how we should convert these coded components to design elements. Anyone can document issues and improvements on the Jira backlog.