@itcase/ui 1.2.18 → 1.2.20

package/dist/stories/MenuItem.stories.js

@@ -1,193 +1,258 @@
-import { MenuItem, menuItemConfig } from '@itcase/ui/components/MenuItem'
-import menuItemAppearance from 'src/components/MenuItem/appearance.json'
-
 import {
   fillProps,
-  sizeProps,
   shapeProps,
-  textWrapProps,
-  textWeightProps,
-  textColorProps,
+  sizeProps,
   textColorActiveProps,
-  textSizeProps,
   textColorHoverProps,
+  textColorProps,
   textGradientProps,
+  textSizeProps,
   textStyleProps,
+  textWeightProps,
+  textWrapProps,
   underlineProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import menuItemAppearance from '../appearance.json'
+import { MenuItem, menuItemConfig } from '../MenuItem'
 
 menuItemConfig.setAppearance(menuItemAppearance)
 
 export default {
-  title: 'Atoms / Menu Item',
-  component: MenuItem,
-  parameters: {
-    controls: {
-      exclude: [
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'linkFillDesktop',
-        'linkFillMobile',
-        'linkFillTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'sizeDesktop',
-        'sizeMobile',
-        'sizeTablet',
-        'typeDesktop',
-        'typeMobile',
-        'typeTablet',
-      ],
-    },
-  },
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    before: {
-      if: { arg: 'advancedProps' },
-    },
     children: {
       if: { arg: 'advancedProps' },
     },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    href: {
-      if: { arg: 'advancedProps' },
-    },
-    link: {
-      if: { arg: 'advancedProps' },
-    },
-    LinkComponent: {
-      if: { arg: 'advancedProps' },
-    },
-    rel: {
+    advancedProps: { control: 'boolean' },
+    after: {
       if: { arg: 'advancedProps' },
     },
-    target: {
-      if: { arg: 'advancedProps' },
+    appearance: {
+      control: 'inline-radio',
+      options: [null, 'any'],
     },
-    onClick: {
+    before: {
       if: { arg: 'advancedProps' },
     },
-    onMouseEnter: {
+    className: {
       if: { arg: 'advancedProps' },
     },
-    appearance: {
-      options: [null, 'any'],
-      control: 'inline-radio',
-    },
     descTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     descTextColorHover: {
-      options: textColorHoverProps,
       control: 'select',
+      options: textColorHoverProps,
     },
     descTextGradient: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
       options: textGradientProps,
-      control: 'inline-radio',
     },
     descTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
     descTextStyle: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
       options: textStyleProps,
-      control: 'inline-radio',
     },
     descTextWeight: {
-      options: textWeightProps,
       control: 'inline-radio',
+      options: textWeightProps,
     },
     descTextWrap: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
       options: textWrapProps,
-      control: 'inline-radio',
     },
     fill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
+    },
+    href: {
+      if: { arg: 'advancedProps' },
+    },
+    link: {
+      if: { arg: 'advancedProps' },
+    },
+    LinkComponent: {
+      if: { arg: 'advancedProps' },
     },
     linkFill: {
+      control: 'select',
       if: { arg: 'advancedProps' },
       options: fillProps,
-      control: 'select',
+    },
+    rel: {
+      if: { arg: 'advancedProps' },
     },
     shape: {
-      options: shapeProps,
       control: 'inline-radio',
+      options: shapeProps,
     },
     size: {
-      options: sizeProps,
       control: 'inline-radio',
+      options: sizeProps,
     },
-    textColor: {
-      options: textColorProps,
-      control: 'select',
+    target: {
+      if: { arg: 'advancedProps' },
     },
-    textColorHover: {
-      options: textColorHoverProps,
+    textColor: {
       control: 'select',
+      options: textColorProps,
     },
     textColorActive: {
-      options: textColorActiveProps,
       control: 'select',
+      options: textColorActiveProps,
     },
-    textSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
+    textColorHover: {
+      control: 'select',
+      options: textColorHoverProps,
     },
     textGradient: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
       options: textGradientProps,
+    },
+    textSize: {
       control: 'inline-radio',
+      options: textSizeProps,
     },
     textStyle: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
       options: textStyleProps,
-      control: 'inline-radio',
     },
     textWeight: {
-      options: textWeightProps,
       control: 'inline-radio',
+      options: textWeightProps,
     },
     textWrap: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
       options: textWrapProps,
-      control: 'inline-radio',
     },
     type: {
       if: { arg: 'advancedProps' },
     },
     underline: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
       options: underlineProps,
-      control: 'inline-radio',
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    onMouseEnter: {
+      if: { arg: 'advancedProps' },
+    },
+  },
+  component: MenuItem,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'linkFillDesktop',
+        'linkFillMobile',
+        'linkFillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'typeDesktop',
+        'typeMobile',
+        'typeTablet',
+      ],
     },
   },
