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