@itcase/ui 1.3.12 → 1.3.13

package/dist/stories/Notification.stories.js

@@ -1,105 +0,0 @@
-import { textSizeProps, titleSizeProps } from '../../../constants'
-import { Button, buttonConfig } from '../../Button'
-import { buttonAppearance } from '../../Button/Button.appearance'
-import { Icon } from '../../Icon'
-import { notificationItemAppearance } from '../NotificationItem.appearance'
-import { NotificationItem, notificationItemConfig } from '../NotificationItem'
-
-buttonConfig.setAppearance(buttonAppearance)
-notificationItemConfig.setAppearance(notificationItemAppearance)
-
-export default {
-  argTypes: {
-    advancedProps: { control: 'boolean' },
-    appearance: {
-      control: 'inline-radio',
-      options: [
-        null,
-        'accent',
-        'primary',
-        'secondary',
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-      ],
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    set: {
-      control: 'inline-radio',
-      options: [null, 'top', 'float', 'form', 'toast'],
-    },
-    status: {
-      control: 'inline-radio',
-      options: [null, 'success', 'error', 'warning'],
-    },
-    textSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    titleTextSize: {
-      control: 'inline-radio',
-      options: titleSizeProps,
-    },
-    type: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: NotificationItem,
-  title: 'Molecules / Notification',
-}
-
-export const Default = {
-  args: {
-    set: 'top',
-    status: 'success',
-    text: 'Text',
-    title: 'Heading',
-  },
-}
-
-export const Top = {
-  args: {
-    ...Default.args,
-    set: 'top',
-    status: 'success',
-  },
-}
-
-export const Float = {
-  args: {
-    ...Default.args,
-    closeButton: <Icon iconFill="surfaceItemSecondary" imageSrc="assets/16/Remove.svg" size="16" />,
-    set: 'float',
-    status: 'warning',
-  },
-}
-
-export const Form = {
-  args: {
-    ...Default.args,
-    set: 'form',
-    status: 'error',
-    text: null,
-  },
-}
-
-export const Toast = {
-  args: {
-    ...Default.args,
-    after: (
-      <Button
-        width="fill"
-        labelTextSize="m"
-        appearance="accent"
-        label="Обновить приложение"
-        shape="rounded"
-        size="l"
-      />
-    ),
-    closeButton: <Icon iconFill="surfaceItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
-    set: 'toast',
-    status: null,
-  },
-}

package/dist/stories/Pagination.stories.js

@@ -1,63 +0,0 @@
-import { flexJustifyContentProps } from '../../../constants'
-import { Icon } from '../../Icon'
-import { Pagination } from '../../Pagination'
-
-export default {
-  argTypes: {
-    justifyContent: {
-      control: 'inline-radio',
-      if: { arg: 'advancedProps' },
-      options: flexJustifyContentProps,
-    },
-    advancedProps: { control: 'boolean' },
-    allItemsCount: {
-      control: { max: 50, min: 1, step: 1, type: 'number' },
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    marginPagesDisplayed: {
-      control: { max: 10, min: 1, step: 1, type: 'number' },
-    },
-    pageNumber: {
-      if: { arg: 'advancedProps' },
-    },
-    pageRangeDisplayed: {
-      control: { max: 10, min: 1, step: 1, type: 'number' },
-    },
-    perPageCount: {
-      control: { max: 50, min: 1, step: 1, type: 'number' },
-    },
-  },
-  component: Pagination,
-  title: 'Atoms / Pagination ',
-}
-
-export const Default = {
-  args: {
-    allItemsCount: 50,
-    marginPagesDisplayed: 3,
-    nextLabel: (
-      <Icon
-        fillHover="surfaceSecondaryHover"
-        fillSize="32"
-        iconFill="surfaceItemPrimary"
-        imageSrc="assets/14/ChevronRight.svg"
-        shape="circular"
-        size="14"
-      />
-    ),
-    pageRangeDisplayed: 7,
-    perPageCount: 5,
-    previousLabel: (
-      <Icon
-        fillHover="surfaceSecondaryHover"
-        fillSize="32"
-        iconFill="surfaceItemPrimary"
-        imageSrc="assets/14/ChevronLeft.svg"
-        shape="circular"
-        size="14"
-      />
-    ),
-  },
-}

package/dist/stories/Radio.stories.js

@@ -1,100 +0,0 @@
-import { shapeProps, textColorProps, textSizeProps } from '../../../constants'
-import { Radio, radioConfig } from '../Radio'
-import { radioState } from '../Radio.appearance'
-
-radioConfig.setState(radioState)
-
-export default {
-  argTypes: {
-    advancedProps: { control: 'boolean' },
-    checked: {
-      control: 'boolean',
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    descTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    descTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    labelTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    labelTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    tag: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Radio,
-  title: 'Atoms / Radio',
-}
-
-export const Default = {
-  args: {
-    desc: 'Description',
-    descTextColor: 'surfaceTextTertiary',
-    descTextSize: 'xxs',
-    label: 'Radio',
-    labelTextColor: 'surfaceTextPrimary',
-    labelTextSize: 'm',
-
-    stateBorderColor: 'surfaceBorderQuaternary',
-
-    stateBorderColorChecked: 'surfaceBorderQuaternary',
-    stateBorderColorDisabled: 'surfaceBorderQuaternary',
-    stateBorderColorDisabledChecked: 'surfaceBorderQuaternary',
-    stateBorderWidth: 1,
-
-    stateCheckmarkFill: 'surfaceItemAccent',
-
-    stateCheckmarkFillDisabled: 'surfaceItemDisabled',
-    stateFill: 'surfacePrimary',
-    stateFillChecked: 'surfacePrimary',
-    stateFillDisabled: 'surfaceDisabled',
-    stateFillDisabledChecked: 'surfaceDisabled',
-    stateShape: 'circular',
-  },
-}
-
-export const Active = {
-  args: {
-    ...Default.args,
-  },
-}
-
-export const Disabled = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-}
-
-export const Checked = {
-  args: {
-    ...Default.args,
-    checked: true,
-  },
-}
-
-export const CheckedDisabled = {
-  args: {
-    ...Default.args,
-    checked: true,
-    disabled: true,
-  },
-}

package/dist/stories/Response.stories.js

@@ -1,92 +0,0 @@
-import { Response } from '../Response'
-import { argTypes } from './args'
-
-export default {
-  argTypes: {
-    ...argTypes,
-  },
-  component: Response,
-  title: 'Molecules / Response / Set: Default',
-}
-
-const Default = {
-  args: {
-    message: 'Text',
-    primaryButtonLabel: 'Primary Button',
-    secondaryButtonLabel: 'Secondary Button',
-    title: 'Heading',
-  },
-}
-
-export const Dev = {
-  args: {
-    ...Default.args,
-    padding: 24,
-    appearance: 'dev',
-    imageSrc: 'assets/response/Search.svg',
-  },
-}
-
-export const Custom = {
-  args: {
-    ...Default.args,
-    padding: 24,
-    appearance: 'custom',
-  },
-}
-
-export const Success = {
-  args: {
-    ...Default.args,
-    appearance: 'success',
-    imageSrc: 'assets/response/Success.svg',
-  },
-}
-
-export const Warning = {
-  args: {
-    ...Default.args,
-    appearance: 'warning',
-    imageSrc: 'assets/response/Warning.svg',
-  },
-}
-
-export const Error = {
-  args: {
-    ...Default.args,
-    appearance: 'error',
-    imageSrc: 'assets/response/Error.svg',
-  },
-}
-
-export const Fail = {
-  args: {
-    ...Default.args,
-    appearance: 'fail',
-    imageSrc: 'assets/response/Fail.svg',
-  },
-}
-
-export const CantLoadData = {
-  args: {
-    ...Default.args,
-    appearance: 'cantLoadData',
-    imageSrc: 'assets/response/CantLoadData.svg',
-  },
-}
-
-export const Refresh = {
-  args: {
-    ...Default.args,
-    appearance: 'refresh',
-    imageSrc: 'assets/response/Refresh.svg',
-  },
-}
-
-export const Search = {
-  args: {
-    ...Default.args,
-    appearance: 'search',
-    imageSrc: 'assets/response/Search.svg',
-  },
-}

package/dist/stories/SearchInput.stories.js

@@ -1,189 +0,0 @@
-import { SearchInput, searchInputConfig } from '@itcase/ui/components/Search'
-
-import {
-  borderColorHoverProps,
-  borderColorProps,
-  fillProps,
-  iconSizeProps,
-  textColorProps,
-  textSizeProps,
-} from '../../../constants'
-import { searchAppearance } from '../Search.appearance'
-
-searchInputConfig.setAppearance(searchAppearance)
-
-export default {
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    before: {
-      if: { arg: 'advancedProps' },
-    },
-    borderHover: {
-      control: 'select',
-      options: borderColorHoverProps,
-    },
-    className: {
-      control: 'text',
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    iconAfter: {
-      if: { arg: 'advancedProps' },
-    },
-    iconAfterFill: {
-      control: 'select',
-      if: { arg: 'iconAfterSrc', neq: null },
-      options: fillProps,
-    },
-    iconAfterSize: {
-      control: 'select',
-      if: { arg: 'iconAfterSrc', neq: null },
-      options: iconSizeProps,
-    },
-    iconAfterSrc: {
-      control: 'inline-radio',
-      options: [null, 'assets/16/Mores.svg'],
-    },
-    iconAfterStroke: {
-      control: 'select',
-      if: { arg: 'iconAfterSrc', neq: null },
-      options: fillProps,
-    },
-    iconBefore: {
-      if: { arg: 'advancedProps' },
-    },
-    iconBeforeFill: {
-      control: 'select',
-      if: { arg: 'iconBeforeSrc', neq: null },
-      options: fillProps,
-    },
-    iconBeforeSize: {
-      control: 'select',
-      if: { arg: 'iconBeforeSrc', neq: null },
-      options: iconSizeProps,
-    },
-    iconBeforeSrc: {
-      control: 'inline-radio',
-      options: [null, 'assets/16/Search.svg'],
-    },
-    iconBeforeStroke: {
-      control: 'select',
-      if: { arg: 'iconBeforeSrc', neq: null },
-      options: fillProps,
-    },
-    iconClear: {
-      if: { arg: 'advancedProps' },
-    },
-    iconClearFill: {
-      control: 'select',
-      if: { arg: 'iconClearSrc', neq: null },
-      options: fillProps,
-    },
-    iconClearSize: {
-      control: 'select',
-      if: { arg: 'iconClearSrc', neq: null },
-      options: iconSizeProps,
-    },
-    iconClearSrc: {
-      control: 'inline-radio',
-      options: [null, 'assets/16/Clear.svg'],
-    },
-    inputTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    placeholderTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    placeholderTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    shape: {
-      control: 'inline-radio',
-      options: [null, 'geometric', 'rounded'],
-    },
-    size: {
-      control: 'inline-radio',
-      options: [null, 'normal', 'compact'],
-    },
-    type: {
-      control: 'inline-radio',
-      options: ['text', 'number', 'password'],
-    },
-    onChange: {
-      if: { arg: 'advancedProps' },
-    },
-    onClickClean: {
-      if: { arg: 'advancedProps' },
-    },
-    onFocus: {
-      if: { arg: 'advancedProps' },
-    },
-    onKeyDown: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: SearchInput,
-  parameters: {
-    controls: { exclude: ['fillDesktop', 'fillMobile', 'fillTablet'] },
-  },
-  title: 'Molecules / Search',
-}
-
-export const Default = {
-  args: {
-    borderColor: 'surfaceBorderTertiary',
-    borderHover: 'surfaceBorderQuaternary',
-    fill: 'surfacePrimary',
-    iconClearFill: 'surfaceItemPrimary',
-    iconClearSize: '16',
-    placeholder: 'Поиск',
-    placeholderTextColor: 'surfaceTextQuaternary',
-    shape: 'rounded',
-    size: 'normal',
-    value: 'value',
-  },
-}
-
-export const ClearIcon = {
-  args: {
-    ...Default.args,
-    iconClearSrc: 'assets/16/Remove.svg',
-  },
-}
-
-export const BeforeIcon = {
-  args: {
-    ...Default.args,
-    iconBeforeSrc: 'assets/16/Search.svg',
-  },
-}
-
-export const AfterIcon = {
-  args: {
-    ...Default.args,
-    iconAfterSrc: 'assets/16/More.svg',
-  },
-}
-
-export const Dev = {
-  args: {
-    ...Default.args,
-    appearance: 'dev',
-  },
-}

package/dist/stories/Segmented.stories.js

@@ -1,109 +0,0 @@
-import {
-  borderColorProps,
-  borderTypeProps,
-  borderWidthProps,
-  fillHoverProps,
-  fillProps,
-  shapeProps,
-  textColorProps,
-  textSizeProps,
-  textWrapProps,
-  widthProps,
-} from '../../../constants'
-import { Segmented } from '../Segmented'
-
-export default {
-  argTypes: {
-    width: {
-      control: 'inline-radio',
-      options: widthProps,
-    },
-    borderWidth: {
-      control: 'inline-radio',
-      options: borderWidthProps,
-    },
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    advancedProps: { control: 'boolean' },
-    borderType: {
-      control: 'inline-radio',
-      options: borderTypeProps,
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    fillHover: {
-      control: 'select',
-      options: fillHoverProps,
-    },
-    indicatorFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    labelTextActiveColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    labelTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    labelTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    labelTextWrap: {
-      control: 'inline-radio',
-      options: textWrapProps,
-    },
-    name: {
-      if: { arg: 'advancedProps' },
-    },
-    setActiveSegment: {
-      if: { arg: 'advancedProps' },
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['normal', 'compact'],
-    },
-    type: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Segmented,
-  title: 'Atoms / Segmented',
-}
-
-export const Default = {
-  args: {
-    width: 'fill',
-    activeSegment: {
-      value: 1,
-    },
-    fill: 'surfaceSecondary',
-    fillHover: 'surfacePrimaryHover',
-    indicatorFill: 'accentPrimary',
-    labelTextActiveColor: 'accentTextPrimary',
-    labelTextColor: 'surfaceTextPrimary',
-    labelTextSize: 'm',
-    labelTextWrap: 'wrap',
-    segments: [
-      { label: 'Label 1 Lorem ipsum dolor sit amet', value: 1 },
-      { label: 'Label 2', value: 2 },
-      { label: 'Label 3', value: 3 },
-      { label: 'Label 4', value: 4 },
-    ],
-    shape: 'rounded',
-    size: 'normal',
-  },
-}