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

Optimizely's Component Library.

"use strict";

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

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("../Form/index"));

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

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    height: 100vh;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var stories = (0, _react2.storiesOf)("Forms|SelectDropdown", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
  return _react["default"].createElement("div", {
    id: "root-preview"
  }, story());
});
var items = [{
  label: "Cat",
  description: "A small feline.",
  value: "cat"
}, {
  label: "Dog",
  value: "dog",
  isSelected: true
}, {
  label: "Dog with a really long name",
  value: "dog-long"
}, {
  label: "Bear",
  description: "Likes honey",
  value: "bear",
  isSelected: true
}, {
  label: "Squirrel",
  description: "Smarter than it looks",
  value: "squirrel"
}];
stories.add("With Labels, Errors, and Notes", function () {
  return _react["default"].createElement(Container, null, _react["default"].createElement(_index2["default"], null, _react["default"].createElement(_index2["default"].Section, null, _react["default"].createElement(_index["default"], {
    items: items,
    value: "dog",
    onChange: (0, _addonActions.action)("SelectDropdown value changed")
  })), _react["default"].createElement(_index2["default"].Section, null, _react["default"].createElement("p", null, "With a label above using ", _react["default"].createElement("code", null, "label "), "prop"), _react["default"].createElement(_index2["default"].Row, null, _react["default"].createElement(_index2["default"].Item, null, _react["default"].createElement(_index["default"], {
    label: "Favorite Animal",
    items: items,
    minDropdownWidth: "400px ",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    value: "dog"
  })), _react["default"].createElement(_index2["default"].Item, null, _react["default"].createElement(_index["default"], {
    label: "Favorite Animal",
    isRequired: true,
    items: items,
    minDropdownWidth: "400px",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    value: "dog"
  })))), _react["default"].createElement(_index2["default"].Section, null, _react["default"].createElement("p", null, "With a label and outline within using ", _react["default"].createElement("code", null, "buttonContent "), "prop"), _react["default"].createElement(_index["default"], {
    buttonContent: {
      label: "Favorite Animal",
      content: "Dog"
    },
    items: items,
    buttonStyle: "outline",
    minDropdownWidth: "400px ",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    value: "dog"
  })), _react["default"].createElement(_index2["default"].Section, null, _react["default"].createElement("p", null, "With a label and with outline & hover effect within using", _react["default"].createElement("code", null, " buttonContent "), "prop"), _react["default"].createElement(_index["default"], {
    buttonContent: {
      label: "Favorite Animal",
      content: "Cat"
    },
    items: items,
    buttonStyle: "plain",
    minDropdownWidth: "400px ",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    value: "cat"
  })), _react["default"].createElement(_index2["default"].Section, null, _react["default"].createElement("p", null, "With an error and note using ", _react["default"].createElement("code", null, "displayError and note "), "props"), _react["default"].createElement(_index2["default"].Row, null, _react["default"].createElement(_index2["default"].Item, null, _react["default"].createElement(_index["default"], {
    items: items,
    minDropdownWidth: "400px ",
    displayError: true,
    note: "A note about this error",
    value: "dog"
  })), _react["default"].createElement(_index2["default"].Item, null, _react["default"].createElement(_index["default"], {
    label: "Favorite Animal",
    items: items,
    minDropdownWidth: "400px ",
    displayError: true,
    note: "A note about this error",
    value: "dog"
  })))), _react["default"].createElement(_index2["default"].Section, null, _react["default"].createElement("p", null, "With isDisabled = true"), _react["default"].createElement(_index["default"], {
    label: "Favorite Animal",
    items: items,
    isDisabled: true,
    minDropdownWidth: "400px ",
    note: "Only applies to XYZ",
    value: "dog"
  }))));
}).add("Initial placeholder", function () {
  return _react["default"].createElement(Container, null, _react["default"].createElement(_index["default"], {
    items: items,
    initialPlaceholder: "Select a value...",
    onChange: (0, _addonActions.action)("SelectDropdown value changed")
  }));
}).add("Width of activator", function () {
  return _react["default"].createElement(Container, null, _react["default"].createElement(_index["default"], {
    items: items,
    value: "dog",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    width: "400px "
  }));
}).add("Width of dropdown", function () {
  return _react["default"].createElement(Container, null, _react["default"].createElement(_index["default"], {
    items: items,
    value: "dog",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    minDropdownWidth: "400px "
  }));
}).add("Full Width Activator with Full Width items", function () {
  return _react["default"].createElement(Container, null, _react["default"].createElement("div", {
    style: {
      width: "400px",
      border: "1px solid",
      height: "100px"
    }
  }, _react["default"].createElement(_index["default"], {
    items: items,
    value: "dog",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    fullWidth: true
  })));
}).add("Full Width Activator with items with a different min width", function () {
  return _react["default"].createElement(Container, null, _react["default"].createElement("div", {
    style: {
      width: "400px",
      border: "1px solid",
      height: "100px"
    }
  }, _react["default"].createElement(_index["default"], {
    items: items,
    value: "dog",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    fullWidth: true,
    minDropdownWidth: 500
  })));
}).add("Specify max width of activator", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("p", {
    className: "push--bottom"
  }, "Specifying the ", _react["default"].createElement("code", null, "maxWidth"), " property allows you to truncate longer dropdowns while keeping shorter ones short."), _react["default"].createElement(Container, null, _react["default"].createElement(_index["default"], {
    items: items,
    value: "dog-long",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    maxWidth: "120px "
  }), _react["default"].createElement("div", {
    className: "push--left"
  }), _react["default"].createElement(_index["default"], {
    items: items,
    value: "dog",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    maxWidth: "120px "
  })));
}).add("Activator Label differs from Value", function () {
  var itemsWithActivatorLabel = [{
    activatorLabel: "Production",
    label: "Production (50%)",
    value: "Production"
  }, {
    activatorLabel: "Staging",
    label: "Staging (100%)",
    value: "Staging"
  }];
  return _react["default"].createElement(Container, null, _react["default"].createElement(_index["default"], {
    items: itemsWithActivatorLabel,
    value: "Production",
    onChange: (0, _addonActions.action)("SelectDropdown value changed")
  }));
}).add("Multi Select", function () {
  return _react["default"].createElement(Container, null, _react["default"].createElement(_index["default"], {
    isMultiSelect: true,
    items: items,
    initialPlaceholder: "Select a value...",
    minDropdownWidth: "400px ",
    onChange: (0, _addonActions.action)("SelectDropdown value changed")
  }));
}).add("Items with linkText or linkURL", function () {
  return _react["default"].createElement(Container, null, _react["default"].createElement(_index["default"], {
    items: [{
      label: "Elephant",
      description: "Very loud",
      value: "elephant",
      linkText: "I am a link, click me!",
      linkURL: "https://www.google.com",
      linkNewWindow: true
    }].concat(items),
    initialPlaceholder: "Select a value...",
    onChange: (0, _addonActions.action)("SelectDropdown value changed")
  }));
}).add("With a change in direction", function () {
  return _react["default"].createElement(Container, null, _react["default"].createElement("div", {
    style: {
      marginTop: "200px"
    }
  }, _react["default"].createElement("p", null, "Placement of dropdown is above"), _react["default"].createElement(_index["default"], {
    items: items,
    minDropdownWidth: "400px ",
    onChange: (0, _addonActions.action)("SelectDropdown value changed"),
    placement: "top-start",
    dropdownDirection: "up",
    value: "dog"
  })));
});

var Container = _styledComponents["default"].div(_templateObject());