@skbkontur/react-ui 5.1.7 → 5.2.0

package/cjs/components/Modal/__creevey__/Modal.creevey.mts

@@ -1,295 +0,0 @@
-import { story, kind, test } from 'creevey';
-import { Key } from 'selenium-webdriver';
-
-import { delay } from '../../../lib/delay';
-
-const topMiddleBottomModalTests = () => {
-  test('top', async (context) => {
-    await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
-  });
-
-  test('middle', async (context) => {
-    await context.webdriver.executeScript(function () {
-      const modalContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
-      const modalContent = window.document.querySelector('[data-tid="modal-content"]') as HTMLElement;
-
-      modalContainer.scrollTop = modalContent.offsetHeight / 2;
-    });
-    await delay(100);
-    await context.matchImage(await context.webdriver.takeScreenshot(), 'middle');
-  });
-
-  test('bottom', async (context) => {
-    await context.webdriver.executeScript(function () {
-      const modalContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
-      const modalContent = window.document.querySelector('[data-tid="modal-content"]') as HTMLElement;
-
-      modalContainer.scrollTop = modalContent.offsetHeight;
-    });
-    await delay(100);
-    await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
-  });
-};
-
-kind('Modal', () => {
-  story('ModalWithFooterPanelStory', () => {
-    test('open modal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Button"]:nth-of-type(1)' }))
-        .perform();
-      await delay(100);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
-    });
-  });
-
-  story('WithIconInput', () => {
-    test('open modal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
-    });
-  });
-
-  story('ModalOverAnotherModalStory', () => {
-    test('open first modal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
-        .perform();
-      await delay(200);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open first modal');
-    });
-
-    test('open second modal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-second-modal"]' }))
-        .perform();
-      await delay(100);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open second modal');
-    });
-  });
-
-  story('ModalWithoutFooterPanelStory', () => {
-    test('open modal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await delay(200);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
-    });
-  });
-
-  story('ModalWithoutFooterStory', () => {
-    test('open modal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
-    });
-  });
-
-  story('ModalMobileView', () => {
-    test('idle', async (context) => {
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'idle');
-    });
-  });
-
-  story('ModalWithVariableHeightOfContent', () => {
-    test('open modal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await delay(100);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
-    });
-
-    test('toggle content height', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '#modal-inner [data-comp-name~="Toggle"]' }))
-        .pause(500)
-        .perform();
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'toggle content height');
-    });
-  });
-
-  story('ModalWithoutStickyElements', () => {
-    topMiddleBottomModalTests();
-  });
-
-  story('SmallModalOnTheTop', () => {
-    test('open modal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await delay(100);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
-    });
-
-    test('close by click on the cross', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid="modal-close"]' }))
-        .perform();
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'close by click on the cross');
-    });
-
-    test("doesn't close by click on the content", async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid="modal-content-button"]' }))
-        .perform();
-      await context.matchImage(await context.webdriver.takeScreenshot(), "doesn't close by click on the content");
-    });
-
-    test('closes by click on the background', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid="modal-container"]' }))
-        .perform();
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'closes by click on the background');
-    });
-  });
-
-  story('ModalWithChildrenFromOtherComponent', () => {
-    topMiddleBottomModalTests();
-  });
-
-  story('MobileModal', () => {
-    test('top', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await delay(200);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
-    });
-
-    test('middle', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await delay(200);
-      await context.webdriver.executeScript(function () {
-        const modalContent = window.document.querySelector('.focus-lock-container') as HTMLElement;
-        const modalBody = window.document.querySelector('[data-comp-name~="Modal.Body"] ') as HTMLElement;
-
-        modalContent.scrollTop = modalBody.offsetHeight / 2;
-      });
-      await delay(100);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'middle');
-    });
-
-    test('bottom', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
-        .perform();
-      await delay(200);
-      await context.webdriver.executeScript(function () {
-        const modalContent = window.document.querySelector('.focus-lock-container') as HTMLElement;
-        const modalBody = window.document.querySelector('[data-comp-name~="Modal.Body"] ') as HTMLElement;
-
-        modalContent.scrollTop = modalBody.offsetHeight;
-      });
-      await delay(100);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
-    });
-  });
-
-  story('ChangeAllModalContent', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
-    });
-    test('idle', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
-        .perform();
-      await delay(500);
-      const firstModal = await context.webdriver.takeScreenshot();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: `[data-tid~="open-second-modal"] button` }))
-        .perform();
-      await delay(500);
-      const secondModal = await context.webdriver.takeScreenshot();
-      await context.matchImages({ firstModal, secondModal });
-    });
-  });
-
-  story('CrossFocusedByTab', () => {
-    test('idle', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .sendKeys(Key.TAB)
-        .perform();
-      await delay(200);
-      await context.matchImage(await context.webdriver.takeScreenshot());
-    });
-  });
-});

package/cjs/components/Modal/__docs__/Modal.mdx

@@ -1,27 +0,0 @@
-import * as ModalStories from './Modal.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={ModalStories} />
-
-<Header
-  component="Modal"
-  guides="https://guides.kontur.ru/components/popup-elements/modal/"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A11142"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/cjs/components/Modal/__docs__/ModalBody.mdx

@@ -1,15 +0,0 @@
-import { ArgTypes } from '@storybook/blocks';
-
-import * as ModalBodyStories from '../__docs__/ModalBody.docs.stories.tsx';
-
-import { Meta } from '../../../.storybook/Meta';
-
-<Meta of={ModalBodyStories} />
-
-# ModalBody
-
-Контейнер с отступами от края модалки.
-
-## Пропы
-
-<ArgTypes />

