RoverUI

UI Component Library used at Cision

RoverUI is a collection of UI components originally built for and by Cision. These components should help the Cision team build applications that look hot, in React, quickly.

Install

# yarn
yarn add @cision/rover-ui

# npm
npm install --save @cision/rover-ui

For more instructions on installing and using the RoverUI package in your app, see the docs in Storybook

To install and develop or run locally, you're in the right place.

Usage

import React, { Component } from 'react';

import { Media } from '@cision/rover-ui';

class Example extends Component {
  render() {
    return (
      <Media>
        <Media.Item>👋🏻</Media.Item>
      </Media>
    );
  }
}

If your front-end stack supports a CSS loader, you can add styles with import.

import '@cision/rover-ui/dist/rover-ui.css';

Otherwise, you'll want to put the rover-ui.css stylesheet in your static resources and load it with an plain old link.

<link href="%PUBLIC_URL%/rover-ui.css" rel="stylesheet" />

Contributing

See our Contribution guidelines for more information.

Reporting issues

Report issues at the GitHub issue tracker.

Customizing the theme with a custom build

There are a few different styling paradigms at work in RoverUI. Currently, the best way to customize appearance is by forking the project and making a custom build.

Fork the rover-ui repository
Edit files
Run yarn build from the project root
Publish your fork
Point your front-end consumer app at the fork

Now, you can edit CSS-in-JS and/or the CSS custom properties that are imported for use in CSS modules.

CSS-in-JS

DEPRECATED: We are currently in the process of removing CSS-in-JS and will be completely removed prior to v3.x.

RoverUI uses styled-components and styled-system on some components. Any component that's currently wrapped in the withDefaultTheme HOC should be using theme properties.

To customize CSS-in-JS themes, edit src/shared/theme.js and the files it imports.

Customize the CSS module theme with a custom build

RoverUI uses CSS modules with css-loader on some components.

To customize the CSS modules theme, edit src/shared/**/*.css

lihnick/rover-ui