@skbkontur/react-ui 5.1.7 → 5.2.0

package/components/FxInput/__docs__/FxInput.mdx

@@ -1,27 +0,0 @@
-import * as FxInputStories from './FxInput.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={FxInputStories} />
-
-<Header
-  component="FxInput"
-  guides="https://guides.kontur.ru/components/input-fields/input/#11"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A1602"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/Gapped/__docs__/Gapped.mdx

@@ -1,23 +0,0 @@
-import * as GappedStories from './Gapped.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={GappedStories} />
-
-<Header component="Gapped" />
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/GlobalLoader/__docs__/GlobalLoader.mdx

@@ -1,27 +0,0 @@
-import * as GlobalLoaderStories from './GlobalLoader.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={GlobalLoaderStories} />
-
-<Header
-  component="GlobalLoader"
-  guides="https://guides.kontur.ru/components/progress-indicators/global-loader/"
-  figma="https://www.figma.com/design/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI?node-id=396-15654&t=i9hraypi61DJWRFA-4"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/Group/__creevey__/Group.creevey.d.mts

@@ -1 +0,0 @@
-export {};

package/components/Group/__creevey__/Group.creevey.mts

@@ -1,19 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-kind('Group', () => {
-  story('SimpleGroupWithInputAndButton', () => {
-    test('plain', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'plain');
-    });
-
-    test('focused input', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'input' }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'focused input');
-    });
-  });
-});

package/components/Group/__docs__/Group.mdx

@@ -1,23 +0,0 @@
-import * as GroupStories from './Group.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={GroupStories} />
-
-<Header component="Group" />
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/Hint/__creevey__/Hint.creevey.d.mts

@@ -1 +0,0 @@
-export {};

package/components/Hint/__creevey__/Hint.creevey.mts

@@ -1,68 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-import { delay } from '../../../lib/delay';
-
-kind('Hint', () => {
-  story('SetManualAndOpenedPropOnClick', () => {
-    test('click on hint', async (context) => {
-      await context.webdriver
-        .actions()
-        .click(context.webdriver.findElement({ css: '#main' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'click on hint');
-    });
-  });
-
-  story('WithSVGIcon', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'internal logic being tested and not something UI related': {
-          in: [
-            'chromeDark',
-            'chrome8px',
-            'firefox8px',
-            'firefox',
-            'firefoxFlat8px',
-            'firefoxDark',
-            'ie118px',
-            'ie11',
-            'ie11Dark',
-          ],
-        },
-      },
-    });
-
-    test('idle', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'idle');
-    });
-
-    test('hover', async (context) => {
-      await context.webdriver
-        .actions()
-        .move({
-          origin: context.webdriver.findElement({ css: '[data-tid="icon"]' }),
-        })
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open');
-    });
-  });
-  story('top bottom center', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { "themes don't affect logic": { in: /^(?!\bchrome2022\b)/ } },
-    });
-  });
-  story('HintNearScreenEdge', ({ setStoryParameters }) => {
-    setStoryParameters({
-      captureElement: 'body',
-      skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
-    });
-  });
-
-  story('HintWithoutPortal', () => {
-    test('opened', async (context) => {
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open');
-    });
-  });
-});

package/components/Hint/__docs__/Hint.mdx

@@ -1,28 +0,0 @@
-import * as HintStories from './Hint.docs.stories.tsx';
-
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={HintStories} />
-
-<Header
-  component="Hint"
-  guides="https://guides.kontur.ru/components/popup-elements/hint/"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A5154"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/Input/__creevey__/Input.creevey.d.mts

@@ -1 +0,0 @@
-export {};

package/components/Input/__creevey__/Input.creevey.mts

@@ -1,239 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-import { delay } from '../../../lib/delay';
-
-const differentStatesTest = () => {
-  test('Plain', async (context) => {
-    const element = await context.webdriver.findElement({ css: '#input' });
-    await context.matchImage(await element.takeScreenshot(), 'Plain');
-  });
-
-  test('Focused', async (context) => {
-    const element = await context.webdriver.findElement({ css: '#input' });
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '#input input' }))
-      .pause(500)
-      .perform();
-    await context.matchImage(await element.takeScreenshot(), 'Focused');
-  });
-
-  test('With typed text', async (context) => {
-    const element = await context.webdriver.findElement({ css: '#input' });
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '#input input' }))
-      .sendKeys('Test...')
-      .pause(500)
-      .perform();
-    await context.matchImage(await element.takeScreenshot(), 'With typed text');
-  });
-
-  test('With long typed text', async (context) => {
-    const element = await context.webdriver.findElement({ css: '#input' });
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '#input input' }))
-      .sendKeys('Test...')
-      .sendKeys('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
-      .pause(500)
-      .perform();
-    await context.matchImage(await element.takeScreenshot(), 'With long typed text');
-  });
-};
-
-const testMaskedInput = () => {
-  test('idle, focus, edit, blur', async (context) => {
-    const click = (css: string) => {
-      return context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css }));
-    };
-    const idle = await context.takeScreenshot();
-    await click('input').pause(500).perform();
-    const focused = await context.takeScreenshot();
-    await click('input').sendKeys('953').perform();
-    const edited = await context.takeScreenshot();
-    await click('body').perform();
-    const blured = await context.takeScreenshot();
-    await context.matchImages({ idle, focused, edited, blured });
-  });
-};
-
-kind('Input', () => {
-  story('Default', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
-    });
-    differentStatesTest();
-  });
-
-  story('WithMask', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
-    });
-    testMaskedInput();
-  });
-
-  story('WithMaskAndCustomUnmaskedValue', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        "themes don't affect logic": { in: /^(?!\bchrome2022\b)/ },
-      },
-    });
-
-    testMaskedInput();
-  });
-
-  story('SelectAllByProp', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
-    });
-    test('Plain', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'Plain');
-    });
-
-    test('Focused', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'label' }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'Focused');
-    });
-  });
-
-  story('SelectAllByButton', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
-    });
-    test('Plain', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'Plain');
-    });
-
-    test('Selected', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="select-all"]' }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'Selected');
-    });
-  });
-
-  story('MaxLength', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ },
-        flaky: {
-          in: ['chrome2022'],
-          tests: ['With long typed text'],
-        },
-      },
-    });
-    differentStatesTest();
-  });
-
-  story('UncontrolledInputWithPlaceholder', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
-    });
-    test('PlainAndTyped', async (context) => {
-      const plain = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'input' }))
-        .sendKeys('text')
-        .perform();
-      const typed = await context.takeScreenshot();
-      await context.matchImages({ plain, typed });
-    });
-  });
-
-  story('WithMaskAndSelectAllProp', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { "themes don't affect logic": { in: /^(?!\bchrome2022\b)/ } } });
-
-    test('PlainAndSelected', async (context) => {
-      const plain = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'input' }))
-        .pause(500)
-        .perform();
-      const selectAllHalfFilledInput = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'input' }))
-        .sendKeys('1111')
-        .click(context.webdriver.findElement({ css: 'body' }))
-        .click(context.webdriver.findElement({ css: 'input' }))
-        .pause(500)
-        .perform();
-      const selectAllFilledInput = await context.takeScreenshot();
-      await context.matchImages({ plain, selectAllHalfFilledInput, selectAllFilledInput });
-    });
-  });
-
-  story('SearchTypeApi', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'tests only stable in chrome': { in: /^(?!\bchrome2022\b|\bchrome2022Dark\b)/ },
-      },
-    });
-
-    test('Focused', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'label' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'Focused');
-    });
-  });
-
-  story('InputTypeApi', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        "themes don't affect logic": { in: /^(?!\b(chrome|firefox)(2022).*\b)/ },
-      },
-    });
-
-    test('Focused', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'label' }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'Focused');
-    });
-  });
-  story('Type', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { 'no themes': { in: /^(?!\b(chrome2022)\b)/ } },
-    });
-  });
-  story('TypeApi', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { 'no themes': { in: /^(?!\b(chrome2022)\b)/ } },
-    });
-  });
-});

