@dxc-technology/halstack-react 0.0.0-a45812e → 0.0.0-a4aa1a8

package/dist/select/Select.js

@@ -1,425 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
-
-require("../common/OpenSans.css");
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  display: inline-block;\n  .MuiFormControl-root {\n    width: 100%;\n  }\n  .MuiFormLabel-root {\n    font-size: 16px;\n    color: ", ";\n    margin-top: -3px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n      &::before {\n        content:'", "';\n        color: ", ";\n        font-size: 18px; \n      }\n      &.Mui-disabled{\n        opacity:0.5;\n        color: ", ";\n      }\n      &.Mui-focused{\n        font-size: 16px;\n        color: ", ";\n      }\n  }\n  .MuiSelect-select {\n    width:100%;\n    height: 20px;\n    display: flex;\n    padding-right: unset;\n    color: ", ";\n    align-items: center;\n    :focus {\n      background-color: transparent;\n    }\n    & > *:last-child::after {\n      content: unset;\n    }\n    & > *:last-child::before {\n      content: unset;\n    }\n    &.Mui-disabled {\n      color: ", ";\n        opacity:0.5;\n        cursor: not-allowed;\n    }\n  }\n  .MuiInputBase-root {\n    width: 100%;\n    &.Mui-disabled {\n        opacity:0.5;\n        cursor: not-allowed;\n    }\n  }\n  .MuiInput-underline{\n    &.Mui-disabled:before{\n      border-bottom-style: solid;\n      opacity: 0.5;\n    }\n  }\n  .MuiInput-underline:hover:not(.Mui-disabled):before {\n    border-bottom: 1px solid;\n    border-bottom-color: ", ";\n  }\n  .MuiInput-underline:after {\n    border-bottom: 1px solid;\n    border-bottom-color: ", ";\n  }\n  .MuiInput-underline:before {\n    border-bottom: 1px solid;\n    border-bottom-color: ", ";\n  }\n  .MuiSelect-icon {\n    color: ", ";\n  }\n  & label{\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: calc(100% - 24px);\n  }\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  width: 20px;\n  height: 20px;\n  margin-left: ", ";\n  margin-right: ", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Open Sans\", sans-serif;\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Open Sans\", sans-serif;\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: ", ";\n\n  &::before {\n    margin: 0 4px;\n    ", ";\n  }\n  &::after {\n    margin: 0 4px;\n    ", ";\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: calc(100% - 24px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: function root(props) {
-      return {
-        minWidth: props.width
-      };
-    },
-    dropdownStyle: function dropdownStyle(props) {
-      return {
-        boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.3)",
-        minWidth: props.width,
-        width: props.width
-      };
-    },
-    itemList: function itemList(props) {
-      return {
-        color: props.darkGrey,
-        "&.MuiList-padding": {
-          paddingBottom: "0px",
-          paddingTop: "0px"
-        },
-        "& li": {
-          fontSize: "16px",
-          "&:hover": {
-            backgroundColor: props.darkWhite,
-            color: props.darkGrey
-          },
-          "&:active": {
-            backgroundColor: props.lightGrey,
-            color: props.black
-          },
-          "&.Mui-selected": {
-            backgroundColor: props.lightGrey,
-            color: props.black
-          }
-        }
-      };
-    }
-  };
-});
-
-var DxcSelect = function DxcSelect(_ref) {
-  var value = _ref.value,
-      name = _ref.name,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? "light" : _ref$theme,
-      _ref$disableRipple = _ref.disableRipple,
-      disableRipple = _ref$disableRipple === void 0 ? false : _ref$disableRipple,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
-      _ref$multiple = _ref.multiple,
-      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-      margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "medium" : _ref$size;
-
-  var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
-
-  var _useState = (0, _react.useState)(multiple && [] || ""),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedValue = _useState2[0],
-      setSelectedValue = _useState2[1];
-
-  var selectValues = {
-    width: "auto"
-  };
-  var classes = useStyles(selectValues, colorsTheme);
-
-  var handleSelectChange = function handleSelectChange(selectedOption) {
-    if (multiple) {
-      setSelectedValue(selectedOption.target.value);
-
-      if (typeof onChange === "function") {
-        onChange(selectedOption.target.value);
-      }
-    } else {
-      setSelectedValue(selectedOption.target.value);
-
-      if (typeof onChange === "function") {
-        onChange(selectedOption.target.value);
-      }
-    }
-  };
-
-  var getLabelForSingleSelect = function getLabelForSingleSelect(selected) {
-    var selectedItem = options.filter(function (option) {
-      return option.value === selected;
-    })[0];
-    return _react["default"].createElement(SelectedIconContainer, {
-      iconPosition: iconPosition,
-      multiple: multiple,
-      label: selectedItem && selectedItem.label
-    }, selectedItem && selectedItem.iconSrc && _react["default"].createElement(ListIcon, {
-      src: selectedItem && selectedItem.iconSrc
-    }), selectedItem && selectedItem.label && _react["default"].createElement(SelectedLabelContainer, {
-      iconSrc: selectedItem && selectedItem.iconSrc,
-      iconPosition: iconPosition,
-      brightness: theme,
-      disabled: disabled
-    }, selectedItem && selectedItem.label));
-  };
-
-  var getSelectedValuesWithLabel = function getSelectedValuesWithLabel(optionsList, selected) {
-    return _react["default"].createElement(MultipleLabelSelected, null, optionsList.filter(function (x) {
-      return selected.includes(x.value);
-    }).map(function (optionToRender) {
-      return optionToRender.label;
-    }).join(", "));
-  };
-
-  var getSelectedValuesWithIcons = function getSelectedValuesWithIcons(optionsList, selected) {
-    return options.filter(function (x) {
-      return selected.includes(x.value);
-    }).map(function (optionToRender) {
-      return getLabelForSingleSelect(optionToRender.value);
-    });
-  };
-
-  var labelForMultipleSelect = function labelForMultipleSelect(selected) {
-    return options.findIndex(function (option) {
-      return !option.label;
-    }) !== -1 ? getSelectedValuesWithIcons(options, selected) : getSelectedValuesWithLabel(options, selected);
-  };
-
-  var getRenderValue = function getRenderValue(selected) {
-    return multiple && labelForMultipleSelect(selected) || getLabelForSingleSelect(selected);
-  };
-
-  var isChecked = function isChecked(checkedValue, value, option) {
-    if (value !== undefined) {
-      var result = false;
-      value.map(function (val) {
-        if (val === option.value) {
-          result = true;
-        }
-      });
-      return result;
-    } else if (checkedValue) {
-      return checkedValue.findIndex(function (element) {
-        return element === option.value;
-      }) !== -1 || false;
-    }
-  };
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme
-  }, _react["default"].createElement(SelectContainer, {
-    margin: margin,
-    brightness: theme,
-    required: required,
-    size: size
-  }, _react["default"].createElement(_FormControl["default"], null, _react["default"].createElement(_InputLabel["default"], {
-    disabled: disabled
-  }, label), _react["default"].createElement(_Select["default"], {
-    name: name,
-    brightness: theme,
-    multiple: multiple,
-    renderValue: getRenderValue,
-    onChange: handleSelectChange,
-    value: value !== undefined ? value : selectedValue,
-    disabled: disabled,
-    MenuProps: {
-      classes: {
-        paper: classes.dropdownStyle,
-        list: classes.itemList
-      },
-      getContentAnchorEl: null,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      }
-    }
-  }, options.map(function (option) {
-    return _react["default"].createElement(_MenuItem["default"], {
-      id: option.value,
-      value: option.value,
-      disableRipple: disableRipple
-    }, multiple && _react["default"].createElement(_Checkbox["default"], {
-      size: "fitContent",
-      disableRipple: true,
-      checked: isChecked(selectedValue, value, option)
-    }), _react["default"].createElement(OptionContainer, {
-      iconPosition: iconPosition
-    }, option.iconSrc && _react["default"].createElement(ListIcon, {
-      src: option.iconSrc,
-      label: option.label,
-      iconPosition: iconPosition
-    }), " ", _react["default"].createElement(LabelCont, null, option.label)));
-  })))));
-};
-
-var sizes = {
-  small: "60px",
-  medium: "240px",
-  large: "480px",
-  fillParent: "100%"
-};
-
-var calculateWidth = function calculateWidth(margin, size) {
-  if (size === "fillParent") {
-    return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-  }
-
-  return sizes[size];
-};
-
-var MultipleLabelSelected = _styledComponents["default"].div(_templateObject());
-
-var LabelCont = _styledComponents["default"].span(_templateObject2());
-
-var SelectedIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return props.iconPosition === "before" && "row" || "row-reverse";
-}, function (props) {
-  return props.iconPosition === "before" && "flex-start" || "flex-end";
-}, function (props) {
-  return props.multiple && props.label && "15px" || "0px";
-}, function (props) {
-  return !props.multiple && "calc(100% - 24px)" || "auto";
-}, function (props) {
-  return props.iconPosition === "after" && (props.label !== "" || props.label === undefined) && "content:','";
-}, function (props) {
-  return props.iconPosition === "before" && (props.label !== "" || props.label === undefined) && "content:','";
-});
-
-var SelectedLabelContainer = _styledComponents["default"].span(_templateObject4(), function (props) {
-  return (props.iconPosition === "after" || !props.iconSrc) && "0px" || "10px";
-}, function (props) {
-  return (props.iconPosition === "before" || !props.iconSrc) && "0px" || "10px";
-});
-
-var OptionContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
-  return props.iconPosition === "before" && "row" || "row-reverse";
-});
-
-var ListIcon = _styledComponents["default"].img(_templateObject6(), function (props) {
-  return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
-});
-
-var SelectContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
-  return calculateWidth(props.margin, props.size);
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkGrey : props.theme.lightGrey;
-}, function (props) {
-  return props.required && "*" || "";
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkRed : props.theme.lightRed;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkGrey : props.theme.lightGrey;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.black : props.theme.lightGrey;
-}, function (props) {
-  return props.brightness === "dark" ? props.theme.white : props.theme.black;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkGrey : props.theme.lightGrey;
-}, function (props) {
-  return props.brightness === "dark" ? props.theme.white : props.theme.black;
-}, function (props) {
-  return props.brightness === "dark" ? props.theme.white : props.theme.black;
-}, function (props) {
-  return props.brightness === "dark" ? props.theme.white : props.theme.black;
-}, function (props) {
-  return props.brightness === "dark" ? props.theme.white : props.theme.black;
-});
-
-DxcSelect.propTypes = {
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]))]),
-  disabled: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
-  disableRipple: _propTypes["default"].bool,
-  theme: _propTypes["default"].oneOf(["dark", "light"]),
-  iconPosition: _propTypes["default"].oneOf(["after", "before"]),
-  onChange: _propTypes["default"].func,
-  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    value: _propTypes["default"].any.isRequired,
-    label: _propTypes["default"].any.isRequired,
-    iconSrc: _propTypes["default"].string
-  })),
-  multiple: _propTypes["default"].bool,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
-};
-var _default = DxcSelect;
-exports["default"] = _default;

