pdh-design-system/src/organisms/Form/Form.Control.stories.js

PDH Design System React Components

import React from 'react';
import { Form } from '@organisms/Form/Form';

export default {
  title: 'organisms/Form/Control',
  component: Form,
  argTypes: {},
};

const types = [
  // 'button',
  // 'checkbox',
  'color',
  'date',
  'datetime-local',
  'email',
  'file',
  'hidden',
  // 'image',
  'month',
  'number',
  'password',
  // 'radio',
  // 'range',
  // 'reset',
  'search',
  // 'submit',
  // 'tel',
  'text',
  'time',
  // 'url',
  // 'week'
]

const FormControlTemplate = (args) => {
  return (
    <Form>
      <h3>Form.Control type</h3>
      {
        types.map(item => (
          <Form.Group key={item} className="mb-3">
            <Form.Label>type={item}</Form.Label>
            <Form.Control type={item} placeholder={`input ${item}`} />
          </Form.Group>
        ))
      }

      <Form.Group className="mb-3">
        <Form.Label>as="textarea"</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>

      <h3>Form.Control size</h3>
      <Form.Group className="mb-3">
        <Form.Label>size="lg"</Form.Label>
        <Form.Control size="lg" type="text" placeholder="Large text" />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>size=""</Form.Label>
        <Form.Control type="text" placeholder="Normal text" />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>size="sm"</Form.Label>
        <Form.Control size="sm" type="text" placeholder="Small text" />
      </Form.Group>

      <h3>Form.Control readOnly</h3>
      <Form.Group className="mb-3">
        <Form.Control type="text" placeholder="Readonly input here..." readOnly />
      </Form.Group>

      <h3>Form.Control plaintext</h3>
      <Form.Group className="mb-3">
        <Form.Control plaintext defaultValue="email@example.com" />
      </Form.Group>

      <h3>Form.Control File input</h3>
      <Form.Group className="mb-3">
        <Form.Label>multiple=false</Form.Label>
        <Form.Control type="file" />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>multiple</Form.Label>
        <Form.Control type="file" multiple />
      </Form.Group>

    </Form>
  );
};

export const Control = FormControlTemplate.bind({});
Control.args = {}