@skbkontur/react-ui 5.1.7 → 5.2.0

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

@@ -1,421 +0,0 @@
-import { story, kind, test } from 'creevey';
-import { Key } from 'selenium-webdriver';
-
-import { delay } from '../../../lib/delay';
-import { SidePageFooterDataTids } from '../SidePageFooter';
-
-const simpleTests = () => {
-  test('open side-page', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
-      .perform();
-    await context.matchImage(await context.webdriver.takeScreenshot(), 'open side-page');
-  });
-};
-
-kind('SidePage', () => {
-  story('SidePageOverAnotherSidePageStory', () => {
-    test('open internal side-page', async (context) => {
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="SidePage.Body"] button' }))
-        .perform();
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open internal side-page');
-    });
-
-    test('close internal side-page', async (context) => {
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="SidePage.Body"] button' }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(
-          context.webdriver.findElement({ css: '.react-ui:last-child [data-comp-name~="SidePage.Footer"] button' }),
-        )
-        .perform();
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'close internal side-page');
-    });
-  });
-
-  story('StickySidePageHeaderWhenAnotherSidePageStory', () => {
-    test('sticky header, open and close internal side-page', async (context) => {
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="SidePage.Body"] button' }))
-        .perform();
-      await context.webdriver.executeScript(function () {
-        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]');
-
-        if (sidepageContainer) {
-          sidepageContainer.scrollTop = 3000;
-        }
-      });
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(
-          context.webdriver.findElement({ css: '.react-ui:last-child [data-comp-name~="SidePage.Footer"] button' }),
-        )
-        .perform();
-      await context.matchImage(
-        await context.webdriver.takeScreenshot(),
-        'sticky header, open and close internal side-page',
-      );
-    });
-  });
-
-  story('Simple', () => {
-    simpleTests();
-  });
-
-  story('MobileSimple', () => {
-    simpleTests();
-  });
-
-  story('BodyWithoutFooter', () => {
-    test('scroll to bottom', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
-        .perform();
-      await context.webdriver.executeScript(function () {
-        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
-
-        sidepageContainer.scrollTop = 3000;
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom');
-    });
-  });
-
-  story('BodyWithoutHeader', () => {
-    test('open side-page without header', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
-        .perform();
-      await delay(100);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'open side-page without header');
-    });
-  });
-
-  story('SidePageWithFocusLockWhenBackgroundBlocked', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'unstable tests in firefox2022': { in: /^(?!\b(chrome2022)\b)/ } } });
-
-    test('open side-page', async (context) => {
-      const pressTab = async () => {
-        await context.webdriver
-          .actions({
-            bridge: true,
-          })
-          .sendKeys(Key.TAB)
-          .perform();
-        await delay(4000);
-      };
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
-        .perform();
-      await delay(1000);
-      await pressTab();
-      const firstTimeTabPress = await context.webdriver.takeScreenshot();
-      await pressTab();
-      const secondTimeTabPress = await context.webdriver.takeScreenshot();
-      await pressTab();
-      const thirdTimeTabPress = await context.webdriver.takeScreenshot();
-      await pressTab();
-      const fourthTimeTabPress = await context.webdriver.takeScreenshot();
-      await context.matchImages({
-        firstTimeTabPress,
-        secondTimeTabPress,
-        thirdTimeTabPress,
-        fourthTimeTabPress,
-      });
-    });
-  });
-
-  story('TestUpdateLayoutMethodStory', () => {
-    test('idle', async (context) => {
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'idle');
-    });
-
-    test('Body content has been changed', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="toggle-body-content"]' }))
-        .perform();
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'Body content has been changed');
-    });
-
-    test('child component content has been changed', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="toggle-child-component-content"]' }))
-        .perform();
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'child component content has been changed');
-    });
-
-    test('update layout', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="toggle-child-component-content"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-tid="update"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'update layout');
-    });
-  });
-
-  story('WithLongTitleStory', () => {
-    test('not fixed', async (context) => {
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'not fixed');
-    });
-
-    test('fixed close element', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const sidePageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
-        const sidePageHeader = window.document.querySelector('[data-comp-name~="SidePage.Header"]') as HTMLElement;
-        const fixedHeaderHeight = 50;
-
-        sidePageContainer.scrollTop = (sidePageHeader.offsetHeight - fixedHeaderHeight) / 2;
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed close element');
-    });
-
-    test('fixed header', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const sidePageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
-        const sidePageHeader = window.document.querySelector('[data-comp-name~="SidePage.Header"]') as HTMLElement;
-        const fixedHeaderHeight = 50;
-
-        sidePageContainer.scrollTop = sidePageHeader.offsetHeight - fixedHeaderHeight;
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed header');
-    });
-  });
-
-  story('SidePageWithChildrenFromOtherComponent', () => {
-    test('without header, footer', async (context) => {
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'without header, footer');
-    });
-
-    test('scroll to bottom without header, footer', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
-
-        sidepageContainer.scrollTop = 3000;
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom without header, footer');
-    });
-
-    test('with header, footer', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__header-toggle"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
-        .pause(1000)
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'with header, footer');
-    });
-
-    test('scroll to bottom with header, footer', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__header-toggle"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
-        .perform();
-      await context.webdriver.executeScript(function () {
-        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
-
-        sidepageContainer.scrollTop = 3000;
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom with header, footer');
-    });
-
-    test('with panel', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__panel-toggle"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'with panel');
-    });
-
-    test('scroll to bottom with panel', async (context) => {
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__panel-toggle"]' }))
-        .perform();
-      await context.webdriver.executeScript(function () {
-        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
-
-        sidepageContainer.scrollTop = 3000;
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom with panel');
-    });
-  });
-
-  story('SidePageWithBlockBackground', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'unstable tests in firefox2022': { in: /^(?!\b(chrome2022)\b)/ } } });
-
-    test('open side-page', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot());
-    });
-  });
-
-  story('SidePageChangeBlockBgAndIgnoreBgClick', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
-      captureElement: 'body',
-    });
-
-    test('change sidepage mode to view to edit to view', async (context) => {
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
-        .perform();
-      await delay(100);
-      const viewModeSidePage = await context.takeScreenshot();
-
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: `[data-tid~="${SidePageFooterDataTids.root}"] button` }))
-        .perform();
-      await delay(100);
-      const editModeSidePage = await context.webdriver.takeScreenshot();
-
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: `[data-tid~="${SidePageFooterDataTids.root}"] button` }))
-        .perform();
-      await delay(100);
-      const againViewModeSidePage = await context.takeScreenshot();
-
-      await delay(100);
-      await context.matchImages({ viewModeSidePage, editModeSidePage, againViewModeSidePage });
-    });
-  });
-
-  story('NestedSidePagesWithChangingVeil', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
-      captureElement: 'body',
-    });
-
-    test('idle', async (context) => {
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-side-page"]' }))
-        .perform();
-      await delay(500);
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-second-side-page"]' }))
-        .perform();
-      await delay(500);
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid~="open-third-side-page"]' }))
-        .perform();
-      await delay(500);
-      const thirdOpenedNoVeils = await context.takeScreenshot();
-
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: `[data-tid~="veil-first-from-third-side-page"]` }))
-        .perform();
-      await delay(500);
-      const thirdOpenedWithFirstVeil = await context.webdriver.takeScreenshot();
-
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: `[data-tid~="veil-second-from-third-side-page"] button` }))
-        .perform();
-      await delay(500);
-      const thirdOpenedWithFirstAndSecondVeils = await context.takeScreenshot();
-
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: `[data-tid~="veil-second-from-third-side-page"] button` }))
-        .perform();
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: `[data-tid~="veil-third-from-third-side-page"] button` }))
-        .perform();
-      await delay(500);
-      const thirdOpenedWithFirstAndThirdVeils = await context.takeScreenshot();
-
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: `[data-tid~="close-third-side-page"] button` }))
-        .perform();
-      await delay(500);
-      const secondOpenedWithFirstVeilAndNoSecondVeil = await context.takeScreenshot();
-
-      await context
-        .expect({
-          thirdOpenedNoVeils,
-          thirdOpenedWithFirstVeil,
-          thirdOpenedWithFirstAndSecondVeils,
-          thirdOpenedWithFirstAndThirdVeils,
-          secondOpenedWithFirstVeilAndNoSecondVeil,
-        })
-        .to.matchImages();
-    });
-  });
-});

