optimizely-oui/module/js/components/Form/Form.story.js

Optimizely's Component Library.

import React from "react";
import { storiesOf } from "@storybook/react";
import Form from "./index";
import Input from "../Input";
import DatePicker from "../DatePicker/DatePicker.js";
import Col from "../Layout/Col";
var stories = storiesOf("Experimental|Form Layout", module);
stories.addDecorator(function (story) {
  return React.createElement("div", {
    className: "soft-quad--sides"
  }, story());
});
stories.add("Default", function () {
  return React.createElement("div", {
    className: "push-double--top"
  }, React.createElement(Col, {
    small: 8,
    large: 5
  }, React.createElement(Form, {
    title: "Form title",
    description: "This is the form description"
  }, React.createElement(Form.Section, {
    isRequired: true,
    title: "Form section"
  }, React.createElement(Form.Item, null, React.createElement(Input, {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-01"
  })), React.createElement(Form.Row, {
    isFullWidth: true
  }, React.createElement(Form.Item, null, React.createElement(DatePicker, {
    inputId: "date-picker-id-1",
    initialDate: null,
    isFocused: false,
    isAbsolutelyPositioned: true
  })), React.createElement(Form.Item, null, React.createElement(DatePicker, {
    inputId: "date-picker-id-2",
    initialDate: null,
    isFocused: false,
    isAbsolutelyPositioned: true
  }))), React.createElement(Form.Row, {
    isFullWidth: true
  }, React.createElement(Form.Item, null, React.createElement(Input, {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-02"
  })), React.createElement(Form.Item, null, React.createElement(Input, {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-03"
  })))), React.createElement(Form.Section, {
    isOptional: true,
    helpIcon: true,
    popoverText: "This is some helpful text",
    title: "Form section",
    description: "This is the section description"
  }, React.createElement(Form.Item, null, React.createElement(Input, {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-04"
  })), React.createElement(Form.Item, null, React.createElement(Input, {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-05"
  }))), React.createElement(Form.Section, {
    title: "Form section",
    description: "This is the section description"
  }, React.createElement(Form.Item, null, React.createElement(Input, {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-06"
  }))))));
}).add('Replicated "New A/B Test" form', function () {
  return React.createElement("div", {
    className: "push-double--top"
  }, React.createElement(Col, {
    small: 8,
    large: 5
  }, React.createElement(Form, null, React.createElement(Form.Section, {
    title: "Experiment Name"
  }, React.createElement(Form.Item, null, React.createElement(Input, {
    label: "Add a name for your experiment",
    type: "text",
    id: "input-01"
  }))), React.createElement(Form.Section, {
    title: "Experiment Key"
  }, React.createElement(Form.Item, null, React.createElement(Input, {
    label: "Use this to uniquely identify the experiment",
    type: "text",
    id: "input-02"
  }))), React.createElement(Form.Section, {
    isOptional: true,
    title: "Description"
  }, React.createElement(Form.Item, null, React.createElement(Input, {
    label: "What is your experiment? State your hypothesis and notes here.",
    type: "text",
    id: "input-03"
  }))))));
});