@skbkontur/react-ui 5.1.7 → 5.2.0

package/components/RadioGroup/__creevey__/RadioGroup.creevey.mts

@@ -1,86 +0,0 @@
-import { story, kind, test } from 'creevey';
-import { Key } from 'selenium-webdriver';
-
-import { delay } from '../../../lib/delay';
-
-kind('RadioGroup', () => {
-  story('Vertical', ({ setStoryParameters }) => {
-    setStoryParameters({
-      captureElement: '#RadioGroup-wrap',
-      skip: {
-        'hover does not work in chrome': {
-          in: ['chrome2022', 'chrome2022Dark'],
-          tests: ['hovered'],
-        },
-      },
-    });
-
-    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~="RadioGroup"] > span > label' }),
-        })
-        .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~="RadioGroup"] > span > label' }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'clicked');
-    });
-
-    test('mouseLeave', 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-comp-name~="RadioGroup"] > span > label' }))
-        .perform();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'mouseLeave');
-    });
-
-    test('tabPress', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
-        .sendKeys(Key.TAB)
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'tabPress');
-    });
-
-    test('arrow_down', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
-        .sendKeys(Key.TAB)
-        .pause(100)
-        .sendKeys(Key.DOWN)
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'arrow_down');
-    });
-  });
-});

package/components/RadioGroup/__docs__/RadioGroup.mdx

@@ -1,27 +0,0 @@
-import * as RadioGroupStories from './RadioGroup.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={RadioGroupStories} />
-
-<Header
-  component="RadioGroup"
-  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} />

package/components/ResponsiveLayout/__docs__/ResponsiveLayout.mdx

