@itcase/ui 1.3.11 → 1.3.13

package/dist/stories/Grid.stories.js

@@ -1,202 +0,0 @@
-import { Grid, GridItem, GridRow } from '../../Grid'
-import { argTypes, parameters } from './args'
-
-export default {
-  argTypes: {
-    ...argTypes,
-  },
-  component: Grid,
-  parameters: {
-    ...parameters,
-  },
-  title: 'Layout / Grid / Variants',
-}
-
-const Default = {
-  args: {
-    width: '600',
-    height: '400',
-    padding: '20',
-    gap: 10,
-    borderColor: 'surfaceBorderTertiary',
-  },
-}
-
-export const Regular = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <GridRow gap="10" gridTemplateColumns="1fr 1fr 1fr">
-          <GridItem fill="accentPrimary" padding="20">
-            1
-          </GridItem>
-          <GridItem fill="primaryPrimary" padding="20">
-            2
-          </GridItem>
-          <GridItem fill="secondaryPrimary" padding="20">
-            3
-          </GridItem>
-        </GridRow>
-        <GridRow gap="10" gridTemplateColumns="1fr 1fr 1fr">
-          <GridItem fill="infoPrimary" padding="20">
-            4
-          </GridItem>
-
-          <GridItem fill="surfaceQuaternary" padding="20">
-            5
-          </GridItem>
-          <GridItem fill="gradientPrimary" padding="20">
-            6
-          </GridItem>
-        </GridRow>
-      </>
-    ),
-  },
-}
-
-export const VariantOne = {
-  args: {
-    ...Default.args,
-    children: (
-      <GridRow gap="10" gridTemplateColumns="1fr 1fr 1fr">
-        <GridItem fill="accentPrimary" padding="20">
-          1
-        </GridItem>
-        <GridItem fill="primaryPrimary" padding="20">
-          2
-        </GridItem>
-        <GridItem fill="secondaryPrimary" padding="20">
-          3
-        </GridItem>
-      </GridRow>
-    ),
-  },
-}
-
-export const VariantTwo = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
-          <GridItem fill="accentPrimary" padding="20">
-            1
-          </GridItem>
-          <GridItem fill="primaryPrimary" padding="20">
-            2
-          </GridItem>
-        </GridRow>
-        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
-          <GridItem fill="secondaryPrimary" padding="20">
-            3
-          </GridItem>
-          <GridItem fill="infoPrimary" padding="20">
-            4
-          </GridItem>
-        </GridRow>
-      </>
-    ),
-  },
-}
-
-export const VariantThree = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
-          <GridItem fill="accentPrimary" padding="20" gridRow="span 2">
-            1
-          </GridItem>
-          <GridItem fill="primaryPrimary" padding="20">
-            2
-          </GridItem>
-          <GridItem fill="secondaryPrimary" padding="20">
-            3
-          </GridItem>
-        </GridRow>
-      </>
-    ),
-  },
-}
-
-export const VariantFour = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
-          <GridItem fill="accentPrimary" padding="20" gridColumn="span 2">
-            1
-          </GridItem>
-          <GridItem fill="primaryPrimary" padding="20">
-            2
-          </GridItem>
-          <GridItem fill="secondaryPrimary" padding="20">
-            3
-          </GridItem>
-        </GridRow>
-      </>
-    ),
-  },
-}
-
-export const VariantFive = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
-          <GridItem fill="accentPrimary" padding="20" gridColumn="span 2">
-            1
-          </GridItem>
-          <GridItem fill="primaryPrimary" padding="20">
-            2
-          </GridItem>
-          <GridItem fill="secondaryPrimary" padding="20" gridRow="span 2">
-            3
-          </GridItem>
-          <GridItem fill="infoPrimary" padding="20">
-            4
-          </GridItem>
-          <GridItem fill="surfaceQuaternary" padding="20" gridColumn="span 2">
-            5
-          </GridItem>
-        </GridRow>
-      </>
-    ),
-  },
-}
-
-export const VariantSix = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <GridRow gap="10" gridTemplateColumns="1fr 1fr 1fr">
-          <GridItem fill="accentPrimary" padding="20">
-            1
-          </GridItem>
-          <GridItem fill="primaryPrimary" padding="20" gridColumn="span 2">
-            2
-          </GridItem>
-
-          <GridItem fill="secondaryPrimary" padding="20" gridColumn="span 2">
-            3
-          </GridItem>
-          <GridItem fill="infoPrimary" padding="20" gridRow="span 2">
-            4
-          </GridItem>
-
-          <GridItem fill="surfaceQuaternary" padding="20">
-            5
-          </GridItem>
-          <GridItem fill="gradientPrimary" padding="20">
-            6
-          </GridItem>
-        </GridRow>
-      </>
-    ),
-  },
-}

