reporting-ui-components

React components for new reporting UI

How to use

yarn add reporting-ui-components

import React from 'react';
import ReactDOM from 'react-dom';
import { Test } from 'reporting-ui-components';

ReactDOM.render(<Test />, document.getElementById('root'));

How to develop

git clone [email protected]:movio/reporting-ui-components.git
yarn
npm run build
npm start

then open http://localhost:8088/

List of components

Button

import {
  Button,
  ClearButton,
  PrimaryButton,
  SecondaryButton,
  LinkButton,
  Container,
} from 'reporting-ui-components';
ReactDOM.render(<Container>
  <Button active={true}>Confirm</Button>
  <Button>Decline</Button>
</Container>, document.getElementById('root'));

ButtonGroup

import {
  ButtonGroup,
  Button
} from 'reporting-ui-components';

ReactDOM.render(<ButtonGroup>
  <Button active={true}>Confirm</Button>
  <Button>Decline</Button>
</ButtonGroup>, document.getElementById('root'));

Card

import {
  Card,
} from 'reporting-ui-components';

CardBlock

import {
  CardBlock,
} from 'reporting-ui-components';

CardBox

import {
  CardBox,
} from 'reporting-ui-components';

CardDeck

import {
  CardDeck,
} from 'reporting-ui-components';

CardGrid

import {
  CardGrid,
} from 'reporting-ui-components';

CardParagraph

import {
  CardParagraph,
} from 'reporting-ui-components';

Checkbox

import {
  Checkbox,
} from 'reporting-ui-components';

Code

import {
  Code,
} from 'reporting-ui-components';

Container

import {
  Container,
  DarkContainer,
  LightContainer,
  SidePaddedContainer,
  PaddedContainer,
  BorderTopContainer,
  BorderBottomContainer,
  BorderContainer,
  WrapperContainer,
  MobileOnlyContainer,
  DesktopOnlyContainer,
  CenteredContainer,
  BodyColorContainer,
  HighlightContainer,
} from 'reporting-ui-components';

Filters

import {
  Filters,
} from 'reporting-ui-components';

FlexColumns

import {
  FlexColumns,
} from 'reporting-ui-components';

Footer

import {
  Footer,
} from 'reporting-ui-components';

H1

import {
  H1,
  CenteredH1,
} from 'reporting-ui-components';

H2

import {
  H2,
  CenteredH2,
} from 'reporting-ui-components';

H3

import {
  H3,
  CenteredH3,
} from 'reporting-ui-components';

HighlightOnClick

import {
  HighlightOnClick,
} from 'reporting-ui-components';

Icons

import {
  IconArrowDown,
  IconDelete,
  IconPlus,
  IconTimes,
} from 'reporting-ui-components';

Input

import {
  Input,
  SmallInput,
} from 'reporting-ui-components';

Label

import {
  Label,
} from 'reporting-ui-components';

Logo

import {
  Logo,
} from 'reporting-ui-components';

Navbar

import {
  Navbar,
} from 'reporting-ui-components';

NumberScroller

import {
  NumberScroller,
} from 'reporting-ui-components';

P

import {
  P,
} from 'reporting-ui-components';

Placeholders

import {
  TextPlaceholder,
  BarChartPlaceholder,
} from 'reporting-ui-components';

Sticky

import {
  Sticky,
} from 'reporting-ui-components';

Tab

import {
  Tab,
} from 'reporting-ui-components';

Table

import {
  Table,
} from 'reporting-ui-components';

Tabs

import {
  Tabs,
} from 'reporting-ui-components';

Test

import {
  Test,
} from 'reporting-ui-components';

Tooltip

import {
  Tooltip,
} from 'reporting-ui-components';