@itcase/ui 1.0.84 → 1.0.85

package/dist/components/Cell.js

@@ -5,6 +5,7 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index$1 = require('./Icon.js');
 var index = require('./Text.js');
+var index$2 = require('./Label.js');
 var size = require('../constants/componentProps/size.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('react-inlinesvg');
@@ -31,6 +32,7 @@ require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textAlign.js');
 require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -42,18 +44,24 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Cell(props) {
   const {
     className,
-    titleIcon,
-    titleIconSize,
-    titleIconSrc,
-    titleIconBgFill,
+    isShowTitleIcon,
     titleIconFill,
+    titleIconFillSize,
+    titleIconIconFill,
+    titleIconFillHover,
     titleIconStroke,
-    valueIcon,
-    valueIconSize,
-    valueIconSrc,
-    valueIconBgFill,
+    titleIconSrc,
+    titleIconShape,
+    titleIcon,
+    isShowValueIcon,
     valueIconFill,
+    valueIconFillSize,
+    valueIconIconFill,
+    valueIconFillHover,
     valueIconStroke,
+    valueIconSrc,
+    valueIconShape,
+    valueIcon,
     isActive,
     isDisabled,
     set,
@@ -70,6 +78,21 @@ function Cell(props) {
     titleTextSize,
     titleTextColor,
     titleTextWeight,
+    isShowTitleLabel,
+    titleLabelAppearance,
+    titleLabel,
+    titleLabelTextSize,
+    titleLabelShape,
+    titleLabelSize,
+    isShowValueLabel,
+    valueLabelAppearance,
+    valueLabel,
+    valueLabelTextSize,
+    valueLabelShape,
+    valueLabelSize,
+    isZeroPadding,
+    isZeroGap,
+    isReverse,
     onClick,
     onMouseEnter
   } = props;
@@ -122,7 +145,7 @@ function Cell(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass),
+    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, isZeroPadding && 'cell_reset-padding', isZeroGap && 'cell_reset-gap', isReverse && 'cell_reverse'),
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
@@ -137,14 +160,22 @@ function Cell(props) {
     tag: titleTag,
     textColor: titleTextColor,
     textWeight: titleTextWeight
-  }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
-    bgFill: titleIconBgFill,
+  }, title), isShowTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
-    iconFill: titleIconFill,
-    iconSize: titleIconSize,
+    fill: titleIconFill,
+    fillSize: titleIconFillSize,
+    iconFill: titleIconIconFill,
+    iconFillHover: titleIconFillHover,
     iconStroke: titleIconStroke,
     imageSrc: titleIconSrc,
+    shape: titleIconShape,
     SvgImage: titleIcon
+  }), isShowTitleLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
+    appearance: titleLabelAppearance,
+    label: titleLabel,
+    labelTextSize: titleLabelTextSize,
+    shape: titleLabelShape,
+    size: titleLabelSize
   })), value && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__data"
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {
@@ -153,14 +184,22 @@ function Cell(props) {
     tag: valueTag,
     textColor: valueTextColor,
     textWeight: valueTextWeight
-  }, value), (valueIcon || valueIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
-    bgFill: valueIconBgFill,
+  }, value), isShowValueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
-    iconFill: valueIconFill,
-    iconSize: valueIconSize,
+    fill: valueIconFill,
+    fillSize: valueIconFillSize,
+    iconFill: valueIconIconFill,
+    iconFillHover: valueIconFillHover,
     iconStroke: valueIconStroke,
     imageSrc: valueIconSrc,
+    shape: valueIconShape,
     SvgImage: valueIcon
+  }), isShowValueLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
+    appearance: valueLabelAppearance,
+    label: valueLabel,
+    labelTextSize: valueLabelTextSize,
+    shape: valueLabelShape,
+    size: valueLabelSize
   }))), after && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__after"
   }, after));
@@ -171,14 +210,10 @@ Cell.propTypes = {
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
   titleIcon: PropTypes__default.default.any,
-  titleIconBgFill: PropTypes__default.default.string,
   titleIconFill: PropTypes__default.default.string,
-  titleIconSize: PropTypes__default.default.string,
   titleIconStroke: PropTypes__default.default.string,
   valueIcon: PropTypes__default.default.any,
-  valueIconBgFill: PropTypes__default.default.string,
   valueIconFill: PropTypes__default.default.string,
-  valueIconSize: PropTypes__default.default.string,
   valueIconStroke: PropTypes__default.default.string,
   isActive: PropTypes__default.default.bool,
   isDisabled: PropTypes__default.default.bool,
@@ -253,13 +288,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "titleIconBgFill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "titleIconFill": {
       "description": "",
       "type": {
@@ -267,13 +295,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "titleIconSize": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "titleIconStroke": {
       "description": "",
       "type": {
@@ -288,13 +309,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "valueIconBgFill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "valueIconFill": {
       "description": "",
       "type": {
@@ -302,13 +316,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "valueIconSize": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "valueIconStroke": {
       "description": "",
       "type": {

package/dist/components/Notification.js

@@ -85,8 +85,8 @@ function NotificationItem(props) {
     size: textSize,
     textColor: textColor || notificationItemConfig.appearance[appearance] && notificationItemConfig.appearance[appearance].textColor.replace(/([A-Z])/g, '-$1').toLowerCase()
   }, text), closeButton && /*#__PURE__*/React__default.default.createElement("div", {
-    onClick: () => onClickClose && onClickClose(id),
-    className: clsx__default.default('notification__item-close', onClickClose && 'cursor_type_pointer')
+    className: clsx__default.default('notification__item-close', onClickClose && 'cursor_type_pointer'),
+    onClick: () => onClickClose && onClickClose(id)
   }, closeButton)), after);
 }
 NotificationItem.propTypes = {

package/dist/constants/componentProps/size.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const sizeProps = [null, 'normal', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', '16', '24', '32', '40', '56', '64', '96', '144'];
+const sizeProps = [null, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
 
 exports.default = sizeProps;

package/dist/css/components/Cell/Cell.css

@@ -16,12 +16,24 @@
       &_vertical {
         display: flex;
         flex-direction: column;
+        gap: var(--cell-vertical-gap, 4px);
       }
       &_horizontal {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        gap: 20px;
+        gap: var(--cell-horizontal-gap, 20px);
+      }
+    }
+  }
+}
+.cell {
+  &_size {
+    @each $size in s, m, l, xl {
+      &_$(size) {
+        ^^&__wrapper {
+          padding: var(--cell-size-$(size)-padding);
+        }
       }
     }
   }
@@ -39,3 +51,30 @@
     }
   }
 }
+.cell {
+  &_reset-gap {
+    ^&__wrapper {
+      gap: 0;
+    }
+  }
+}
+.cell {
+  &_reset-padding {
+    ^&__wrapper {
+      padding: 0;
+    }
+  }
+}
+.cell {
+  &_reverse {
+    ^&__wrapper {
+      flex-direction: column-reverse;
+    }
+  }
+}
+:root {
+  --cell-size-s-padding: 6px;
+  --cell-size-m-padding: 6px;
+  --cell-size-l-padding: 6px;
+  --cell-size-xl-padding: 12px;
+}

package/package.json

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