@itcase/ui 1.0.99 → 1.0.101

package/dist/css/components/Pagination/Pagination.css

@@ -13,11 +13,12 @@
   }
 }
 .pagination {
+  margin: var(--paginator-margin, initial);
   &__item {
-    width: 40px;
-    height: 40px;
+    width: var(--paginator-item-width, 40px);
+    height: var(--paginator-item-height, 40px);
     background: var(--paginator-item-default-fill);
-    border: solid 1px var(--paginator-item-default-border);
+    border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
     border-radius: var(--paginator-item-border-radius, 6px);
     display: flex;
     transition: var(--paginator-item-transition);
@@ -74,6 +75,7 @@
         & svg {
           fill: var(--paginator-item-disabled-icon);
         }
+        display: var(--pagination-item-state-disabled-display, initial);
       }
     }
   }

package/dist/css/components/Pagination/css/__item/pagination__item.css

@@ -1,9 +1,10 @@
 .pagination {
+  margin: var(--paginator-margin, initial);
   &__item {
-    width: 40px;
-    height: 40px;
+    width: var(--paginator-item-width, 40px);
+    height: var(--paginator-item-height, 40px);
     background: var(--paginator-item-default-fill);
-    border: solid 1px var(--paginator-item-default-border);
+    border: var(--paginator-item-border, solid 1px var(--paginator-item-default-border));
     border-radius: var(--paginator-item-border-radius, 6px);
     display: flex;
     transition: var(--paginator-item-transition);

package/dist/css/components/Pagination/css/__item/pagination__item_state_disabled.css

@@ -13,6 +13,7 @@
         & svg {
           fill: var(--paginator-item-disabled-icon);
         }
+        display: var(--pagination-item-state-disabled-display, initial);
       }
     }
   }

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

