@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
33 lines • 2.07 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { RootTheme } from '../theme';
// SUBJECT
import { ControlLabel, Radio, Toggle } from '.';
const StyledStory = styled.div `
padding: 1rem;
color: #555;
`;
storiesOf('Components/Form', module).add('Example', () => React.createElement(() => {
const [veganOptionsEnabled, setVeganOptionsEnabled] = React.useState(true);
const [realDealEnabled, setRealDealEnabled] = React.useState(true);
const [selectedVeganOption, setSelectedVeganOption] = React.useState('salad');
function handleChange(event) {
setSelectedVeganOption(event.target.value);
}
const StyledForm = styled('form') `
display: flex;
flex-direction: column;
`;
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(StyledForm, null,
React.createElement(ControlLabel, { value: "dairyFree", label: "Vegan Option", weight: 600, control: React.createElement(Toggle, { checked: veganOptionsEnabled, onChange: () => setVeganOptionsEnabled(!veganOptionsEnabled) }) }),
React.createElement(ControlLabel, { value: "salad", label: "Salad", disabled: !veganOptionsEnabled, marginLeft: "2rem", control: React.createElement(Radio, { onChange: handleChange, checked: selectedVeganOption === 'salad' }) }),
React.createElement(ControlLabel, { value: "seitan", label: "Seitan Steak", disabled: !veganOptionsEnabled, marginLeft: "2rem", control: React.createElement(Radio, { onChange: handleChange, checked: selectedVeganOption === 'seitan' }) }),
React.createElement(ControlLabel, { value: "dairyFree", label: "Dairy Free", weight: 600, control: React.createElement(Toggle, { checked: realDealEnabled, onChange: () => setRealDealEnabled(!realDealEnabled) }) })))));
}));
//# sourceMappingURL=Form.stories.js.map