/nordnet-ui-kit

Nordnet UI Kit

Primary LanguageJavaScript

Nordnet UI Kit

NPM version Build Status Dependency Status

Installation

npm install --save nordnet-ui-kit

Usage

import { Button } from 'nordnet-ui-kit';

const button = (
  <Button primary type="success">Success</Button>
);

ReactDOM.render(button, mountNode);

Components

Alert

In use:

<Alert type="success" header="Well done!">Your message was sent</Alert>

The <Alert /> component takes the following props:

  • type: either success, warning or danger
  • header
  • dismissable
  • dismissed

Button

In use:

<Button primary type="danger">Delete</Button>

The <Button /> component takes the following props:

  • primary
  • secondary
  • link
  • type: either success, warning or danger
  • href
  • disabled

Checkbox

In use:

<Checkbox label="Check me out" />

The <Checkbox /> component takes the following props:

  • checked
  • disabled
  • value
  • label

Collapsible

In use:

const toggle = <Button secondary>Toggle Collapsible</Button>;

<Collapsible toggle={ toggle }>
  <div>
    Hello there
  </div>
</Collapsible>

The <Collapsible /> component takes the following props:

  • toggle
  • collapsed

Dropdown

In use:

<Dropdown toggle="Toggle dropdown" actions={[{
  label: 'Action 1',
  action: () => alert('You pressed action 1'),
}, {
  label: 'Action 2',
  action: () => alert('You pressed action 2'),
}]} />

The <Dropdown /> component takes the following props:

  • toggle
  • actions
  • actionsOpen

Icon

In use:

<Icon type="checkmark" stroke="green" width={ 16 } height={ 16 } />

The <Icon /> component takes the following props:

  • type
  • fill
  • stroke
  • strokeWidth
  • width
  • height
  • componentClass

Input

In use:

<Input type="text" label="Text input" placeholder="Enter value" />

The <Input /> component takes the following props:

  • type
  • label
  • placeholder
  • id
  • value
  • onFocus
  • onBlur
  • onChange
  • hasSuccess
  • hasError
  • hasWarning
  • helpText
  • options

Pane

In use:

<Pane tabs={[{
  label: 'Tab 1',
  body: <span>This is tab 1!</span>
}, {
  label: 'Tab 2',
  body: <span>This is tab 2!</span>
}, {
  label: 'Tab 3',
  body: <span>This is tab 3!</span>
}]} />

The <Pane /> component takes the following props:

  • tabs

Radio

In use:

<Radio label="Check me out" />

The <Radio /> component takes the following props:

  • checked
  • disabled
  • value
  • label

License

This open source project released by Nordnet is licensed under the MIT license.

MIT (http://www.opensource.org/licenses/mit-license.php)