@itcase/ui 1.0.9 → 1.0.10

package/dist/components/Dot.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var borderType = require('../constants/componentProps/borderType.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Dot(props) {
+  var className = props.className,
+    children = props.children;
+  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_',
+    propsKey: 'borderType'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'dot_shape_',
+    propsKey: 'shape'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'dot', borderClass, borderTypeClass, fillClass, shapeClass)
+  }, children);
+}
+Dot.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  border: PropTypes__default.default.string,
+  borderDesktop: PropTypes__default.default.string,
+  borderMobile: PropTypes__default.default.string,
+  borderTablet: PropTypes__default.default.string,
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
+  borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
+  borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default)
+};
+Dot.defaultProps = {};
+
+exports.Dot = Dot;

package/dist/components/Group.js

@@ -93,11 +93,15 @@ function Group(props) {
     prefix: 'flex-grow_',
     propsKey: 'flexGrow'
   });
+  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
   var _useStyles = useStyles.useStyles(props),
     groupStyles = _useStyles.styles,
     groupWrapperStyles = _useStyles.wrapper;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, justifyContentClass),
+    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     id: id,
     style: Object.assign({}, groupStyles, style)
   }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Modal.js

@@ -4,36 +4,27 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var require$$2 = require('react-dom');
 var clsx = require('clsx');
-require('./Icon.js');
-require('./Text.js');
 var index = require('./Fader.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../context/UIContext.js');
+var useStyles = require('../useStyles-e4accb53.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$1 = 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('../constants/componentProps/fillGradient.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('lodash/castArray');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('./Text.js');
+require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/fillGradient.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -185,16 +176,39 @@ var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props,
     prefix: 'fill_',
     propsKey: 'contentFill'
   });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'modal-shape_',
+    propsKey: 'shape'
+  });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-type_',
+    propsKey: 'borderType'
+  });
+  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    modalStyles = _useStyles.styles;
 
   // Use a portal to render the children into the element
   return modalElement && /*#__PURE__*/require$$2__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", {
-    className: clsx__default.default('modal-content', contentClassName, contentFillClass),
+    className: clsx__default.default('modal-content', contentClassName, contentFillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass),
     id: id,
     ref: modalContentRef,
     tabIndex: 0,
-    onBlur: isOutsideClose ? undefined : closeModal
+    onBlur: isOutsideClose ? undefined : closeModal,
+    style: modalStyles
   }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-content__close",
     onClick: closeModal

package/dist/css/components/Dot/Dot.css

@@ -0,0 +1,23 @@
+.dot {
+}
+.dot {
+  min-width: var(--dot-width);
+  min-height: var(--dot-height);
+  max-width: var(--dot-width);
+  max-height: var(--dot-height);
+}
+.dot_shape {
+  &_rounded {
+    border-radius: 12px;
+  }
+  &_circular {
+    border-radius: 50%;
+  }
+  &_geometric {
+    border-radius: 0;
+  }
+}
+:root {
+  --dot-width: 16px;
+  --dot-height: 16px;
+}

package/dist/css/components/Modal/Modal.css

@@ -15,36 +15,21 @@
     display: flex;
   }
 }
+.modal-shape {
+  &_rounded {
+    border-radius: 12px;
+  }
+  &_circular {
+    border-radius: 50%;
+  }
+}
 .modal-content {
   width: 100%;
-  max-width: var(--modal-max-width);
-  border-radius: 8px;
+  max-width: var(--modal-max-width, 600px);
   position: relative;
-  height: 200px;
-  width: 200px;
-  &__close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    cursor: pointer;
-  }
-  &__title {
-    text-align: center;
-    padding: 0 0 20px 0;
-    margin: 0;
-    @mixin h3 600;
-  }
+  min-height: 200px;
+  min-width: 200px;
   &__inner {
     width: 100%;
   }
-  &__desc {
-    text-align: center;
-    padding: 0;
-    margin: 0;
-    @mixin p;
-  }
-  &__button {
-    width: 100%;
-    margin: 24px 0 0 0;
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",