@cimpress/react-components
Version:
React components to support the MCP styleguide
55 lines • 3.56 kB
JavaScript
import React from 'react';
import { TextField } from '../TextInput';
import { Select } from '../Select';
import { Button } from '../Button';
import { DatePicker } from '../DatePicker';
const meta = {
title: 'Components/Form',
};
export default meta;
export const Default = {
render() {
const [name, setName] = React.useState('');
const [occupation, setOccupation] = React.useState('');
const [favoriteSnacks, setFavoriteSnacks] = React.useState([]);
return (React.createElement("div", null,
React.createElement(TextField, { label: "Name", name: "name", value: name, onChange: e => setName(e.target.value) }),
React.createElement(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.createElement(DatePicker, { label: "Birthday" }),
React.createElement("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' } },
React.createElement(TextField, { label: "Age", name: "age", onChange: () => { } }),
React.createElement(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.createElement(Button, null, "Submit")));
},
};
//# sourceMappingURL=Form.stories.js.map