feat(tabs): add new tabs components

CODEOWNERS

@@ -51,7 +51,7 @@
 /src/components/Stories @DarkGenius
 /src/components/Switch @zamkovskaya
 /src/components/Table @Raubzeug
-/src/components/Tabs @sofiushko
+/src/components/tabs @sofiushko
 /src/components/Text @IsaevAlexandr
 /src/components/TreeList @IsaevAlexandr
 /src/components/TreeSelect @IsaevAlexandr

src/components/index.ts

@@ -51,7 +51,7 @@ export * from './Spin';
 export * from './Switch';
 export * from './Table';
 export * from './TableColumnSetup';
-export * from './Tabs';
+export * from './tabs';
 export * from './Text';
 export * from './Toaster';
 export * from './Toc';

src/components/Tabs/README-ru.md → src/components/legacy/Tabs/README-ru.md

@@ -5,7 +5,7 @@
 <!--/GITHUB_BLOCK-->
 
 ```tsx
-import {Tabs} from '@gravity-ui/uikit';
+import {Tabs} from '@gravity-ui/uikit/legacy';
 ```
 
 Компонент `Tabs` используется организации контента и навигации по нему, а также для переключения между различными представлениями.

src/components/Tabs/README.md → src/components/legacy/Tabs/README.md

@@ -5,7 +5,7 @@
 <!--/GITHUB_BLOCK-->
 
 ```tsx
-import {Tabs} from '@gravity-ui/uikit';
+import {Tabs} from '@gravity-ui/uikit/legacy';
 ```
 
 The `Tabs` component is used to explore and organize content, as well as to switch across various views.

src/components/Tabs/Tabs.scss → src/components/legacy/Tabs/Tabs.scss

@@ -1,7 +1,7 @@
-@use '../variables';
-@use '../../../styles/mixins';
+@use '../../variables';
+@use '../../../../styles/mixins';
 
-$block: '.#{variables.$ns}tabs';
+$block: '.#{variables.$ns}tabs-legacy';
 
 #{$block} {
     --_--vertical-item-padding: var(--g-tabs-vertical-item-padding, 6px 20px);

src/components/Tabs/Tabs.tsx → src/components/legacy/Tabs/Tabs.tsx

@@ -2,17 +2,17 @@
 
 import * as React from 'react';
 
-import type {AriaLabelingProps, QAProps} from '../types';
-import {block} from '../utils/cn';
-import {filterDOMProps} from '../utils/filterDOMProps';
+import type {AriaLabelingProps, QAProps} from '../../types';
+import {block} from '../../utils/cn';
+import {filterDOMProps} from '../../utils/filterDOMProps';
 
 import {TabsContext} from './TabsContext';
 import {TabsItem} from './TabsItem';
 import type {TabsItemProps as TabsItemInternalProps} from './TabsItem';
 
 import './Tabs.scss';
 
