Thomas
7 years ago
commit
26c6bddebf
@ -0,0 +1,10 @@ |
||||
# Storybook |
||||
We're currently using [Storybook](https://storybook.js.org/) as part of our design system. To run Storybook and test some of our UI components, clone the repo and run the following: |
||||
``` |
||||
npm install |
||||
npm run storybook |
||||
``` |
||||
You should then see: |
||||
> info Storybook started on => http://localhost:6006/ |
||||
|
||||
In your browser, navigate to http://localhost:6006/ to see the Storybook application. From here, you'll be able to easily view components and even modify some of their properties. |
||||
@ -0,0 +1,2 @@ |
||||
import '@storybook/addon-knobs/register' |
||||
import '@storybook/addon-actions/register' |
||||
@ -0,0 +1,11 @@ |
||||
import { configure } from '@storybook/react' |
||||
import '../ui/app/css/index.scss' |
||||
|
||||
const req = require.context('../ui/app/components', true, /\.stories\.js$/) |
||||
|
||||
function loadStories () { |
||||
require('./decorators') |
||||
req.keys().forEach((filename) => req(filename)) |
||||
} |
||||
|
||||
configure(loadStories, module) |
||||
@ -0,0 +1,21 @@ |
||||
import React from 'react' |
||||
import { addDecorator } from '@storybook/react' |
||||
import { withInfo } from '@storybook/addon-info' |
||||
import { withKnobs } from '@storybook/addon-knobs/react' |
||||
|
||||
const styles = { |
||||
height: '100vh', |
||||
display: 'flex', |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
} |
||||
|
||||
const CenterDecorator = story => ( |
||||
<div style={styles}> |
||||
{ story() } |
||||
</div> |
||||
) |
||||
|
||||
addDecorator((story, context) => withInfo()(story)(context)) |
||||
addDecorator(withKnobs) |
||||
addDecorator(CenterDecorator) |
||||
@ -0,0 +1,37 @@ |
||||
const path = require('path') |
||||
|
||||
module.exports = { |
||||
module: { |
||||
rules: [ |
||||
{ |
||||
test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/, |
||||
loaders: [{ |
||||
loader: 'file-loader', |
||||
options: { |
||||
name: '[name].[ext]', |
||||
outputPath: 'fonts/', |
||||
}, |
||||
}], |
||||
}, |
||||
{ |
||||
test: /\.scss$/, |
||||
loaders: [ |
||||
'style-loader', |
||||
'css-loader', |
||||
'resolve-url-loader', |
||||
{ |
||||
loader: 'sass-loader', |
||||
options: { |
||||
sourceMap: true, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
resolve: { |
||||
alias: { |
||||
'./fonts/Font_Awesome': path.resolve(__dirname, '../fonts/Font_Awesome'), |
||||
}, |
||||
}, |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@ |
||||
const { Component } = require('react') |
||||
const h = require('react-hyperscript') |
||||
const PropTypes = require('prop-types') |
||||
const classnames = require('classnames') |
||||
|
||||
const SECONDARY = 'secondary' |
||||
const CLASSNAME_PRIMARY = 'btn-primary' |
||||
const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg' |
||||
const CLASSNAME_SECONDARY = 'btn-secondary' |
||||
const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg' |
||||
|
||||
const getClassName = (type, large = false) => { |
||||
let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY |
||||
|
||||
if (large) { |
||||
output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}` |
||||
} |
||||
|
||||
return output |
||||
} |
||||
|
||||
class Button extends Component { |
||||
render () { |
||||
const { type, large, className, ...buttonProps } = this.props |
||||
|
||||
return ( |
||||
h('button', { |
||||
className: classnames(getClassName(type, large), className), |
||||
...buttonProps, |
||||
}, this.props.children) |
||||
) |
||||
} |
||||
} |
||||
|
||||
Button.propTypes = { |
||||
type: PropTypes.string, |
||||
large: PropTypes.bool, |
||||
className: PropTypes.string, |
||||
children: PropTypes.string, |
||||
} |
||||
|
||||
module.exports = Button |
||||
|
||||
@ -0,0 +1,41 @@ |
||||
import React from 'react' |
||||
import { storiesOf } from '@storybook/react' |
||||
import { action } from '@storybook/addon-actions' |
||||
import Button from './' |
||||
import { text } from '@storybook/addon-knobs/react' |
||||
|
||||
storiesOf('Button', module) |
||||
.add('primary', () => |
||||
<Button |
||||
onClick={action('clicked')} |
||||
type="primary" |
||||
> |
||||
{text('text', 'Click me')} |
||||
</Button> |
||||
) |
||||
.add('secondary', () => ( |
||||
<Button |
||||
onClick={action('clicked')} |
||||
type="secondary" |
||||
> |
||||
{text('text', 'Click me')} |
||||
</Button> |
||||
)) |
||||
.add('large primary', () => ( |
||||
<Button |
||||
onClick={action('clicked')} |
||||
type="primary" |
||||
large |
||||
> |
||||
{text('text', 'Click me')} |
||||
</Button> |
||||
)) |
||||
.add('large secondary', () => ( |
||||
<Button |
||||
onClick={action('clicked')} |
||||
type="secondary" |
||||
large |
||||
> |
||||
{text('text', 'Click me')} |
||||
</Button> |
||||
)) |
||||
@ -0,0 +1,2 @@ |
||||
const Button = require('./button.component') |
||||
module.exports = Button |
||||
Loading…
Reference in new issue