@itcase/ui 1.3.12 → 1.3.13

package/dist/stories/Select.stories.js

@@ -1,333 +0,0 @@
-import {
-  borderColorHoverProps,
-  borderColorProps,
-  fillHoverProps,
-  fillProps,
-  sizeProps,
-  textColorProps,
-  textSizeProps,
-} from '../../../constants'
-import { Button } from '../../Button'
-import { Loader } from '../../Loader'
-import { Select } from '../index'
-
-export default {
-  args: {
-    elevation: 8,
-    isClearable: true,
-    isMulti: false,
-    isSearchable: false,
-    badgeAppearance: 'accent',
-    badgeSize: 'm',
-    badgeTextSize: 'm',
-    // clearIcon: icon24.Clear,
-    clearIconFill: 'surfaceItemPrimary',
-    closeMenuOnSelect: true,
-    dividerDirection: 'horizontal',
-    // optionSelected: <Icon iconFill="surfaceItemAccent" SvgImage={icon24.Check} />,
-
-    dividerFill: 'surfaceTertiary',
-    dividerSize: 'xxs',
-    // dropdownIcon: icon24.ChevronDownSmall,
-    dropdownIconFill: 'surfaceItemPrimary',
-    // error
-    errorInputBorderColor: 'errorBorderPrimary',
-    headingFill: 'surfaceSecondary',
-    headingTextColor: 'surfaceTextPrimary',
-    headingTextSize: 'm',
-
-    headingTextWeight: '600',
-    hideSelectedOptions: false,
-    inputBorderColor: 'surfaceBorderTertiary',
-    inputBorderColorHover: 'surfaceBorderQuaternary',
-    inputCaretColor: 'secondaryItemPrimary',
-
-    inputFill: 'surfacePrimary',
-
-    inputShape: 'rounded',
-    inputTextColor: 'surfaceTextPrimary',
-    inputTextSize: 'm',
-    loadingMessage: (
-      <Loader
-        width="fill"
-        height="fill"
-        fill="surfacePrimary"
-        position="absolute"
-        left="0px"
-        right="0px"
-        zIndex="1"
-        itemFill="surfaceItemAccent"
-        set="simple"
-      />
-    ),
-
-    menuItemSize: 'l',
-    multipleItemFill: 'accentPrimary',
-    multipleItemFillHover: 'accentPrimaryHover',
-    // multipleItemIcon: icon14.Remove,
-    multipleItemIconFill: 'accentItemPrimary',
-    multipleItemTextColor: 'accentTextPrimary',
-
-    multipleItemTextSize: 'm',
-
-    noOptionsSearchText: 'Ничего не найдено...',
-    noOptionsText: (
-      <Loader
-        width="fill"
-        height="fill"
-        fill="surfacePrimary"
-        position="absolute"
-        left="0px"
-        right="0px"
-        zIndex="1"
-        itemFill="surfaceItemAccent"
-        set="simple"
-      />
-    ),
-    noOptionsTextColor: 'surfaceTextPrimary',
-    noOptionsTextSize: 'm',
-
-    optionBorder: 'none',
-    optionFill: 'surfacePrimary',
-    optionFillHover: 'surfacePrimaryHover',
-    options: [
-      { label: 'Завершены', value: 'completed' },
-      { label: 'Идут торги', value: 'active' },
-      { label: 'Остановлены', value: 'stopped' },
-      { label: 'Отменены', value: 'canceled' },
-      { label: 'Планируемые', value: 'planned' },
-      { label: 'Продолжены', value: 'continued' },
-    ],
-    optionShape: 'rounded',
-
-    optionTextColor: 'surfaceTextPrimary',
-    optionTextSize: 'l',
-    placeholder: 'Выбрать...',
-
-    placeholderTextColor: 'surfaceTextQuaternary',
-
-    placeholderTextSize: 'm',
-    // appearance depending on the type of error
-    // required
-    requiredInputBorderColor: 'warningBorderPrimary',
-    showBadge: false,
-    showDivider: false,
-
-    size: 'm',
-  },
-  argTypes: {
-    elevation: {
-      control: 'inline-radio',
-      options: [1, 2, 4, 6, 8, 12, 16, 24],
-    },
-    isClearable: {
-      control: 'boolean',
-    },
-    isMulti: {
-      control: 'boolean',
-    },
-    isSearchable: {
-      control: 'boolean',
-    },
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    clearIcon: {
-      if: { arg: 'isClearable', eq: true },
-    },
-    clearIconFill: {
-      control: 'select',
-      if: { arg: 'isClearable', eq: true },
-      options: fillProps,
-    },
-    closeMenuOnSelect: {
-      control: 'boolean',
-    },
-    dividerDirection: {
-      if: { arg: 'advancedProps' },
-    },
-    dividerFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    dividerSize: {
-      control: 'inline-radio',
-      options: sizeProps,
-    },
-    dropdownIconFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    hideSelectedOptions: {
-      control: 'boolean',
-    },
-    hideValueContainer: {
-      control: 'boolean',
-    },
-    inputAfter: {
-      if: { arg: 'advancedProps' },
-    },
-    inputBefore: {
-      if: { arg: 'advancedProps' },
-    },
-    inputBorderColor: {
-      control: 'select',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: borderColorProps,
-    },
-    inputBorderColorHover: {
-      control: 'select',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: borderColorHoverProps,
-    },
-    inputFill: {
-      control: 'select',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: fillProps,
-    },
-    inputTextColor: {
-      control: 'select',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: textColorProps,
-    },
-    inputTextSize: {
-      control: 'inline-radio',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: textSizeProps,
-    },
-    menuItemSize: {
-      control: 'inline-radio',
-      options: ['xs', 's', 'm', 'l', 'xl', 'xxl'],
-    },
-    multipleItemFill: {
-      control: 'select',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: fillProps,
-    },
-    multipleItemFillHover: {
-      control: 'select',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: fillHoverProps,
-    },
-    multipleItemIcon: {
-      if: { arg: 'hideValueContainer', neq: true },
-    },
-    multipleItemIconFill: {
-      control: 'select',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: fillProps,
-    },
-    multipleItemTextColor: {
-      control: 'select',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: textColorProps,
-    },
-    multipleItemTextSize: {
-      control: 'inline-radio',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: textSizeProps,
-    },
-    noOptionsTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    noOptionsTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    optionFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    optionTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    optionTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    placeholder: {
-      if: { arg: 'hideValueContainer', neq: true },
-    },
-    placeholderTextColor: {
-      control: 'select',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: textColorProps,
-    },
-    placeholderTextSize: {
-      control: 'inline-radio',
-      if: { arg: 'hideValueContainer', neq: true },
-      options: textSizeProps,
-    },
-  },
-  component: Select,
-  parameters: {
-    controls: {
-      exclude: [
-        'optionShape',
-        'inputCaretColor',
-        'inputShape',
-        'animationOpen',
-        'animationClose',
-        'optionFillHover',
-        'headingFill',
-        'headingTextColor',
-        'headingTextSize',
-        'headingTextWeight',
-        'filterOption',
-        'initialValue',
-        'set',
-        'onChange',
-        'openMenuOnClick',
-      ],
-    },
-    docs: {
-      story: {
-        iframeHeight: 800,
-        inline: false,
-      },
-    },
-  },
-  title: 'Atoms / Select',
-}
-
-export const Default = {
-  args: {},
-}
-
-export const WithSearch = {
-  args: {
-    ...Default.args,
-    isSearchable: true,
-  },
-}
-
-export const Multi = {
-  args: {
-    ...Default.args,
-    isMulti: true,
-  },
-}
-
-export const NoInput = {
-  args: {
-    ...Default.args,
-    isClearable: false,
-    isMulti: true,
-    // dropdownIcon: icon16.Filter,
-    hideValueContainer: true,
-    menuAfter: (
-      <Button
-        width="fill"
-        labelTextSize="m"
-        appearance="surfaceSecondary"
-        label="Очистить"
-        size="l"
-      />
-    ),
-    showDivider: true,
-    size: 'none',
-  },
-}

