@itcase/ui 1.0.97 → 1.0.100

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/Response/Response.css

@@ -0,0 +1,21 @@
+.response {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  &__desc {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  }
+  &__button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  }
+}

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/{floating-ui.dom-D_Zct5p2.js → floating-ui.dom-C34fOuI9.js}

@@ -844,8 +844,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   if (domElement) {
     const win = getWindow(domElement);
     const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
-    let currentIFrame = win.frameElement;
-    while (currentIFrame && offsetParent && offsetWin !== win) {
+    let currentWin = win;
+    let currentIFrame = currentWin.frameElement;
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle(currentIFrame);
@@ -857,7 +858,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       height *= iframeScale.y;
       x += left;
       y += top;
-      currentIFrame = getWindow(currentIFrame).frameElement;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = currentWin.frameElement;
     }
   }
   return rectToClientRect({
@@ -869,27 +871,14 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
 }
 
 const topLayerSelectors = [':popover-open', ':modal'];
-function topLayer(floating) {
-  let isTopLayer = false;
-  let x = 0;
-  let y = 0;
-  function setIsTopLayer(selector) {
+function isTopLayer(floating) {
+  return topLayerSelectors.some(selector => {
     try {
-      isTopLayer = isTopLayer || floating.matches(selector);
-    } catch (e) {}
-  }
-  topLayerSelectors.forEach(selector => {
-    setIsTopLayer(selector);
-  });
-  if (isTopLayer) {
-    const containingBlock = getContainingBlock(floating);
-    if (containingBlock) {
-      const rect = containingBlock.getBoundingClientRect();
-      x = rect.x;
-      y = rect.y;
+      return floating.matches(selector);
+    } catch (e) {
+      return false;
     }
-  }
-  return [isTopLayer, x, y];
+  });
 }
 
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
@@ -899,9 +888,10 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     offsetParent,
     strategy
   } = _ref;
+  const isFixed = strategy === 'fixed';
   const documentElement = getDocumentElement(offsetParent);
-  const [isTopLayer] = elements ? topLayer(elements.floating) : [false];
-  if (offsetParent === documentElement || isTopLayer) {
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
     return rect;
   }
   let scroll = {
@@ -911,7 +901,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let scale = createCoords(1);
   const offsets = createCoords(0);
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
@@ -1102,7 +1092,7 @@ function getDimensions(element) {
   };
 }
 
-function getRectRelativeToOffsetParent(element, offsetParent, strategy, floating) {
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
   const documentElement = getDocumentElement(offsetParent);
   const isFixed = strategy === 'fixed';
@@ -1124,17 +1114,8 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy, floating
       offsets.x = getWindowScrollBarX(documentElement);
     }
   }
-  let x = rect.left + scroll.scrollLeft - offsets.x;
-  let y = rect.top + scroll.scrollTop - offsets.y;
-  const [isTopLayer, topLayerX, topLayerY] = topLayer(floating);
-  if (isTopLayer) {
-    x += topLayerX;
-    y += topLayerY;
-    if (isOffsetParentAnElement) {
-      x += offsetParent.clientLeft;
-      y += offsetParent.clientTop;
-    }
-  }
+  const x = rect.left + scroll.scrollLeft - offsets.x;
+  const y = rect.top + scroll.scrollTop - offsets.y;
   return {
     x,
     y,
@@ -1157,7 +1138,7 @@ function getTrueOffsetParent(element, polyfill) {
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
   const window = getWindow(element);
-  if (!isHTMLElement(element)) {
+  if (!isHTMLElement(element) || isTopLayer(element)) {
     return window;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
@@ -1174,7 +1155,7 @@ const getElementRects = async function (data) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
   return {
-    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy, data.floating),
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
     floating: {
       x: 0,
       y: 0,

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',
+  },
+}