@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, reversedsize
string - options: large, smallhref
string - if set, will return an anchor tag instead of a buttonsize
booleanblocked
booleanlink
booleanstronger
booleanonClick
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:objectshref
stringtext
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:objectshref
string - only required for completed stepstext
string/nodecurrent
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 textannotation
stringcolor
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:
Icons →
Example:
import {Icon} from '@uswitch/ustyle-react';
<Icon name='google' color='typecyan' size='large' />
Props:
name
string - displayed under the loading spinnercolor
string - options: white, typegrey, inputgrey, typecyan, customsize
string options: small, medium, largesizeTablet
string - maps to.us-icon--{sizeTablet}--sm-tablet
sizeMobile
string - maps to.us-icon--{sizeMobile}--mobile
noText
booleaniconPath
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:
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:objectstext
string/nodevalue
stringdisabled
boolean
value
string - the current value for the toggle componentname
stringonChange
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:
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:objectstext
string/nodevalue
stringdisabled
boolean
value
string the current value of the select componentname
stringvariant
stringdisabled
booleanblocked
booleanonChange
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/nodeicon
string replaces textposition
string options: left, rightdisabled
booleanblocked
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:objectsid
stringhref
stringtitle
stringbody
string/nodeactive
boolean
onClick
function
Overlay →
Example:
import {Overlay} from '@uswitch/ustyle-react';
// TODO: Write about overlay...
Props:
title
stringchildren
string/nodevariant
string - options: left, right, modalisOpen
booleanonClose
function
TextArea →
Example:
import {TextArea} from '@uswitch/ustyle-react';
// TODO: Write about textarea...
Props:
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>