Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@uswitch/ustyle-react

0.0.104 • Public • Published

ustyle-react

A collection of React components implementing the uSwitch style guide, uStyle.

Installation

First, install the package:

npm i @uswitch/ustyle-react

Congratulations! You can now import ustyle-react components like so:

import {Button} from '@uswitch/ustyle-react';
 
// Do things with your button here...

Development

Note: you should use the npm 5 cli to add dependencies in order to keep package-lock.json up to date

First, clone the project and install the dependencies:

git clone https://github.com/uswitch/ustyle-react
cd ustyle-react && npm install

To start the development server (on port 9000) run:

npm start

Since the project is written in ES2015+, the src code will need to built when you commit. Luckily, we have a pre-commit hook that builds the code for you before every commit!

To run the build step manually:

npm run build

Components

Below are a list of components, with some guidance of how to use them.

Button

Example:

import {Button} from '@uswitch/ustyle-react';
 
<Button size='large' variant='primary' blocked />

Props:

  • variant [string] - options: primary, action, secondary, hero, reversed
  • size [string] - options: large, small
  • href [string] - if set, will return an anchor tag instead of a button
  • size [boolean]
  • blocked [boolean]
  • link [boolean]
  • stronger [boolean]
  • onClick [function] - called when the button is clicked

Breadcrumbs

Example:

import {Breadcrumbs} from '@uswitch/ustyle-react';
 
const items = [{
  href: '/',
  text: 'uSwitch.com'
}, {
  href: null, // NOTE: optional; not used
  text: 'Statutory credit reports'
}];
 
const onClick = (e) => e.preventDefault();
 
<Breadcrumbs items={items} onClick={onClick} />

Props:

  • items [array:objects]
    • href [string]
    • text [string/node]
  • onClick [function] - called when a breadcrumb is clicked

ProgressNavigation

Example:

import {ProgressNavigation} from '@uswitch/ustyle-react';
 
const items = [{
  href: '/journey/step-1',
  text: 'Step 1'
}, {
  href: '/journey/step-2', // NOTE: optional; not used
  text: 'Step 2',
  current: true
}, {
  href: '/journey/step-3', // NOTE: optional; not used
  text: 'Step 3'
}];
 
const onClick = (e, item) => e.preventDefault();
 
<ProgressNavigation items={items} onClick={onClick} />

Props:

  • items [array:objects]
    • href [string] - only required for completed steps
    • text [string/node]
    • current [boolean] - the step that the user is currently on
  • onClick [function] - called when a navigation link is clicked

USP

Example:

import {USP} from '@uswitch/ustyle-react';
 
<USP color='red' text='Example USP' annotation='More info goes here...' />

Props:

  • text [string:required] - the main USP text
  • annotation [string]
  • color [string] - options: blue, orange, purple, yellow, typecyan, green, navy, cyan, typegrey, red

Loader

Example:

import {Loader} from '@uswitch/ustyle-react';
 
let isLoading = true;
 
setTimeout(() => isLoading = false, 10000);
 
<div>{ isLoading ? <Loader text='Loading...' /> : null }</div>

LoaderContainer

Example:

import {LoaderContainer} from '@uswitch/ustyle-react';
 
let isLoading = true;
 
setTimeout(() => isLoading = false, 10000);
 
<LoaderContainer text='Loading...' isLoading={isLoading}>
  <ul className='us-list'>
    <li><a href='#'>List item 1</a></li>
    <li><a href='#'>List item 2</a></li>
    <li><a href='#'>List item 3</a></li>
    <li><a href='#'>List item 4</a></li>
  </ul>
</LoaderContainer>

Props:

  • text [string] - displayed under the loading spinner
  • isLoading [boolean]
  • children [nodes]

Icons

Example:

import {Icon} from '@uswitch/ustyle-react';
 
<Icon name='google' color='typecyan' size='large' />

Props:

  • name [string] - displayed under the loading spinner
  • color [string] - options: white, typegrey, inputgrey, typecyan, custom
  • size [string] options: small, medium, large
  • sizeTablet [string] - maps to .us-icon--{sizeTablet}--sm-tablet
  • sizeMobile [string] - maps to .us-icon--{sizeMobile}--mobile
  • noText [boolean]
  • iconPath [string] - default /icons.svg, the path where your icons are hosted