package/cjs/components/Modal/__docs__/ModalFooter.mdx

@@ -1,15 +0,0 @@
-import { ArgTypes } from '@storybook/blocks';
-
-import * as ModalFooterStories from '../__docs__/ModalFooter.docs.stories.tsx';
-
-import { Meta } from '../../../.storybook/Meta';
-
-<Meta of={ModalFooterStories} />
-
-# ModalFooter
-
-Футер модального окна.
-
-## Пропы
-
-<ArgTypes />

package/cjs/components/Modal/__docs__/ModalHeader.mdx

@@ -1,15 +0,0 @@
-import { ArgTypes } from '@storybook/blocks';
-
-import * as ModalHeaderStories from '../__docs__/ModalHeader.docs.stories.tsx';
-
-import { Meta } from '../../../.storybook/Meta';
-
-<Meta of={ModalHeaderStories} />
-
-# ModalHeader
-
-Шапка модального окна.
-
-## Пропы
-
-<ArgTypes />

package/cjs/components/Modal/__docs__/ModalSeparator.mdx

@@ -1,15 +0,0 @@
-import { ArgTypes } from '@storybook/blocks';
-
-import * as ModalSeparatorStories from '../__docs__/ModalSeparator.docs.stories.tsx';
-
-import { Meta } from '../../../.storybook/Meta';
-
-<Meta of={ModalSeparatorStories} />
-
-# ModalSeparator
-
-Разделитель.
-
-## Пропы
-
-<ArgTypes />

package/cjs/components/Paging/__creevey__/Paging.creevey.mts

@@ -1,97 +0,0 @@
-import { story, kind, test } from 'creevey';
-import { Key } from 'selenium-webdriver';
-
-import { delay } from '../../../lib/delay';
-
-kind('Paging', () => {
-  story('GoToAbsensePageStory', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'hover does not work in chrome': {
-          in: ['chrome2022', 'chrome2022Dark'],
-          tests: ['hover', 'Move to page by Ender'],
-        },
-        flaky: {
-          in: ['firefox2022', 'firefox2022Dark'],
-          tests: ['Move focus right', 'Move to page by Ender'],
-        },
-      },
-    });
-
-    test('plain', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'plain');
-    });
-
-    test('hover', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .move({
-          origin: context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }),
-        })
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'hover');
-    });
-
-    test('change page by number', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'change page by number');
-    });
-
-    test('change page by forwardLink', async (context) => {
-      // NOTE Firefox bug if click send right after click from previous test it results as double click
-      await delay(500);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: `[data-tid='Paging__forwardLink']` }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'change page by forwardLink');
-    });
-
-    test('focused', async (context) => {
-      // NOTE Firefox bug if click send right after click from previous test it results as double click
-      await delay(500);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'focused');
-    });
-
-    test('Move focus right', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
-        .pause(100)
-        .sendKeys(Key.ARROW_RIGHT)
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'Move focus right');
-    });
-
-    test('Move to page by Ender', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
-        .pause(100)
-        .sendKeys(Key.ARROW_RIGHT)
-        .pause(100)
-        .sendKeys(Key.ENTER)
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'Move to page by Ender');
-    });
-  });
-});

package/cjs/components/Paging/__docs__/Paging.mdx

@@ -1,27 +0,0 @@
-import * as PagingStories from './Paging.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={PagingStories} />
-
-<Header
-  component="Paging"
-  guides="https://guides.kontur.ru/components/navigation/paging/"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=281%3A18146"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/cjs/components/PasswordInput/__creevey__/PasswordInput.creevey.mts

@@ -1,46 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-kind('PasswordInput', () => {
-  story('Plain', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'flickering screenshot': { in: ['chrome2022'], tests: ['With typed password'] },
-      },
-    });
-
-    test('Plain', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'Plain');
-    });
-
-    test('With typed password', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[type="password"]' }))
-        .sendKeys('Test...')
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'With typed password');
-    });
-
-    test('With visible password', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[type="password"]' }))
-        .sendKeys('Test...')
-        .click(context.webdriver.findElement({ css: '[data-tid="PasswordInputEyeIcon"]' }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'With visible password');
-    });
-  });
-
-  story('Width', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'no themes': { in: /^(?!\b(chrome2022)\b)/ },
-      },
-    });
-  });
-});

package/cjs/components/PasswordInput/__docs__/PasswordInput.mdx

@@ -1,27 +0,0 @@
-import * as PasswordInputStories from './PasswordInput.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={PasswordInputStories} />
-
-<Header
-  component="PasswordInput"
-  guides="https://guides.kontur.ru/components/input-fields/password/"
-  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/cjs/components/Radio/__creevey__/Radio.creevey.mts

@@ -1,28 +0,0 @@
-import { story, kind, test } from 'creevey';
-import { Key } from 'selenium-webdriver';
-
-kind('Radio', () => {
-  story('Highlighted', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        flaky: { in: /firefox/ },
-      },
-    });
-
-    test('plain', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'plain');
-    });
-
-    test('tabPress', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'body' }))
-        .sendKeys(Key.TAB)
-        .pause(500)
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'tabPress');
-    });
-  });
-});

package/cjs/components/Radio/__docs__/Radio.mdx

@@ -1,27 +0,0 @@
-import * as RadioStories from './Radio.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={RadioStories} />
-
-<Header
-  component="Radio"
-  guides="https://guides.kontur.ru/components/selection-elements/radio/"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A2669"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />