@itcase/ui 1.0.100 → 1.0.102

package/dist/stories/ModalConfirm.stories.js

@@ -0,0 +1,61 @@
+import { Modal } from '@itcase/ui/components/Modal'
+import { Group } from '@itcase/ui/components/Group'
+import { Title } from '@itcase/ui/components/Title'
+import { Button, buttonConfig } from '@itcase/ui/components/Button'
+import buttonAppearance from 'src/components/Button/appearance.json'
+buttonConfig.setAppearance(buttonAppearance)
+
+import { icon24 } from 'src/icons'
+
+export default {
+  title: 'Components / Modal / Confirm',
+  component: Modal,
+}
+
+export const Default = {
+  args: {
+    isOpen: true,
+    isFader: true,
+    isOutsideClose: true,
+    shape: 'rounded',
+    elevation: 8,
+    padding: 32,
+    // closeButton: (
+    //   <Button
+    //     appearance="surfaceSecondary"
+    //     icon={icon24.Close}
+    //     iconFill="surfaceItemPrimary"
+    //     shape="circular"
+    //     size="m"
+    //     position="absolute"
+    //     right="32"
+    //     top="32"
+    //   />
+    // ),
+    // children: (
+    //   <Group direction="vertical" gap="24">
+    //     <Title size="h3" textColor="surfaceTextPrimary">
+    //       Подтверждение действия
+    //     </Title>
+    //     <Group width="fill" direction="vertical" gap="16">
+    //       <Button
+    //         appearance="accent"
+    //         shape="rounded"
+    //         label="Подтвердить"
+    //         labelTextSize="l"
+    //         size="xxl"
+    //         width="fill"
+    //       />
+    //       <Button
+    //         appearance="surfaceSecondary"
+    //         label="Отмена"
+    //         labelTextSize="l"
+    //         shape="rounded"
+    //         size="xxl"
+    //         width="fill"
+    //       />
+    //     </Group>
+    //   </Group>
+    // ),
+  },
+}

package/dist/stories/ModalDefault.stories.js

@@ -0,0 +1,34 @@
+import { Modal } from '@itcase/ui/components/Modal'
+import { Button, buttonConfig } from '@itcase/ui/components/Button'
+import buttonAppearance from 'src/components/Button/appearance.json'
+buttonConfig.setAppearance(buttonAppearance)
+
+import { icon24 } from 'src/icons'
+
+export default {
+  title: 'Components / Modal / Default',
+  component: Modal,
+}
+
+export const Default = {
+  args: {
+    isOpen: true,
+    isFader: true,
+    isOutsideClose: true,
+    shape: 'rounded',
+    elevation: 8,
+    padding: 32,
+    // closeButton: (
+    //   <Button
+    //     appearance="surfaceSecondary"
+    //     icon={icon24.Close}
+    //     iconFill="surfaceItemPrimary"
+    //     shape="circular"
+    //     size="m"
+    //     position="absolute"
+    //     right="32"
+    //     top="32"
+    //   />
+    // ),
+  },
+}

package/dist/stories/NotFound.stories.js

@@ -0,0 +1,94 @@
+import { buttonConfig } from '@itcase/ui/components/Button'
+import { Empty } from '@itcase/ui/components/Empty'
+import { Image } from '@itcase/ui/components/Image'
+import {
+  fillHoverProps,
+  fillProps,
+  shapeProps,
+  sizeProps,
+  textColorProps,
+  textSizeProps,
+  widthProps,
+} from '@itcase/ui/constants'
+
+import buttonAppearance from 'src/components/Button/appearance.json'
+
+buttonConfig.setAppearance(buttonAppearance)
+
+export default {
+  title: 'Components / NotFound',
+  component: Empty,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    buttonAfter: {
+      if: { arg: 'advancedProps' },
+    },
+    buttonBefore: {
+      if: { arg: 'advancedProps' },
+    },
+    buttonFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    buttonFillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    buttonLabelTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    buttonLabelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    buttonShape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    buttonSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    buttonWidth: {
+      options: widthProps,
+      control: 'inline-radio',
+    },
+    messageTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    messageTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    buttonAppearance: {
+      options: [
+        null,
+        'accent',
+        'primary',
+        'secondary',
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceDisabled',
+      ],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    before: <Image alt="search_sign" src="assets/img/search.svg" />,
+    message: 'Nothing found',
+    messageTextColor: 'surfaceTextPrimary',
+    messageTextSize: 'l',
+    buttonLabel: 'Label',
+    buttonLabelTextSize: 'l',
+    buttonShape: 'rounded',
+    buttonSize: 'xxl',
+    buttonWidth: 'fill',
+    buttonAppearance: 'surfaceSecondary',
+  },
+}

package/dist/stories/Notification.stories.js

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

package/dist/stories/Pagination.stories.js

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

package/dist/stories/RadioButton.stories.js

@@ -0,0 +1,101 @@
+import { RadioButton, radioButtonConfig } from '@itcase/ui/components/RadioButton'
+import radioButtonState from 'src/components/RadioButton/state.json'
+
+import { shapeProps, textColorProps, textSizeProps } from '@itcase/ui/constants'
+
+radioButtonConfig.setState(radioButtonState)
+
+export default {
+  title: 'Atoms / RadioButton',
+  component: RadioButton,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    tag: {
+      if: { arg: 'advancedProps' },
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    labelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    labelTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    descTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    descTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    checked: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    label: 'Radio',
+    labelTextSize: 'm',
+    labelTextColor: 'surfaceTextPrimary',
+    desc: 'Description',
+    descTextSize: 'xxs',
+    descTextColor: 'surfaceTextTertiary',
+
+    stateShape: 'circular',
+
+    stateBorderColor: 'surfaceBorderQuaternary',
+    stateBorderColorChecked: 'surfaceBorderQuaternary',
+    stateBorderColorDisabled: 'surfaceBorderQuaternary',
+    stateBorderColorDisabledChecked: 'surfaceBorderQuaternary',
+
+    stateBorderWidth: 1,
+
+    stateFill: 'surfacePrimary',
+    stateFillChecked: 'surfacePrimary',
+    stateFillDisabled: 'surfaceDisabled',
+    stateFillDisabledChecked: 'surfaceDisabled',
+    stateCheckmarkFill: 'surfaceItemAccent',
+    stateCheckmarkFillDisabled: 'surfaceItemDisabled',
+  },
+}
+
+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/Search-input.stories.js

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