package/dist/select/Select.stories.js

@@ -1,235 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
-
-var _ebay = _interopRequireDefault(require("../../.storybook/public/ebay.svg"));
-
-var _apple = _interopRequireDefault(require("../../.storybook/public/apple.svg"));
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Select = _interopRequireDefault(require("./Select"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-var selectOptions = [{
-  value: 1,
-  label: "Amazon",
-  iconSrc: _amazon["default"]
-}, {
-  value: 2,
-  label: "Ebay",
-  iconSrc: _ebay["default"]
-}, {
-  value: 3,
-  label: "Apple",
-  iconSrc: _apple["default"]
-}];
-var selectOptionsWithoutIcon = [{
-  value: 1,
-  label: "Amazon"
-}, {
-  value: 2,
-  label: "Ebay"
-}, {
-  value: 3,
-  label: "Apple"
-}];
-var selectOptionsWithoutLabel = [{
-  value: 1,
-  label: "",
-  iconSrc: _amazon["default"]
-}, {
-  value: 2,
-  label: "",
-  iconSrc: _ebay["default"]
-}, {
-  value: 3,
-  label: "",
-  iconSrc: _apple["default"]
-}];
-(0, _react2.storiesOf)("Form Components|Select", module).add("Component", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
-    disabled: false,
-    theme: "light",
-    name: "selectName",
-    label: "Select Label",
-    options: selectOptionsWithoutIcon,
-    required: false,
-    onChange: onChange,
-    iconPosition: "before"
-  })), _react["default"].createElement("h4", null, "Multiple"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
-    disabled: false,
-    theme: "light",
-    multiple: true,
-    name: "selectNameMultiple",
-    label: "Select Multiple",
-    options: selectOptionsWithoutIcon,
-    required: false,
-    onChange: onChange,
-    iconPosition: "after"
-  })), _react["default"].createElement("h4", null, "Only Icons"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
-    disabled: false,
-    theme: "light",
-    multiple: true,
-    name: "selectNameOnlyIcons",
-    label: "Only icons",
-    options: selectOptionsWithoutLabel,
-    required: false,
-    onChange: onChange,
-    iconPosition: "before"
-  })), _react["default"].createElement("h2", null, "Dark"), _react["default"].createElement("div", {
-    style: {
-      background: "black"
-    }
-  }, _react["default"].createElement(_Select["default"], {
-    disabled: false,
-    theme: "dark",
-    name: "selectNameDark",
-    label: "Select Label Dark",
-    options: selectOptions,
-    required: false,
-    onChange: onChange,
-    iconPosition: "before"
-  }), _react["default"].createElement("h4", null, "Multiple"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
-    disabled: false,
-    theme: "dark",
-    multiple: true,
-    name: "selectNameMultipleDark",
-    label: "Select Multiple",
-    options: selectOptions,
-    required: false,
-    onChange: onChange,
-    iconPosition: "after"
-  })), _react["default"].createElement("h4", null, "Only Icons"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
-    disabled: false,
-    theme: "dark",
-    multiple: true,
-    name: "selectNameOnlyIcons",
-    label: "Only icons",
-    options: selectOptionsWithoutLabel,
-    required: false,
-    onChange: onChange,
-    iconPosition: "before"
-  }))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-(0, _react2.storiesOf)("Form Components|Select", module).add("Controlled Component", function () {
-  var ControlledStory =
-  /*#__PURE__*/
-  function (_React$Component) {
-    (0, _inherits2["default"])(ControlledStory, _React$Component);
-
-    function ControlledStory(props) {
-      var _this;
-
-      (0, _classCallCheck2["default"])(this, ControlledStory);
-      _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onValueChange", function (value) {
-        return _this.setState({
-          value: value
-        });
-      });
-      _this.state = {
-        value: []
-      };
-      return _this;
-    }
-
-    (0, _createClass2["default"])(ControlledStory, [{
-      key: "render",
-      value: function render() {
-        var props = _objectSpread({}, this.props, {
-          onChange: this.onValueChange,
-          value: this.state.value
-        });
-
-        return _react["default"].createElement(_Select["default"], props);
-      }
-    }]);
-    return ControlledStory;
-  }(_react["default"].Component);
-
-  var props = {
-    disabled: false,
-    theme: "light",
-    name: "selectName",
-    multiple: true,
-    options: selectOptions,
-    required: false,
-    iconPosition: "before",
-    label: "Select label"
-  };
-  return _react["default"].createElement(ControlledStory, props);
-});
-
-var knobProps = function knobProps() {
-  return {
-    label: (0, _addonKnobs.text)("label", "Test Select"),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    disabled: (0, _addonKnobs["boolean"])("disabled", false),
-    required: (0, _addonKnobs["boolean"])("required", false),
-    iconPosition: (0, _addonKnobs.select)("icon poistion", {
-      before: "before",
-      after: "after"
-    }, "before") // ,
-    // multiple: boolean("multiple", false)
-
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Select", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Select["default"], (0, _extends2["default"])({}, props, {
-    options: selectOptions,
-    onChange: onChange
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});