@itcase/ui 1.2.18 → 1.2.20

package/dist/stories/Icon.stories.js

@@ -1,5 +1,3 @@
-import { Badge } from '@itcase/ui/components/Badge'
-import { Icon, iconConfig } from '@itcase/ui/components/Icon'
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -9,185 +7,189 @@ import {
   fillProps,
   shapeProps,
   sizePXProps,
-} from '@itcase/ui/constants'
-
-import iconAppearance from 'src/components/Icon/appearance.json'
+} from '../../../constants'
+import { Badge, badgeConfig } from '../../Badge'
+import badgeAppearance from '../../Badge/appearance.json'
+import iconAppearance from '../appearance.json'
+import { Icon, iconConfig } from '../Icon'
 
 iconConfig.setAppearance(iconAppearance)
 
+badgeConfig.setAppearance(badgeAppearance)
+
 export default {
-  title: 'Atoms / Icon',
-  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',
-      ],
-    },
-  },
   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: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     fillHover: {
-      options: fillHoverProps,
       control: 'select',
+      options: fillHoverProps,
     },
     fillSize: {
-      options: sizePXProps,
       control: 'select',
+      options: sizePXProps,
     },
     iconFill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     iconFillHover: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     iconSize: {
-      options: sizePXProps,
-      control: 'select',
-    },
-    borderType: {
-      options: borderTypeProps,
-      control: 'inline-radio',
-    },
-    borderColor: {
-      options: borderColorProps,
-      control: 'select',
-    },
-    borderColorHover: {
-      options: borderColorHoverProps,
       control: 'select',
+      options: sizePXProps,
     },