+  title: 'Atoms / MenuItem',
 }
 
 export const Default = {
   args: {
+    cursor: 'pointer',
+    isActive: true,
+    isHover: true,
     appearance: 'any',
-    size: 'm',
-    label: 'Menu Item',
-    textSize: 'l',
-    textColor: 'surfaceTextPrimary',
-    textWeight: 400,
     desc: 'desc',
-    descTextSize: 's',
     descTextColor: 'surfaceTextPrimary',
+    descTextSize: 's',
     descTextWeight: 400,
-    isHover: true,
+    label: 'Menu Item',
+    size: 'm',
+    textColor: 'surfaceTextPrimary',
+    textSize: 'l',
+    textWeight: 400,
+  },
+}
+
+export const SizeXXL = {
+  args: {
+    ...Default.args,
+    size: 'xxl',
+  },
+}
+
+export const SizeXL = {
+  args: {
+    ...Default.args,
+    size: 'xl',
+  },
+}
+
+export const SizeL = {
+  args: {
+    ...Default.args,
+    size: 'l',
+  },
+}
+
+export const SizeM = {
+  args: {
+    ...Default.args,
+    size: 'm',
+  },
+}
+
+export const SizeS = {
+  args: {
+    ...Default.args,
+    size: 's',
+  },
+}
+
+export const SizeXS = {
+  args: {
+    ...Default.args,
+    size: 'xs',
+  },
+}
+
+export const SizeXXS = {
+  args: {
+    ...Default.args,
+    size: 'xxs',
+  },
+}
+
+export const Active = {
+  args: {
+    ...Default.args,
     isActive: true,
+    size: 'm',
+  },
+}
+
+export const SetSubitem = {
+  args: {
+    ...Default.args,
+    set: 'subitem',
+    size: 'm',
   },
 }

package/dist/stories/Message.mdx

@@ -0,0 +1,12 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as MessageStories from './Message.stories.js'
+
+<Meta title="Molecules / Response / Message" />
+
+# Response Set: Message
+## Success
+<Canvas sourceState="shown" of={MessageStories.Success} />
+
+## Error
+<Canvas sourceState="shown" of={MessageStories.Error} />

package/dist/stories/Message.stories.js

@@ -0,0 +1,34 @@
+import { Response } from '../Response'
+import { argTypes } from './args'
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Response,
+  title: 'Molecules / Response / Set: Message',
+}
+
+const Default = {
+  args: {
+    message: 'Ничего не найдено',
+    messageTextSize: 'l',
+    set: 'message',
+  },
+}
+
+export const Success = {
+  args: {
+    ...Default.args,
+    imageSrc: 'assets/img/search.svg',
+    state: 'success',
+  },
+}
+
+export const Error = {
+  args: {
+    ...Default.args,
+    imageSrc: 'assets/img/search.svg',
+    state: 'error',
+  },
+}

package/dist/stories/ModalConfirm.stories.js

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

@@ -1,34 +1,35 @@
-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 { Button, buttonConfig } from '../../Button'
+import buttonAppearance from '../../Button/appearance.json'
+import { Modal } from '../Modal'
 
 import { icon24 } from 'src/icons'
 
+buttonConfig.setAppearance(buttonAppearance)
+
 export default {
-  title: 'Components / Modal / Default',
   component: Modal,
+  title: 'Molecules / Modal / Default',
 }
 
 export const Default = {
   args: {
+    padding: 32,
+    elevation: 8,
     isOpen: true,
-    isOverlay: true,
     isOutsideClose: true,
+    isOverlay: true,
+    closeButton: (
+      <Button
+        position="absolute"
+        top="32"
+        right="32"
+        appearance="surfaceSecondary"
+        iconFill="surfaceItemPrimary"
+        iconSrc="assets/16/Remove.svg"
+        shape="circular"
+        size="m"
+      />
+    ),
     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/Notification.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as NotificationStories from './Notification.stories.js'
+
+<Meta of={NotificationStories} />
+
+# Notification
+
+## Top
+
+<Canvas sourceState="shown" of={NotificationStories.Top} />
+
+## Float
+
+<Canvas sourceState="shown" of={NotificationStories.Float} />
+
+## Form
+
+<Canvas sourceState="shown" of={NotificationStories.Form} />
+
+## Toast
+
+<Canvas sourceState="shown" of={NotificationStories.Toast} />