@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
33 lines • 1.59 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { boolean, select, text } from '@storybook/addon-knobs';
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { RootTheme } from '../../theme';
// SUBJECT
import * as README from './README.md';
import { ControlLabel } from './ControlLabel.component';
import { Radio } from '../Radio';
import { Toggle } from '../Toggle';
import { Checkbox } from '../Checkbox';
const StyledStory = styled.div `
padding: 1rem;
color: #555;
`;
storiesOf('Components/Form/ControlLabel', module)
.addParameters({ readme: { sidebar: README } })
.add('Default', () => React.createElement(() => {
const [checked, setChecked] = React.useState(true);
const labelPlacement = select('labelPlacement', ['left', 'right'], 'right');
const disabled = boolean('disabled', false);
const labelSpacing = text('labelSpacing', '') || undefined;
const label = text('label', 'Label for the control');
const controls = { Toggle, Radio, Checkbox };
const Control = controls[select('control', ['Toggle', 'Radio', 'Checkbox'], 'Toggle')];
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(ControlLabel, { label: label, disabled: disabled, labelPlacement: labelPlacement, labelSpacing: labelSpacing, control: React.createElement(Control, { onChange: () => setChecked(!checked), checked: checked }) }))));
}));
//# sourceMappingURL=ControlLabel.stories.js.map