@itcase/ui 1.2.19 → 1.2.21

package/dist/stories/JustifyContent.mdx

@@ -0,0 +1,89 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as JustifyStories from './JustifyContent.stories.js'
+
+<Meta title="Layout / Group / JustifyContent" />
+
+# JustifyContent
+
+Свойство `justifyContent` определяет расположение элементов в контейнере
+
+```js
+<Group justifyContent="...">...</Group>
+```
+
+## Значения
+
+#### Позиционное выравнивание
+
+- `flexStart` — Выравнивание с начала
+- `flexEnd` — Выравнивание с конца
+- `center` — Выравнивание элементов по центру
+
+### Распределённое выравнивание
+
+- `spaceBetween` — Первый элемент вначале, последний в конце
+- `spaceAround` — Все элементы имеют полноразмерное пространство с обоих концов
+- `spaceEvenly` — Все элементы имеют равное пространство вокруг
+
+# Примеры использования
+
+### flexStart
+
+Выравнивание с начала
+
+```js
+<Group justifyContent="flexStart">...</Group>
+```
+
+<Canvas of={JustifyStories.FlexStart} />
+
+### flexEnd
+
+Выравнивание с конца
+
+```js
+<Group justifyContent="flexEnd">...</Group>
+```
+
+<Canvas of={JustifyStories.FlexEnd} />
+
+### center
+
+Выравнивание элементов по центру
+
+```js
+<Group justifyContent="center">...</Group>
+```
+
+<Canvas of={JustifyStories.Center} />
+
+### spaceBetween
+
+Первый элемент в начале, последний в конце
+
+```js
+<Group justifyContent="spaceBetween">...</Group>
+```
+
+<Canvas of={JustifyStories.SpaceBetween} />
+
+### spaceAround
+
+Все элементы имеют полноразмерное пространство с обоих концов
+
+```js
+<Group justifyContent="spaceAround">...</Group>
+```
+
+<Canvas of={JustifyStories.SpaceAround} />
+
+### spaceEvenly
+
+Все элементы имеют равное пространство вокруг
+
+```js
+<Group justifyContent="spaceEvenly">...</Group>
+```
+
+<Canvas of={JustifyStories.SpaceEvenly} />

package/dist/stories/JustifyContent.stories.js

@@ -0,0 +1,96 @@
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { argTypes } from './args'
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Group,
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      height={args.height}
+      fill={args.fill}
+      fill={args.fill}
+      padding={args.padding}
+      borderColor={args.borderColor}
+      direction={args.direction}
+      justifyContent={args.justifyContent}
+    >
+      <Group height="60" fill="accentPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          1
+        </Text>
+      </Group>
+      <Group height="60" fill="primaryPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="primaryTextPrimary">
+          2
+        </Text>
+      </Group>
+      <Group height="60" fill="secondaryPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="secondaryTextPrimary">
+          3
+        </Text>
+      </Group>
+      <Group height="60" fill="infoPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="infoTextPrimary">
+          4
+        </Text>
+      </Group>
+    </Group>
+  ),
+  title: 'Layout / Group / Variants / JustifyContent',
+}
+
+const Default = {
+  args: {
+    width: '500',
+    padding: '20',
+    borderColor: 'surfaceBorderPrimary',
+    direction: 'horizontal',
+    fill: 'surfacePrimary',
+  },
+}
+
+export const FlexStart = {
+  args: {
+    ...Default.args,
+    justifyContent: 'flex-start',
+  },
+}
+
+export const FlexEnd = {
+  args: {
+    ...Default.args,
+    justifyContent: 'flex-end',
+  },
+}
+
+export const Center = {
+  args: {
+    ...Default.args,
+    justifyContent: 'center',
+  },
+}
+
+export const SpaceBetween = {
+  args: {
+    ...Default.args,
+    justifyContent: 'space-between',
+  },
+}
+
+export const SpaceAround = {
+  args: {
+    ...Default.args,
+    justifyContent: 'space-around',
+  },
+}
+
+export const SpaceEvenly = {
+  args: {
+    ...Default.args,
+    justifyContent: 'space-evenly',
+  },
+}

package/dist/stories/Label.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as LabelStories from './Label.stories.js'
+
+<Meta of={LabelStories} />
+
+# Label
+
+## Accent
+
+<Canvas sourceState="shown" of={LabelStories.Accent} />
+
+## Primary
+
+<Canvas sourceState="shown" of={LabelStories.Primary} />
+
+## Secondary
+
+<Canvas sourceState="shown" of={LabelStories.Secondary} />
+
+## SurfacePrimary
+
+<Canvas sourceState="shown" of={LabelStories.SurfacePrimary} />
+
+## SurfaceSecondary
+
+<Canvas sourceState="shown" of={LabelStories.SurfaceSecondary} />
+
+## SurfaceTertiary
+
+<Canvas sourceState="shown" of={LabelStories.SurfaceTertiary} />

package/dist/stories/Label.stories.js

