@itcase/ui 1.0.4 → 1.0.6

package/dist/css/components/{Popup/Popup.css → Modal/Modal.css}

@@ -1,4 +1,4 @@
-.popup {
+.modal {
   width: 100%;
   min-height: 100%;
   position: fixed;
@@ -15,12 +15,13 @@
     display: flex;
   }
 }
-.popup-content {
+.modal-content {
   width: 100%;
-  max-width: var(--popup-max-width);
+  max-width: var(--modal-max-width);
   border-radius: 8px;
   position: relative;
-  @mixin elevation-8;
+  height: 200px;
+  width: 200px;
   &__close {
     position: absolute;
     top: 8px;

package/dist/css/components/RadioButton/RadioButton.css

@@ -1,40 +1,60 @@
 .radio-button {
-  position: relative;
-  cursor: pointer;
-  font-size: 0;
-  line-height: 0;
-  display: flex;
-  min-height: 16px;
-  min-width: 16px;
-  &__button {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 4px;
+  &__item {
+    position: relative;
     cursor: pointer;
-    appearance: none;
-    border: 0;
-    margin: 0;
     font-size: 0;
     line-height: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 3;
-  }
-  &__bg {
-    flex: 1;
     display: flex;
-    z-index: 1;
-  }
-  &__mark {
-    height: calc(100% - 6px);
-    width: calc(100% - 6px);
-    position: absolute;
-    z-index: 2;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    display: none;
-    border-radius: 50%;
+    min-height: 16px;
+    min-width: 16px;
+    grid-row-start: span 2;
+    align-self: start;
+    ^&__input {
+      cursor: pointer;
+      appearance: none;
+      border: 0;
+      margin: 0;
+      font-size: 0;
+      line-height: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3;
+    }
+    ^&__state {
+      flex: 1;
+      display: flex;
+      z-index: 1;
+      &_shape {
+        &_rounded {
+          border-radius: 4px;
+          position: relative;
+          overflow: hidden;
+        }
+        &_circular {
+          border-radius: 50%;
+          position: relative;
+          overflow: hidden;
+        }
+      }
+    }
+    ^&__state-checkmark {
+      height: calc(100% - 6px);
+      width: calc(100% - 6px);
+      position: absolute;
+      z-index: 2;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      display: none;
+      border-radius: 50%;
+    }
   }
 }
 .radio-button {
@@ -52,39 +72,20 @@
   }
 }
 .radio-button {
-  &_fill {
-    &_checked {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
-        &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
-            &-$(color) {
-              & ^^^^&__button {
-                &:checked {
-                  & + ^^^^^^&__bg {
-                    background: var(--color-$(type)-$(color));
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.radio-button {
-  &_fill {
-    &_checkmark {
+  &_checkmark {
+    &_fill {
       @each $type in accent, primary, secondary, tertiary, surface, success, error {
         &_$(type) {
           &-item {
             @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
               &-$(color) {
-                & ^^^^^&__button {
+                & ^^^^^&__input {
                   &:checked {
-                    & ~ ^^^^^^^&__mark {
-                      display: block;
-                      background: var(--color-$(type)-item-$(color));
+                    & ~ ^^^^^^^&__state {
+                      &-checkmark {
+                        display: block;
+                        background: var(--color-$(type)-item-$(color));
+                      }
                     }
                   }
                 }

package/dist/css/components/Switch/Switch.css

@@ -1,53 +1,63 @@
 .switch {
   position: relative;
-  min-width: 52px;
-  height: 100%;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: 0.4s;
-  min-height: 32px;
-  overflow: hidden;
-  display: flex;
-  &__checkbox {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    cursor: pointer;
-    appearance: none;
-    border: 0;
-    margin: 0;
-    z-index: 2;
-    &:checked {
-      & + .switch__bg {
-        background: var(--color-accent-primary);
+}
+.switch {
+  &_size {
+    &_normal {
+      position: relative;
+      min-width: 52px;
+      height: 100%;
+      border-radius: 50px;
+      cursor: pointer;
+      transition: 0.4s;
+      min-height: 32px;
+      overflow: hidden;
+      display: flex;
+      ^^&__checkbox {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        cursor: pointer;
+        appearance: none;
+        border: 0;
+        margin: 0;
+        z-index: 2;
+        &:checked {
+          & + .switch__bg {
+            background: var(--color-accent-primary);
+          }
+          & ~ .switch__toggle {
+            left: 100%;
+            margin: 0 0 0 -3px;
+            background: var(--color-accent-item-primary);
+            transform: translate(-100%, -50%);
+          }
+        }
+      }
+      ^^&__bg {
+        width: 100%;
+        flex: 1;
+        background: var(--color-surface-tertiary);
+        transition: all 0.25s;
       }
-      & ~ .switch__toggle {
-        left: 100%;
-        margin: 0 0 0 -3px;
-        background: var(--color-accent-item-primary);
-        transform: translate(-100%, -50%);
+      ^^&__toggle {
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        height: calc(100% - 6px);
+        position: absolute;
+        aspect-ratio: 1/1;
+        top: 50%;
+        transform: translate(3px, -50%);
+        left: 0;
+        background: #fff;
+        border-radius: 50%;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+        transition: all 0.25s;
       }
     }
-  }
-  &__bg {
-    width: 100%;
-    flex: 1;
-    background: var(--color-surface-tertiary);
-    transition: all 0.25s;
-  }
-  &__toggle {
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    height: calc(100% - 6px);
-    position: absolute;
-    aspect-ratio: 1/1;
-    top: 50%;
-    transform: translate(3px, -50%);
-    left: 0;
-    background: #fff;
-    border-radius: 50%;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-    transition: all 0.25s;
+    &_compact {
+      border: solid 1px red;
+    }
   }
 }

package/dist/css/components/Tab/Tab.css

@@ -0,0 +1,46 @@
+.tab {
+  &__label {
+    display: flex;
+    align-items: center;
+    align-content: center;
+  }
+}
+.tab {
+  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+    &_justify-content_$(val) {
+      & > a {
+        justify-content: $(val);
+      }
+    }
+  }
+}
+.tab {
+  &_shape {
+    &_rounded {
+      border-radius: 12px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.tab {
+  &_size {
+    @each $size in normal, compact {
+      &_$(size) {
+        ^^&__label {
+          padding: var(--tab-size-$(size)-padding);
+          gap: var(--tab-size-$(size)-gap);
+        }
+      }
+    }
+  }
+}
+:root {
+  --tab-size-normal-padding: 10px;
+  --tab-size-normal-gap: 10px;
+
+  --tab-size-compact-padding: 10px;
+  --tab-size-compact-gap: 10px;
+}
+

package/dist/css/components/Tile/Tile.css

@@ -1,14 +1,6 @@
 .tile {
-
-}
-.tile {
-  &_type {
-    &_icon {
-      padding: 16px;
-      ^^&__icon {
-        margin: 0 0 16px 0;
-      }
-    }
+  &__wrapper {
+    position: relative;
   }
 }
 .tile {
@@ -21,3 +13,28 @@
     }
   }
 }
+.tile {
+  &_size {
+    @each $size in normal, compact {
+      &_$(size) {
+        padding: var(--tile-size-$(size)-padding);
+        min-width: var(--tile-size-$(size)-min-width);
+        & ^^&__wrapper {
+          display: flex;
+          flex-flow: column;
+          gap: var(--tile-size-$(size)-gap);
+        }
+      }
+    }
+  }
+}
+.tile {
+  &_type {
+    &_icon {
+      padding: 16px;
+      ^^&__icon {
+        margin: 0 0 16px 0;
+      }
+    }
+  }
+}

package/dist/css/styles/border-color/border-color.css

@@ -2,7 +2,7 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-border {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
           &-$(color) {
             border-width: 1px;
             border-style: solid;
@@ -14,7 +14,7 @@
     &_hover {
       &_$(type) {
         &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
             &-$(color) {
               &:hover {
                 border-color: var(--color-$(type)-border-$(color));

package/dist/css/styles/border-type/border-type.css

@@ -0,0 +1,13 @@
+.border {
+  &_type {
+    &_outline {
+      border-style: solid;
+    }
+    &_solid {
+      border-style: solid;
+    }
+    &_none {
+      border: none;
+    }
+  }
+}

package/dist/css/styles/border-width/border-width.css

@@ -0,0 +1,7 @@
+.border-width {
+  @each $width in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
+    &_$(width) {
+      border-width: $(width)px ;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -85,6 +85,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",

package/dist/components/Popup.js

@@ -1,255 +0,0 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactDOM = require('react-dom');
-var clsx = require('clsx');
-var index = require('./Icon.js');
-var index$1 = require('./Text.js');
-var index$2 = require('./Fader.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../context/UIContext.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var index$3 = require('./Loader.js');
-require('react-inlinesvg');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/iconSize.js');
-require('../constants/componentProps/shape.js');
-require('../constants/componentProps/strokeColor.js');
-require('./Link.js');
-require('../useStyles-e4accb53.js');
-require('../hooks/styleAttributes.js');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/castArray');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/fillGradient.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-var getOrCreatePopupElement = function getOrCreatePopupElement(popupQuerySelector, className) {
-  if (className === void 0) {
-    className = '';
-  }
-  // prettier-ignore
-  var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
-  var popupElement = document.querySelector(popupQuerySelector);
-  if (!popupElement) {
-    // Add popup element into the DOM on mount.
-    popupElement = document.createElement('div');
-    popupElement.setAttribute('id', 'popup-global');
-    popupElement.classList.add('popup');
-    if (classList.length) {
-      var _popupElement$classLi;
-      (_popupElement$classLi = popupElement.classList).add.apply(_popupElement$classLi, classList);
-    }
-    document.body.prepend(popupElement);
-  }
-  return popupElement;
-};
-
-// Popup component that is an abstraction around the portal API.
-var Popup = /*#__PURE__*/React__default.default.forwardRef(function Popup(props, ref) {
-  var children = props.children,
-    className = props.className,
-    closeIcon = props.closeIcon,
-    closeIconFill = props.closeIconFill,
-    closeIconSize = props.closeIconSize,
-    closeText = props.closeText;
-    props.contentFill;
-    var contentClassName = props.contentClassName,
-    id = props.id,
-    isFader = props.isFader,
-    faderFill = props.faderFill,
-    faderFillGradient = props.faderFillGradient,
-    faderOpacity = props.faderOpacity,
-    initialIsOpen = props.isOpen,
-    isScrollOnOpen = props.isScrollOnOpen,
-    isSetFocusOnOpen = props.isSetFocusOnOpen,
-    popupQuerySelector = props.popupQuerySelector,
-    debug = props.debug,
-    onClosePopup = props.onClosePopup,
-    onOpenPopup = props.onOpenPopup;
-
-  // Query DOM element
-  var _useState = React.useState(null),
-    popupElement = _useState[0],
-    setPopupElement = _useState[1];
-  React.useLayoutEffect(function () {
-    var element = getOrCreatePopupElement(popupQuerySelector, className);
-    setPopupElement(element);
-    if (element) {
-      addPopupProps(element);
-    }
-  }, []);
-  var popupContentRef = React.useRef(null);
-  var popupFaderRef = React.useRef(null);
-  var _useState2 = React.useState(initialIsOpen),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var addPopupProps = React.useCallback(function (element) {
-    // Change class need in "useEffect"
-    if (isOpen) {
-      // Show popup
-      element.classList.add('popup_state_visible');
-      // Scroll to opened popup
-      if (isScrollOnOpen) {
-        // popupContentRef.current.style.top = `${window.visualViewport.pageTop}px`
-        element.scrollIntoView({
-          block: 'center',
-          behavior: 'smooth'
-        });
-      }
-
-      // "setTimeout" in this implementation is needs for set focus on popup
-      // after "onMouseDown" event on button
-      if (isSetFocusOnOpen) {
-        setTimeout(function () {
-          return popupContentRef.current.focus();
-        }, 0);
-      }
-    } else if (!element.children.length) {
-      // Hide popup if has no children
-      element.classList.remove('popup_state_visible');
-    }
-  }, [isOpen, isSetFocusOnOpen]);
-  React.useEffect(function () {
-    if (!popupElement) {
-      return;
-    }
-    addPopupProps(popupElement);
-  }, [isOpen]); // eslint-disable-line
-
-  // Show popup with children content
-  var openPopup = React.useCallback(function () {
-    setIsOpen(true);
-
-    // Callback
-    if (typeof onOpenPopup === 'function') {
-      onOpenPopup();
-    }
-
-    /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
-      // If current popup is already opened
-      // Move content to end of popup root container. For order in DOM.
-      const popupContentElement = popupContentRef.current
-      if (popupContentElement) {
-        popupContentElement.parentNode.appendChild(popupContentElement)
-      }
-      // Also move fader to end of popup root container after container
-      const popupFaderElement = popupFaderRef.current
-      if (popupFaderElement) {
-        popupFaderElement.parentNode.appendChild(popupFaderElement)
-      }
-    */
-  }, [onOpenPopup]);
-
-  // Hide popup and unmount children content
-  var closePopup = React.useCallback(function (event) {
-    if (event === void 0) {
-      event = {};
-    }
-    var hasRelatedTarget = event.relatedTarget && popupElement.contains(event.relatedTarget);
-    if (hasRelatedTarget) {
-      return event;
-    }
-    setIsOpen(false);
-
-    // Callback
-    if (typeof onClosePopup === 'function') {
-      onClosePopup();
-    }
-  }, [popupElement, onClosePopup]);
-
-  // Save ref things
-  React.useImperativeHandle(ref, function () {
-    return {
-      isOpen: isOpen,
-      openPopup: openPopup,
-      closePopup: closePopup,
-      popupElement: popupElement
-    };
-  });
-  var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'contentFill'
-  });
-
-  // Use a portal to render the children into the element
-  return popupElement && /*#__PURE__*/ReactDOM__default.default.createPortal(
-  // Any valid React child: JSX, strings, arrays, etc.
-  isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
-    ref: popupContentRef,
-    className: clsx__default.default('popup-content', contentClassName, contentFillClass),
-    id: id,
-    tabIndex: 0,
-    onBlur: debug ? undefined : closePopup
-  }, closeIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "popup-content__close",
-    onClick: closePopup
-  }, closeIcon && /*#__PURE__*/React__default.default.createElement(index.Icon, {
-    SvgImage: closeIcon,
-    size: closeIconSize,
-    fill: closeIconFill
-  }), closeText && /*#__PURE__*/React__default.default.createElement(index$1.Text, null, closeText)), children), /*#__PURE__*/React__default.default.createElement(index$2.Fader, {
-    ref: popupFaderRef,
-    fill: faderFill,
-    fillGradient: faderFillGradient,
-    opacity: faderOpacity,
-    className: "popup__fader",
-    isFader: isFader
-  })) : null,
-  // A DOM element
-  popupElement);
-});
-Popup.propTypes = {
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  closeIcon: PropTypes__default.default.string,
-  closeText: PropTypes__default.default.string,
-  faderFill: PropTypes__default.default.string,
-  faderFillGradient: PropTypes__default.default.string,
-  faderOpacity: PropTypes__default.default.string,
-  contentClassName: PropTypes__default.default.string,
-  id: PropTypes__default.default.string,
-  isFader: PropTypes__default.default.bool,
-  isScrollOnOpen: PropTypes__default.default.bool,
-  isSetFocusOnOpen: PropTypes__default.default.bool,
-  popupQuerySelector: PropTypes__default.default.string,
-  debug: PropTypes__default.default.bool,
-  onClosePopup: PropTypes__default.default.func,
-  onOpenPopup: PropTypes__default.default.func
-};
-Popup.defaultProps = {
-  isFader: true,
-  isOpen: false,
-  isScrollOnOpen: true,
-  isSetFocusOnOpen: true,
-  popupQuerySelector: '#popup-global'
-};
-
-function PopupLoader(props) {
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: "popup-loading"
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "popup-loading__inner"
-  }, /*#__PURE__*/React__default.default.createElement(index$3.Loader, null)));
-}
-
-exports.Popup = Popup;
-exports.PopupLoader = PopupLoader;