package/cjs/components/SidePage/__docs__/SidePage.mdx

@@ -1,27 +0,0 @@
-import * as SidePageStories from './SidePage.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={SidePageStories} />
-
-<Header
-  component="SidePage"
-  guides="https://guides.kontur.ru/components/popup-elements/sidepage/"
-  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/SidePage/__docs__/SidePageBody.mdx

@@ -1,16 +0,0 @@
-import { ArgTypes } from '@storybook/blocks';
-
-import * as SidePageBodyStories from '../__docs__/SidePageBody.docs.stories.tsx';
-
-import { Meta } from '../../../.storybook/Meta';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={SidePageBodyStories} />
-
-# SidePageBody
-
-Тело для сайдпейджа.
-
-## Пропы
-
-<ArgTypes />

package/cjs/components/SidePage/__docs__/SidePageContainer.mdx

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

package/cjs/components/SidePage/__docs__/SidePageFooter.mdx

@@ -1,15 +0,0 @@
-import { ArgTypes } from '@storybook/blocks';
-
-import * as SidePageFooterStories from '../__docs__/SidePageFooter.docs.stories.tsx';
-
-import { Meta } from '../../../.storybook/Meta';
-
-<Meta of={SidePageFooterStories} />
-
-# SidePageFooter
-
-Футер сайдпейджа.
-
-## Пропы
-
-<ArgTypes />