@@ -1,4 +1,3 @@
-import { Label, labelConfig } from '@itcase/ui/components/Label'
 import {
   borderColorProps,
   borderTypeProps,
@@ -8,48 +7,28 @@ import {
   textColorProps,
   textSizeProps,
   widthProps,
-} from '@itcase/ui/constants'
-
-import labelAppearance from 'src/components/Label/appearance.json'
+} from '../../../constants'
+import labelAppearance from '../appearance.json'
+import { Label, labelConfig } from '../Label'
 
 labelConfig.setAppearance(labelAppearance)
 
 export default {
-  title: 'Atoms / Label ',
-  component: Label,
-  parameters: {
-    controls: {
-      exclude: [
-        'borderDesktop',
-        'borderMobile',
-        'borderTablet',
-        'borderTypeDesktop',
-        'borderTypeMobile',
-        'borderTypeTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'labelTextSizeDesktop',
-        'labelTextSizeMobile',
-        'labelTextSizeTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'sizeDesktop',
-        'sizeMobile',
-        'sizeTablet',
-      ],
-    },
-  },
   argTypes: {
-    advancedProps: { control: 'boolean' },
     children: {
       if: { arg: 'advancedProps' },
     },
-    className: {
-      if: { arg: 'advancedProps' },
+    width: {
+      control: 'inline-radio',
+      options: widthProps,
     },
+    textAlign: {
+      control: 'inline-radio',
+      options: ['left', 'center', 'right'],
+    },
+    advancedProps: { control: 'boolean' },
     appearance: {
+      control: 'inline-radio',
       options: [
         null,
         'accent',
@@ -59,58 +38,78 @@ export default {
         'surfaceSecondary',
         'surfaceTertiary',
       ],
-      control: 'inline-radio',
     },
     border: {
-      options: borderColorProps,
       control: 'select',
+      options: borderColorProps,
     },
     borderType: {
-      options: borderTypeProps,
       control: 'inline-radio',
+      options: borderTypeProps,
+    },
+    className: {
+      if: { arg: 'advancedProps' },
     },
     fill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     labelTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     labelTextSize: {
+      control: 'inline-radio',
       options: textSizeProps,
+    },
+    mode: {
       control: 'inline-radio',
+      options: [null, 'skeleton'],
     },
     shape: {
-      options: shapeProps,
       control: 'inline-radio',
+      options: shapeProps,
     },
     size: {
-      options: sizeProps,
-      control: 'inline-radio',
-    },
-    textAlign: {
-      options: ['left', 'center', 'right'],
-      control: 'inline-radio',
-    },
-    width: {
-      options: widthProps,
       control: 'inline-radio',
+      options: sizeProps,
     },
-    mode: {
-      options: [null, 'skeleton'],
-      control: 'inline-radio',
+  },
+  component: Label,
+  parameters: {
+    controls: {
+      exclude: [
+        'borderDesktop',
+        'borderMobile',
+        'borderTablet',
+        'borderTypeDesktop',
+        'borderTypeMobile',
+        'borderTypeTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'labelTextSizeDesktop',
+        'labelTextSizeMobile',
+        'labelTextSizeTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+      ],
     },
   },
+  title: 'Atoms / Label',
 }
 
 export const Default = {
   args: {
     appearance: 'accent',
-    shape: 'rounded',
     label: 'Label',
-    size: 'xxl',
     labelTextSize: 'l',
+    shape: 'rounded',
+    size: 'xxl',
   },
 }
 export const Accent = {
@@ -161,3 +160,14 @@ export const SkeletonMode = {
     mode: 'skeleton',
   },
 }
+
+export const WithTooltip = {
+  args: {
+    ...Default.args,
+    appearance: 'accent',
+    showTooltip: true,
+    tooltip: '123',
+    tooltipText: '123',
+    tooltipTextSize: 'm',
+  },
+}

package/dist/stories/Loader.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as LoaderStories from './Loader.stories.js'
+
+<Meta of={LoaderStories} />
+
+# Loader
+
+## Accent
+
+<Canvas sourceState="shown" of={LoaderStories.Accent} />
+
+## Primary
+
+<Canvas sourceState="shown" of={LoaderStories.Primary} />
+
+## Secondary
+
+<Canvas sourceState="shown" of={LoaderStories.Secondary} />
+
+## SurfacePrimary
+
+<Canvas sourceState="shown" of={LoaderStories.SurfacePrimary} />
+
+## SurfaceSecondary
+
+<Canvas sourceState="shown" of={LoaderStories.SurfaceSecondary} />
+
+## SurfaceTertiary
+
+<Canvas sourceState="shown" of={LoaderStories.SurfaceTertiary} />

package/dist/stories/Loader.stories.js

@@ -1,40 +1,42 @@
-import { Loader, loaderConfig } from '@itcase/ui/components/Loader'
-import loaderAppearance from 'src/components/Loader/appearance.json'
-
 import {
-  fillProps,
   heightProps,
   positionProps,
   textColorProps,
   textSizeProps,
   widthProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import loaderAppearance from '../appearance.json'
+import { Loader, loaderConfig } from '../Loader'
 
 loaderConfig.setAppearance(loaderAppearance)
 
 export default {
-  title: 'Atoms / Loader',
-  component: Loader,
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    left: {
+    children: {
       if: { arg: 'advancedProps' },
     },
-    right: {
-      if: { arg: 'advancedProps' },
+    width: {
+      control: 'inline-radio',
+      options: widthProps,
     },
-    children: {
+    height: {
+      control: 'inline-radio',
+      options: heightProps,
+    },
+    position: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
+      options: positionProps,
     },
-    className: {
+    right: {
       if: { arg: 'advancedProps' },
     },
-    position: {
-      options: positionProps,
-      control: 'inline-radio',
+    left: {
       if: { arg: 'advancedProps' },
     },
+    advancedProps: { control: 'boolean' },
     appearance: {
+      control: 'inline-radio',
       options: [
         null,
         'accent',
@@ -44,29 +46,25 @@ export default {
         'surfaceSecondary',
         'surfaceTertiary',
       ],
-      control: 'inline-radio',
     },
-    width: {
-      options: widthProps,
-      control: 'inline-radio',
+    className: {
+      if: { arg: 'advancedProps' },
     },
-    height: {
-      options: heightProps,
+    set: {
       control: 'inline-radio',
+      options: [null, 'simple'],
     },
     textColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     textSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-    },
-    set: {
-      options: [null, 'simple'],
       control: 'inline-radio',
+      options: textSizeProps,
     },
   },
+  component: Loader,
+  title: 'Atoms / Loader',
 }
 
 export const Default = {

package/dist/stories/Logo.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as LogoStories from './Logo.stories.js'
+
+<Meta of={LogoStories} />
+
+# Logo
+
+## SizeS
+
+<Canvas sourceState="shown" of={LogoStories.SizeS} />
+
+## SizeM
+
+<Canvas sourceState="shown" of={LogoStories.SizeM} />
+
+## SizeL
+
+<Canvas sourceState="shown" of={LogoStories.SizeL} />

package/dist/stories/Logo.stories.js

@@ -1,65 +1,65 @@
-import { Logo } from '@itcase/ui/components/Logo'
-import { alignDirectionProps, alignProps, widthProps } from '@itcase/ui/constants'
+import { alignDirectionProps, alignProps, widthProps } from '../../../constants'
+import { Logo } from '../Logo'
 
 export default {
-  title: 'Atoms / Logo',
-  component: Logo,
   argTypes: {
-    advancedProps: { control: 'boolean' },
     children: {
       if: { arg: 'advancedProps' },
     },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    isLink: {
-      if: { arg: 'advancedProps' },
+    width: {
+      control: 'inline-radio',
+      options: widthProps,
     },
-    logoSrc: {
-      if: { arg: 'advancedProps' },
+    alignItems: {
+      control: 'inline-radio',
+      options: alignProps,
     },
-    target: {
+    isLink: {
       if: { arg: 'advancedProps' },
     },
+    advancedProps: { control: 'boolean' },
     align: {
-      options: alignProps,
       control: 'inline-radio',
-    },
-    alignItems: {
       options: alignProps,
-      control: 'inline-radio',
     },
     alignDirection: {
-      options: alignDirectionProps,
       control: 'inline-radio',
+      options: alignDirectionProps,
     },
-    width: {
-      options: widthProps,
-      control: 'inline-radio',
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    href: {
+      if: { arg: 'advancedProps' },
     },
     link: {
       if: { arg: 'advancedProps' },
     },
-    href: {
+    logoSrc: {
       if: { arg: 'advancedProps' },
     },
+    mode: {
+      control: 'inline-radio',
+      options: [null, 'skeleton'],
+    },
     size: {
-      options: ['s', 'm', 'l'],
       control: 'inline-radio',
+      options: ['s', 'm', 'l'],
     },
     sizeMobile: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
       options: ['s', 'm', 'l'],
-      control: 'inline-radio',
     },
     source: {
       if: { arg: 'advancedProps' },
     },
-    mode: {
-      options: [null, 'skeleton'],
-      control: 'inline-radio',
+    target: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: Logo,
+  title: 'Atoms / Logo',
 }
 
 export const Default = {
@@ -93,7 +93,7 @@ export const SizeL = {
 export const SkeletonMode = {
   args: {
     ...Default.args,
-    size: 'l',
     mode: 'skeleton',
+    size: 'l',
   },
 }

package/dist/stories/MenuItem.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as MenuItemStories from './MenuItem.stories.js'
+
+<Meta of={MenuItemStories} />
+
+# MenuItem
+
+## Active
+
+<Canvas sourceState="shown" of={MenuItemStories.Active} />
+
+## Subitem
+
+<Canvas sourceState="shown" of={MenuItemStories.SetSubitem} />