package/dist/stories/Group.stories.js

@@ -1,151 +0,0 @@
-import {
-  directionProps,
-  fillProps,
-  shapeProps,
-  stackingProps,
-  widthProps,
-  wrapProps,
-} from '../../../constants'
-import { badgeAppearance, badgeConfig } from '../../Badge'
-import { Tab, tabConfig } from '../Tab'
-import { tabAppearance } from '../Tab.appearance'
-import { TabGroup } from '../TabGroup'
-
-badgeConfig.setAppearance(badgeAppearance)
-tabConfig.setAppearance(tabAppearance)
-
-const tabs = {
-  1: {
-    isActive: true,
-    badgeValue: 3,
-    label: 'Все',
-  },
-  2: {
-    isActive: false,
-    badgeValue: null,
-    label: 'Непрочитанные',
-  },
-  3: {
-    isActive: false,
-    badgeValue: null,
-    label: 'Прочитанные',
-  },
-}
-
-let currentTabIndex = ''
-
-function setTabIndex(index) {
-  currentTabIndex = index
-}
-
-export default {
-  argTypes: {
-    id: {
-      if: { arg: 'advancedProps' },
-    },
-    width: {
-      control: 'inline-radio',
-      options: widthProps,
-    },
-    direction: {
-      control: 'inline-radio',
-      options: directionProps,
-    },
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    columns: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    horizontalScroll: {
-      control: 'boolean',
-    },
-    set: {
-      if: { arg: 'advancedProps' },
-    },
-    shape: {
-      control: 'select',
-      if: { arg: 'advancedProps' },
-      options: shapeProps,
-    },
-    stacking: {
-      control: 'inline-radio',
-      if: { arg: 'advancedProps' },
-      options: stackingProps,
-    },
-    wrap: {
-      control: 'inline-radio',
-      options: wrapProps,
-    },
-  },
-  component: TabGroup,
-  parameters: {
-    controls: {
-      exclude: [
-        'direction',
-        'directionDesktop',
-        'directionMobile',
-        'directionTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'contentAlign',
-        'contentAlignDesktop',
-        'contentAlignMobile',
-        'contentAlignTablet',
-        'stackingDesktop',
-        'stackingMobile',
-        'stackingTablet',
-        'wrapDesktop',
-        'wrapMobile',
-        'wrapTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'spaceBetweenItems',
-        'spaceBetweenItemsDesktop',
-        'spaceBetweenItemsMobile',
-        'spaceBetweenItemsTablet',
-        'widthDesktop',
-        'widthMobile',
-        'widthTablet',
-        'columnsDesktop',
-        'columnsMobile',
-        'columnsTablet',
-      ],
-    },
-  },
-  title: 'Atoms / Tab / TabGroup',
-}
-
-export const Default = {
-  args: {
-    children: (
-      <>
-        {Object.entries(tabs).map(([index, tabItem]) => (
-          <Tab
-            key={index}
-            labelTextSize="s"
-            appearance="any"
-            badgeAppearance="accent"
-            badgeSize="xs"
-            badgeTextSize="xxs"
-            badgeValue={Boolean(tabItem.badgeValue) && tabItem.badgeValue}
-            dividerFill={tabItem.isActive ? 'surfaceItemAccent' : 'surfaceTertiary'}
-            label={tabItem.label}
-            labelColor={tabItem.isActive ? 'surfaceTextAccent' : 'surfaceTextPrimary'}
-            size="l"
-            isActive={index === currentTabIndex}
-            onClick={() => setTabIndex(index)}
-          />
-        ))}
-      </>
-    ),
-    direction: 'horizontal',
-  },
-}