package/dist/stories/Size.stories.js

@@ -1,99 +0,0 @@
-import { badgeAppearance, badgeConfig } from '../../Badge'
-import { Tab, tabConfig } from '../Tab'
-import { tabAppearance } from '../Tab.appearance'
-import { argTypes } from './args'
-
-badgeConfig.setAppearance(badgeAppearance)
-tabConfig.setAppearance(tabAppearance)
-
-export default {
-  argTypes: {
-    ...argTypes,
-  },
-  component: Tab,
-  parameters: {
-    controls: {
-      exclude: [
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'linkFillDesktop',
-        'linkFillMobile',
-        'linkFillTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'sizeDesktop',
-        'sizeMobile',
-        'sizeTablet',
-        'typeDesktop',
-        'typeMobile',
-        'typeTablet',
-      ],
-    },
-  },
-  title: 'Atoms / Tab / Size',
-}
-
-export const Default = {
-  args: {
-    appearance: 'primary',
-    badge: true,
-    badgeAppearance: 'accent',
-    badgeSize: 'xs',
-    badgeTextSize: 'xs',
-    badgeValue: '3',
-    label: 'Label',
-    labelTextSize: 'm',
-    size: 'm',
-  },
-}
-
-export const SizeXXS = {
-  args: {
-    ...Default.args,
-    size: 'xxs',
-  },
-}
-
-export const SizeXS = {
-  args: {
-    ...Default.args,
-    size: 'xs',
-  },
-}
-
-export const SizeS = {
-  args: {
-    ...Default.args,
-    size: 's',
-  },
-}
-
-export const SizeM = {
-  args: {
-    ...Default.args,
-    size: 'm',
-  },
-}
-
-export const SizeL = {
-  args: {
-    ...Default.args,
-    size: 'l',
-  },
-}
-
-export const SizeXL = {
-  args: {
-    ...Default.args,
-    size: 'xl',
-  },
-}
-
-export const SizeXXL = {
-  args: {
-    ...Default.args,
-    size: 'xxl',
-  },
-}

