iguazio.dashboard-react-controls 0.0.5 → 0.0.8

package/dist/elements/SelectOption/SelectOption.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("../../components");
+
+var _types = require("../../types");
+
+var _checkmark = require("../../images/checkmark.svg");
+
+require("./selectOption.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SelectOption = function SelectOption(_ref) {
+  var item = _ref.item,
+      _onClick = _ref.onClick,
+      selectType = _ref.selectType,
+      selectedId = _ref.selectedId,
+      withSelectedIcon = _ref.withSelectedIcon;
+  var selectClassName = (0, _classnames.default)('select__item', item.hidden && 'hidden', item.disabled && 'disabled');
+
+  if (selectType === 'checkbox') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": "select-checkbox",
+      className: "select__item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.FormCheckBox, {
+        item: item,
+        selectedId: selectedId,
+        onChange: _onClick,
+        children: [item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "state-".concat(item.status, "-job status")
+        }), item.label]
+      })
+    });
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": "select-option",
+    className: selectClassName,
+    onClick: function onClick() {
+      !item.disabled && _onClick(item.id);
+    },
+    children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      "data-testid": "select-icon",
+      className: "select__icon",
+      children: item.icon
+    }), item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "state-".concat(item.status, "-job status")
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "data-ellipsis label-row",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+        template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+          text: item.label
+        }),
+        children: item.label
+      }), withSelectedIcon && item.id === selectedId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkmark.ReactComponent, {
+        className: "checkmark"
+      })]
+    }), item.subLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+      className: "sub-label",
+      template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+        text: item.subLabel
+      }),
+      children: item.subLabel
+    })]
+  });
+};
+
+SelectOption.defaultProps = {
+  onClick: function onClick() {},
+  selectType: '',
+  withSelectedIcon: true
+};
+SelectOption.propTypes = {
+  disabled: _propTypes.default.bool,
+  item: _types.SELECT_OPTION.isRequired,
+  onClick: _propTypes.default.func,
+  selectType: _propTypes.default.string,
+  selectedId: _propTypes.default.string,
+  withSelectedIcon: _propTypes.default.bool
+};
+var _default = SelectOption;
+exports.default = _default;

package/dist/elements/SelectOption/SelectOption.test.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _SelectOption = _interopRequireDefault(require("./SelectOption"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var renderComponent = function renderComponent(props) {
+  return (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, _objectSpread({}, props)));
+};
+
+jest.mock('igz-controls/images/checkbox-unchecked.svg', function () {
+  return {
+    ReactComponent: 'unchecked-icon'
+  };
+});
+jest.mock('igz-controls/images/checkbox-checked.svg', function () {
+  return {
+    ReactComponent: 'unchecked-icon'
+  };
+});
+describe('SelectOption component', function () {
+  var wrapper;
+  beforeEach(function () {
+    var props = {
+      item: {
+        label: 'Test1',
+        id: 'test1',
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: "icon"
+        }),
+        subLabel: 'Test1'
+      },
+      selectType: ''
+    };
+    wrapper = renderComponent(props);
+  });
+  afterEach(_react2.cleanup);
+  it('renders without crashing', function () {
+    expect(wrapper.queryByTestId('select-option')).not.toBeNull();
+  });
+  it('should display checkbox inside option if props selectType is "checkbox"', function () {
+    wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+      item: {
+        label: 'Test1',
+        id: 'test1'
+      },
+      selectType: "checkbox",
+      selectedId: "test1"
+    }));
+    expect(wrapper.queryByTestId('select-checkbox')).not.toBeNull();
+  });
+  it('should display select icon if it exists in the props "item"', function () {
+    expect(wrapper.getByTestId('select-icon')).not.toBeNull();
+  });
+  it('should won\'t call onClick callback if props disable set to "true"', function () {
+    var mockCLick = jest.fn();
+    wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+      item: {
+        label: 'Test1',
+        id: 'test1'
+      },
+      onCLick: mockCLick,
+      selectType: "test1",
+      disabled: true
+    }));
+    var selectOption = wrapper.getByTestId('select-option');
+
+    _react2.fireEvent.click(selectOption);
+
+    expect(mockCLick).toHaveBeenCalledTimes(0);
+  });
+  it('should display subLabel if it exists in props item', function () {
+    expect(wrapper.queryByTestId('tooltip-wrapper')).not.toBeNull();
+  });
+  it('should add class "disabled" to SelectOption if props disabled set to "true"', function () {
+    wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+      item: {
+        label: 'Test1',
+        id: 'test1'
+      },
+      selectType: "test1",
+      disabled: true
+    }));
+    var selectOption = wrapper.getByTestId('select-option');
+    expect(selectOption.className).toMatch('disabled');
+  });
+});

package/dist/elements/SelectOption/selectOption.scss