-const b = block('tabs');
+const b = block('tabs-legacy');
 
 export enum TabsDirection {
     Horizontal = 'horizontal',
@@ -66,6 +66,9 @@ const getActiveTabId = (
 
 const emptyTabsList: TabsItemProps[] = [];
 
+/**
+ * @deprecated
+ */
 const TabsComponent = React.forwardRef<HTMLDivElement, TabsProps>(
     (
         {

src/components/Tabs/TabsItem.tsx → src/components/legacy/Tabs/TabsItem.tsx

@@ -2,14 +2,14 @@
 
 import * as React from 'react';
 
-import {Label} from '../Label';
-import type {LabelProps} from '../Label';
-import type {QAProps} from '../types';
-import {block} from '../utils/cn';
+import {Label} from '../../Label';
+import type {LabelProps} from '../../Label';
+import type {QAProps} from '../../types';
+import {block} from '../../utils/cn';
 
 import {TabsContext} from './TabsContext';
 
-const b = block('tabs');
+const b = block('tabs-legacy');
 
 type ExtraProps = Omit<
     React.HTMLProps<HTMLDivElement>,

src/components/Tabs/__stories__/Tabs.stories.tsx → src/components/legacy/Tabs/__stories__/Tabs.stories.tsx

@@ -10,7 +10,7 @@ import {getTabsMock} from './getTabsMock';
 import type {StoryParams} from './types';
 
 const meta: Meta<typeof Tabs> = {
-    title: 'Components/Navigation/Tabs',
+    title: 'Legacy/Tabs',
     component: Tabs,
     args: {
         direction: TabsDirection.Horizontal,

src/components/Tabs/__tests__/Tabs.test.tsx → src/components/legacy/Tabs/__tests__/Tabs.test.tsx

@@ -2,7 +2,7 @@ import type * as React from 'react';
 
 import userEvent from '@testing-library/user-event';
 
-import {render, screen} from '../../../../test-utils/utils';
+import {render, screen} from '../../../../../test-utils/utils';
 import {Tabs, TabsDirection} from '../Tabs';
 import type {TabsItemProps, TabsSize} from '../Tabs';
 
@@ -21,8 +21,8 @@ test('should render tabs by default', () => {
     const component = screen.getByRole('tablist');
 
     expect(component).toBeVisible();
-    expect(component).toHaveClass('g-tabs_size_m');
-    expect(component).toHaveClass('g-tabs_direction_horizontal');
+    expect(component).toHaveClass('g-tabs-legacy_size_m');
+    expect(component).toHaveClass('g-tabs-legacy_direction_horizontal');
 });
 
 test('should not render tabs if no items', () => {
@@ -38,7 +38,7 @@ test.each(new Array<TabsSize>('m', 'l', 'xl'))('should render with given "%s" si
     render(<Tabs items={[]} size={size} qa={qaId} />);
     const component = screen.getByTestId(qaId);
 
-    expect(component).toHaveClass(`g-tabs_size_${size}`);
+    expect(component).toHaveClass(`g-tabs-legacy_size_${size}`);
 });
 
 test.each(new Array<TabsDirection>(TabsDirection.Horizontal, TabsDirection.Vertical))(
@@ -47,7 +47,7 @@ test.each(new Array<TabsDirection>(TabsDirection.Horizontal, TabsDirection.Verti
         render(<Tabs items={[]} direction={direction} qa={qaId} />);
         const component = screen.getByTestId(qaId);
 
-        expect(component).toHaveClass(`g-tabs_direction_${direction}`);
+        expect(component).toHaveClass(`g-tabs-legacy_direction_${direction}`);
     },
 );
 
@@ -65,10 +65,10 @@ test('should not select tab if allow not selected', () => {
     const tabComponent1 = screen.getByTitle(tabTitle1);
     const tabComponent2 = screen.getByTitle(tabTitle2);
 
-    expect(tabComponent1).not.toHaveClass('g-tabs__item_active');
+    expect(tabComponent1).not.toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent1).toHaveAttribute('aria-selected', 'false');
 
-    expect(tabComponent2).not.toHaveClass('g-tabs__item_active');
+    expect(tabComponent2).not.toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent2).toHaveAttribute('aria-selected', 'false');
 });
 
@@ -77,10 +77,10 @@ test('should select first tab as active', () => {
     const tabComponent1 = screen.getByTitle(tabTitle1);
     const tabComponent2 = screen.getByTitle(tabTitle2);
 
-    expect(tabComponent1).toHaveClass('g-tabs__item_active');
+    expect(tabComponent1).toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent1).toHaveAttribute('aria-selected', 'true');
 
-    expect(tabComponent2).not.toHaveClass('g-tabs__item_active');
+    expect(tabComponent2).not.toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent2).toHaveAttribute('aria-selected', 'false');
 });
 
@@ -89,10 +89,10 @@ test('should passed active tab', () => {
     const tabComponent1 = screen.getByTitle(tabTitle1);
     const tabComponent2 = screen.getByTitle(tabTitle2);
 
-    expect(tabComponent1).not.toHaveClass('g-tabs__item_active');
+    expect(tabComponent1).not.toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent1).toHaveAttribute('aria-selected', 'false');
 
-    expect(tabComponent2).toHaveClass('g-tabs__item_active');
+    expect(tabComponent2).toHaveClass('g-tabs-legacy__item_active');
     expect(tabComponent2).toHaveAttribute('aria-selected', 'true');
 });
 

src/components/Tabs/__tests__/Tabs.visual.test.tsx → src/components/legacy/Tabs/__tests__/Tabs.visual.test.tsx

@@ -1,6 +1,6 @@
 import {smokeTest, test} from '~playwright/core';
 
-import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import {createSmokeScenarios} from '../../../../stories/tests-factory/create-smoke-scenarios';
 import type {TabsProps} from '../Tabs';
 
 import {directionCases, sizeCases} from './cases';

src/components/Tabs/__tests__/TabsItem.test.tsx → src/components/legacy/Tabs/__tests__/TabsItem.test.tsx

@@ -1,7 +1,7 @@
 import {Flame} from '@gravity-ui/icons';
 import userEvent from '@testing-library/user-event';
 
-import {render, screen} from '../../../../test-utils/utils';
+import {render, screen} from '../../../../../test-utils/utils';
 import {TabsItem} from '../TabsItem';
 
 const tabId = 'tab-id';
@@ -12,7 +12,7 @@ test('should render tab item by default', () => {
     const component = screen.getByRole('tab');
 
     expect(component).toBeVisible();
-    expect(component).not.toHaveClass('g-tabs__item_active');
+    expect(component).not.toHaveClass('g-tabs-legacy__item_active');
     expect(component).toHaveAttribute('aria-selected', 'false');
     expect(component).toHaveAttribute('aria-disabled', 'false');
 });
@@ -22,7 +22,7 @@ test('should render active tab item', () => {
     const component = screen.getByRole('tab');
 
     expect(component).toBeVisible();
-    expect(component).toHaveClass('g-tabs__item_active');
+    expect(component).toHaveClass('g-tabs-legacy__item_active');
     expect(component).toHaveAttribute('aria-selected', 'true');
 });
 
@@ -70,7 +70,7 @@ test('should render id if title is empty', () => {
     const titleComponent = screen.getByText(tabId);
 
     expect(component).toContainElement(titleComponent);
-    expect(titleComponent).toHaveClass('g-tabs__item-title');
+    expect(titleComponent).toHaveClass('g-tabs-legacy__item-title');
 });
 
 test('should render counter', () => {
@@ -82,7 +82,7 @@ test('should render counter', () => {
     const counterComponent = screen.getByText(counter);
 
     expect(counterComponent).toBeVisible();
-    expect(counterComponent).toHaveClass('g-tabs__item-counter');
+    expect(counterComponent).toHaveClass('g-tabs-legacy__item-counter');
     expect(component).toContainElement(counterComponent);
 });
 
@@ -126,7 +126,7 @@ test('should render meta', () => {
     const metaComponent = screen.getByText(meta);
 
     expect(metaComponent).toBeVisible();
-    expect(metaComponent).toHaveClass('g-tabs__item-meta');
+    expect(metaComponent).toHaveClass('g-tabs-legacy__item-meta');
     expect(component).toContainElement(metaComponent);
 });
 

src/components/Tabs/__tests__/cases.tsx → src/components/legacy/Tabs/__tests__/cases.tsx

@@ -1,4 +1,4 @@
-import type {Cases} from '../../../stories/tests-factory/models';
+import type {Cases} from '../../../../stories/tests-factory/models';
 import type {TabsProps} from '../Tabs';
 import {TabsDirection} from '../Tabs';
 

src/components/legacy/index.ts

@@ -1 +1,2 @@
 export * from './Popover';
+export * from './Tabs';