ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/ButtonBasic/ButtonBasic.scss

@@ -0,0 +1,242 @@
+@import '../../styles/font.scss';
+@import '../../styles/globals.scss';
+
+.btn-basic {
+    width: 100%;
+    min-height: 32px;
+    font-size: 14px;
+    // max-width: 200px;
+    width: 200px;
+    border-radius: 8px;
+    border: none;
+    //margin-top: 32px;
+    color: white;
+    font-family: Rubik;
+    font-weight: 500;
+    min-width: 120px;
+    padding: 4px 8px;
+    cursor: pointer;
+}
+
+.green-btn {
+    background-color: #22C55E;
+
+    &:hover {
+        background: #16A34A;
+        transition: 0.5s;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #BBF7D0;
+        color: #ffffff;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            background-color: #BBF7D0;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.blue-btn {
+    background-color: #1890FF;
+    box-shadow: 2px 4px 10px 0px rgba(24, 144, 255, 0.25);
+
+    &:hover {
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        background-color: #005DB2;
+        transition: 0.5s;
+        box-shadow: none;
+    }
+
+    &:active {
+        background-color: #1890FF;
+        border: 2px solid #005DB2;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #B2DAFF;
+        color: #ffffff;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            background-color: #B2DAFF;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.orange-btn {
+    background-color: #FB923C;
+
+    &:hover {
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        background-color: #F97316;
+        transition: 0.5s;
+        box-shadow: none;
+    }
+
+    &:active {
+        background-color: #FB923C;
+        border: 2px solid #F97316;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #FFEDD5;
+        color: #ffffff;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            background-color: #FFEDD5;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.white-blue-btn {
+    color: #1890FF;
+    background: white;
+    border: 1px solid #1890FF;
+
+    &:hover {
+        background-color: #E0E7F2;
+        border: 1px solid #1890FF;
+        transition: all 0.5s;
+    }
+
+    &:active {
+        transition: all 0.5s;
+        border: 2px solid #1890FF;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #E1E6EA;
+        border: none;
+        color: #A9B3BC;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            border: none;
+            background-color: #E1E6EA;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.red-btn {
+    background-color: #F87171;
+    color: white;
+
+    &:hover {
+        background-color: #EF4444;
+        transition: 0.5s;
+    }
+
+    &:active {
+        background-color: #F87171;
+        border: 2px solid #EF4444;
+        transition: 0.5s;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #FEE2E2;
+        color: #ffffff;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+&:hover {
+    box-shadow: none;
+    background-color: #FEE2E2;
+    box-shadow: none;
+}
+
+&:active {
+    border: none;
+}
+
+}
+}
+
+.violet-btn {
+background-color: #3900B1;
+color: white;
+
+    &:hover {
+        background-color: #24006F;
+        transition: 0.5s;
+    }
+
+    &:active {
+        background-color: #3900B1;
+        border: 2px solid #24006F;
+        transition: 0.5s;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #ABADE4;
+        color: #EAEAF9;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            background-color: #ABADE4;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}

package/dist/stories/ButtonBasic/ButtonBasic.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WhiteGreen = exports.WhiteBlue = exports.Violet = exports.Red = exports.Orange = exports.Green = exports.Disabled = exports.Default = exports.Blue = void 0;
+var _ButtonBasic = require("./ButtonBasic");
+var meta = {
+  title: 'Components/ButtonBasic',
+  component: _ButtonBasic.ButtonBasic,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  args: {
+    text: 'test'
+  }
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {};
+var Blue = exports.Blue = {
+  args: {
+    blue: true
+  }
+};
+var WhiteBlue = exports.WhiteBlue = {
+  args: {
+    whiteBlue: true
+  }
+};
+var Orange = exports.Orange = {
+  args: {
+    orange: true
+  }
+};
+var Red = exports.Red = {
+  args: {
+    red: true
+  }
+};
+var Green = exports.Green = {
+  args: {
+    green: true
+  }
+};
+var WhiteGreen = exports.WhiteGreen = {
+  args: {
+    whiteGreen: true
+  }
+};
+var Violet = exports.Violet = {
+  args: {
+    violet: true
+  }
+};
+var Disabled = exports.Disabled = {
+  args: {
+    disabled: true
+  }
+};

package/dist/stories/Checkbox/Checkbox.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+require("./Checkbox.scss");
+var _excluded = ["id", "value", "onChange", "containerClassName", "inputClassName", "className", "children", "green", "yellow", "red", "grey"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var Checkbox = function Checkbox(_ref) {
+  var id = _ref.id,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    containerClassName = _ref.containerClassName,
+    inputClassName = _ref.inputClassName,
+    className = _ref.className,
+    children = _ref.children,
+    _ref$green = _ref.green,
+    green = _ref$green === void 0 ? false : _ref$green,
+    _ref$yellow = _ref.yellow,
+    yellow = _ref$yellow === void 0 ? false : _ref$yellow,
+    _ref$red = _ref.red,
+    red = _ref$red === void 0 ? false : _ref$red,
+    _ref$grey = _ref.grey,
+    grey = _ref$grey === void 0 ? false : _ref$grey,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    _value = _useState2[0],
+    set_value = _useState2[1];
+  var _onChange = function _onChange(e) {
+    set_value(e.target.checked);
+    if (onChange) {
+      onChange(e.target.checked);
+    }
+  };
+  var colorCheckbox = function colorCheckbox() {
+    if (green) return 'checkbox-container_green';
+    if (red) return 'checkbox-container_red';
+    if (grey) return 'checkbox-container_grey';
+    if (yellow) return 'checkbox-container_yellow';
+  };
+  (0, _react.useEffect)(function () {
+    set_value(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement("label", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    className: "checkbox-container ".concat(colorCheckbox() || '', " ").concat(containerClassName ? containerClassName : "")
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    id: id,
+    className: "checkbox " + (inputClassName ? inputClassName : ""),
+    checked: _value,
+    onChange: _onChange
+  }, props)), /*#__PURE__*/React.createElement("span", {
+    className: "checkbox-element " + (className ? className : "")
+  }), children);
+};
+var _default = exports["default"] = Checkbox;

package/dist/stories/Checkbox/Checkbox.scss

@@ -0,0 +1,128 @@
+@import 'src/common/styles/svg_img.scss';
+
+.checkbox-container,
+.checkbox-container_green,
+.checkbox-container_red,
+.checkbox-container_yellow,
+.checkbox-container_grey {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    cursor: pointer;
+
+    .checkbox-element {
+        display: inline-block;
+        font-family: 'Montserrat';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 15px;
+        vertical-align: middle;
+
+        &::before {
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            left: 344px;
+            top: 321px;
+            // authorization box differences
+            border: none;
+            border: 1px solid #C5D3C5;
+            background-color: #fff;
+            border-radius: 4px;
+            vertical-align: middle;
+        }
+    }
+
+    .checkbox {
+        opacity: 0;
+        position: fixed;
+        width: 1px;
+        height: 1px;
+        clip: rect(1px, 1px, 1px, 1px);
+
+        &:checked~.checkbox-element::before {
+            background-image: url('./img/check.svg');
+            background-position: center;
+            background-size: 10px;
+            background-color: #0009E8;
+            vertical-align: middle;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+    }
+}
+
+// Green checkbox
+.checkbox-container_green {
+
+    .checkbox-element {
+        &::before {
+            border: 1px solid #83E38C;
+            background-color: #F0FFF1;
+        }
+    }
+
+    .checkbox {
+
+        &:checked~.checkbox-element::before {
+            background-color: #83E38C;
+        }
+    }
+}
+
+// Grey checkbox
+.checkbox-container_grey {
+
+    .checkbox-element {
+        &::before {
+            border: 1px solid #9199A5;
+            background-color: #F0F2F4;
+        }
+    }
+
+    .checkbox {
+
+        &:checked~.checkbox-element::before {
+            background-color: #9199A5;
+        }
+    }
+}
+
+// Red checkbox
+.checkbox-container_red {
+
+    .checkbox-element {
+        &::before {
+            border: 1px solid #FF7E7E;
+            background-color: #FFF0F0;
+        }
+    }
+
+    .checkbox {
+
+        &:checked~.checkbox-element::before {
+            background-color: #FF7E7E;
+        }
+    }
+}
+
+// Yellow checkbox
+.checkbox-container_yellow {
+
+    .checkbox-element {
+        &::before {
+            border: 1px solid #FFDC75;
+            background-color: #FFFDF0;
+        }
+    }
+
+    .checkbox {
+
+        &:checked~.checkbox-element::before {
+            background-color: #FFDC75;
+        }
+    }
+}

package/dist/stories/Checkbox/Checkbox.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports["default"] = {
+  title: 'Components/Checkbox',
+  component: _Checkbox["default"],
+  parameters: {
+    laout: 'centered'
+  },
+  args: {
+    id: 1,
+    value: true,
+    onChange: (0, _addonActions.action)('onChange'),
+    containerClassName: 'test-c',
+    inputClassName: 'test-i',
+    className: 'test',
+    children: /*#__PURE__*/React.createElement("span", null, "test"),
+    uncontrolled: false
+  }
+};
+var Default = exports.Default = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(_Checkbox["default"], args), /*#__PURE__*/React.createElement(_Checkbox["default"], _extends({
+      green: true
+    }, args)), /*#__PURE__*/React.createElement(_Checkbox["default"], _extends({
+      grey: true
+    }, args)), /*#__PURE__*/React.createElement(_Checkbox["default"], _extends({
+      yellow: true
+    }, args)), /*#__PURE__*/React.createElement(_Checkbox["default"], _extends({
+      red: true
+    }, args)));
+  }
+};

package/dist/stories/Checkbox/img/check.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M8.33268 1.5L3.74935 6.08333L1.66602 4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/stories/CheckboxToggle/CheckboxToggle.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+require("./CheckboxToggle.scss");
+var _excluded = ["id", "value", "onChange", "containerClassName", "inputClassName", "className", "disabled"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var CheckboxToggle = function CheckboxToggle(_ref) {
+  var id = _ref.id,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    containerClassName = _ref.containerClassName,
+    inputClassName = _ref.inputClassName,
+    className = _ref.className,
+    disabled = _ref.disabled,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    _value = _useState2[0],
+    set_value = _useState2[1];
+  var _onChange = function _onChange(e) {
+    set_value(e.target.checked);
+    if (onChange) {
+      onChange(e.target.checked);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    set_value(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement("label", {
+    className: disabled ? 'checkbox-status_disabled' : "checkbox-status"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    disabled: disabled,
+    id: id,
+    className: "checkbox " + (inputClassName ? inputClassName : ""),
+    checked: _value,
+    onChange: _onChange
+  }, props)), /*#__PURE__*/React.createElement("span", {
+    className: "checkbox-status-switch"
+  }));
+};
+var _default = exports["default"] = CheckboxToggle;