Notes:

  • To set a global icon path, you can set process.env.ICON_PATH = /images/icons.svg;

ValidationError

Example:

import {ValidationError} from '@uswitch/ustyle-react';
 
<ValidationError>Something went wrong!</ValidationError>

Props:

  • children [node] - error message to display

Notes:

  • Alias for <ValidationMessage variant='error' children={children}/>

ValidationMessage

Example:

import {ValidationMessage} from '@uswitch/ustyle-react';
 
let valid = true;
let message = 'You have been subscribe';
 
<ValidationMessage variant={ valid ? 'success' : 'error'} children={message} />

Props:

  • variant [string] - options: error, success
  • children [node] - error message to display

Toggle

Example:

import {Toggle} from '@uswitch/ustyle-react';
 
const items = [
  {
    text: 'Red',
    value: 'red'
  },
  {
    text: 'White',
    value: 'white'
  },
  {
    text: 'Rosé',
    value: 'rose'
  }
];
 
const onChange = (e, item) => console.log(item);
 
<Toggle items={items} onChange={onChange} name='toggle' />

Props:

  • items [array:objects]
    • text [string/node]
    • value [string]
    • disabled [boolean]
  • value [string] - the current value for the toggle component
  • name [string]
  • onChange [function]

ToggleYesNo

Example:

import {ToggleYesNo} from '@uswitch/ustyle-react';
 
const onChange = (e, item) => console.log(item);
 
<ToggleYesNo value={true} onChange={onChange} name='toggle-yes-no' />

Props:

  • value [string] - the current value for the toggle component
  • name [string]
  • onChange [function]

Select

Example:

import {Select} from '@uswitch/ustyle-react';
 
const items = [{
  text: 'Aye!',
  value: 'yes'
}, {
  text: 'Nay...',
  value: 'no'
}];
 
const onChange = (e, item) => console.log(item);
 
<Select items={items} onChange={onChange} name='select' />

Props:

  • items [array:objects]
    • text [string/node]
    • value [string]
    • disabled [boolean]
  • value [string] the current value of the select component
  • name [string]
  • variant [string]
  • disabled [boolean]
  • blocked [boolean]
  • onChange [function]

InputGroup

Example:

import {InputGroup} from '@uswitch/ustyle-react';
 
<InputGroup text="kwh" position="right">
  <input className="us-form-input" type="number" id="energy" placeholder="0" />
</InputGroup>

Props:

  • text [string/node]
  • icon [string] replaces text
  • position [string] options: left, right
  • disabled [boolean]
  • blocked [boolean]

Tabs

Example:

import {Tabs} from '@uswitch/ustyle-react';
 
const items = [{
  id: 'tab1', title: 'Tab 1', body: 'test'
}, {
  id: 'tab2', title: 'Tab 2', body: 'test', active: true
}, {
  id: 'tab3', title: 'Tab 3', body: 'test'
}];
 
const onClick = (e, item) => console.log({activeTab: item})
 
<Tabs items={items} onClick={onClick} />

Props:

  • items [array:objects]
    • id [string]
    • href [string]
    • title [string]
    • body [string/node]
    • active [boolean]
  • onClick function

Overlay

Example:

import {Overlay} from '@uswitch/ustyle-react';
// TODO: Write about overlay...

Props:

  • title [string]
  • children [string/node]
  • variant [string] - options: left, right, modal
  • isOpen [boolean]
  • onClose [function]

TextArea

Example:

import {TextArea} from '@uswitch/ustyle-react';
// TODO: Write about textarea...

Props:

  • name [string]
  • value [string]
  • disabled [boolean]
  • blocked [boolean]
  • onChange [function]

Tooltip

Example:

.tooltip-demo {
  position: relative;
}
import {Tooltip} from '@uswitch/ustyle-react';
 
 
<Tooltip
  className="tooltip-demo"
  trigger={ <div className="us-tooltip__icon"></div> }
  tooltipContent={ <div>Content</div> }>
  <div>
    Hello
  </div>
</Tooltip>

Keywords

none

Install

npm i @uswitch/ustyle-react

DownloadsWeekly Downloads

229

Version

0.0.104

License

Apache-2.0

Unpacked Size

289 kB

Total Files

106

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar