@itcase/ui 1.2.18 → 1.2.20

package/dist/stories/Notification.stories.js

@@ -1,31 +1,18 @@
-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'
+import { textSizeProps, titleSizeProps } from '../../../constants'
+import { Button, buttonConfig } from '../../Button'
+import buttonAppearance from '../../Button/appearance.json'
+import { Icon } from '../../Icon'
+import notificationAppearance from '../appearance.json'
+import { NotificationItem, notificationItemConfig } from '../NotificationItem'
 
 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: {
+      control: 'inline-radio',
       options: [
         null,
         'accent',
@@ -35,36 +22,40 @@ export default {
         'surfaceSecondary',
         'surfaceTertiary',
       ],
-      control: 'inline-radio',
+    },
+    className: {
+      if: { arg: 'advancedProps' },
     },
     set: {
-      options: [null, 'top', 'float', 'form', 'toast'],
       control: 'inline-radio',
+      options: [null, 'top', 'float', 'form', 'toast'],
     },
     status: {
-      options: [null, 'success', 'error', 'warning'],
       control: 'inline-radio',
+      options: [null, 'success', 'error', 'warning'],
     },
     textSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
     titleTextSize: {
-      options: titleSizeProps,
       control: 'inline-radio',
+      options: titleSizeProps,
     },
     type: {
       if: { arg: 'advancedProps' },
     },
   },
+  component: NotificationItem,
+  title: 'Molecules / Notification',
 }
 
 export const Default = {
   args: {
     set: 'top',
-    title: 'Heading',
-    text: 'Text',
     status: 'success',
+    text: 'Text',
+    title: 'Heading',
   },
 }
 
@@ -79,16 +70,9 @@ export const Top = {
 export const Float = {
   args: {
     ...Default.args,
+    closeButton: <Icon iconFill="surfaceItemSecondary" imageSrc="assets/16/Remove.svg" size="16" />,
     set: 'float',
     status: 'warning',
-    closeButton: (
-      <Icon
-        iconFill="surfaceItemSecondary"
-        size="16"
-        SvgImage={icon16.Remove}
-        // TODO: onClick={}
-      />
-    ),
   },
 }
 
@@ -104,25 +88,18 @@ export const Form = {
 export const Toast = {
   args: {
     ...Default.args,
-    set: 'toast',
-    status: null,
     after: (
       <Button
+        width="fill"
+        labelTextSize="m"
         appearance="accent"
         label="Обновить приложение"
-        labelTextSize="m"
         shape="rounded"
         size="l"
-        width="fill"
-      />
-    ),
-    closeButton: (
-      <Icon
-        iconFill="surfaceItemSecondary"
-        size="16"
-        SvgImage={icon16.Remove}
-        // TODO: onClick={}
       />
     ),
+    closeButton: <Icon iconFill="surfaceItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
+    set: 'toast',
+    status: null,
   },
 }

package/dist/stories/Order.mdx

@@ -0,0 +1,52 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as OrderStories from './FlexOrder.stories.js'
+
+<Meta title="Layout / Flex / Order" />
+
+# Order
+
+Свойство `order` определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему.
+При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.
+
+```js
+<FlexItem order="...">...</FlexItem>
+```
+
+## Значения
+
+- `-1` — Элемент выведется первым
+- `0` — Значение по умолчанию. Элемент будет располагаться в том порядке, в каком появляется в исходном коде
+- `1` — Элемент выведется последним
+
+# Примеры использования
+
+### Значение -1
+
+Элемент выведется первым
+
+```js
+<FlexItem order="-1">...</FlexItem>
+```
+
+<Canvas of={OrderStories.First} />
+
+### Значение 0
+
+Значение по умолчанию. Элемент будет располагаться в том порядке, в каком появляется в исходном коде
+
+```js
+<FlexItem order="0">...</FlexItem>
+```
+
+<Canvas of={OrderStories.Regular} />
+
+### Значение 1
+
+Элемент выведется последним
+
+```js
+<FlexItem order="1">...</FlexItem>
+```
+
+<Canvas of={OrderStories.Last} />

package/dist/stories/Overview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TooltipStories from './Tooltip.stories.js'
+
+<Meta title="Atoms / Tooltip / Overview" />
+
+# Tooltip
+
+`Tooltip` - это небольшой фрагмент контекстной информации, который появляется, когда пользователи наводят курсор мыши на элемент пользовательского интерфейса.
+
+<Story of={TooltipStories.surfacePrimary} />

package/dist/stories/Page.stories.js

@@ -0,0 +1,28 @@
+import { expect, userEvent, within } from '@storybook/test';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedOut = {};
+
+// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};

package/dist/stories/Pagination.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as PaginationStories from './Pagination.stories.js'
+
+<Meta of={PaginationStories} />
+
+# Pagination
+
+## Default
+
+<Canvas sourceState="shown" of={PaginationStories.Default} />

package/dist/stories/Pagination.stories.js

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

package/dist/stories/Playground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as TooltipStories from './Tooltip.stories.js'
+
+<Meta title="Atoms / Tooltip / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={TooltipStories.surfacePrimary} />
+<Controls of={TooltipStories.surfacePrimary} />

package/dist/stories/Radio.mdx

@@ -0,0 +1,29 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as RadioStories from './Radio.stories.js'
+
+<Meta of={RadioStories} />
+
+# Radio
+
+## Active
+
+<Canvas sourceState="shown" of={RadioStories.Active} />
+
+## Disabled
+
+<Canvas sourceState="shown" of={RadioStories.Disabled} />
+
+## Checked
+
+<Canvas sourceState="shown" of={RadioStories.Checked} />
+
+## CheckedDisabled
+
+<Canvas sourceState="shown" of={RadioStories.CheckedDisabled} />
+
+
+Active
+Disabled
+Checked
+CheckedDisabled

package/dist/stories/Radio.stories.js

@@ -1,74 +1,73 @@
-import { Radio, radioConfig } from '@itcase/ui/components/Radio'
-import radioState from 'src/components/Radio/state.json'
-
-import { shapeProps, textColorProps, textSizeProps } from '@itcase/ui/constants'
+import { shapeProps, textColorProps, textSizeProps } from '../../../constants'
+import { Radio, radioConfig } from '../Radio'
+import radioState from '../state.json'
 
 radioConfig.setState(radioState)
 
 export default {
-  title: 'Atoms / Radio',
-  component: Radio,
   argTypes: {
     advancedProps: { control: 'boolean' },
+    checked: {
+      control: 'boolean',
+    },
     className: {
       if: { arg: 'advancedProps' },
     },
-    tag: {
-      if: { arg: 'advancedProps' },
+    descTextColor: {
+      control: 'select',
+      options: textColorProps,
     },
-    shape: {
-      options: shapeProps,
+    descTextSize: {
       control: 'inline-radio',
-    },
-    labelTextSize: {
       options: textSizeProps,
-      control: 'inline-radio',
+    },
+    disabled: {
+      control: 'boolean',
     },
     labelTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
-    descTextSize: {
-      options: textSizeProps,
+    labelTextSize: {
       control: 'inline-radio',
+      options: textSizeProps,
     },
-    descTextColor: {
-      options: textColorProps,
-      control: 'select',
-    },
-    checked: {
-      control: 'boolean',
+    shape: {
+      control: 'inline-radio',
+      options: shapeProps,
     },
-    disabled: {
-      control: 'boolean',
+    tag: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: Radio,
+  title: 'Atoms / Radio',
 }
 
 export const Default = {
   args: {
-    label: 'Radio',
-    labelTextSize: 'm',
-    labelTextColor: 'surfaceTextPrimary',
     desc: 'Description',
-    descTextSize: 'xxs',
     descTextColor: 'surfaceTextTertiary',
-
-    stateShape: 'circular',
+    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',
-    stateCheckmarkFill: 'surfaceItemAccent',
-    stateCheckmarkFillDisabled: 'surfaceItemDisabled',
+    stateShape: 'circular',
   },
 }
 

package/dist/stories/Response.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as ResponseStories from './Response.stories.js'
+
+<Meta of={ResponseStories} />
+
+# Response Set: Default
+## Success
+<Canvas sourceState="shown" of={ResponseStories.Success} />
+
+## Warning
+<Canvas sourceState="shown" of={ResponseStories.Warning} />
+
+## Error
+<Canvas sourceState="shown" of={ResponseStories.Error} />
+
+## Fail
+<Canvas sourceState="shown" of={ResponseStories.Fail} />

package/dist/stories/Response.stories.js

@@ -0,0 +1,66 @@
+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 WithoutProps = {
+  args: {
+    ...Default.args,
+  },
+}
+
+export const Dev = {
+  args: {
+    ...Default.args,
+    padding: 24,
+    appearance: 'dev',
+    imageSrc: 'assets/search.svg',
+  },
+}
+
+export const Success = {
+  args: {
+    ...Default.args,
+    imageSrc: 'assets/response/success.svg',
+    state: 'success',
+  },
+}
+
+export const Warning = {
+  args: {
+    ...Default.args,
+    imageSrc: 'assets/response/warning.svg',
+    state: 'warning',
+  },
+}
+
+export const Error = {
+  args: {
+    ...Default.args,
+    imageSrc: 'assets/response/error.svg',
+    state: 'error',
+  },
+}
+
+export const Fail = {
+  args: {
+    ...Default.args,
+    imageSrc: 'assets/response/fail.svg',
+    state: 'fail',
+  },
+}

package/dist/stories/SearchInput.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as SearchInputStories from './SearchInput.stories.js'
+
+<Meta of={SearchInputStories} />
+
+# SearchInput
+
+## С иконкой для очистки поля ClearIcon
+
+<Canvas of={SearchInputStories.ClearIcon} />
+
+## С иконкой до текста BeforeIcon
+
+<Canvas of={SearchInputStories.BeforeIcon} />
+
+## С иконкой после текста AfterIcon
+
+<Canvas of={SearchInputStories.AfterIcon} />