Add sotries to new form components and put them in their own folders
This commit is contained in:
JUDIT GRESKOVITS
parent
a4743bd80e
commit
27b8b2d7f8
|
|
@ -1,6 +1,6 @@
|
|||
const composers = require('../../shared/composers');
|
||||
const BaseInput = require('./base-input');
|
||||
const Toggle = require('./toggle');
|
||||
const composers = require('../../../shared/composers');
|
||||
const BaseInput = require('../base-input');
|
||||
const Toggle = require('../toggle');
|
||||
|
||||
const {
|
||||
Baseline
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const FormMeta = require('../meta');
|
||||
const FormGroup = require('../group');
|
||||
const Checkbox = require('../checkbox');
|
||||
const Label = require('../label');
|
||||
const Row = require('../../row');
|
||||
const Column = require('../../column');
|
||||
|
||||
storiesOf('Checkbox', module)
|
||||
.add('Default', () => (
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('Checked', () => (
|
||||
<FormGroup>
|
||||
<Checkbox checked />
|
||||
<Label>Check this out!</Label>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('Disabled', () => (
|
||||
<FormGroup>
|
||||
<Checkbox disabled />
|
||||
<Label>Check this out!</Label>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('With label before', () => (
|
||||
<FormGroup>
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox />
|
||||
</FormGroup>
|
||||
))
|
||||
.add('With warning', () => (
|
||||
<div>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup warning='Unexpected group warning!'>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left warning>
|
||||
Unexpected children warning!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left warning='Unexpected inline warning!' />
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('With error', () => (
|
||||
<div>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{error: 'Unexpected meta error!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup error='Unexpected group error!'>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left error>
|
||||
Unexpected children error!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left error='Unexpected inline error!' />
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('With success', () => (
|
||||
<div>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{success: 'Unexpected meta success!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup success='Unexpected group success!'>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left success>
|
||||
Unexpected children success!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left success='Unexpected inline success!' />
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('With label before with success', () => (
|
||||
<FormGroup>
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox />
|
||||
<FormMeta success left>
|
||||
Thanks for ticking, you are a star!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('Multiple checkboxes with meta', () => (
|
||||
<Row>
|
||||
<Column md={6}>
|
||||
<FormGroup>
|
||||
<Row>
|
||||
<Column>
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox />
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column>
|
||||
<FormMeta success left>
|
||||
Thanks for ticking, you are a star!
|
||||
</FormMeta>
|
||||
</Column>
|
||||
</Row>
|
||||
</FormGroup>
|
||||
</Column>
|
||||
<Column md={6}>
|
||||
<FormGroup>
|
||||
<Row>
|
||||
<Column>
|
||||
<FormMeta success left>
|
||||
Thanks for ticking, you are a star!
|
||||
</FormMeta>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column>
|
||||
<Label>Check this out!</Label>
|
||||
<Checkbox />
|
||||
</Column>
|
||||
</Row>
|
||||
</FormGroup>
|
||||
</Column>
|
||||
</Row>
|
||||
));
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
const composers = require('../../shared/composers');
|
||||
const BaseInput = require('./base-input');
|
||||
const composers = require('../../../shared/composers');
|
||||
const BaseInput = require('../base-input');
|
||||
|
||||
const {
|
||||
Baseline
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Input = require('../input');
|
||||
const FormMeta = require('../meta');
|
||||
const FormGroup = require('../group');
|
||||
const Label = require('../label');
|
||||
|
||||
storiesOf('Input', module)
|
||||
.add('Default', () => (
|
||||
<Input placeholder="I am the placeholder" />
|
||||
))
|
||||
.add('type=email', () => (
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<small>We'll never share your email with anyone else.</small>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('Error', () => (
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta error='Unexpected inline error!' />
|
||||
</FormGroup>
|
||||
<FormGroup error='Unexpected group error!'>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{error: 'Unexpected meta error!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta error>
|
||||
Unexpected children error!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('Warning', () => (
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta warning='Unexpected inline warning!' />
|
||||
</FormGroup>
|
||||
<FormGroup warning='Unexpected group warning!'>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta warning>
|
||||
Unexpected children warning!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('Success', () => (
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta success='Unexpected inline success!' />
|
||||
</FormGroup>
|
||||
<FormGroup success='Unexpected group success!'>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{success: 'Unexpected meta success!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta success>
|
||||
Unexpected children success!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('Base meta', () => (
|
||||
<FormGroup>
|
||||
<Label>Email Address</Label>
|
||||
<Input
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
/>
|
||||
<FormMeta>I'm a children of meta</FormMeta>
|
||||
</FormGroup>
|
||||
));
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
const Styled = require('styled-components');
|
||||
|
||||
const Toggle = require('./toggle');
|
||||
const composers = require('../../shared/composers');
|
||||
const BaseInput = require('./base-input');
|
||||
const Toggle = require('../toggle');
|
||||
const composers = require('../../../shared/composers');
|
||||
const BaseInput = require('../base-input');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Legend = require('../legend');
|
||||
const Radio = require('../radio');
|
||||
const FormGroup = require('../group');
|
||||
const FormMeta = require('../meta');
|
||||
|
||||
const {
|
||||
RadioList
|
||||
} = Radio;
|
||||
|
||||
|
||||
storiesOf('Radio', module)
|
||||
.add('Default', () => (
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('disabled', () => (
|
||||
<FormGroup name='who-killed' disabled>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('Error', () => (
|
||||
<div>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta error='Unexpected inline error!' left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed' error='Unexpected group error!'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup name='who-killed' meta={{error: 'Unexpected meta error!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta error left>
|
||||
Unexpected children error!
|
||||
</FormMeta>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('Warning', () => (
|
||||
<div>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta warning='Unexpected inline warning!' left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed' warning='Unexpected group warning!'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup name='who-killed' meta={{warning: 'Unexpected meta warning!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left warning>
|
||||
Unexpected children warning!
|
||||
</FormMeta>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('Success', () => (
|
||||
<div>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta success='Unexpected inline success!' left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed' success='Unexpected group success!'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup name='who-killed' meta={{success: 'Unexpected meta success!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left />
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left success>
|
||||
Unexpected children success!
|
||||
</FormMeta>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('Base meta', () => (
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormMeta left>I'm a children of meta</FormMeta>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
));
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
const composers = require('../../shared/composers');
|
||||
const BaseInput = require('./base-input');
|
||||
const composers = require('../../../shared/composers');
|
||||
const BaseInput = require('../base-input');
|
||||
|
||||
const {
|
||||
Baseline
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const FormMeta = require('../meta');
|
||||
const FormGroup = require('../group');
|
||||
const Select = require('../select');
|
||||
const Label = require('../label');
|
||||
|
||||
storiesOf('Select', module)
|
||||
.add('Default', () => (
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select placeholder='Select Location'>
|
||||
<option value="1">Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('placeholder', () => (
|
||||
<Select>
|
||||
<Label>Your location</Label>
|
||||
<option selected disabled>Select a datacenter</option>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
))
|
||||
.add('disabled', () => (
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select
|
||||
disabled
|
||||
placeholder='Select Location'
|
||||
value='2'
|
||||
>
|
||||
<option value="1">Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('selected', () => (
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select
|
||||
placeholder='Select Location'
|
||||
value='2'
|
||||
>
|
||||
<option value="1">Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('multiple', () => (
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select multiple>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
))
|
||||
.add('warning', () => (
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta warning='Unexpected inline warning!' />
|
||||
</FormGroup>
|
||||
<FormGroup warning='Unexpected group warning!'>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta warning>
|
||||
Unexpected children warning!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('error', () => (
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta error='Unexpected inline error!' />
|
||||
</FormGroup>
|
||||
<FormGroup error='Unexpected group error!'>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{error: 'Unexpected meta error!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta error>
|
||||
Unexpected children error!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('success', () => (
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta success='Unexpected inline success!' />
|
||||
</FormGroup>
|
||||
<FormGroup success='Unexpected group success!'>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
{/* eslint-disable object-curly-newline */}
|
||||
<FormGroup meta={{success: 'Unexpected meta success!'}}>
|
||||
{/* eslint-enable object-curly-newline */}
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta success>
|
||||
Unexpected children success!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
</div>
|
||||
))
|
||||
.add('Base meta', () => (
|
||||
<FormGroup>
|
||||
<Label>Your location</Label>
|
||||
<Select>
|
||||
<option>Amsterdam, EU</option>
|
||||
<option>San Francisco, USA</option>
|
||||
<option>Seoul, South Korea</option>
|
||||
<option>Tokyo, Japan</option>
|
||||
</Select>
|
||||
<FormMeta>
|
||||
I'm a children of meta!
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
));
|
||||
Loading…
Reference in New Issue