@retailmenot/anchor/ts/Form/Input/Input.stories.js

A React UI Library by RetailMeNot

// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// COMPONENT
import { Input } from './Input.component';
import { Search, Mobile } from '../../Icon';
import { RootTheme } from '../../theme';
import { Button } from '../../Button';
// README
import * as README from './README.md';
const StyledStory = styled('div') `
    padding: 2rem 5rem;
`;
const InputStories = () => {
    const { useState } = React;
    const [inputValues, setInputValues] = useState({
        text: '',
        number: '',
        tel: '',
        filtered: '',
    });
    return (React.createElement(ThemeProvider, { theme: RootTheme },
        React.createElement(StyledStory, null,
            React.createElement("div", null,
                React.createElement("div", null,
                    React.createElement(Input, { placeholder: "Enter text here", label: "Enter text here", type: "text", value: inputValues.text, onChange: newVal => setInputValues(Object.assign(Object.assign({}, inputValues), { text: newVal })) }),
                    React.createElement(Button, { size: "sm", onClick: () => {
                            setInputValues(Object.assign(Object.assign({}, inputValues), { text: '' }));
                        } }, "Clear text input")),
                React.createElement("div", null,
                    React.createElement(Input, { placeholder: "Enter a number here", type: "number", suffix: React.createElement(Search, { color: "text.placeholder" }), value: inputValues.number, onChange: newVal => setInputValues(Object.assign(Object.assign({}, inputValues), { number: newVal })) })),
                React.createElement("div", null,
                    React.createElement(Input, { placeholder: "(512) 666-6666", label: "Enter a phone number here", prefix: React.createElement(Mobile, { color: "text.placeholder" }), type: "tel", value: inputValues.tel, onChange: newVal => setInputValues(Object.assign(Object.assign({}, inputValues), { tel: newVal })) })),
                React.createElement("div", null,
                    React.createElement(Input, { prefix: React.createElement(Search, { color: "text.placeholder" }), type: "number" })),
                React.createElement("div", null,
                    React.createElement(Input, { placeholder: "Only [0-9], max of 5 characters", value: inputValues.filtered, onChange: newVal => setInputValues(Object.assign(Object.assign({}, inputValues), { filtered: newVal })), filter: value => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, '')) === null || _a === void 0 ? void 0 : _a.substring(0, 5); } }))))));
};
storiesOf('Components/Form/Input', module)
    .addParameters({
    readme: {
        sidebar: README,
    },
})
    .add('Default', () => React.createElement(InputStories, null));
//# sourceMappingURL=Input.stories.js.map