@itcase/ui 1.0.100 → 1.0.102

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

@@ -14,7 +14,7 @@
       );
       background-size: 200%;
       animation: badge-skeleton 3s infinite linear;
-      ^^^^&.text {
+      & .text {
         color: transparent;
       }
     }

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

@@ -2,7 +2,8 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
-  column-gap: 4px;
+  column-gap: var(--checkbox-column-gap, 4px);
+  row-gap: var(--checkbox-row-gap, 0);
   &__item {
     min-width: 16px;
     min-height: 16px;

package/dist/css/components/DatePicker/DatePicker.css

@@ -1113,7 +1113,7 @@
 .datepicker {
   width: 100%;
   border-radius: var(--date-picker-day-border-radius);
-  ^^^^^& .input {
+  & .input {
     border-radius: var(--date-picker-day-border-radius);
   }
 }

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

@@ -85,7 +85,7 @@
 .group {
   &_wrap {
     @each $val in nowrap, wrap, wrap-reverse {
-      &_wrap_$(val) {
+      &_$(val) {
         flex-wrap: $(val);
       }
     }

package/dist/css/components/Menu/Menu.css

@@ -5,9 +5,9 @@
 }
 .menu {
   &_columns {
-    @each $val in 1,2,3,4,5,6,7,8,9,10 {
+    @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
       &_$(val) {
-        & ^^^& {
+        & .menu {
           display: block;
           & ^^^&__wrapper {
             display: grid;
@@ -54,3 +54,4 @@
     }
   }
 }
+@improt './css/menu_type_border.css';

package/dist/css/components/MenuItem/MenuItem.css

@@ -34,6 +34,32 @@
   }
 }
 
+.menu-item {
+  &_set {
+    &_filter {
+      cursor: pointer;
+      padding: var(--menu-item-set-filter-padding, 0);
+      color: var(--color-surface-text-primary);
+      &:not(:last-child) {
+        border-right: var(--menu-item-set-filter-border-right: initial);
+      }
+      &_active {
+        & span {
+          color: var(--menu-item-set-filter-active-color, initial);
+        }
+      }
+    }
+  }
+}
+
+.menu-item {
+  &_set {
+    &_subitem {
+      transform: translate(var(--menu-item-set-subitem-padding-left, 32px), 0);
+    }
+  }
+}
+
 .menu-item {
   &_shape {
     &_rounded {

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

@@ -139,6 +139,7 @@
 .select {
   &__control {
     ^&__indicators {
+      margin-left: 8px;
       display: flex;
       align-items: center;
       align-self: center;
@@ -355,5 +356,9 @@
         position: relative;
       }
     }
+    & .css-mohuvp-dummyInput-DummyInput {
+      position: absolute;
+      bottom: 0;
+    }
   }
 }

package/dist/css/components/Select/css/__indicators/select__indicators.css

@@ -1,6 +1,7 @@
 .select {
   &__control {
     ^&__indicators {
+      margin-left: 8px;
       display: flex;
       align-items: center;
       align-self: center;

package/dist/css/components/Select/css/__value-container/select__value-container.css

@@ -13,5 +13,9 @@
         position: relative;
       }
     }
+    & .css-mohuvp-dummyInput-DummyInput {
+      position: absolute;
+      bottom: 0;
+    }
   }
 }

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