@@ -1,96 +0,0 @@
-import * as ResponsiveLayoutStories from './ResponsiveLayout.docs.stories.tsx';
-import { ArgTypes, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={ResponsiveLayoutStories} />
-
-<Header component="ResponsiveLayout" />
-
-<Description />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-```ts static
-interface ResponsiveLayoutFlags {
-  isMobile: boolean;
-}
-```
-
-### Компонент ожидает в себя функцию, в которую аргументом передается объект с флагом лэйаута.
-
-```jsx static
-import { ResponsiveLayout } from '@skbkontur/react-ui';
-
-class SomeComponent {
-  public render() {
-    return (
-      <ResponsiveLayout>
-        {
-          ({ isMobile }) => {
-            /* ... */
-          }
-        }
-      </ResponsiveLayout>
-    )
-  }
-}
-```
-
-### Также существует проп `onLayoutChange`, который вызывает переданный в него коллбэк при изменении лэйаута. Аргументом передается объект с флагом.
-
-```jsx static
-import { ResponsiveLayout } from '@skbkontur/react-ui';
-
-class SomeComponent {
-  public render() {
-    return (
-      <div>
-        <ResponsiveLayout onLayoutChange={({ isMobile }) => console.log(isMobile)} />
-      </div>
-    )
-  }
-}
-```
-
-### В компонент можно передать проп `customMediaQueries: MediaQueriesType`, который позволяет кастомизировать возвращаемые флаги:
-
-```ts static
-type MediaQueriesType = Record<string, string>;
-```
-
-### 1. Без кастомизации есть только флаг isMobile
-
-### 2. Поля из `customMediaQueries` дополняют список возвращаемых флагов в `ResponsiveLayoutFlags`
-
-### 3. При добавлении кастомного флага isMobile, значение дефолтного флага перезаписывается в пользу кастомного
-
-```jsx static
-import { ResponsiveLayout } from '@skbkontur/react-ui';
-
-const customMediaQueries = {
-  isTablet: '(min-width: 577px)',
-  isDesktop: '(min-width: 1280px)',
-};
-
-class SomeComponent {
-  public render() {
-    return (
-      <ResponsiveLayout customMediaQueries={customMediaQueries}>
-        {
-          ({ isMobile, isTablet, isDesktop }) => {
-            /* ... */
-          }
-        }
-      </ResponsiveLayout>
-    )
-  }
-}
-```
-
-Как альтернативу можно использовать хук [useResponsiveLayout](#/Mobiles).

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

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

package/components/ScrollContainer/__creevey__/ScrollContainer.creevey.mts

@@ -1,247 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-import { delay } from '../../../lib/delay';
-
-kind('ScrollContainer', () => {
-  story('WithDynamicContent', ({ setStoryParameters }) => {
-    setStoryParameters({ captureElement: '#test-container' });
-
-    test('changeContent', async (context) => {
-      const idle = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#add' }))
-        .perform();
-      const addContent = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scroll50' }))
-        .perform();
-      const scroll50 = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scroll100' }))
-        .perform();
-      const scroll100 = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#remove' }))
-        .perform();
-      const removeContent = await context.takeScreenshot();
-      await context.matchImages({ idle, addContent, scroll50, scroll100, removeContent });
-    });
-  });
-
-  story('WithOnlyCustomHorizontalScroll', ({ setStoryParameters }) => {
-    setStoryParameters({ captureElement: '#test-container' });
-
-    test('moveScroll', async (context) => {
-      const idle = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scroll50' }))
-        .perform();
-      const scroll50 = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scroll100' }))
-        .perform();
-      const scroll100 = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scroll0' }))
-        .perform();
-      const scroll0 = await context.takeScreenshot();
-      await context.matchImages({ idle, scroll50, scroll100, scroll0 });
-    });
-
-    test('changeContent', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#add' }))
-        .perform();
-      const addContent = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scroll50' }))
-        .perform();
-      const scroll50 = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scroll100' }))
-        .perform();
-      const scroll100 = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scroll0' }))
-        .perform();
-      const scroll0 = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#remove' }))
-        .perform();
-      const removeContent = await context.takeScreenshot();
-      await context.matchImages({ addContent, scroll50, scroll100, scroll0, removeContent });
-    });
-  });
-
-  story('WithScrollTo', ({ setStoryParameters }) => {
-    setStoryParameters({ captureElement: '#test-container' });
-
-    test('scrollTo', async (context) => {
-      const idle = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scrollTo' }))
-        .perform();
-      const scrollTo = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scrollToTop' }))
-        .perform();
-      const scrollToTop = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scrollToLeft' }))
-        .perform();
-      const scrollToLeft = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scrollToBottom' }))
-        .perform();
-      const scrollToBottom = await context.takeScreenshot();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#scrollToRight' }))
-        .perform();
-      const scrollToRight = await context.takeScreenshot();
-      await context.matchImages({
-        idle,
-        scrollTo,
-        scrollToTop,
-        scrollToBottom,
-        scrollToLeft,
-        scrollToRight,
-      });
-    });
-  });
-
-  story('ScrollBarVisibleAfterTogglingDisabled', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
-
-    test('toggleDisabled', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="disable-button"]' }))
-        .click(context.webdriver.findElement({ css: '[data-tid="disable-button"]' }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'toggleDisabled');
-    });
-  });
-
-  story('ShowScrollBarOnScroll', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\b(firefox2022|chrome2022)\b)/ } } });
-
-    test('hideScroll', async (context) => {
-      const beforeScroll = await context.takeScreenshot();
-      await context.webdriver.executeScript(function () {
-        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]');
-        if (scrollContainer) {
-          scrollContainer.scrollTop = 500;
-        }
-      });
-      context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .move({ origin: context.webdriver.findElement({ css: 'body' }) });
-      await delay(200);
-      const duringScroll = await context.takeScreenshot();
-      await delay(3000);
-      const afterScroll = await context.takeScreenshot();
-      await context.matchImages({ beforeScroll, duringScroll, afterScroll });
-    });
-  });
-
-  story('ShowScrollBarOnHover', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'hover works only in firefox': { in: /^(?!\b(firefox2022)\b)/ } } });
-
-    test('hideScroll', async (context) => {
-      context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .move({
-          origin: context.webdriver.findElement({ css: '[data-tid~="ScrollContainer__root"]' }),
-        })
-        .perform();
-      await delay(500);
-      const hovered = await context.takeScreenshot();
-      context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .move({ x: 1000, y: 700 })
-        .perform();
-      await delay(3000);
-      const withoutHover = await context.takeScreenshot();
-      await context.matchImages({ hovered, withoutHover });
-    });
-  });
-  story('NeverShowScrollBar', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { 'themes dont affect logic': { in: /^(?!\b(firefox2022|chrome2022)\b)/ } },
-    });
-  });
-  story('OffsetY', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
-    });
-  });
-  story('OffsetX', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
-    });
-  });
-  story('OffsetYAndX', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
-    });
-  });
-});

package/components/ScrollContainer/__docs__/ScrollContainer.mdx

@@ -1,23 +0,0 @@
-import * as ScrollContainerStories from './ScrollContainer.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={ScrollContainerStories} />
-
-<Header component="ScrollContainer" />
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

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

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