A React component & pattern library based on the Portland UI Kit
npm install react-portland-ui
A component & pattern library based on the Portland UI Kit.
#### Docs
Star the repo and come back later. Maybe it will be finished :grin:
``
npm install --save react-portland-ui
There's two ways to include the styles; via the compiled styles.css or using the source stylus modules avaiable at stylus/index.styl.
#### Using compiled styles
Best for simpler use cases without much customization.
From the root of your application:
`javascript`
import 'react-portland-ui/styles.css'
#### Using stylus modules
For more advanced cases with custom styling needs. First, install stylus-relative-loader and configure it to use the resolve url option.
From your stylus root:
`stylus`
@import '~react-portland-ui/dist/stylus/index'
Clone the repo then
`
npm install
npm run dev
To use the dev version in other project use npm link. For local development use the sandbox.
#### Sandbox
A sandbox environment is included under sandbox.
`
npm run sandbox:dev
and navigate to localhost:5000.
`
npm test
Packages can be tested via their test.js file.
Tools you'll need to be familiar with: karma, mocha, chai, sinon, enzyme, sinon-chai, chai-enzyme.
After starting the tests don't close the spawned chrome browser, just minimize it.
#### Example
packages/Button/test.js
`javascript
import React from 'react';
import { spy } from 'sinon';
import { render, shallow } from 'enzyme';
import Button from './index';
import { Button as FormalButton } from 'react-formal';
describe('', () => {
it('renders', () => {
const wrapper = render();
wrapper.should.be.present();
});
it('render children', () => {
const wrapper = shallow();
wrapper.should.have.text('Test');
});
it('renders a form button when in form context', () => {
const context = { reactFormalContext: true };
const wrapper = shallow(, { context });
wrapper.find(FormalButton).should.have.length(1);
});
it('accepts a className', () => {
const wrapper = shallow();
wrapper.should.have.className('some-class');
});
it('accepts a type', () => {
const wrapper = shallow();
wrapper.should.have.attr('type', 'submit');
});
it('accepts an onClick action', () => {
const onClick = spy();
const wrapper = shallow();
wrapper.simulate('click');
onClick.should.have.been.calledOnce;
});
it('accepts a ghost prop', () => {
const wrapper = shallow();
wrapper.should.have.className('ghost');
});
it('accepts a fluid prop', () => {
const wrapper = shallow();
wrapper.should.have.className('fluid');
});
it('accepts a big prop', () => {
const wrapper = shallow();
wrapper.should.have.className('big');
});
});
`
`
npm run docs:dev
and navigate to localhost:4000.
Packages can be documented via their documentation.md file and comments inline with their propTypes.
#### Example
packages/Button/index.js
`javascript
import React, { Component, PropTypes } from 'react';
import { Button as FormalButton } from 'react-formal';
import classnames from 'classnames';
export default class Button extends Component {
static propTypes = {
className: PropTypes.string,
children: PropTypes.node,
/**
* HTML type attribute
*/
type: PropTypes.string,
onClick: PropTypes.func,
/**
* If true button is ghost style
*/
ghost: PropTypes.bool,
/**
* If true button expands to fill container
*/
fluid: PropTypes.bool,
/**
* If true component will be big size
*/
big: PropTypes.bool,
};
render() {
const classes = classnames(
'pui--button',
this.props.className,
{
ghost: this.props.ghost,
fluid: this.props.fluid,
big: this.props.big,
}
);
if (this.context.reactFormalContext) {
return (
{this.props.children}
);
}
return (
type={this.props.type}
onClick={this.props.onClick}
>
{this.props.children}
);
}
}
`
packages/Button/documentation.md
`markdown
---
module: buttons
description: A button. Push it and it does stuff.
---
#### Basic button
#### Ghost button
#### Big button
`
The name` attribute can be resolved from the markdown front matter or inferred from the component class name.