@@ -0,0 +1,61 @@
+@import '../../scss/colors';
+@import '../../scss/mixins';
+
+.select {
+  &__icon {
+    display: flex;
+    margin-right: 10px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 49px;
+    padding: 0 15px;
+
+    &.hidden {
+      display: none;
+    }
+
+    .checkbox {
+      flex: 1;
+      height: 100%;
+
+      svg {
+        margin: 0;
+      }
+    }
+
+    &:hover {
+      background-color: $alabaster;
+      cursor: pointer;
+    }
+
+    .status {
+      margin: 0 10px;
+    }
+
+    .all {
+      margin: 0;
+
+      @include statusState(none);
+    }
+
+    .label-row {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .checkmark {
+      margin: 0 0 0 10px;
+
+      path {
+        fill: $chateauGreen;
+      }
+    }
+  }
+}

package/dist/elements/ValidationTemplate/ValidationTemplate.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _success_done = require("../../images/success_done.svg");
+
+var _close = require("../../images/close.svg");
+
+require("./ValidationTemplate.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ValidationTemplate = function ValidationTemplate(_ref) {
+  var valid = _ref.valid,
+      validationMessage = _ref.validationMessage;
+  var validationClasses = (0, _classnames.default)('validation-option', valid && 'text-muted');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+    className: validationClasses,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      className: "validation-option__icon",
+      children: valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_success_done.ReactComponent, {
+        className: "validation-option__icon_valid"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {
+        className: "validation-option__icon_invalid"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: validationMessage
+    })]
+  });
+};
+
+ValidationTemplate.propTypes = {
+  valid: _propTypes.default.bool.isRequired,
+  validationMessage: _propTypes.default.string.isRequired
+};
+var _default = ValidationTemplate;
+exports.default = _default;

package/dist/elements/ValidationTemplate/ValidationTemplate.scss

@@ -0,0 +1,36 @@
+@import '../../scss/colors';
+
+.validation-option {
+  display: flex;
+  align-items: flex-start;
+  margin: 0.6rem 0;
+  padding: 0 1rem;
+  font-size: 0.875rem;
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 0.5rem;
+
+    &_valid {
+      width: 14px;
+      height: 15px;
+
+      path {
+        fill: $brightTurquoise;
+      }
+    }
+
+    &_invalid {
+      width: 12px;
+      height: 12px;
+
+      path {
+        fill: $amaranth;
+      }
+    }
+  }
+}

package/dist/elements/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OptionsMenu", {
+  enumerable: true,
+  get: function get() {
+    return _OptionsMenu.default;
+  }
+});
+Object.defineProperty(exports, "SelectOption", {
+  enumerable: true,
+  get: function get() {
+    return _SelectOption.default;
+  }
+});
+Object.defineProperty(exports, "ValidationTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _ValidationTemplate.default;
+  }
+});
+
+var _OptionsMenu = _interopRequireDefault(require("./OptionsMenu/OptionsMenu"));
+
+var _SelectOption = _interopRequireDefault(require("./SelectOption/SelectOption"));
+
+var _ValidationTemplate = _interopRequireDefault(require("./ValidationTemplate/ValidationTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/hooks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useDetectOutsideClick", {
+  enumerable: true,
+  get: function get() {
+    return _useDetectOutsideClick.useDetectOutsideClick;
+  }
+});
+
+var _useDetectOutsideClick = require("./useDetectOutsideClick");

package/dist/hooks/useDetectOutsideClick.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDetectOutsideClick = void 0;
+
+var _react = require("react");
+
+/**
+ * Hook for handling closing when clicking outside of an element
+ * @function useDetectOutsideClick
+ * @param {React.node} ref
+ * @param {function} handler A callback function to use on outside click
+ */
+var useDetectOutsideClick = function useDetectOutsideClick(ref, handler) {
+  (0, _react.useEffect)(function () {
+    var onClick = function onClick(e) {
+      e.stopPropagation(); // If the active element exists and is clicked outside of
+
+      if (ref.current !== null && !ref.current.contains(e.target)) {
+        handler(e);
+      }
+    }; // If the item is active (ie open) then listen for clicks outside
+
+
+    window.addEventListener('click', onClick);
+    return function () {
+      window.removeEventListener('click', onClick);
+    };
+  }, [ref, handler]);
+};
+
+exports.useDetectOutsideClick = useDetectOutsideClick;

package/dist/index.js

@@ -5,20 +5,28 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.types = exports.constants = exports.components = void 0;
+exports.types = exports.hooks = exports.elements = exports.constants = exports.components = void 0;
 
 var components = _interopRequireWildcard(require("./components"));
 
 exports.components = components;
 
-var types = _interopRequireWildcard(require("./types"));
-
-exports.types = types;
-
 var constants = _interopRequireWildcard(require("./constants"));
 
 exports.constants = constants;
 
+var elements = _interopRequireWildcard(require("./elements"));
+
+exports.elements = elements;
+
+var hooks = _interopRequireWildcard(require("./hooks"));
+
+exports.hooks = hooks;
+
+var types = _interopRequireWildcard(require("./types"));
+
+exports.types = types;
+
 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; }