package/dist/stories/State.stories.js

@@ -1,67 +0,0 @@
-import { badgeAppearance, badgeConfig } from '../../Badge'
-import { Tab, tabConfig } from '../Tab'
-import { tabAppearance } from '../Tab.appearance'
-import { argTypes } from './args'
-
-badgeConfig.setAppearance(badgeAppearance)
-tabConfig.setAppearance(tabAppearance)
-
-export default {
-  args: {
-    badge: true,
-    badgeAppearance: 'accent',
-    badgeSize: 'xs',
-    badgeTextSize: 'xs',
-    badgeValue: '3',
-    label: 'Label',
-    labelTextSize: 'm',
-    size: 'normal',
-  },
-  argTypes: {
-    ...argTypes,
-  },
-  component: Tab,
-  parameters: {
-    controls: {
-      exclude: [
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'linkFillDesktop',
-        'linkFillMobile',
-        'linkFillTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'sizeDesktop',
-        'sizeMobile',
-        'sizeTablet',
-        'typeDesktop',
-        'typeMobile',
-        'typeTablet',
-      ],
-    },
-  },
-  title: 'Atoms / Tab / State',
-}
-
-export const Normal = {
-  args: {
-    appearance: 'any',
-  },
-}
-
-export const Active = {
-  args: {
-    isActive: true,
-    appearance: 'surfacePrimary',
-  },
-}
-
-export const Disabled = {
-  args: {
-    isDisabled: true,
-    appearance: 'surfacePrimary',
-    badgeAppearance: 'disabled',
-  },
-}

package/dist/stories/Switch.stories.js

@@ -1,84 +0,0 @@
-import { Switch } from '../Switch'
-
-export default {
-  argTypes: {
-    id: {
-      if: { arg: 'advancedProps' },
-    },
-    advancedProps: { control: 'boolean' },
-    checked: {
-      control: 'boolean',
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    set: {
-      if: { arg: 'advancedProps' },
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['normal', 'compact'],
-    },
-    onChange: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Switch,
-  title: 'Atoms / Switch ',
-}
-
-export const Default = {
-  args: {
-    checked: false,
-    disabled: false,
-    size: 'normal',
-  },
-}
-
-export const Active = {
-  args: {
-    ...Default.args,
-    checked: false,
-    disabled: false,
-  },
-}
-export const ActiveChecked = {
-  args: {
-    ...Default.args,
-    checked: true,
-    disabled: false,
-  },
-}
-export const Disabled = {
-  args: {
-    ...Default.args,
-    checked: false,
-    disabled: true,
-  },
-}
-export const DisabledChecked = {
-  args: {
-    ...Default.args,
-    checked: true,
-    disabled: true,
-  },
-}
-
-export const Normal = {
-  args: {
-    checked: true,
-    disabled: false,
-    size: 'normal',
-  },
-}
-
-export const Compact = {
-  args: {
-    checked: true,
-    disabled: false,
-    size: 'compact',
-  },
-}