@itcase/ui 1.0.97 → 1.0.99

package/dist/components/Tooltip.js

@@ -41,11 +41,12 @@ const tooltipConfig = {
     tooltipConfig.appearance = newComponent;
   }
 };
-function Tooltip(props) {
+const Tooltip = /*#__PURE__*/React__default.default.forwardRef(function Tooltip(props, ref) {
   const {
     before,
     after,
     appearance,
+    children,
     className,
     text,
     title,
@@ -57,6 +58,37 @@ function Tooltip(props) {
     textColor,
     textSize
   } = props;
+  const tooltipTimeoutHideRef = React.useRef(null);
+  const isTooltipCloseAnimationInProgressRef = React.useRef(false);
+  const [isTooltipVisible, setIsTooltipVisible] = React.useState(null);
+  const openTooltip = React.useCallback(() => {
+    if (!isTooltipCloseAnimationInProgressRef.current) {
+      clearTimeout(tooltipTimeoutHideRef.current);
+      setIsTooltipVisible(true);
+    }
+  }, []);
+  const closeTooltip = React.useCallback(() => {
+    // Make a small delay to be able to move cursor on the tooltip without
+    // triggering a close, because the label and the tooltip have  space between
+    tooltipTimeoutHideRef.current = setTimeout(() => {
+      setIsTooltipVisible(prevState => {
+        const newState = false;
+        if (prevState === true) {
+          isTooltipCloseAnimationInProgressRef.current = true;
+        }
+        return newState;
+      });
+    }, 250);
+  }, []);
+  const onAnimationEnd = React.useCallback(() => {
+    isTooltipCloseAnimationInProgressRef.current = false;
+  }, []);
+  React.useImperativeHandle(ref, () => ({
+    openTooltip,
+    closeTooltip
+  }), [openTooltip, closeTooltip]);
+
+  /* STYLES */
   const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
@@ -89,31 +121,50 @@ function Tooltip(props) {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'alignment_',
+    propsKey: 'alignment'
+  });
   const {
     styles: tooltipStyles
   } = useStyles.useStyles(props);
+  const tooltipAppearanceItem = tooltipConfig.appearance[appearance] || {};
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'tooltip', fillClass || tooltipConfig.appearance[appearance] && `fill_${tooltipConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, alignDirectionClass, alignClass, borderWidthClass, borderColorClass, borderTypeClass, sizeClass, arrowPosition && `tooltip_type_arrow tooltip_arrow_position_${arrowPosition}`, type && `tooltip_type_${type}`, set && `tooltip_set_${set}`),
-    style: tooltipStyles
+    className: clsx__default.default(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass || tooltipAppearanceItem.fillClass && `fill_${tooltipAppearanceItem.fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && `tooltip_type_arrow tooltip_arrow_position_${arrowPosition}`, type && `tooltip_type_${type}`, set && `tooltip_set_${set}`, widthClass),
+    style: tooltipStyles,
+    onAnimationEnd: onAnimationEnd
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: "tooltip__inner"
   }, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
     className: "tooltip__title",
     size: titleSize,
-    textColor: titleTextColor || tooltipConfig.appearance[appearance]?.titleTextColor
+    textColor: titleTextColor || tooltipAppearanceItem.titleTextColor
   }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tooltip__text",
     size: textSize,
-    textColor: textColor || tooltipConfig.appearance[appearance]?.textColor
-  }, text)), after);
-}
+    textColor: textColor || tooltipAppearanceItem.textColor
+  }, text), children), after);
+});
 Tooltip.propTypes = {
+  after: PropTypes__default.default.string,
+  appearance: PropTypes__default.default.string,
+  arrowPosition: PropTypes__default.default.string,
+  before: PropTypes__default.default.string,
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
   fillTablet: PropTypes__default.default.oneOf(fill.default),
+  set: PropTypes__default.default.string,
   shape: PropTypes__default.default.oneOf(shape.default),
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
@@ -128,20 +179,42 @@ Tooltip.propTypes = {
   textSizeDesktop: PropTypes__default.default.oneOf(size.default),
   textSizeMobile: PropTypes__default.default.oneOf(size.default),
   textSizeTablet: PropTypes__default.default.oneOf(size.default),
+  title: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.string,
+  titleTextColor: PropTypes__default.default.string,
   type: PropTypes__default.default.string
 };
-Tooltip.defaultProps = {
-  label: 'Label'
-};
+Tooltip.defaultProps = {};
 Tooltip.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Tooltip",
   "props": {
-    "label": {
-      "defaultValue": {
-        "value": "'Label'",
-        "computed": false
+    "after": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "appearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "arrowPosition": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "string"
       },
       "required": false
     },
@@ -195,6 +268,13 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "shape": {
       "description": "",
       "type": {
@@ -319,6 +399,27 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "type": {
       "description": "",
       "type": {

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

@@ -14,6 +14,13 @@
       bottom: 0;
     }
   }
+  &__dropdown {
+    margin: 10px 0 0 0;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    z-index: 100;
+  }
 }
 .avatar {
   &&_mode {

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

@@ -1,5 +1,6 @@
 .cell {
   &__wrapper {
+    min-width: auto;
     ^&__data {
       display: flex;
       flex-flow: row nowrap;

package/dist/css/components/Group/Group.css

@@ -74,6 +74,14 @@
   }
 }
 
+.group {
+  ^& .width {
+    &_fixed {
+      width: 300px;
+    }
+  }
+}
+
 .group {
   &_wrap {
     @each $val in nowrap, wrap, wrap-reverse {

package/dist/css/components/Label/Label.css

@@ -1,11 +1,14 @@
 .label {
   position: relative;
-  overflow: hidden;
   display: inline-flex;
   &__inner {
     width: 100%;
     font-size: 0;
     line-height: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
   }
 }
 .label {
@@ -59,6 +62,11 @@
     }
   }
 }
+div.label {
+  &__tooltip {
+    z-index: 12;
+  }
+}
 .label {
   &&_text-align {
     &_left {

package/dist/css/components/Tooltip/Tooltip.css

@@ -1,7 +1,9 @@
 .tooltip {
+  width: fit-content;
   position: relative;
   display: flex;
-  animation: 0.5s tooltipShowAnimation ease;
+  visibility: hidden;
+  opacity: 0%;
 }
 
 @keyframes tooltipShowAnimation {
@@ -15,6 +17,17 @@
   }
 }
 
+@keyframes tooltipHideAnimation {
+  0% {
+    visibility: visible;
+    opacity: 100%;
+  }
+  100% {
+    visibility: hidden;
+    opacity: 0%;
+  }
+}
+
 .tooltip {
   &_size {
     @each $size in s, m, l {
@@ -44,16 +57,17 @@
     ^&__inner {
       position: relative;
       background-color: inherit;
+      z-index: 1;
     }
     &::after {
       content: '';
       display: block;
       position: absolute;
-      background-color: inherit;
+      background-color: var(--tooltip-arrow-color, #fff);
       width: var(--tooltip-arrow-width);
       height: var(--tooltip-arrow-height);
       border-radius: var(--tooltip-arrow-radius);
-      z-index: -1;
+      z-index: 0;
     }
   }
 }
@@ -91,6 +105,24 @@
   }
 }
 
+.tooltip {
+  &&_state_close {
+    visibility: hidden;
+    animation-duration: 0.2s;
+    animation-name: tooltipHideAnimation;
+    opacity: 0%;
+  }
+}
+
+.tooltip {
+  &&_state_open {
+    visibility: visible;
+    animation-duration: 0.5s;
+    animation-name: tooltipShowAnimation;
+    opacity: 100%;
+  }
+}
+
 :root {
   --tooltip-size-m-padding: 0;
   --tooltip-size-s-padding: 0;
@@ -101,4 +133,6 @@
   --tooltip-arrow-width: 14px;
   --tooltip-arrow-height: 14px;
   --tooltip-arrow-radius: 2px;
+
+  --tooltip-arrow-color: var(--color-surface-primary);
 }

package/dist/stories/Avatar.stories.js

@@ -0,0 +1,179 @@
+import { Avatar } from '@itcase/ui/components/Avatar'
+import {
+  fillHoverProps,
+  fillProps,
+  iconFillSizeProps,
+  iconSizeProps,
+  shapeProps,
+  sizePXProps,
+  textColorProps,
+  textSizeProps,
+  textWeightProps,
+} from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Avatar',
+  component: Avatar,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    src: {
+      type: 'select',
+      options: ['assets/avatar/woman.png', 'assets/avatar/man.png'],
+      if: { arg: 'type', eq: 'image' },
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    shape: {
+      control: 'inline-radio',
+      options: shapeProps,
+    },
+    iconSrc: {
+      control: 'select',
+      options: [null, 'assets/40/close.svg'],
+    },
+    textSize: {
+      control: 'select',
+      options: textSizeProps,
+      if: { arg: 'type', eq: 'text' },
+    },
+    textColor: {
+      control: 'select',
+      options: textColorProps,
+      if: { arg: 'type', eq: 'text' },
+    },
+    textWeight: {
+      control: 'select',
+      options: textWeightProps,
+      if: { arg: 'type', eq: 'text' },
+    },
+
+    iconFill: {
+      control: 'select',
+      options: fillProps,
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconFillHover: {
+      options: fillHoverProps,
+      control: 'select',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconItemFill: {
+      options: fillProps,
+      control: 'select',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconSize: {
+      options: iconSizeProps,
+      control: 'inline-radio',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconShape: {
+      options: shapeProps,
+      control: 'inline-radio',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconFillSize: {
+      options: iconFillSizeProps,
+      control: 'inline-radio',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+      if: { arg: 'type', eq: 'text' },
+    },
+    size: {
+      options: sizePXProps,
+      control: 'inline-radio',
+    },
+    type: {
+      options: ['image', 'text'],
+      control: 'inline-radio',
+    },
+    firstName: {
+      if: { arg: 'type', eq: 'text' },
+    },
+    secondName: {
+      if: { arg: 'type', eq: 'text' },
+    },
+    mode: {
+      options: [null, 'skeleton'],
+      control: 'inline-radio',
+    },
+  },
+  args: {
+    advancedProps: false,
+    onClick: '',
+    className: '',
+    children: [],
+    shape: 'circular',
+    fill: 'surfaceTertiary',
+    size: 96,
+  },
+}
+
+const ImageProps = {
+  src: 'assets/avatar/woman.png',
+  type: 'image',
+}
+
+const IconProps = {
+  iconSrc: 'assets/40/close.svg',
+  iconSize: 40,
+  iconFill: 'accentPrimary',
+  iconFillHover: 'accentPrimaryHover',
+  iconFillSize: 40,
+  iconItemFill: 'accentItemPrimary',
+  iconItemFillHover: 'accentItemPrimaryHover',
+  iconShape: 'circular',
+}
+
+export const Default = {
+  args: {
+    ...ImageProps,
+    ...IconProps,
+  },
+}
+
+export const Image = {
+  args: {
+    ...ImageProps,
+  },
+}
+
+export const ImageWithIcon = {
+  args: {
+    ...ImageProps,
+    ...IconProps,
+  },
+}
+
+export const Text = {
+  args: {
+    firstName: 'John',
+    secondName: 'Doe',
+    textWeight: 600,
+    type: 'text',
+  },
+}
+
+export const TextWithIcon = {
+  args: {
+    ...Text.args,
+    ...IconProps,
+  },
+}
+
+export const SkeletonMode = {
+  args: {
+    ...Text.args,
+    mode: 'skeleton',
+  },
+}