package/dist/stories/Icon.stories.js

@@ -1,193 +0,0 @@
-import {
-  borderColorHoverProps,
-  borderColorProps,
-  borderTypeProps,
-  borderWidthProps,
-  fillHoverProps,
-  fillProps,
-  shapeProps,
-  sizePXProps,
-} from '../../../constants'
-import { Badge, badgeAppearance, badgeConfig } from '../../Badge'
-import { Icon, iconConfig } from '../Icon'
-import { iconAppearance } from '../Icon.appearance'
-
-badgeConfig.setAppearance(badgeAppearance)
-iconConfig.setAppearance(iconAppearance)
-
-export default {
-  argTypes: {
-    borderWidth: {
-      control: 'select',
-      options: borderWidthProps,
-    },
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    advancedProps: { control: 'boolean' },
-    borderColorHover: {
-      control: 'select',
-      options: borderColorHoverProps,
-    },
-    borderType: {
-      control: 'inline-radio',
-      options: borderTypeProps,
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    dataTour: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    fillHover: {
-      control: 'select',
-      options: fillHoverProps,
-    },
-    fillSize: {
-      control: 'select',
-      options: sizePXProps,
-    },
-    iconFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    iconFillHover: {
-      control: 'select',
-      options: fillProps,
-    },
-    iconSize: {
-      control: 'select',
-      options: sizePXProps,
-    },
-    LinkComponent: {
-      if: { arg: 'advancedProps' },
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    SvgImage: {
-      if: { arg: 'advancedProps' },
-    },
-    onClick: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Icon,
-  parameters: {
-    controls: {
-      exclude: [
-        'textColor',
-        'textColorHover',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'fillSizeDesktop',
-        'fillSizeMobile',
-        'fillSizeTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'size',
-        'sizeDesktop',
-        'sizeMobile',
-        'sizeTablet',
-        'height',
-        'href',
-        'link',
-        'linkRel',
-        'linkTarget',
-        'width',
-      ],
-    },
-  },
-  title: 'Atoms / Icon',
-}
-
-export const Default = {
-  args: {
-    fill: 'surfaceSecondary',
-    fillHover: 'surfaceSecondaryHover',
-    fillSize: '40',
-    iconFill: 'surfaceItemPrimary',
-    iconSize: '24',
-    imageSrc: 'assets/24/Bell.svg',
-    shape: 'circular',
-  },
-}
-
-export const WithBadge = {
-  args: {
-    Badge: <Badge position="absolute" appearance="accent" size="xs" textSize="xxs" value={3} />,
-    fill: 'surfaceSecondary',
-    fillHover: 'surfaceSecondaryHover',
-    fillSize: '40',
-    iconFill: 'surfaceItemPrimary',
-    iconSize: '24',
-    imageSrc: 'assets/24/Bell.svg',
-    shape: 'circular',
-  },
-}
-
-export const WithTooltip = {
-  args: {
-    width: '16',
-    alignment: 'topRight',
-    iconFill: 'surfaceItemPrimary',
-    imageSrc: 'assets/16/Search.svg',
-    showTooltip: true,
-    tooltipAppearance: 'surfaceTertiary',
-    tooltipText: 'Search',
-    tooltipTextSize: 'm',
-  },
-}
-
-export const Size14 = {
-  args: {
-    fill: 'surfaceSecondary',
-    fillHover: 'surfaceSecondaryHover',
-    fillSize: '24',
-    iconFill: 'surfaceItemPrimary',
-    iconSize: '14',
-    imageSrc: 'assets/14/Remove.svg',
-    shape: 'circular',
-  },
-}
-
-export const Size16 = {
-  args: {
-    fill: 'surfaceSecondary',
-    fillHover: 'surfaceSecondaryHover',
-    fillSize: '32',
-    iconFill: 'surfaceItemPrimary',
-    iconSize: '16',
-    imageSrc: 'assets/16/Search.svg',
-    shape: 'circular',
-  },
-}
-
-export const Size24 = {
-  args: {
-    fill: 'surfaceSecondary',
-    fillHover: 'surfaceSecondaryHover',
-    fillSize: '40',
-    iconFill: 'surfaceItemPrimary',
-    iconSize: '24',
-    imageSrc: 'assets/24/Delete.svg',
-    shape: 'circular',
-  },
-}
-
-export const Size40 = {
-  args: {
-    fillHover: 'surfaceSecondaryHover',
-    iconSize: '40',
-    imageSrc: 'assets/40/Close.svg',
-    shape: 'circular',
-  },
-}

package/dist/stories/Image.stories.js

@@ -1,134 +0,0 @@
-import { borderColorProps, fillProps, shapeProps } from '../../../constants'
-import { Image } from '../Image'
-
-export default {
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    resizeMode: {
-      control: 'inline-radio',
-      options: [null, 'cover', 'contain'],
-    },
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    before: {
-      if: { arg: 'advancedProps' },
-    },
-    border: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    borderColorImage: {
-      if: { arg: 'advancedProps' },
-    },
-    caption: {
-      if: { arg: 'advancedProps' },
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    imageClassName: {
-      if: { arg: 'advancedProps' },
-    },
-    imageHeight: {
-      if: { arg: 'advancedProps' },
-    },
-    imageWidth: {
-      if: { arg: 'advancedProps' },
-    },
-    imgWrapClassName: {
-      if: { arg: 'advancedProps' },
-    },
-    overlay: {
-      if: { arg: 'advancedProps' },
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    style: {
-      if: { arg: 'advancedProps' },
-    },
-    title: {
-      if: { arg: 'advancedProps' },
-    },
-    type: {
-      control: 'inline-radio',
-      options: [null, 'cover'],
-    },
-    onClick: {
-      if: { arg: 'advancedProps' },
-    },
-    onError: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Image,
-  parameters: {
-    controls: {
-      exclude: [
-        'borderColorImageDesktop',
-        'borderColorImageMobile',
-        'borderColorImageTablet',
-        'resizeModeDesktop',
-        'resizeModeMobile',
-        'resizeModeTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'сontentX',
-        'сontentXDesktop',
-        'сontentXMobile',
-        'сontentXTablet',
-        'сontentY',
-        'сontentYDesktop',
-        'сontentYMobile',
-        'сontentYTablet',
-        'imageWidthDesktop',
-        'imageWidthMobile',
-        'imageWidthTablet',
-      ],
-    },
-  },
-  title: 'Atoms / Image',
-}
-
-const Default = {
-  args: {
-    resizeMode: 'contain',
-    alt: 'placeholder',
-    fill: 'surfaceTertiary',
-    shape: 'rounded',
-    src: 'assets/img/tomato.png',
-  },
-}
-
-export const Rectangular = {
-  args: {
-    ...Default.args,
-  },
-}
-
-export const Circular = {
-  args: {
-    ...Default.args,
-    width: 150,
-    height: 150,
-    resizeMode: 'cover',
-    shape: 'circular',
-  },
-}
-
-export const SkeletonMode = {
-  args: {
-    ...Default.args,
-    mode: 'skeleton',
-  },
-}