mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-12-01 07:30:07 +02:00
Code Issues Releases Wiki Activity

adding button docs

Browse Source
This commit is contained in:
Alex Windett 2017-04-06 16:21:23 +01:00 committed by Judit Greskovits
parent 0127f76a7d
commit 968a6914f5
2 changed files with 36 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
ui/src/components/button/readme.md
View File

@ -1,51 +1,35 @@
# `<Button>` # Button
## demo ### Description
An HTML button element with styles and functionality applied according to props.
```embed If no props are defined, a "primary" button with no routing capabilities will be
const React = require('react'); rendered.
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Button = require('./index.js');
const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString( ### Usage
<Base>
<Row>
<Column>
<Button>
Create an Instance
</Button>
</Column>
<Column>
<Button secondary>
Cancel
</Button>
</Column>
<Column>
<Button disabled>
Inactive Button
</Button>
</Column>
</Row>
</Base>
);
```
## usage
```js ```js
const React = require('react'); import Button from '@ui/components/button';
const Button = require('ui/button');
module.exports = () => { <div>
return ( <Button>Hello</Button>
<Button> <Button primary>Primary</Button>
Hello World <Button secondary>Secondary</Button>
</Button> <Button disabled>Disabled</Button>
); <Button to='/hello'>To</Button>
} <Button href='/world'>href</Button>
</div>
``` ```
### Properties
| propName | propType | defaultValue | isRequired |
|----------|----------|--------------|------------|
| href | string | - | |
| to | string | - | |
| secondary | bool | false | |
| disabled | bool | false | |
| tertiary | bool | false | |
## Roadmap
* `onClick` - click callback
* `label` - button accessibility tag

14
ui/src/components/button/story.js
View File

@ -1,26 +1,28 @@
import React from 'react'; import React from 'react';
import { storiesOf } from '@kadira/storybook'; import { storiesOf } from '@kadira/storybook';
import withReadme from 'storybook-readme/with-readme';
import Button from './'; import Button from './';
import README from './readme.md';
storiesOf('Button', module) storiesOf('Button', module)
.add('With text', () => ( .add('With text', withReadme(README, () => (
<Button> <Button>
Inspire the lazy Inspire the lazy
</Button> </Button>
)).add('Secondary', () => ( ))).add('Secondary', withReadme(README, () => (
<Button secondary> <Button secondary>
Inspire the brave Inspire the brave
</Button> </Button>
)).add('Tertiary', () => ( ))).add('Tertiary', withReadme(README, () => (
<Button tertiary> <Button tertiary>
Inspire the tertiary Inspire the tertiary
</Button> </Button>
)).add('Disabled', () => ( ))).add('Disabled', withReadme(README, () => (
<Button disabled> <Button disabled>
Inspire the liars Inspire the liars
</Button> </Button>
)).add('Anchor', () => ( ))).add('Anchor', withReadme(README, () => (
<Button href='#'> <Button href='#'>
Inspire the anchor Inspire the anchor
</Button> </Button>
)); )));