plasma-*, sdds-*: Vertical Tabs added

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -40,6 +40,8 @@ import { BaseboxProps } from '@salutejs/plasma-new-hope/styled-components';
 import { BaseCallbackChangeInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
 import { BaseCallbackKeyboardInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
 import { BaseProps } from '@salutejs/plasma-new-hope/types/components/Autocomplete/Autocomplete.types';
+import { BaseTabItemProps } from '@salutejs/plasma-new-hope/types/components/Tabs/TabItem.types';
+import { BaseTabsProps } from '@salutejs/plasma-new-hope/types/components/Tabs/Tabs.types';
 import { BasicProps } from '@salutejs/plasma-new-hope/types/components/Combobox/ComboboxNew/Combobox.types';
 import { BlurProps } from '@salutejs/plasma-core';
 import { blurs } from '@salutejs/plasma-core';
@@ -100,10 +102,10 @@ import { convertRoundnessMatrix } from '@salutejs/plasma-core';
 import { CounterProps } from '@salutejs/plasma-new-hope/styled-components';
 import { counterTokens } from '@salutejs/plasma-new-hope/styled-components';
 import { CustomComboboxProps } from '@salutejs/plasma-new-hope/types/components/Combobox/ComboboxOld/Combobox.types';
+import { CustomHorizontalTabsProps } from '@salutejs/plasma-new-hope/types/components/Tabs/Tabs.types';
 import { CustomPopoverProps } from '@salutejs/plasma-new-hope/types/components/Popover/Popover.types';
-import { CustomTabItemProps } from '@salutejs/plasma-new-hope/types/components/Tabs/ui/TabItem/TabItem.types';
-import { CustomTabsProps } from '@salutejs/plasma-new-hope/types/components/Tabs/ui/Tabs/Tabs.types';
 import { CustomToastProps } from '@salutejs/plasma-new-hope/types/components/Toast/Toast.types';
+import { CustomVerticalTabsProps } from '@salutejs/plasma-new-hope/types/components/Tabs/Tabs.types';
 import { DateInfo } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types';
 import { DatePickerCalendarProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/DatePickerBase.types';
 import { datePickerClasses } from '@salutejs/plasma-new-hope/styled-components';
@@ -273,11 +275,9 @@ import { SubtitleProps } from '@salutejs/plasma-new-hope/styled-components';
 import { SwitchProps as SwitchProps_2 } from '@salutejs/plasma-new-hope/styled-components';
 import { SyntheticEvent } from 'react';
 import { syntheticFocus } from '@salutejs/plasma-core';
-import { TabItemProps } from '@salutejs/plasma-new-hope/styled-components';
 import { TabItemRefs } from '@salutejs/plasma-new-hope/styled-components';
 import { TabsContext } from '@salutejs/plasma-new-hope/styled-components';
 import { TabsControllerProps } from '@salutejs/plasma-new-hope/styled-components';
-import { TabsProps } from '@salutejs/plasma-new-hope/styled-components';
 import { TextareaHTMLAttributes } from '@salutejs/plasma-core';
 import type { TextAreaProps as TextAreaProps_2 } from '@salutejs/plasma-hope';
 import { TextareaResize } from '@salutejs/plasma-core';
@@ -3317,15 +3317,17 @@ export type SwitchProps = ComponentProps<typeof SwitchComponent>;
 
 export { syntheticFocus }
 
+// Warning: (ae-forgotten-export) The symbol "TabItemProps" needs to be exported by the entry point index.d.ts
+//
 // @public
-export const TabItem: ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & AsProps_2<any> & CustomTabItemProps & RefAttributes<HTMLDivElement>>;
-
-export { TabItemProps }
+export const TabItem: (props: TabItemProps) => JSX.Element;
 
 export { TabItemRefs }
 
+// Warning: (ae-forgotten-export) The symbol "TabsProps" needs to be exported by the entry point index.d.ts
+//
 // @public
-export const Tabs: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & AsProps_2<any> & CustomTabsProps & RefAttributes<HTMLDivElement>>;
+export const Tabs: (props: TabsProps) => JSX.Element;
 
 export { TabsContext }
 
@@ -3334,8 +3336,6 @@ export const TabsController: ForwardRefExoticComponent<TabsControllerProps & Ref
 
 export { TabsControllerProps }
 
-export { TabsProps }
-
 // @public
 export const TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>>;
 

packages/plasma-b2c/src/components/Tabs/TabItem.tsx

@@ -1,13 +1,29 @@
-import { tabItemConfig, component, mergeConfig, TabItemProps } from '@salutejs/plasma-new-hope/styled-components';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import React, { ComponentProps } from 'react';
+import {
+    horizontalTabItemConfig,
+    verticalTabItemConfig,
+    component,
+    mergeConfig,
+} from '@salutejs/plasma-new-hope/styled-components';
 
-import { config } from './TabItem.config';
+import { config as horizontalConfig } from './horizontal/HorizontalTabItem.config';
+import { config as verticalConfig } from './vertical/VerticalTabItem.config';
 
-const mergedConfig = mergeConfig(tabItemConfig, config);
+const mergedHorizontalTabItemConfig = mergeConfig(horizontalTabItemConfig, horizontalConfig);
+const HorizontalTabItem = component(mergedHorizontalTabItemConfig);
+
+const mergedVerticalTabItemConfig = mergeConfig(verticalTabItemConfig, verticalConfig);
+const VerticalTabItem = component(mergedVerticalTabItemConfig);
+
+type TabItemProps = ComponentProps<typeof HorizontalTabItem> | ComponentProps<typeof VerticalTabItem>;
 
 /**
  * Элемент списка, недопустимо использовать вне компонента Tabs.
  */
-export const TabItem = component(mergedConfig) as ForwardRefExoticComponent<
-    TabItemProps & RefAttributes<HTMLDivElement>
->;
+export const TabItem = (props: TabItemProps) => {
+    if (props.orientation === 'vertical') {
+        return <VerticalTabItem {...props} />;
+    }
+
+    return <HorizontalTabItem {...props} />;
+};

packages/plasma-b2c/src/components/Tabs/Tabs.component-test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils';
+import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils';
 
 const items = [{ label: 'Joy' }, { label: 'Sber' }, { label: 'Athena' }];
 
@@ -15,14 +15,14 @@ describe('plasma-b2c: Tabs', () => {
             <CypressTestDecorator>
                 <Tabs size="s" forwardedAs="ul">
                     {items.map((item, i) => (
-                        <TabItem size="s" key={i} isActive={i === 1} forwardedAs="li">
+                        <TabItem size="s" key={i} selected={i === 1} forwardedAs="li">
                             {item.label}
                         </TabItem>
                     ))}
                 </Tabs>
                 <Tabs size="l" forwardedAs="ul">
                     {items.map((item, i) => (
-                        <TabItem size="l" key={i} isActive={i === 1} forwardedAs="li">
+                        <TabItem size="l" key={i} selected={i === 1} forwardedAs="li">
                             {item.label}
                         </TabItem>
                     ))}
@@ -38,7 +38,38 @@ describe('plasma-b2c: Tabs', () => {
             <CypressTestDecorator>
                 <Tabs pilled forwardedAs="ul">
                     {items.map((item, i) => (
-                        <TabItem pilled key={i} isActive={i === 1} forwardedAs="li">
+                        <TabItem pilled key={i} selected={i === 1} forwardedAs="li">
+                            {item.label}
+                        </TabItem>
+                    ))}
+                </Tabs>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('_orientation', () => {
+        mount(
+            <CypressTestDecorator>
+                <Tabs size="l" view="divider" forwardedAs="ul">
+                    {items.map((item, i) => (
+                        <TabItem size="l" view="divider" key={i} selected={i === 1} forwardedAs="li">
+                            {item.label}
+                        </TabItem>
+                    ))}
+                </Tabs>
+                <PadMe />
+                <Tabs size="l" orientation="vertical" view="divider" forwardedAs="ul">
+                    {items.map((item, i) => (
+                        <TabItem
+                            size="l"
+                            orientation="vertical"
+                            view="divider"
+                            key={i}
+                            selected={i === 1}
+                            forwardedAs="li"
+                        >
                             {item.label}
                         </TabItem>
                     ))}
@@ -54,7 +85,7 @@ describe('plasma-b2c: Tabs', () => {
             <CypressTestDecorator>
                 <Tabs>
                     {items.map((item, i) => (
-                        <TabAutoFocus key={i} isActive={i === 1} autoFocus={i === 1}>
+                        <TabAutoFocus key={i} selected={i === 1} autoFocus={i === 1}>
                             {item.label}
                         </TabAutoFocus>
                     ))}
@@ -71,7 +102,7 @@ describe('plasma-b2c: Tabs', () => {
             <CypressTestDecorator>
                 <Tabs pilled>
                     {items.map((item, i) => (
-                        <TabAutoFocus pilled key={i} isActive={i === 1} autoFocus={i === 1}>
+                        <TabAutoFocus pilled key={i} selected={i === 1} autoFocus={i === 1}>
                             {item.label}
                         </TabAutoFocus>
                     ))}
@@ -92,7 +123,7 @@ describe('plasma-b2c: Tabs', () => {
             return (
                 <Tabs>
                     {items.map((item, i) => (
-                        <TabItem key={i} tabIndex={0} isActive={i === index} onClick={() => setIndex(i)}>
+                        <TabItem key={i} tabIndex={0} selected={i === index} onClick={() => setIndex(i)}>
                             {item.label}
                         </TabItem>
                     ))}
@@ -117,7 +148,7 @@ describe('plasma-b2c: Tabs', () => {
             <CypressTestDecorator>
                 <Tabs size="m" style={{ width: '10.5rem' }}>
                     {items.map((item, i) => (
-                        <TabItem pilled key={i} isActive={i === 1}>
+                        <TabItem pilled key={i} selected={i === 1}>
                             {item.label}
                         </TabItem>
                     ))}