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

Optimizely's Component Library.

"use strict";

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

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

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

var _Form = _interopRequireDefault(require("../Form"));

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|Fieldset", module);
stories.addDecorator(function (story) {
  return _react["default"].createElement("div", {
    className: "soft-quad--sides"
  }, story());
});
stories.add("In a form", function () {
  return _react["default"].createElement("div", {
    className: "push-double--top"
  }, _react["default"].createElement(_Col["default"], {
    small: 8,
    large: 5
  }, _react["default"].createElement(_Form["default"], null, _react["default"].createElement(_index["default"], {
    isRequired: true,
    title: "Location",
    description: "The title of the fieldset will be considered the legend of the fieldset. The default of a Fieldset (titleSize='large') is visually comparable to a Form.Section. Fieldset should only be used if there are multiple inputs in the section that are linked (think address or credit card fields). If they are not closely linked, Form.Section is more appropriate."
  }, _react["default"].createElement(_index["default"].Row, {
    isFullWidth: true
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Longitude",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-01"
  })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Latitude",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-02"
  })))), _react["default"].createElement(_Form["default"].Section, {
    title: "Form section",
    description: "All of the options to customize a Form.Section are also available on Fieldset."
  }, _react["default"].createElement(_Form["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"], {
    titleSize: "small",
    title: "Location",
    bottomSpacing: false,
    description: "We're using a small title because this fieldset belongs in this section."
  }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_Input["default"], {
    label: "Latitude",
    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: "Longitude",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    id: "input-05"
  })))))));
}).add("Standalone", function () {
  return _react["default"].createElement("div", {
    className: "push-double--top"
  }, _react["default"].createElement(_Col["default"], {
    small: 8,
    large: 5
  }, _react["default"].createElement(_index["default"], {
    isRequired: true,
    title: "Fieldset section",
    description: "Fieldsets can also be used separately from Forms. However do consider using them in Forms for good practice."
  }, _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",
    initialDate: null,
    isFocused: false,
    isAbsolutelyPositioned: true
  })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_DatePicker["default"], {
    inputId: "date-picker-id",
    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"
  }))))));
});