pdh-design-system
Version:
PDH Design System React Components
360 lines (336 loc) • 10.7 kB
JavaScript
import React from 'react';
import Form from '@organisms/Form/Form';
import { Row, Col, Button, InputGroup } from '@/index';
import { Formik } from 'formik';
import * as yup from 'yup';
export default {
title: 'organisms/Form/Layout',
component: Form,
argTypes: {},
};
export const FormGrid = (args) => {
return (
<Form>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Row>
<Form.Group className="mb-3" controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control placeholder="1234 Main St" />
</Form.Group>
<Form.Group className="mb-3" controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control placeholder="Apartment, studio, or floor" />
</Form.Group>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Select defaultValue="Choose...">
<option>Choose...</option>
<option>...</option>
</Form.Select>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control />
</Form.Group>
</Row>
<Form.Group className="mb-3" id="formGridCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
);
};
export const HorizontalForm = (args) => {
return (
<Form>
<Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
<Form.Label column sm={2}>
Email
</Form.Label>
<Col sm={10}>
<Form.Control type="email" placeholder="Email" />
</Col>
</Form.Group>
<Form.Group as={Row} className="mb-3" controlId="formHorizontalPassword">
<Form.Label column sm={2}>
Password
</Form.Label>
<Col sm={10}>
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
<fieldset>
<Form.Group as={Row} className="mb-3">
<Form.Label as="legend" column sm={2}>
Radios
</Form.Label>
<Col sm={10}>
<Form.Check
type="radio"
label="first radio"
name="formHorizontalRadios"
id="formHorizontalRadios1"
/>
<Form.Check
type="radio"
label="second radio"
name="formHorizontalRadios"
id="formHorizontalRadios2"
/>
<Form.Check
type="radio"
label="third radio"
name="formHorizontalRadios"
id="formHorizontalRadios3"
/>
</Col>
</Form.Group>
</fieldset>
<Form.Group as={Row} className="mb-3" controlId="formHorizontalCheck">
<Col sm={{ span: 10, offset: 2 }}>
<Form.Check label="Remember me" />
</Col>
</Form.Group>
<Form.Group as={Row} className="mb-3">
<Col sm={{ span: 10, offset: 2 }}>
<Button type="submit">Sign in</Button>
</Col>
</Form.Group>
</Form>
);
};
export const ColumnSizing = (args) => {
return (
<Form>
<Row>
<Col xs={7}>
<Form.Control placeholder="City" />
</Col>
<Col>
<Form.Control placeholder="State" />
</Col>
<Col>
<Form.Control placeholder="Zip" />
</Col>
</Row>
</Form>
);
};
export const AutoSizing = (args) => {
return (
<Form>
<Row className="align-items-center">
<Col xs="auto">
<Form.Label htmlFor="inlineFormInput" visuallyHidden>
Name
</Form.Label>
<Form.Control
className="mb-2"
id="inlineFormInput"
placeholder="Jane Doe"
/>
</Col>
<Col xs="auto">
<Form.Label htmlFor="inlineFormInputGroup" visuallyHidden>
Username
</Form.Label>
<InputGroup className="mb-2">
<InputGroup.Text>@</InputGroup.Text>
<Form.Control id="inlineFormInputGroup" placeholder="Username" />
</InputGroup>
</Col>
<Col xs="auto">
<Form.Check
type="checkbox"
id="autoSizingCheck"
className="mb-2"
label="Remember me"
/>
</Col>
<Col xs="auto">
<Button type="submit" className="mb-2">
Submit
</Button>
</Col>
</Row>
</Form>
);
};
export const DisabledForms = (args) => {
return (
<Form>
<fieldset disabled>
<Form.Group className="mb-3">
<Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label>
<Form.Control id="disabledTextInput" placeholder="Disabled input" />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label>
<Form.Select id="disabledSelect">
<option>Disabled select</option>
</Form.Select>
</Form.Group>
<Form.Group className="mb-3">
<Form.Check
type="checkbox"
id="disabledFieldsetCheck"
label="Can't check this"
/>
</Form.Group>
<Button type="submit">Submit</Button>
</fieldset>
</Form>
);
};
export const ValidationForms = (args) => {
const schema = yup.object().shape({
firstName: yup.string().required(),
lastName: yup.string().required(),
username: yup.string().required(),
city: yup.string().required(),
state: yup.string().required(),
zip: yup.string().required(),
terms: yup.bool().required().oneOf([true], 'Terms must be accepted'),
});
return (
<Formik
validationSchema={schema}
onSubmit={console.log}
initialValues={{
firstName: 'Mark',
lastName: 'Otto',
username: '',
city: '',
state: '',
zip: '',
terms: false,
}}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Row className="mb-3">
<Form.Group as={Col} md="4" controlId="validationFormik01">
<Form.Label>First name</Form.Label>
<Form.Control
type="text"
name="firstName"
value={values.firstName}
onChange={handleChange}
isValid={touched.firstName && !errors.firstName}
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationFormik02">
<Form.Label>Last name</Form.Label>
<Form.Control
type="text"
name="lastName"
value={values.lastName}
onChange={handleChange}
isValid={touched.lastName && !errors.lastName}
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationFormikUsername">
<Form.Label>Username</Form.Label>
<InputGroup hasValidation>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
name="username"
value={values.username}
onChange={handleChange}
isInvalid={!!errors.username}
/>
<Form.Control.Feedback type="invalid">
{errors.username}
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group as={Col} md="6" controlId="validationFormik03">
<Form.Label>City</Form.Label>
<Form.Control
type="text"
placeholder="City"
name="city"
value={values.city}
onChange={handleChange}
isInvalid={!!errors.city}
/>
<Form.Control.Feedback type="invalid">
{errors.city}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationFormik04">
<Form.Label>State</Form.Label>
<Form.Control
type="text"
placeholder="State"
name="state"
value={values.state}
onChange={handleChange}
isInvalid={!!errors.state}
/>
<Form.Control.Feedback type="invalid">
{errors.state}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationFormik05">
<Form.Label>Zip</Form.Label>
<Form.Control
type="text"
placeholder="Zip"
name="zip"
value={values.zip}
onChange={handleChange}
isInvalid={!!errors.zip}
/>
<Form.Control.Feedback type="invalid">
{errors.zip}
</Form.Control.Feedback>
</Form.Group>
</Row>
<Form.Group className="mb-3">
<Form.Check
required
name="terms"
label="Agree to terms and conditions"
onChange={handleChange}
isInvalid={!!errors.terms}
feedback={errors.terms}
id="validationFormik0"
/>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
)}
</Formik>
);
};