@uswitch/ustyle-react v0.0.108

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>