package/cjs/components/SidePage/__docs__/SidePageHeader.mdx

@@ -1,15 +0,0 @@
-import { ArgTypes } from '@storybook/blocks';
-
-import * as SidePageHeaderStories from '../__docs__/SidePageHeader.docs.stories.tsx';
-
-import { Meta } from '../../../.storybook/Meta';
-
-<Meta of={SidePageHeaderStories} />
-
-# SidePageHeader
-
-Шапка сайдпейджа.
-
-## Пропы
-
-<ArgTypes />

package/cjs/components/SingleToast/__docs__/SingleToast.mdx

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

package/cjs/components/Spinner/__docs__/Spinner.mdx

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

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

@@ -1,98 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-import { delay } from '../../../lib/delay';
-
-kind('Sticky', () => {
-  story('WideContainer', () => {
-    test('fixed', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const stickyContent = window.document.querySelector('[data-tid="stickyContent"]') as HTMLElement;
-        const nonStickyText = window.document.querySelector('[data-tid="nonStickyText"]') as HTMLElement;
-        const scrollXOffset = nonStickyText.getBoundingClientRect().width / 2;
-        const scrollYOffset = stickyContent.getBoundingClientRect().height / 2;
-
-        window.scrollTo(scrollXOffset, scrollYOffset);
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
-    });
-  });
-
-  story('Top', () => {
-    test('top', async (context) => {
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
-    });
-
-    test('fixed', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const stickyStop = window.document.querySelector('[data-tid="stickyStop"]') as HTMLElement;
-        const scrollOffset = stickyStop.getBoundingClientRect().top - window.innerHeight / 2;
-
-        window.scrollTo(0, scrollOffset);
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
-    });
-
-    test('stoped', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const stickyStop = window.document.querySelector('[data-tid="stickyStop"]') as HTMLElement;
-        stickyStop.scrollIntoView();
-      });
-      await context.webdriver.executeScript(function () {
-        const stickyContent = window.document.querySelector('[data-tid="stickyContent"]') as HTMLElement;
-        const scrollOffset = pageYOffset - stickyContent.getBoundingClientRect().height / 2;
-
-        window.scrollTo(0, scrollOffset);
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'stoped');
-    });
-  });
-
-  story('Bottom', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'flacky stopped position': {
-          in: ['firefox', 'firefox8px', 'firefoxDark'],
-          tests: 'stoped',
-        },
-      },
-    });
-
-    test('bottom', async (context) => {
-      await context.webdriver.executeScript(function () {
-        window.scrollTo(0, 9999);
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
-    });
-
-    test('fixed', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const sticky = window.document.querySelector('[data-comp-name~="Sticky"]') as HTMLElement;
-        const scrollOffset = sticky.getBoundingClientRect().top - window.innerHeight;
-
-        window.scrollTo(0, scrollOffset);
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
-    });
-
-    test('stoped', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const stickyStop = window.document.querySelector('[data-tid="stickyStop"]') as HTMLElement;
-        stickyStop.scrollIntoView(false);
-      });
-      await context.webdriver.executeScript(function () {
-        const stickyContent = window.document.querySelector('[data-tid="stickyContent"]') as HTMLElement;
-        const scrollOffset = pageYOffset + stickyContent.getBoundingClientRect().height / 2;
-
-        window.scrollTo(0, scrollOffset);
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
-    });
-  });
-});