package/components/Input/__docs__/Input.mdx

@@ -1,27 +0,0 @@
-import * as InputStories from './Input.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={InputStories} />
-
-<Header
-  component="Input"
-  guides="https://guides.kontur.ru/components/input-fields/input/"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A1602"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/Kebab/__creevey__/Kebab.creevey.d.mts

@@ -1 +0,0 @@
-export {};

package/components/Kebab/__creevey__/Kebab.creevey.mts

@@ -1,147 +0,0 @@
-import { story, kind, test } from 'creevey';
-import { Key } from 'selenium-webdriver';
-
-import { PopupMenuDataTids } from '../../../internal/PopupMenu/tids';
-import { delay } from '../../../lib/delay';
-const textAlignmentTests = () => {
-  test('opened', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: `[data-tid~="${PopupMenuDataTids.caption}"]` }))
-      .perform();
-    await delay(1000);
-    await context.matchImage(await context.takeScreenshot(), 'opened');
-  });
-};
-
-const kebabTests = () => {
-  test('plain', async (context) => {
-    await context.matchImage(await context.takeScreenshot(), 'plain');
-  });
-
-  test('hovered', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .move({
-        origin: context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }),
-      })
-      .perform();
-    await context.matchImage(await context.takeScreenshot(), 'hovered');
-  });
-
-  test('clicked', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }))
-      .perform();
-    await context.matchImage(await context.takeScreenshot(), 'clicked');
-  });
-
-  test('clickedOnButton2ndTime', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }))
-      .click(context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }))
-      .perform();
-    await context.matchImage(await context.takeScreenshot(), 'clickedOnButton2ndTime');
-  });
-
-  test('tabPress', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .sendKeys(Key.TAB)
-      .perform();
-    await context.matchImage(await context.takeScreenshot(), 'tabPress');
-  });
-
-  test('enterPress', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .sendKeys(Key.TAB)
-      .sendKeys(Key.ENTER)
-      .perform();
-    await context.matchImage(await context.takeScreenshot(), 'enterPress');
-  });
-};
-
-kind('Kebab', () => {
-  story('Small', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'hover does not work in chrome': {
-          in: ['chrome2022', 'chrome2022Dark'],
-          tests: ['hovered', 'clickedOnButton2ndTime'],
-        },
-      },
-    });
-
-    kebabTests();
-  });
-
-  story('Medium', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'hover does not work in chrome': {
-          in: ['chrome2022', 'chrome2022Dark'],
-          tests: ['hovered', 'clickedOnButton2ndTime'],
-        },
-      },
-    });
-
-    kebabTests();
-  });
-
-  story('Large', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'hover does not work in chrome': {
-          in: ['chrome2022', 'chrome2022Dark'],
-          tests: ['hovered', 'clickedOnButton2ndTime'],
-        },
-      },
-    });
-
-    kebabTests();
-  });
-
-  story('MobileExampleWithHorizontalPadding', ({ setStoryParameters }) => {
-    setStoryParameters({ captureElement: null });
-
-    test('opened', async (context) => {
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }))
-        .perform();
-      await delay(200);
-      await context.webdriver
-        .actions({ bridge: true })
-        .move({ origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }) })
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened');
-    });
-  });
-  story('WithItemsAndIcons', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
-
-    textAlignmentTests();
-  });
-
-  story('WithItemsAndIconsWithoutTextAlignment', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
-
-    textAlignmentTests();
-  });
-});

package/components/Kebab/__docs__/Kebab.mdx

@@ -1,27 +0,0 @@
-import * as KebabStories from './Kebab.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={KebabStories} />
-
-<Header
-  component="Kebab"
-  guides="https://guides.kontur.ru/components/actions/kebab-menu/"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A2540"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/Link/__creevey__/Link.creevey.d.mts

@@ -1 +0,0 @@
-export {};