@itcase/ui 1.0.5 → 1.0.7

package/dist/components/Tile.js

@@ -3,16 +3,15 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var index$4 = require('./Counter.js');
-var index$1 = require('./Emoji.js');
-var index = require('./Icon.js');
-var index$2 = require('./Title.js');
-var index$3 = require('./Text.js');
+var index$2 = require('./Badge.js');
+require('./Emoji.js');
+require('./Icon.js');
+var index = require('./Title.js');
+var index$1 = require('./Text.js');
 var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
 var align = require('../constants/componentProps/align.js');
 var alignDirection = require('../constants/componentProps/alignDirection.js');
 var size = require('../constants/componentProps/size.js');
-var iconSize = require('../constants/componentProps/iconSize.js');
 var textAlign = require('../constants/componentProps/textAlign.js');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
@@ -36,6 +35,7 @@ require('lodash/castArray');
 require('../constants/componentProps/direction.js');
 require('../constants/componentProps/emojiSize.js');
 require('react-inlinesvg');
+require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Link.js');
 require('../constants/componentProps/textGradient.js');
@@ -52,48 +52,21 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Tile(props) {
   var children = props.children,
     className = props.className,
-    counter = props.counter,
-    counterSize = props.counterSize,
-    counterType = props.counterType,
+    badge = props.badge,
+    badgeSize = props.badgeSize,
+    badgeType = props.badgeType,
     direction = props.direction,
-    emoji = props.emoji,
-    emojiFill = props.emojiFill,
-    emojiSize = props.emojiSize,
-    emojiType = props.emojiType,
-    height = props.height,
-    icon = props.icon,
-    iconBgFill = props.iconBgFill,
-    iconBgFillDesktop = props.iconBgFillDesktop,
-    iconBgFillMobile = props.iconBgFillMobile,
-    iconBgFillTablet = props.iconBgFillTablet,
-    iconFill = props.iconFill,
-    iconFillDesktop = props.iconFillDesktop,
-    iconFillMobile = props.iconFillMobile,
-    iconFillSize = props.iconFillSize,
-    iconFillSizeDesktop = props.iconFillSizeDesktop,
-    iconFillSizeMobile = props.iconFillSizeMobile,
-    iconFillSizeTablet = props.iconFillSizeTablet,
-    iconFillTablet = props.iconFillTablet,
-    iconStroke = props.iconStroke,
-    iconShape = props.iconShape,
-    iconSize = props.iconSize,
-    iconSizeMobile = props.iconSizeMobile,
-    iconSizeTable = props.iconSizeTable,
-    iconSizeDesktop = props.iconSizeDesktop,
-    iconSrc = props.iconSrc,
+    before = props.before,
+    after = props.after,
     reverse = props.reverse,
     size = props.size,
     text = props.text,
     textSize = props.textSize,
     textWrap = props.textWrap,
-    textTag = props.textTag,
+    textColor = props.textColor,
     title = props.title,
     titleSize = props.titleSize,
-    titleTag = props.titleTag,
     titleAlign = props.titleAlign,
-    titleAlignMobile = props.titleAlignMobile,
-    titleAlignTablet = props.titleAlignTablet,
-    titleAlignDesktop = props.titleAlignDesktop,
     titleWrap = props.titleWrap,
     type = props.type,
     onClick = props.onClick;
@@ -113,67 +86,46 @@ function Tile(props) {
     prefix: 'tile_shape_',
     propsKey: 'shape'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'resize-horizontal_',
-    propsKey: 'width'
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderHover'
+  });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-type_',
+    propsKey: 'borderType'
   });
   var _useStyles = useStyles.useStyles(props),
     tileStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "tile_direction_" + direction, reverse && 'tile_reverse', size && "tile_size_" + size, type && "tile_type_" + type, widthClass, height && "tile_height_" + height, counter && "tile_state_counter"),
