@salutejs/plasma-new-hope 0.173.1-canary.1502.11462220468.0 → 0.174.0-canary.1452.11462555994.0

package/emotion/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx

@@ -3,16 +3,19 @@ import type { ComponentProps } from 'react';
 import styled from 'styled-components';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 
+import { IconMic } from '../../../../components/_Icon';
 import { WithTheme } from '../../../_helpers';
 
 import { Slider } from './Slider';
 
 const sizes = ['l', 'm', 's'];
+const pointerSizes = ['small', 'large', 'none'];
 const views = ['default', 'accent', 'gradient'];
-const labelPlacements = ['outer', 'inner'];
-const rangeValuesPlacement = ['outer', 'inner'];
+const sliderAligns = ['center', 'left', 'right', 'none'];
+const labelPlacements = ['top', 'left'];
+const scaleAligns = ['side', 'bottom'];
+const orientations: Array<string> = ['vertical', 'horizontal'];
 
 const meta: Meta<typeof Slider> = {
     title: 'plasma_b2c/Slider',
@@ -31,9 +34,24 @@ const meta: Meta<typeof Slider> = {
                 type: 'inline-radio',
             },
         },
+        pointerSize: {
+            options: pointerSizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'select',
+            },
+        },
         ...disableProps([
             'value',
             'onChangeCommitted',
+            'onChangeTextField',
+            'onBlurTextField',
+            'onKeyDownTextField',
             'ariaLabel',
             'onChange',
             'fontSizeMultiplier',
@@ -53,8 +71,9 @@ type StorySingleProps = StoryProps;
 type StorySingle = StoryObj<StorySingleProps>;
 type StoryDouble = StoryObj<StoryProps>;
 
-const SliderWrapper = styled.div`
-    width: 25rem;
+const SliderWrapper = styled.div<{ isVertical?: boolean }>`
+    width: ${({ isVertical }) => (isVertical ? 'auto' : '25rem')};
+    height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
 `;
 
 const StoryDefault = (args: StorySingleProps) => {
@@ -68,41 +87,86 @@ const StoryDefault = (args: StorySingleProps) => {
         setValue(values);
     };
 
+    const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
+    const isVertical = orientation === 'vertical';
+
     return (
-        <SliderWrapper>
-            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
+        <SliderWrapper isVertical={isVertical}>
+            <Slider
+                value={value}
+                orientation={orientation}
+                labelPlacement={labelPlacement}
+                labelContent={showIcon ? <IconMic size={rest.size === 's' ? 'xs' : 's'} /> : null}
+                onChangeCommitted={onChangeCommittedHandle}
+                onChange={onChangeHandle}
+                {...rest}
+            />
         </SliderWrapper>
     );
 };
 
 export const Default: StorySingle = {
     argTypes: {
+        sliderAlign: {
+            options: sliderAligns,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'orientation', eq: 'vertical' },
+        },
         labelPlacement: {
             options: labelPlacements,
             control: {
                 type: 'inline-radio',
             },
+            if: { arg: 'orientation', eq: 'horizontal' },
+        },
+        labelReversed: {
+            control: {
+                type: 'boolean',
+                expanded: true,
+            },
+            if: { arg: 'orientation', eq: 'vertical' },
+        },
+        scaleAlign: {
+            options: scaleAligns,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'orientation', eq: 'horizontal' },
         },
-        rangeValuesPlacement: {
-            options: rangeValuesPlacement,
+        orientation: {
+            options: orientations,
             control: {
                 type: 'inline-radio',
             },
         },
+        reversed: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'orientation', eq: 'vertical' },
+        },
     },
     args: {
         view: 'default',
         size: 'm',
+        pointerSize: 'small',
         min: 0,
         max: 100,
-        disabled: false,
-        ariaLabel: 'Цена товара',
+        orientation: 'horizontal',
+        ariaLabel: 'Цена микрофона',
         multipleStepSize: 10,
-        label: 'Цена товара',
-        labelPlacement: 'outer',
-        rangeValuesPlacement: 'outer',
-        showRangeValues: true,
+        label: 'Цена микрофона',
+        labelPlacement: 'top',
+        sliderAlign: 'center',
+        scaleAlign: 'bottom',
+        showScale: true,
         showCurrentValue: false,
+        showIcon: true,
+        reversed: false,
+        labelReversed: false,
+        disabled: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -142,7 +206,7 @@ const StoryMultipleValues = (args: StoryProps) => {
     };
 
     return (
-        <SliderWrapper>
+        <SliderWrapper isVertical={args.orientation === 'vertical'}>
             <Slider
                 value={value}
                 onKeyDownTextField={onKeyDownTextField}
@@ -159,6 +223,7 @@ export const MultipleValues: StoryDouble = {
     args: {
         view: 'default',
         size: 'm',
+        pointerSize: 'small',
         min: 0,
         max: 100,
         disabled: false,
@@ -166,5 +231,14 @@ export const MultipleValues: StoryDouble = {
         ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
         multipleStepSize: 10,
     },
+    argTypes: {
+        pointerSize: {
+            options: ['small', 'large'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...disableProps(['orientation']),
+    },
     render: (args) => <StoryMultipleValues {...args} />,
 };

package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx

@@ -12,7 +12,6 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
-const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -21,6 +20,7 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
+    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: string) => {
+const getContentLeft = (contentLeftOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: string) => {
+const getContentRight = (contentRightOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,47 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
-            {items.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="clear"
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    value={helperText}
-                    size={size as HeaderSize}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
-        </Tabs>
-    );
-};
-
-const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText, width } = props;
+const StoryHeaderTabs = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        stretch,
+    } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="clear"
+                    view="divider"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={helperText}
+                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                    contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -653,60 +637,37 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HeaderTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        helperText: '',
-        itemQuantity: 6,
-        width: '12rem',
+        hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
-        clip: {
-            options: headerClips,
+        size: {
+            options: headerSizes,
             control: {
                 type: 'select',
             },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
-        stretch: {
-            table: {
-                disable: true,
-            },
-        },
         contentLeft: {
-            table: {
-                disable: true,
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
             },
         },
         contentRight: {
-            table: {
-                disable: true,
+            options: contentRightOptions,
+            control: {
+                type: 'select',
             },
         },
-        hasDivider: {
+        clip: {
             table: {
                 disable: true,
             },
         },
-        size: {
-            options: headerSizes,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryHeaderScroll {...args} />;
-            default:
-                return <StoryHeaderDefault {...args} />;
-        }
     },
+    render: (args) => <StoryHeaderTabs {...args} />,
 };