package/dist/scss/colors.scss

@@ -33,6 +33,7 @@ $javaLight: #1fcc9e;
 $javaTwo: rgba($java, 0.24);
 $kimberly: #6d5e92;
 $malibu: #869cff;
+$malibuTwo: rgba($malibu, 0.12);
 $maroonFlash: #bc2553;
 $mercury: #e7e7e7;
 $mineshaft: #333;

package/dist/scss/mixins.scss

@@ -181,9 +181,7 @@
     &_grey {
       @include chipButtonAddBackground($mulledWineThree, $topaz);
     }
-  }
-
-  @else {
+  } @else {
     &_none {
       background-color: transparent;
     }
@@ -261,9 +259,7 @@
     &_medium {
       @include chipButtonAddSize(34px);
     }
-  }
-
-  @else {
+  } @else {
     &_dense {
       height: 26px;
     }
@@ -308,9 +304,7 @@
     &_purple {
       @include editableChipFont($amethyst);
     }
-  }
-
-  @else if $component == Chip {
+  } @else if $component == Chip {
     &_white {
       @include chipFont($white);
     }
@@ -330,9 +324,7 @@
     &_orange {
       @include chipFont($sorbus);
     }
-  }
-
-  @else if $component == ButtonAddChip {
+  } @else if $component == ButtonAddChip {
     &_primary {
       @include chipButtonAddColor($topaz);
     }
@@ -722,6 +714,11 @@
       }
     }
 
+    .disabled {
+      color: $doveGray;
+      cursor: not-allowed;
+    }
+
     .no-border {
       border-bottom: none;
 
@@ -980,25 +977,110 @@
 @mixin gradient($type) {
   @if $type == 'card' {
     background: linear-gradient(180deg, $brightTurquoise 4px, $white 4px);
-  }
-
-  @else {
-    background:
-      linear-gradient(
-        88.84deg,
-        #d873e1 5.49%,
-        #fc658f 57.67%,
-        #ffb971 107.73%
-      );
+  } @else {
+    background: linear-gradient(88.84deg, #d873e1 5.49%, #fc658f 57.67%, #ffb971 107.73%);
   }
 }
 
 @mixin fieldWrapper {
+  display: flex;
+  flex: 1;
+  flex-flow: row nowrap;
+  align-items: center;
   position: relative;
   width: 100%;
-  padding: 18px 16px;
   color: $primary;
   background-color: transparent;
   border: $primaryBorder;
   border-radius: 4px;
 }
+
+@mixin formField {
+  .form-field {
+    position: relative;
+    display: flex;
+    flex-flow: column nowrap;
+    height: 100%;
+    width: 100%;
+
+    &__label {
+      margin-bottom: 5px;
+      color: $topaz;
+      font-size: 12px;
+      text-align: left;
+      text-transform: capitalize;
+      background-color: transparent;
+
+      &-mandatory {
+        color: $amaranth;
+      }
+
+      &-disabled {
+        color: $spunPearl;
+
+        .form-field__label-mandatory {
+          color: $spunPearl;
+        }
+      }
+    }
+
+    &__wrapper {
+      @include fieldWrapper;
+
+      &-disabled {
+        color: $spunPearl;
+        cursor: not-allowed;
+      }
+
+      &-invalid {
+        border: $errorBorder;
+      }
+
+      &.without-border {
+        border-color: transparent;
+      }
+
+      &-dense {
+        padding-top: 12px;
+        padding-bottom: 12px;
+      }
+
+      &-normal {
+        padding-top: 14px;
+        padding-bottom: 14px;
+      }
+
+      &-medium {
+        padding-top: 16px;
+        padding-bottom: 16px;
+      }
+
+      &-chunky {
+        padding-top: 18px;
+        padding-bottom: 18px;
+      }
+    }
+
+    &__control {
+      position: relative;
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      padding: 0 8px 0 16px;
+    }
+
+    &__icons {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      margin-right: 4px;
+      min-height: 25px;
+
+      & > * {
+        display: flex;
+        align-items: center;
+        padding: 0 4px;
+      }
+    }
+  }
+}

package/dist/scss/variables.scss

@@ -3,6 +3,7 @@
 $heightRowTable: 55px;
 $leftRowOffset: 49px;
 $mainBorderRadius: 4px;
+$modalBorderRadius: 8px;
 
 $navbarWidth: 245px;
 $navbarTogglerWidth: 35px;