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

Optimizely's Component Library.

"use strict";

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

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

var _addonKnobs = require("@storybook/addon-knobs");

var _addonActions = require("@storybook/addon-actions");

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

var _index2 = _interopRequireDefault(require("../Attention/index.tsx"));

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

var stories = (0, _react2.storiesOf)("Forms|Select", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
  return _react["default"].createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Default", function () {
  return _react["default"].createElement(_index["default"], {
    label: "My favorite zoo animal",
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    isOptional: (0, _addonKnobs["boolean"])("isOptional", false),
    name: "zoo",
    id: "zoo",
    onChange: (0, _addonActions.action)("On Change Called"),
    testSection: "favorite-zoo-animal-select"
  }, _react["default"].createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), _react["default"].createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"));
}).add("Required (adds empty first value)", function () {
  return _react["default"].createElement(_index["default"], {
    label: "My favorite zoo animal",
    isDisabled: false,
    isRequired: (0, _addonKnobs["boolean"])("isOptional", true),
    name: "zoo",
    id: "zoo",
    onChange: (0, _addonActions.action)("On Change Called")
  }, _react["default"].createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), _react["default"].createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"));
}).add("With an error and note", function () {
  return _react["default"].createElement(_index["default"], {
    displayError: true,
    label: "My favorite zoo animal",
    isDisabled: false,
    isRequired: true,
    name: "zoo",
    note: "This field is required",
    id: "zoo",
    onChange: (0, _addonActions.action)("On Change Called")
  }, _react["default"].createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), _react["default"].createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"));
}).add("Full width variation", function () {
  return _react["default"].createElement(_index["default"], {
    label: "My favorite zoo animal",
    isDisabled: false,
    name: "zoo",
    id: "zoo",
    isFullWidth: (0, _addonKnobs["boolean"])("isFullWidth", true),
    onChange: (0, _addonActions.action)("On Change Called")
  }, _react["default"].createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), _react["default"].createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"));
}).add("Without a label", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement(_index2["default"], {
    type: "bad-news"
  }, _react["default"].createElement("p", null, "Please avoid using Select without a label. For accessibility and general usability reasons, a Select should always have a corresponding label.")), _react["default"].createElement("div", {
    className: "push--top"
  }, _react["default"].createElement(_index["default"], {
    isDisabled: false,
    name: "zoo",
    id: "zoo",
    onChange: (0, _addonActions.action)("On Change Called")
  }, _react["default"].createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), _react["default"].createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"))));
});