@@ -1,6 +1,13 @@
 .tile {
   &__wrapper {
     position: relative;
+    flex: var(--tile-wrapper-flex, auto);
+    & .group {
+      flex: var(--tile-wrapper-group-flex, auto);
+    }
+  }
+  &__title {
+    margin-right: var(--tile-title-margin-right, initial);
   }
 }
 .tile {

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

@@ -54,20 +54,20 @@
 
 .tooltip {
   &_type_arrow {
-    ^&__inner {
-      position: relative;
-      background-color: inherit;
-      z-index: 1;
-    }
     &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      background-color: var(--tooltip-arrow-color, #fff);
       width: var(--tooltip-arrow-width);
       height: var(--tooltip-arrow-height);
       border-radius: var(--tooltip-arrow-radius);
+      position: absolute;
+      content: '';
+      display: block;
       z-index: 0;
+      background-color: var(--tooltip-arrow-color, #fff);
+    }
+    ^&__inner {
+      position: relative;
+      background-color: inherit;
+      z-index: 1;
     }
   }
 }

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/Accordion.stories.js

@@ -0,0 +1,88 @@
+import React from 'react'
+
+import { Accordion, AccordionItem } from '@itcase/ui/components/Accordion'
+import { borderColorProps, directionProps, fillProps, shapeProps } from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Accordion / Default',
+  component: Accordion,
+  parameters: {
+    controls: {
+      exclude: [
+        'directionDesktop',
+        'directionMobile',
+        'directionTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'initial',
+        'onClickItem',
+        'items',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    borderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    direction: {
+      options: directionProps,
+      control: 'inline-radio',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    borderColor: 'accentBorderPrimary',
+    fill: 'surfaceSecondary',
+    shape: 'rounded',
+    children: (
+      <React.Fragment>
+        <AccordionItem
+          content="content 1"
+          contentFill="primaryPrimary"
+          contentTextColor="surfaceTextPrimary"
+          contentTextSize="m"
+          fillHover="accentTertiary"
+          isExpanded={true}
+          size="xs"
+          title="Title 1"
+          titleFill="secondaryPrimary"
+          titleFillHover="secondaryPrimaryHover"
+          titleTextColor="surfaceTextPrimary"
+          titleTextSize="m"
+        />
+        <AccordionItem
+          content="content 2"
+          fillHover="accentTertiary"
+          size="xs"
+          title="Title 2"
+          titleTextColor="surfaceTextPrimary"
+          titleTextSize="m"
+        />
+        <AccordionItem
+          content="content 3"
+          fillHover="accentTertiary"
+          size="xs"
+          title="Title 3"
+          titleTextColor="surfaceTextPrimary"
+          titleTextSize="m"
+        />
+      </React.Fragment>
+    ),
+  },
+}

package/dist/stories/AccordionItem.stories.js

@@ -0,0 +1,150 @@
+import { AccordionItem } from '@itcase/ui/components/Accordion'
+
+import {
+  borderColorProps,
+  fillProps,
+  fillHoverProps,
+  shapeProps,
+  sizeProps,
+  textSizeProps,
+  textColorProps,
+  textWeightProps,
+} from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Accordion / Item',
+  component: AccordionItem,
+  parameters: {
+    controls: {
+      exclude: [
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'iconFillDesktop',
+        'iconFillMobile',
+        'iconFillTablet',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    afterContent: {
+      if: { arg: 'advancedProps' },
+    },
+    beforeContent: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    id: {
+      if: { arg: 'advancedProps' },
+    },
+    isExpanded: {
+      control: 'boolean',
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    iconFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    borderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    contentBorderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    titleBorderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    contentFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    titleFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    titleFillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    contentTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    contentTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    contentTextWeight: {
+      options: textWeightProps,
+      control: 'select',
+    },
+    size: {
+      options: ['xs', 'l'],
+      control: 'inline-radio',
+    },
+    titleTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    titleTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    titleTextWeight: {
+      options: textWeightProps,
+      control: 'select',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    content: 'content 1',
+    title: 'Title 1',
+    contentTextColor: 'surfaceTextPrimary',
+    contentTextSize: 'm',
+    titleTextColor: 'surfaceTextPrimary',
+    titleTextSize: 'm',
+  },
+}
+
+export const Closed = {
+  args: {
+    ...Default.args,
+    isExpanded: false,
+  },
+}
+
+export const Opened = {
+  args: {
+    ...Default.args,
+    isExpanded: true,
+  },
+}

package/dist/stories/Badge.stories.js

@@ -0,0 +1,116 @@
+import { Badge, badgeConfig } from '@itcase/ui/components/Badge'
+import {
+  borderColorHoverProps,
+  borderColorProps,
+  borderTypeProps,
+  borderWidthProps,
+  fillProps,
+  shapeProps,
+  sizeProps,
+  textColorProps,
+} from '@itcase/ui/constants'
+
+import badgeAppearance from 'src/components/Badge/appearance.json'
+
+badgeConfig.setAppearance(badgeAppearance)
+
+export default {
+  title: 'Atoms / Badge',
+  component: Badge,
+  argTypes: {
+    appearance: {
+      options: [null, 'accent', 'secondary', 'primary'],
+      control: 'inline-radio',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    size: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    textSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    textColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    borderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    borderType: {
+      options: borderTypeProps,
+      control: 'inline-radio',
+    },
+    borderColorHover: {
+      options: borderColorHoverProps,
+      control: 'select',
+    },
+    borderWidth: {
+      options: borderWidthProps,
+      control: 'select',
+    },
+    advancedProps: { control: 'boolean' },
+    after: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    type: {
+      if: { arg: 'advancedProps' },
+    },
+    mode: {
+      options: [null, 'skeleton'],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    shape: 'circular',
+    size: 's',
+    textSize: 'xs',
+    value: 3,
+  },
+}
+
+export const Accent = {
+  args: {
+    ...Default.args,
+    appearance: 'accent',
+  },
+}
+
+export const Secondary = {
+  args: {
+    ...Default.args,
+    appearance: 'secondary',
+  },
+}
+
+export const Primary = {
+  args: {
+    ...Default.args,
+    appearance: 'primary',
+  },
+}
+
+export const SkeletonMode = {
+  args: {
+    ...Default.args,
+    mode: 'skeleton',
+  },
+}