+    className: clsx__default.default('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_" + direction, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_" + size, type && "tile_type_" + type, badge && "tile_state_badge"),
     style: tileStyles,
     onClick: onClick
-  }, (icon || iconSrc) && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "tile__icon"
-  }, /*#__PURE__*/React__default.default.createElement(index.Icon, {
-    SvgImage: icon,
-    bgFill: iconBgFill,
-    bgFillMobile: iconBgFillMobile,
-    bgFillTablet: iconBgFillTablet,
-    bgFillDesktop: iconBgFillDesktop,
-    fill: iconFill,
-    fillMobile: iconFillMobile,
-    fillTablet: iconFillTablet,
-    fillDesktop: iconFillDesktop,
-    fillSize: iconFillSize,
-    fillSizeMobile: iconFillSizeMobile,
-    fillSizeTablet: iconFillSizeTablet,
-    fillSizeDesktop: iconFillSizeDesktop,
-    stroke: iconStroke,
-    imageSrc: iconSrc,
-    shape: iconShape,
-    size: iconSize,
-    sizeMobile: iconSizeMobile,
-    sizeTablet: iconSizeTable,
-    sizeDesktop: iconSizeDesktop
-  })), emoji && /*#__PURE__*/React__default.default.createElement(index$1.Emoji, {
-    className: "tile__emoji",
-    emoji: emoji,
-    fill: emojiFill,
-    size: emojiSize,
-    type: emojiType
-  }), /*#__PURE__*/React__default.default.createElement("div", {
+  }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('tile__wrapper', alignClass, alignDirectionClass)
-  }, title && /*#__PURE__*/React__default.default.createElement(index$2.Title, {
+  }, before, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
+    className: "tile__title",
     size: titleSize,
     textWrap: titleWrap,
-    tag: titleTag,
-    textAlign: titleAlign,
-    textAlignMobile: titleAlignMobile,
-    textAlignTablet: titleAlignTablet,
-    textAlignDesktop: titleAlignDesktop,
-    className: "tile__title"
-  }, title), text && /*#__PURE__*/React__default.default.createElement(index$3.Text, {
+    textAlign: titleAlign
+  }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     size: textSize,
-    tag: textTag,
+    textColor: textColor,
     textWrap: textWrap,
     className: "tile__text"
-  }, text), counter && /*#__PURE__*/React__default.default.createElement(index$4.Counter, {
-    className: "tile__counter",
-    value: counter,
-    size: counterSize,
-    type: counterType
-  }), children));
+  }, text), badge && /*#__PURE__*/React__default.default.createElement(index$2.Badge, {
+    className: "tile__badge",
+    value: badge,
+    size: badgeSize,
+    type: badgeType
+  }), children, after));
 }
 Tile.propTypes = {
   align: PropTypes__default.default.oneOf(align.default),
@@ -186,9 +138,9 @@ Tile.propTypes = {
   alignDirectionDesktop: PropTypes__default.default.oneOf(alignDirection.default),
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
-  counter: PropTypes__default.default.string,
-  counterSize: PropTypes__default.default.string,
-  counterType: PropTypes__default.default.string,
+  badge: PropTypes__default.default.string,
+  badgeSize: PropTypes__default.default.string,
+  badgeType: PropTypes__default.default.string,
   direction: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
@@ -198,31 +150,7 @@ Tile.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
-  iconSize: PropTypes__default.default.oneOf(iconSize.default),
-  iconSizeMobile: PropTypes__default.default.oneOf(iconSize.default),
-  iconSizeTable: PropTypes__default.default.oneOf(iconSize.default),
-  iconSizeDesktop: PropTypes__default.default.oneOf(iconSize.default),
-  iconStroke: PropTypes__default.default.string,
-  emoji: PropTypes__default.default.string,
-  emojiFill: PropTypes__default.default.string,
-  emojiSize: PropTypes__default.default.string,
-  emojiType: PropTypes__default.default.string,
   height: PropTypes__default.default.string,
-  icon: PropTypes__default.default.string,
-  iconSrc: PropTypes__default.default.string,
-  iconBgFill: PropTypes__default.default.string,
-  iconBgFillMobile: PropTypes__default.default.string,
-  iconBgFillTablet: PropTypes__default.default.string,
-  iconBgFillDesktop: PropTypes__default.default.string,
-  iconFill: PropTypes__default.default.string,
-  iconFillMobile: PropTypes__default.default.string,
-  iconFillTablet: PropTypes__default.default.string,
-  iconFillDesktop: PropTypes__default.default.string,
-  iconFillSize: PropTypes__default.default.string,
-  iconFillSizeMobile: PropTypes__default.default.string,
-  iconFillSizeTablet: PropTypes__default.default.string,
-  iconFillSizeDesktop: PropTypes__default.default.string,
-  iconShape: PropTypes__default.default.string,
   reverse: PropTypes__default.default.bool,
   size: PropTypes__default.default.string,
   text: PropTypes__default.default.string,

package/dist/css/components/Avatar/Avatar.css

@@ -1,24 +1,23 @@
 .avatar {
   &__wrapper {
     display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
     ^&__image {
     }
-    ^&__data {
-      display: flex;
-      flex-flow: column nowrap;
-    }
     ^&__icon {
-      padding: 8px 0 0 0;
-      display: flex;
-      gap: 16px;
+      position: absolute;
+      right: 0;
+      bottom: 0;
     }
   }
 }
-.avatar{
+.avatar {
   &_size {
-    @each $size in 16, 32, 40, 60, 72, 96, 144, 240 {
+    @each $size in 24, 32, 40, 60, 72, 96, 144, 240 {
       &_$(size) {
-        ^^&__image {
+        ^^&__wrapper {
           width: $(size)px;
           height: $(size)px;
         }
@@ -26,3 +25,17 @@
     }
   }
 }
+.avatar {
+  &_shape {
+    &_rounded {
+      ^^&__wrapper {
+        border-radius: 10px;
+      }
+    }
+    &_circular {
+      ^^&__wrapper {
+        border-radius: 50%;
+      }
+    }
+  }
+}

package/dist/css/components/Badge/Badge.css

@@ -0,0 +1,55 @@
+.badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+.badge {
+  &_size {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
+      &_$(size) {
+        min-width: var(--badge-width-size-$(size));
+        min-height: var(--badge-height-size-$(size));
+        max-height: var(--badge-height-size-$(size));
+      }
+    }
+  }
+}
+.badge {
+  &&_type {
+    &_accent {
+      background: var(--color-accent-primary);
+      color: var(--color-accent-text-primary);
+    }
+  }
+}
+.badge {
+  &&_type {
+    &_primary {
+      background: var(--color-primary);
+      color: var(--color-primary-text-primary);
+    }
+  }
+}
+:root {
+  --badge-width-size-xxs: 16px;
+  --badge-height-size-xxs: 16px;
+
+  --badge-width-size-xs: 18px;
+  --badge-height-size-xs: 18px;
+
+  --badge-width-size-s: 20px;
+  --badge-height-size-s: 20px;
+
+  --badge-width-size-m: 24px;
+  --badge-height-size-m: 24px;
+
+  --badge-width-size-l: 32px;
+  --badge-height-size-l: 32px;
+
+  --badge-width-size-xl: 40px;
+  --badge-height-size-xl: 40px;
+
+  --badge-width-size-xxl: 48px;
+  --badge-height-size-xxl: 48px;
+}

package/dist/css/components/Button/Button.css

@@ -53,11 +53,6 @@
         ^^&__wrapper {
           padding: var(--button-size-$(size)-padding);
         }
-        &^^&_type_icon {
-          ^^^&__wrapper {
-            padding: var(--button-size-$(size)-icon-padding);
-          }
-        }
         &^^&_type_with-icon {
           &_$(size) {
             ^^^^&__wrapper {
@@ -295,9 +290,9 @@
 }
 .button {
   &&_type {
-    &_counter {
+    &_badge {
       position: relative;
-      & .counter {
+      & .badge {
         position: absolute;
         right: -4px;
         top: -4px;
@@ -305,6 +300,22 @@
     }
   }
 }
+.button {
+  &_type {
+    &_icon {
+      align-self: flex-start;
+      &.button_size {
+        @each $size in xs, s, m, l, xl, xxl {
+          &_$(size) {
+            & ^^^^&__wrapper {
+              padding: var(--button-size-$(size)-icon-padding);
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .button {
   &&_width {
     &_fixed {
@@ -339,7 +350,7 @@
   --button-size-s-shape-rounded: 6px;
 
   --button-size-m-padding: 8px 24px;
-  --button-size-m-icon-padding: 0px;
+  --button-size-m-icon-padding: 10px;
   --button-size-m-gap: 6px;
   --button-size-m-shape-rounded: 6px;
 

package/dist/css/components/Checkbox/Checkbox.css

@@ -1,44 +1,60 @@
 .checkbox {
-  position: relative;
-  cursor: pointer;
-  font-size: 0;
-  line-height: 0;
-  display: flex;
-  min-height: 16px;
-  min-width: 16px;
-  &__checkbox {
+  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: 8px;
-    width: 5px;
-    border-bottom-style: solid;
-    border-bottom-width: 2px;
-    border-right-style: solid;
-    border-right-width: 2px;
-    position: absolute;
-    z-index: 2;
-    left: 50%;
-    top: 50%;
-    margin: -1px 0 0 0;
-    transform: translate(-50%, -50%) rotate(45deg);
-    display: none;
+    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;
+        }
+        &_circular {
+          border-radius: 50%;
+        }
+      }
+    }
+    ^&__state-checkmark {
+      height: 8px;
+      width: 5px;
+      border-bottom-style: solid;
+      border-bottom-width: 2px;
+      border-right-style: solid;
+      border-right-width: 2px;
+      position: absolute;
+      z-index: 2;
+      left: 50%;
+      top: 50%;
+      margin: -1px 0 0 0;
+      transform: translate(-50%, -50%) rotate(45deg);
+      display: none;
+    }
   }
 }
 .checkbox {
@@ -51,39 +67,20 @@
   }
 }
 .checkbox {
-  &_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) {
-              & ^^^^&__checkbox {
-                &:checked {
-                  & + ^^^^^^&__bg {
-                    background: var(--color-$(type)-$(color));
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.checkbox {
-  &_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) {
-                & ^^^^^&__checkbox {
+                & ^^^^^&__input {
                   &:checked {
-                    & ~ ^^^^^^^&__mark {
-                      display: block;
-                      border-color: var(--color-$(type)-item-$(color));
+                    & ~ ^^^^^^^&__state {
+                      &-checkmark {
+                        display: block;
+                        border-color: var(--color-$(type)-item-$(color));
+                      }
                     }
                   }
                 }

package/dist/css/components/Chips/Chips.css

@@ -3,21 +3,38 @@
   &__label {
     white-space: nowrap;
   }
+  &__inner {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
 }
 
 .chips {
   &&_size {
-    &_l {
+    &_xs {
       padding: 2px 6px;
-      @mixin text-l;
+      @mixin text-s;
+    }
+    &_s {
+      padding: 2px 6px;
+      @mixin text-s;
     }
     &_m {
       padding: 2px 6px;
       @mixin text-m;
     }
-    &_s {
+    &_l {
       padding: 2px 6px;
-      @mixin text-s;
+      @mixin text-l;
+    }
+    &_xl {
+      padding: 2px 6px;
+      @mixin text-l;
+    }
+    &_xxl {
+      padding: 6px 12px;
+      @mixin text-xxl
     }
   }
 }
@@ -41,7 +58,8 @@
 :root {
   --chips-shape-rounded-default: 6px;
   --chips-size-s-shape-rounded: 6px;
-  --chips-size-m-shape-rounded: 8px;
-  --chips-size-l-shape-rounded: 12px;
-  --chips-size-xl-shape-rounded: 16px;
+  --chips-size-m-shape-rounded: 6px;
+  --chips-size-l-shape-rounded: 6px;
+  --chips-size-xl-shape-rounded: 6px;
+  --chips-size-xxl-shape-rounded: 6px;
 }

package/dist/css/components/Dropdown/Dropdown.css

@@ -1,13 +1,9 @@
 .dropdown {
   display: flex;
-  align-items: center;
-  gap: 8px;
   position: relative;
   &__wrapper {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin: 16px 0 0 0;
+    padding: 12px 0;
+    gap: 8px;
   }
 }
 .dropdown {
@@ -16,28 +12,18 @@
       ^^&__wrapper {
         animation-name: dropDownAnimationClose;
       }
-      ^^&__button {
-        & .button__icon {
-          animation-name: dropDownButtonAnimationClose;
-        }
-      }
     }
     &_open {
       ^^&__wrapper {
         animation-name: dropDownAnimationOpen;
       }
-      ^^&__button {
-        & .button__icon {
-          animation-name: dropDownButtonAnimationOpen;
-        }
-      }
     }
   }
 }
 .dropdown {
   &_shape {
     &_rounded {
-      border-radius: 4px;
+      border-radius: 12px;
       position: relative;
     }
   }
@@ -52,7 +38,24 @@
 .dropdown {
   &&_state_open {
     ^&__wrapper {
-
     }
   }
 }
+.dropdown {
+  &__item {
+    min-width: 240px;
+    &-label {
+      display: block;
+    }
+    &_size {
+      @each $size in normal, compact {
+        &_$(size) {
+          ^^&-label {
+            padding: var(--dropdown-item-size-$(size)-padding);
+            gap: var(--dropdown-item-size-$(size)-gap);
+          }
+        }
+      }
+    }
+}
+}

package/dist/css/components/Fader/Fader.css

@@ -5,7 +5,6 @@
   top: 0;
   z-index: 1;
   position: absolute;
-  background: red;
 }
 .fader {
   &&_state {

package/dist/css/components/Grid/Grid.css

@@ -206,3 +206,8 @@
     }
   }
 }
+.grid {
+  &__row {
+    display: grid;
+  }
+}

package/dist/css/components/Grid/css/__row/grid__row.css

@@ -0,0 +1,5 @@
+.grid {
+  &__row {
+    display: grid;
+  }
+}