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

Optimizely's Component Library.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _index = _interopRequireDefault(require("./index"));

var _Input = _interopRequireDefault(require("../Input"));

var _DatePicker = _interopRequireDefault(require("../DatePicker/DatePicker.js"));

var _Col = _interopRequireDefault(require("../Layout/Col"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var stories = (0, _react2.storiesOf)("Experimental|Form Layout", module);
stories.addDecorator(function (story) {
  return _react["default"].createElement("div", {
    className: "soft-quad--sides"
  }, story());
});
stories.add("Default", function () {
  return _react["default"].createElement("div", {
    className: "push-double--top"
  }, _react["default"].createElement(_Col["default"], {
    small: 8,
    large: 5
  }, _react["default"].createElement(_index["default"], {
    title: "Form title",
    description: "This is the form description"
  }, _react["default"].createElement(_index["default"].Section, {
    isRequired: true,
    title: "Form section"
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-01"
  })), _react["default"].createElement(_index["default"].Row, {
    isFullWidth: true
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_DatePicker["default"], {
    inputId: "date-picker-id-1",
    initialDate: null,
    isFocused: false,
    isAbsolutelyPositioned: true
  })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_DatePicker["default"], {
    inputId: "date-picker-id-2",
    initialDate: null,
    isFocused: false,
    isAbsolutelyPositioned: true
  }))), _react["default"].createElement(_index["default"].Row, {
    isFullWidth: true
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-02"
  })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-03"
  })))), _react["default"].createElement(_index["default"].Section, {
    isOptional: true,
    helpIcon: true,
    popoverText: "This is some helpful text",
    title: "Form section",
    description: "This is the section description"
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-04"
  })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Input label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-05"
  }))), _react["default"].createElement(_index["default"].Section, {
    title: "Form section",
    description: "This is the section description"
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    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["default"].createElement("div", {
    className: "push-double--top"
  }, _react["default"].createElement(_Col["default"], {
    small: 8,
    large: 5
  }, _react["default"].createElement(_index["default"], null, _react["default"].createElement(_index["default"].Section, {
    title: "Experiment Name"
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Add a name for your experiment",
    type: "text",
    id: "input-01"
  }))), _react["default"].createElement(_index["default"].Section, {
    title: "Experiment Key"
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Use this to uniquely identify the experiment",
    type: "text",
    id: "input-02"
  }))), _react["default"].createElement(_index["default"].Section, {
    isOptional: true,
    title: "Description"
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "What is your experiment? State your hypothesis and notes here.",
    type: "text",
    id: "input-03"
  }))))));
});