@cimpress/react-components
Version:
React components to support the MCP styleguide
61 lines • 4.01 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
const react_1 = __importDefault(require("react"));
const TextInput_1 = require("../TextInput");
const Select_1 = require("../Select");
const Button_1 = require("../Button");
const DatePicker_1 = require("../DatePicker");
const meta = {
title: 'Components/Form',
};
exports.default = meta;
exports.Default = {
render() {
const [name, setName] = react_1.default.useState('');
const [occupation, setOccupation] = react_1.default.useState('');
const [favoriteSnacks, setFavoriteSnacks] = react_1.default.useState([]);
return (react_1.default.createElement("div", null,
react_1.default.createElement(TextInput_1.TextField, { label: "Name", name: "name", value: name, onChange: e => setName(e.target.value) }),
react_1.default.createElement(Select_1.Select, { isClearable: true, label: "Occupation", value: occupation, options: [
{ value: 'ux-designer', label: 'UX Designer' },
{ value: 'software-engineer', label: 'Software Engineer' },
{ value: 'product-manager', label: 'Product Manager' },
], onChange: value => setOccupation(value), helpText: "You can select a single thing from here." }),
react_1.default.createElement(DatePicker_1.DatePicker, { label: "Birthday" }),
react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' } },
react_1.default.createElement(TextInput_1.TextField, { label: "Age", name: "age", onChange: () => { } }),
react_1.default.createElement(Select_1.Select, { isClearable: true, isMulti: true, label: "Favorite snacks", value: favoriteSnacks, options: [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'grapes', label: 'Grapes' },
{ value: 'carrot sticks', label: 'Carrot Sticks' },
{ value: 'hummus', label: 'Hummus' },
{ value: 'almonds', label: 'Almonds' },
{ value: 'yogurt', label: 'Yogurt' },
{ value: 'popcorn', label: 'Popcorn' },
{ value: 'cheese cubes', label: 'Cheese Cubes' },
{ value: 'pretzels', label: 'Pretzels' },
{ value: 'trail mix', label: 'Trail Mix' },
{ value: 'granola bar', label: 'Granola Bar' },
{ value: 'cherry tomatoes', label: 'Cherry Tomatoes' },
{ value: 'dark chocolate', label: 'Dark Chocolate' },
{ value: 'cucumber slices', label: 'Cucumber Slices' },
{ value: 'rice cakes', label: 'Rice Cakes' },
{ value: 'popcorn', label: 'Popcorn' },
{ value: 'mixed nuts', label: 'Mixed Nuts' },
{ value: 'fruit leather', label: 'Fruit Leather' },
{ value: 'Greek yogurt parfait', label: 'Greek Yogurt Parfait' },
{ value: 'celery sticks', label: 'Celery Sticks' },
{ value: 'chocolate-covered strawberries', label: 'Chocolate-Covered Strawberries' },
{ value: 'apple slices with peanut butter', label: 'Apple Slices with Peanut Butter' },
{ value: 'dried mango', label: 'Dried Mango' },
{ value: 'veggie chips', label: 'Veggie Chips' },
], onChange: value => setFavoriteSnacks(value) })),
react_1.default.createElement(Button_1.Button, null, "Submit")));
},
};
//# sourceMappingURL=Form.stories.js.map