intelicoreact 0.1.19 → 0.1.22

package/dist/Molecular/SwitcherHide/SwitcherHide.stories.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _SwitcherHide = _interopRequireDefault(require("./SwitcherHide"));
 
-require("./partial/inner-class.scss");
+require("./partial/AnyOuterClass.scss");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -50,5 +50,5 @@ SwitcherHideTemplate.args = {
   // className '', 
   disabled: false,
   isLabelBold: true,
-  className: 'inner-class__switcher-hide'
+  className: 'any-outer-class__switcher-hide'
 };

package/dist/Molecular/SwitcherHide/partial/{inner-class.scss → AnyOuterClass.scss}

@@ -1,4 +1,4 @@
-.inner-class__switcher-hide {
+.any-outer-class__switcher-hide {
   font-style: normal;
   font-size: 12px;
   line-height: 20px;

package/dist/Molecular/SwitcherRadio/SwitcherRadio.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -19,41 +17,51 @@ var _SwitcherHide = _interopRequireDefault(require("../SwitcherHide/SwitcherHide
 
 var _RadioInput = _interopRequireDefault(require("../../Atomic/FormElements/RadioInput/RadioInput"));
 
-// import SwitcherHide from '../SwitcherHide/SwitcherHide';
-// import RadioInput from '../../Atomic/FormElements/RadioInput/RadioInput';
+require("./SwitcherRadio.scss");
+
 var RC = 'switcher-radio';
 
 var SwitcherRadio = function SwitcherRadio(_ref) {
+  var _options$;
+
   var options = _ref.options,
       label = _ref.label,
       hint = _ref.hint,
+      hintSide = _ref.hintSide,
       isLabelBold = _ref.isLabelBold,
       direction = _ref.direction,
       className = _ref.className,
       value = _ref.value,
       _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       _ref$isActive = _ref.isActive,
       isActive = _ref$isActive === void 0 ? true : _ref$isActive,
       _ref$setIsActive = _ref.setIsActive,
       setIsActive = _ref$setIsActive === void 0 ? function () {} : _ref$setIsActive;
-  // children, label, hint, className, isActive = true, onChange = () => {}
+
+  var safelyValue = value || (options === null || options === void 0 ? void 0 : (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value) || '';
   return /*#__PURE__*/_react.default.createElement(_SwitcherHide.default, {
+    isActive: isActive,
     label: label,
     hint: hint,
-    isLabelBold: isLabelBold,
-    isActive: isActive,
+    hintSide: hintSide,
     onChange: setIsActive,
-    className: className
+    isLabelBold: isLabelBold,
+    className: (0, _classnames.default)(RC, className)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('switcher-radio', "".concat(className, "__switcher-radio"), (0, _defineProperty2.default)({}, "switcher-radio__".concat(direction), direction))
-  }, options.map(function (option) {
-    return /*#__PURE__*/_react.default.createElement(_RadioInput.default, (0, _extends2.default)({}, option, {
+    className: (0, _classnames.default)("".concat(RC, "__wrap"), (0, _defineProperty2.default)({}, "switcher-radio_".concat(direction), direction))
+  }, options === null || options === void 0 ? void 0 : options.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
       key: option.id,
       className: "switcher-radio__radio",
-      checked: value,
-      onChange: onChange
-    }));
+      value: option.value,
+      name: option.name,
+      checked: safelyValue,
+      label: option.label,
+      onChange: function onChange(val) {
+        return _onChange(val);
+      }
+    });
   })));
 };
 

package/dist/Molecular/SwitcherRadio/SwitcherRadio.scss

@@ -1,27 +1,31 @@
 // @import '../../scss/main.scss';
 
 .switcher-radio {
+  &__wrap {
     display: flex;
-    margin-top: 5px;
+  }
 
-    &__radio:not(:last-child) {
-        margin-right: 15px;
+  &__radio {
+    margin-bottom: 10px;
+    &:not(:last-child) {
+      margin-right: 29px;
     }
+  }
 
-    &__row {
-        align-items: center;
-        margin-top: 8px;
-    }
+  &_row {
+    align-items: center;
+    flex-wrap: wrap;
+  }
 
-    &__col {
-        flex-direction: column;
+  &_col {
+    flex-direction: column;
 
-        .radio-input {
-            margin-bottom: 8px;
-        }
+    .radio-input {
+      margin-bottom: 8px;
+    }
 
-        .switcher-radio__radio {
-            margin-right: 0;
-        }
+    .switcher-radio__radio {
+      margin-right: 0;
     }
+  }
 }

package/dist/Molecular/SwitcherRadio/SwitcherRadio.stories.js

@@ -11,18 +11,24 @@ exports.SwitcherRadioTemplate = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _SwitcherRadio = _interopRequireDefault(require("./SwitcherRadio"));
 
-require("./SwitcherRadio.scss");
+require("./partial/AnyOuterClass.scss");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 global.lng = 'en';
 var _default = {
   title: 'SwitcherRadio',
@@ -39,30 +45,37 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)({
+    isActive: true,
+    value: ''
+  }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isActive = _useState2[0],
-      setIsActive = _useState2[1];
+      values = _useState2[0],
+      setValues = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
+  var handleChange = function handleChange(val, prop) {
+    return setValues(_objectSpread(_objectSpread({}, values), {}, (0, _defineProperty2.default)({}, prop, val)));
+  };
 
   return /*#__PURE__*/_react.default.createElement(_SwitcherRadio.default, (0, _extends2.default)({}, args, {
-    isActive: isActive,
-    setIsActive: setIsActive,
-    value: value,
-    onChange: setValue
+    isActive: values.isActive,
+    setIsActive: function setIsActive(val) {
+      return handleChange(val, 'isActive');
+    },
+    value: values.value,
+    onChange: function onChange(val) {
+      return handleChange(val, 'value');
+    }
   }));
 };
 
 var SwitcherRadioTemplate = Template.bind({});
 exports.SwitcherRadioTemplate = SwitcherRadioTemplate;
 SwitcherRadioTemplate.args = {
+  className: 'any-outer-class__switcher-radio',
   label: 'label test',
   isLabelBold: true,
-  direction: 'row',
+  direction: 'col',
   hint: 'hint',
   options: [{
     id: 1,

package/dist/Molecular/SwitcherRadio/partial/AnyOuterClass.scss

@@ -0,0 +1,6 @@
+.any-outer-class__switcher-radio {
+  font-style: normal;
+  font-size: 12px;
+  line-height: 20px;
+  color: #1E1E2D;
+}

package/dist/Molecular/SwitcherRangeList/SwitcherRangeList.js

@@ -0,0 +1,16 @@
+// import SwitcherHide from '../SwitcherHide/SwitcherHide';
+// import RangeList from '../../Atomic/FormElements/RangeResult/RangeList';
+// import './SwitcherRangeList.scss';
+// const RC = 'switcher-range-list';
+// const SwitcherRangeList = ({ item, onChange }) => {
+//   const { label, hint, value, fields, isActive, listType, isInteger, id, isLabelBold } = item;
+//   return (
+//     <SwitcherHide isActive={isActive} onChange={onChange} label={label} hint={hint} isLabelBold={isLabelBold} className={RC}>
+//       <div className="switcher-range-list__row">
+//         <RangeList {...item} onChange={(e) => onChange(e, 'value')} className={`${RC}__range-list`}/>
+//       </div>
+//     </SwitcherHide>
+//   );
+// };
+// export default SwitcherRangeList;
+"use strict";

package/dist/Molecular/SwitcherRangeList/SwitcherRangeList.scss

@@ -0,0 +1,12 @@
+// .switcher-range-list {
+//   &__row {
+//     display: flex;
+//     align-items: center;
+//   }
+
+//   // &__range-list {
+//   //   display: inline-flex;
+//   //   min-height: 26px;
+//   //   align-items: center;
+//   // }
+// }

package/dist/Molecular/SwitcherRangeList/SwitcherRangeList.stories.js

@@ -0,0 +1,19 @@
+// import React, { useState } from 'react';
+// import SwitcherRangeList from './SwitcherRangeList';
+// import { useEffect } from 'react';
+// import './partial/AnyOuterClass.scss'
+// global.lng = 'en';
+// export default {
+//   title: 'SwitcherRangeList',
+//   component: SwitcherRangeList
+// };
+// const Template = args => {
+//   const [value, setValue] = useState(true);
+//   return (
+//     <SwitcherRangeList item={field} onChange={handle.change} />
+//   );
+// };
+// export const SwitcherRangeListTemplate = Template.bind({});
+// SwitcherRangeListTemplate.args = {
+// };
+"use strict";

package/dist/Molecular/SwitcherRangeList/partial/AnyOuterClass.scss

@@ -0,0 +1,6 @@
+.any-outer-class__switcher-radio {
+  font-style: normal;
+  font-size: 12px;
+  line-height: 20px;
+  color: #1E1E2D;
+}

package/dist/Molecular/{FilterSelect/FilterSelect.js → SwitcherTagsDropdown/SwitcherTagsDropdown.js}

@@ -29,94 +29,132 @@ var _Textarea = _interopRequireDefault(require("../../Atomic/FormElements/Textar
 
 var _Button = _interopRequireDefault(require("../../Atomic/UI/Button/Button"));
 
-require("./FilterSelect.scss");
+require("./SwitcherTagsDropdown.scss");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var RC = 'filter-select';
-
-var FilterSelect = function FilterSelect(_ref) {
-  var label = _ref.label,
-      options = _ref.options,
-      chosenOptions = _ref.chosenOptions,
-      onChange = _ref.onChange;
-
-  var _useState = (0, _react.useState)(true),
+var RC = 'switcher-tags-dropdown';
+
+var SwitcherTagsDropdown = function SwitcherTagsDropdown(_ref) {
+  var className = _ref.className,
+      label = _ref.label,
+      isLabelBold = _ref.isLabelBold,
+      isValuesInTags = _ref.isValuesInTags,
+      isActive = _ref.isActive,
+      isIncluded = _ref.isIncluded,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      _ref$chosenOptions = _ref.chosenOptions,
+      chosenOptions = _ref$chosenOptions === void 0 ? [] : _ref$chosenOptions,
+      _ref$setIsActive = _ref.setIsActive,
+      setIsActive = _ref$setIsActive === void 0 ? function () {} : _ref$setIsActive,
+      _ref$setIsIncluded = _ref.setIsIncluded,
+      setIsIncluded = _ref$setIsIncluded === void 0 ? function () {} : _ref$setIsIncluded,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      is = _useState2[0],
-      setIs = _useState2[1];
+      listView = _useState2[0],
+      setListView = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      listView = _useState4[0],
-      setListView = _useState4[1];
+      textValue = _useState4[0],
+      setTextValue = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      textValue = _useState6[0],
-      setTextValue = _useState6[1];
+  var singleLevelOptions = (0, _react.useMemo)(function () {
+    return options.reduce(function (acc, item) {
+      return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)(item.groupName ? item.list : [item]));
+    }, []);
+  }, [options]);
 
   var apply = function apply() {
-    var textToArray = textValue.split(', ');
-    var newOptions = options.filter(function (item) {
-      return textToArray.find(function (el) {
-        return (el === null || el === void 0 ? void 0 : el.toLowerCase()) === (item === null || item === void 0 ? void 0 : item.title.toLowerCase()) && !item.disabled;
-      });
+    var _textValue$split;
+
+    var getFilterFunction = function getFilterFunction(valuesArr) {
+      return function (item) {
+        return valuesArr.find(function (el) {
+          var itemValue = item === null || item === void 0 ? void 0 : item.value.toString().toLowerCase();
+          var itemLabel = (item.title || item.label || item.name || item.value).toString().toLowerCase();
+          var chosenOption = el.toString().toLowerCase();
+          return (chosenOption === itemValue || chosenOption === itemLabel) && !item.disabled;
+        });
+      };
+    };
+
+    var textToArray = (textValue === null || textValue === void 0 ? void 0 : (_textValue$split = textValue.split) === null || _textValue$split === void 0 ? void 0 : _textValue$split.call(textValue, ',')).map(function (item) {
+      return item.toString().trim();
+    }).filter(function (item) {
+      return !!item;
+    });
+    var newOptions = options.filter(getFilterFunction(textToArray)).map(function (option) {
+      return option.value;
     });
-    onChange(newOptions);
+    onChange(newOptions, 'chosenOptions');
     setListView(false);
   };
 
   var enterHandler = function enterHandler(e, value) {
     if (e.keyCode === 13) {
-      var option = options.find(function (item) {
+      var option = options === null || options === void 0 ? void 0 : options.find(function (item) {
         var _item$title;
 
         return (item === null || item === void 0 ? void 0 : (_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.toLowerCase()) === (value === null || value === void 0 ? void 0 : value.toLowerCase()) && !item.disabled;
       });
-      var isOptionChecked = chosenOptions.some(function (item) {
+      var isOptionChecked = chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (item) {
         var _item$title2, _option$title;
 
         return (item === null || item === void 0 ? void 0 : (_item$title2 = item.title) === null || _item$title2 === void 0 ? void 0 : _item$title2.toLowerCase()) === (option === null || option === void 0 ? void 0 : (_option$title = option.title) === null || _option$title === void 0 ? void 0 : _option$title.toLowerCase());
       });
-      if (option && !isOptionChecked) onChange([].concat((0, _toConsumableArray2.default)(chosenOptions), [option]));
+      if (option && !isOptionChecked) onChange([].concat((0, _toConsumableArray2.default)(chosenOptions), [option]), 'chosenOptions');
     }
   };
 
   (0, _react.useEffect)(function () {
-    setTextValue(chosenOptions.map(function (item) {
-      return item.title;
-    }).join(', '));
+    var getLabel = function getLabel(el) {
+      return el.title || el.label || el.name || el.value;
+    };
+
+    var valuesArr = chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (item) {
+      return isValuesInTags ? item : getLabel(singleLevelOptions.find(function (option) {
+        return option.value === item;
+      }));
+    });
+    setTextValue(valuesArr.join(', '));
   }, [chosenOptions, listView]);
   return /*#__PURE__*/_react.default.createElement(_SwitcherHide.default, {
+    isActive: isActive,
+    onChange: setIsActive,
     label: label,
-    className: RC
+    className: (0, _classnames.default)(RC, className),
+    isLabelBold: isLabelBold
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(RC, "__wrap")
+    className: "".concat(RC, "__wrap switcher-hide__content")
   }, /*#__PURE__*/_react.default.createElement(_TextSwitcher.default, {
     activeText: "is",
     inactiveText: "is not",
-    isActive: is,
-    onChange: function onChange(value) {
-      return setIs(value);
-    },
+    isActive: isIncluded !== null && isIncluded !== void 0 ? isIncluded : true,
+    onChange: setIsIncluded,
     className: "".concat(RC, "__text-switcher")
-  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter-select__wrap--buttons"
+  }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {
       return setListView(!listView);
     },
     className: "".concat(RC, "__btn")
   }, listView ? 'Close' : 'List view'), listView && /*#__PURE__*/_react.default.createElement(_Button.default, {
-    text: "Apply",
+    label: "Apply",
     className: "".concat(RC, "__apply"),
     onClick: function onClick() {
       return apply();
     }
   }), /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {
-      return onChange([]);
+      return onChange([], 'chosenOptions');
     },
     className: "".concat(RC, "__btn")
   }, "Clear"))), listView ? /*#__PURE__*/_react.default.createElement(_Textarea.default, {
@@ -128,13 +166,14 @@ var FilterSelect = function FilterSelect(_ref) {
     options: options,
     chosenOptions: chosenOptions,
     onChange: onChange,
-    className: "".concat(RC, "__dropdown"),
+    className: "".concat(RC, "__tags-dropdown"),
     onKeyPress: function onKeyPress(e, value) {
       return enterHandler(e, value);
     },
-    tagClassname: (0, _classnames.default)("".concat(RC, "__tag"), (0, _defineProperty2.default)({}, "".concat(RC, "__tag_inactive"), !is))
+    tagClassname: (0, _classnames.default)("".concat(RC, "__tag"), (0, _defineProperty2.default)({}, "".concat(RC, "__tag_inactive"), !isIncluded)),
+    isValuesInTags: isValuesInTags
   }));
 };
 
-var _default = FilterSelect;
+var _default = SwitcherTagsDropdown;
 exports.default = _default;

package/dist/Molecular/SwitcherTagsDropdown/SwitcherTagsDropdown.scss

@@ -0,0 +1,48 @@
+@import '../../scss/vars';
+
+.switcher-tags-dropdown {
+    //width: 550px;
+  
+    &__wrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+  
+    &__btn {
+      color: $color--primary;
+      font-size: 12px;
+      cursor: pointer;
+  
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  
+    &__tags-dropdown {
+      width: 100%;
+  
+      .tags-dropdown__trigger {
+        position: static;
+      }
+  
+      .switcher-tags-dropdown__tag {
+        background-color: $color--green-light;
+  
+        &_inactive {
+          background-color: $color--error-bg;
+        }
+      }
+  
+      .tags-dropdown__arrow {
+        top: 6px;
+        right: 5px;
+      }
+    }
+  
+    &__apply {
+      height: 20px;
+      margin-right: 8px;
+    }
+  }

package/dist/Molecular/SwitcherTagsDropdown/SwitcherTagsDropdown.stories.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SwitcherTagsDropdownTemplate = exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _SwitcherTagsDropdown = _interopRequireDefault(require("./SwitcherTagsDropdown"));
+
+require("./partial/AnyOuterClass.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+global.lng = 'en';
+var _default = {
+  title: 'SwitcherTagsDropdown',
+  component: _SwitcherTagsDropdown.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  var options = [{
+    id: 1,
+    title: 'Tags Dropdown1',
+    value: 'drop1',
+    disabled: false
+  }, {
+    id: 2,
+    title: 'Tags Dropdown2',
+    value: 'drop2',
+    disabled: false
+  }, {
+    id: 3,
+    title: 'Tags Dropdown3',
+    value: 'drop3',
+    disabled: true
+  }, {
+    id: 4,
+    title: 'Tags Dropdown4',
+    value: 'drop4',
+    disabled: false
+  }, {
+    id: 5,
+    title: 'Tags Dropdown5',
+    value: 'drop5',
+    disabled: false
+  }, {
+    id: 6,
+    title: 'Tags Dropdown6',
+    value: 'drop6',
+    disabled: false
+  }];
+
+  var _useState = (0, _react.useState)({
+    isActive: true,
+    isIncluded: true,
+    value: []
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      values = _useState2[0],
+      setValues = _useState2[1];
+
+  var handleChange = function handleChange(val, prop) {
+    setValues(_objectSpread(_objectSpread({}, values), {}, (0, _defineProperty2.default)({}, prop, val)));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_SwitcherTagsDropdown.default, (0, _extends2.default)({}, args, {
+    options: options,
+    isActive: values.isActive,
+    setIsActive: function setIsActive(val) {
+      return handleChange(val, 'isActive');
+    },
+    isIncluded: values.isIncluded,
+    setIsIncluded: function setIsIncluded(val) {
+      return handleChange(val, 'isIncluded');
+    },
+    chosenOptions: values.value,
+    onChange: function onChange(val) {
+      return handleChange(val, 'value');
+    }
+  }));
+};
+
+var SwitcherTagsDropdownTemplate = Template.bind({});
+exports.SwitcherTagsDropdownTemplate = SwitcherTagsDropdownTemplate;
+SwitcherTagsDropdownTemplate.args = {
+  label: 'State',
+  isLabelBold: true,
+  isValuesInTags: true,
+  className: 'any-outer-class__switcher-tags-dropdown'
+};

package/dist/Molecular/SwitcherTagsDropdown/partial/AnyOuterClass.scss

@@ -0,0 +1,12 @@
+.any-outer-class__switcher-tags-dropdown {
+  font-style: normal;
+  font-size: 12px;
+  line-height: 20px;
+  color: #1E1E2D;
+
+  .text-switcher {
+    height: 20px;
+    font-size: 10px;
+  }
+}
+