design-system-simplefi
Version:
Design System for SimpleFi Applications
35 lines • 2.18 kB
JavaScript
import React, { useState } from 'react';
import Input from './Input';
export default {
title: 'components/forms/Input',
component: Input,
};
export var DefaultInput = function () {
var _a = useState(''), selected = _a[0], setSelected = _a[1];
return (React.createElement("div", { style: { width: '400px' } },
React.createElement(Input, { id: "story-input", label: "Input moving", style: {
height: '30px',
}, type: "text", value: selected, hasControls: true, onCancel: function () { }, onChange: function (e) { return setSelected(e.target.value); }, onConfirm: function () { } })));
};
export var SmallInput = function () {
var _a = useState(''), selected = _a[0], setSelected = _a[1];
return (React.createElement("div", { style: { width: '400px' } },
React.createElement(Input, { id: "story-input", label: "Input moving", style: {
height: '40px',
}, type: "text", value: selected, hasControls: true, onCancel: function () { }, onChange: function (e) { return setSelected(e.target.value); }, onConfirm: function () { } })));
};
export var LargeInput = function () {
var _a = useState(''), selected = _a[0], setSelected = _a[1];
return (React.createElement("div", { style: { width: '400px' } },
React.createElement(Input, { id: "story-input", label: "Input moving", style: {
height: '50px',
}, type: "text", value: selected, hasControls: true, onCancel: function () { }, onChange: function (e) { return setSelected(e.target.value); }, onConfirm: function () { } })));
};
export var ShortenedInputForAddressFields = function () {
var _a = useState(''), selected = _a[0], setSelected = _a[1];
return (React.createElement("div", { style: { width: '400px' } },
React.createElement(Input, { id: "story-input", label: "Input moving", style: {
height: '30px',
}, type: "text", value: selected, hasControls: true, shortenInput: true, onCancel: function () { }, onChange: function (e) { return setSelected(e.target.value); }, onConfirm: function () { } })));
};
//# sourceMappingURL=Input.stories.js.map