-    borderWidth: {
-      options: borderWidthProps,
-      control: 'select',
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    dataTour: {
+    LinkComponent: {
       if: { arg: 'advancedProps' },
     },
-    onClick: {
-      if: { arg: 'advancedProps' },
+    shape: {
+      control: 'inline-radio',
+      options: shapeProps,
     },
-    LinkComponent: {
+    SvgImage: {
       if: { arg: 'advancedProps' },
     },
-    SvgImage: {
+    onClick: {
       if: { arg: 'advancedProps' },
     },
-    shape: {
-      options: shapeProps,
-      control: 'inline-radio',
+  },
+  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: {
-    iconFill: 'surfaceItemPrimary',
-    imageSrc: 'assets/24/Bell.svg',
     fill: 'surfaceSecondary',
     fillHover: 'surfaceSecondaryHover',
     fillSize: '40',
+    iconFill: 'surfaceItemPrimary',
     iconSize: '24',
+    imageSrc: 'assets/24/Bell.svg',
     shape: 'circular',
   },
 }
 
 export const WithBadge = {
   args: {
-    imageSrc: 'assets/24/Bell.svg',
+    Badge: <Badge position="absolute" appearance="accent" size="xs" textSize="xxs" value={3} />,
     fill: 'surfaceSecondary',
     fillHover: 'surfaceSecondaryHover',
     fillSize: '40',
-    iconSize: '24',
     iconFill: 'surfaceItemPrimary',
+    iconSize: '24',
+    imageSrc: 'assets/24/Bell.svg',
     shape: 'circular',
-    Badge: <Badge appearance="accent" position="absolute" size="xs" textSize="xxs" value={3} />,
   },
 }
 
 export const WithTooltip = {
   args: {
     width: '16',
+    alignment: 'topRight',
     iconFill: 'surfaceItemPrimary',
     imageSrc: 'assets/16/Search.svg',
-    tooltipText: 'Search',
-    tooltipTextSize: 'm',
     showTooltip: true,
     tooltipAppearance: 'surfaceTertiary',
-    alignment: 'topRight',
+    tooltipText: 'Search',
+    tooltipTextSize: 'm',
   },
 }
 
 export const Size14 = {
   args: {
-    imageSrc: 'assets/14/Remove.svg',
     fill: 'surfaceSecondary',
     fillHover: 'surfaceSecondaryHover',
     fillSize: '24',
-    iconSize: '14',
     iconFill: 'surfaceItemPrimary',
+    iconSize: '14',
+    imageSrc: 'assets/14/Remove.svg',
     shape: 'circular',
   },
 }
 
 export const Size16 = {
   args: {
-    imageSrc: 'assets/16/Search.svg',
     fill: 'surfaceSecondary',
     fillHover: 'surfaceSecondaryHover',
     fillSize: '32',
-    iconSize: '16',
     iconFill: 'surfaceItemPrimary',
+    iconSize: '16',
+    imageSrc: 'assets/16/Search.svg',
     shape: 'circular',
   },
 }
 
 export const Size24 = {
   args: {
-    imageSrc: 'assets/24/Delete.svg',
     fill: 'surfaceSecondary',
     fillHover: 'surfaceSecondaryHover',
     fillSize: '40',
-    iconSize: '24',
     iconFill: 'surfaceItemPrimary',
+    iconSize: '24',
+    imageSrc: 'assets/24/Delete.svg',
     shape: 'circular',
   },
 }
 
 export const Size40 = {
   args: {
-    imageSrc: 'assets/40/close.svg',
     fillHover: 'surfaceSecondaryHover',
     iconSize: '40',
+    imageSrc: 'assets/40/Close.svg',
     shape: 'circular',
   },
 }

package/dist/stories/Image.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as ImageStories from './Image.stories.js'
+
+<Meta of={ImageStories} />
+
+# Image
+
+## Rectangular
+
+<Canvas sourceState="shown" of={ImageStories.Rectangular} />
+
+## Circular
+
+<Canvas sourceState="shown" of={ImageStories.Circular} />

package/dist/stories/Image.stories.js

@@ -0,0 +1,134 @@
+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',
+  },
+}

package/dist/stories/Input.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as InputStories from './Input.stories.js'
+
+<Meta of={InputStories} />
+
+# Input
+
+## XXL
+
+<Canvas sourceState="shown" of={InputStories.SizeXXL} />
+
+## XL
+
+<Canvas sourceState="shown" of={InputStories.SizeXL} />
+
+## L
+
+<Canvas sourceState="shown" of={InputStories.SizeL} />
+
+## M
+
+<Canvas sourceState="shown" of={InputStories.SizeM} />
+
+## S
+
+<Canvas sourceState="shown" of={InputStories.SizeS} />
+
+## XS
+
+<Canvas sourceState="shown" of={InputStories.SizeXS} />

package/dist/stories/Input.stories.js

@@ -1,42 +1,39 @@
-import { Input, inputConfig } from '@itcase/ui/components/Input'
-import inputState from 'src/components/Input/state.json'
-import { borderColorProps, textColorProps, textSizeProps } from '@itcase/ui/constants'
+import { borderColorProps, textColorProps, textSizeProps } from '../../../constants'
+import { Input, inputConfig } from '../Input'
+import inputState from '../state.json'
 
 inputConfig.setState(inputState)
 
 export default {
-  title: 'Atoms / Input',
-  component: Input,
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
+    id: {
       if: { arg: 'advancedProps' },
     },
+    borderColor: {
+      control: 'select',
+      options: borderColorProps,
+    },
+    advancedProps: { control: 'boolean' },
     checked: {
-      if: { arg: 'advancedProps' },
       control: 'boolean',
-    },
-    id: {
-      if: { arg: 'advancedProps' },
-    },
-    onBlur: {
       if: { arg: 'advancedProps' },
     },
-    onKeyDown: {
+    className: {
       if: { arg: 'advancedProps' },
     },
-    borderColor: {
-      options: borderColorProps,
-      control: 'select',
-    },
     disabled: {
       control: 'boolean',
     },
     shape: {
+      control: 'inline-radio',
       options: [null, 'rounded', 'underline'],
+    },
+    size: {
       control: 'inline-radio',
+      options: [null, 'xs', 's', 'm', 'l', 'xl', 'xxl', 'tiny', 'compact', 'normal', 'large'],
     },
     state: {
+      control: 'inline-radio',
       options: [
         null,
         'normal',
@@ -50,25 +47,28 @@ export default {
         'success',
         'require',
       ],
-      control: 'inline-radio',
-    },
-    size: {
-      options: [null, 'xs', 's', 'm', 'l', 'xl', 'xxl', 'tiny', 'compact', 'normal', 'large'],
-      control: 'inline-radio',
     },
     textColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     textSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
     type: {
-      options: ['text', 'number', 'password'],
       control: 'inline-radio',
+      options: ['text', 'number', 'password'],
+    },
+    onBlur: {
+      if: { arg: 'advancedProps' },
+    },
+    onKeyDown: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: Input,
+  title: 'Atoms / Input',
 }
 
 export const Default = {

package/dist/stories/InputPassword.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as InputPasswordStories from './InputPassword.stories.js'
+
+<Meta of={InputPasswordStories} />
+
+# InputPassword
+
+## Hidden
+
+<Canvas sourceState="shown" of={InputPasswordStories.Hidden} />
+
+## Disabled
+
+<Canvas sourceState="shown" of={InputPasswordStories.Disabled} />

package/dist/stories/InputPassword.stories.js

@@ -1,64 +1,52 @@
-import { icon24 } from 'src/icons'
-
-import { InputPassword, inputPasswordConfig } from '@itcase/ui/components/InputPassword'
-import inputPasswordState from 'src/components/InputPassword/state.json'
 import {
   borderColorProps,
   fillProps,
   iconSizeProps,
   textColorProps,
   textSizeProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import { InputPassword, inputPasswordConfig } from '../InputPassword'
+import inputPasswordState from '../state.json'
 
 inputPasswordConfig.setState(inputPasswordState)
 
 export default {
-  title: 'Atoms / InputPassword',
-  component: InputPassword,
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
     id: {
       if: { arg: 'advancedProps' },
     },
-    onBlur: {
-      if: { arg: 'advancedProps' },
-    },
-    onChange: {
-      if: { arg: 'advancedProps' },
-    },
-    onKeyDown: {
-      if: { arg: 'advancedProps' },
-    },
     borderColor: {
-      options: borderColorProps,
       control: 'select',
+      options: borderColorProps,
     },
+    advancedProps: { control: 'boolean' },
     checked: {
       control: 'boolean',
     },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
     disabled: {
       control: 'boolean',
     },
     iconFill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     iconSize: {
-      options: iconSizeProps,
       control: 'inline-radio',
+      options: iconSizeProps,
     },
     shape: {
-      options: [null, 'rounded', 'underline'],
       control: 'inline-radio',
+      options: [null, 'rounded', 'underline'],
     },
     size: {
-      options: ['xs', 's', 'm', 'l', 'xl', 'xxl', 'normal', 'tiny', 'compact', 'large'],
       control: 'inline-radio',
+      options: ['xs', 's', 'm', 'l', 'xl', 'xxl', 'normal', 'tiny', 'compact', 'large'],
     },
     state: {
+      control: 'inline-radio',
       options: [
         null,
         'normal',
@@ -72,35 +60,45 @@ export default {
         'success',
         'require',
       ],
-      control: 'inline-radio',
     },
     textColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     textSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
+    },
+    onBlur: {
+      if: { arg: 'advancedProps' },
+    },
+    onChange: {
+      if: { arg: 'advancedProps' },
+    },
+    onKeyDown: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: InputPassword,
+  title: 'Atoms / InputPassword',
 }
 
 export const Default = {
   args: {
     borderColor: 'surfaceBorderTertiary',
-    placeholder: 'Placeholder',
-    shape: 'rounded',
-    textSize: 'm',
     isRevealable: true,
     iconFill: 'surfaceItemTertiary',
-    iconRevealableHide: icon24.HidePassword,
-    iconRevealableShow: icon24.ShowPassword,
     iconSize: 24,
+    imageRevealableHide: 'assets/24/HidePassword.svg',
+    imageRevealableShow: 'assets/24/ShowPassword.svg',
+    placeholder: 'Placeholder',
+    shape: 'rounded',
+    textSize: 'm',
     value: 'password',
   },
 }
 
-export const Hide = {
+export const Hidden = {
   args: {
     ...Default.args,
   },