Dev Setup

Installation

Start by making sure you have an npm token from the @ovotech npm org.

yarn add @ovotech/nebula
yarn add @ovotech/nebula

Or if you prefer:

npm install --save @ovotech/nebula
npm install --save @ovotech/nebula

You'll also need to ensure the following peerDependencies are installed:

• react
• styled-components

Theming

Nebula uses styled-components (opens in new window)  and it is necessary to provide a theme which you can import from @ovotech/nebula.

This can be done using styled-component's <ThemeProvider> at the root of the app.

import { ThemeProvider } from 'styled-components';
import { theme } from '@ovotech/nebula';

<ThemeProvider theme={theme}>
  <MyApp />
</ThemeProvider>;
import { ThemeProvider } from 'styled-components';
import { theme } from '@ovotech/nebula';

<ThemeProvider theme={theme}>
  <MyApp />
</ThemeProvider>;

See Theming for more information.

Using the components

import { PrimaryCTAButton } from '@ovotech/nebula';

const Example = () => (
  <PrimaryCTAButton onClick={() => alert('Yippee!')}>
    I ❤ Design Systems
  </PrimaryCTAButton>
);
import { PrimaryCTAButton } from '@ovotech/nebula';

const Example = () => (
  <PrimaryCTAButton onClick={() => alert('Yippee!')}>
    I ❤ Design Systems
  </PrimaryCTAButton>
);

CSS Reset

The design system components rely on global styles to provide a CSS reset (opens in new window) 

We export one of these which uses sensible defaults and can be found here:

// Webpack will need a css-loader to import this.
import '@ovotech/nebula/dist/reset.css';
// Webpack will need a css-loader to import this.
import '@ovotech/nebula/dist/reset.css';