@salutejs/plasma-new-hope 0.163.1-canary.1476.11274907051.0 → 0.164.0-canary.1452.11274846938.0

package/emotion/cjs/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/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx

@@ -50,8 +50,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
 };
 
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
-type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
-type VerticalStoryTabsProps = StoryTabsProps & { height: string };
 
 const meta: Meta<StoryTabsProps> = {
     title: 'plasma_b2c/Tabs',
@@ -81,7 +79,7 @@ const meta: Meta<StoryTabsProps> = {
 
 export default meta;
 
-const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -136,7 +134,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -146,13 +144,18 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        width,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs
+            clip={clip}
+            view={hasDivider ? 'divider' : 'clear'}
+            disabled={disabled}
+            size={size}
+            style={{ width: '15rem' }}
+        >
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -192,7 +195,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -279,15 +282,13 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HorizontalTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
         hasDivider: true,
         helperText: '',
         itemQuantity: 8,
-        stretch: false,
-        width: '15rem',
     },
     argTypes: {
         contentLeft: {
@@ -309,12 +310,6 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
             },
             if: { arg: 'stretch', truthy: false },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
         size: {
             options: sizes,
             control: {
@@ -334,7 +329,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
     },
 };
 
-const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
+const StoryVerticalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -390,7 +385,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
     );
 };
 
-const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
+const StoryVerticalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -400,7 +395,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        height,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -411,8 +405,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
             size={size as Size}
             disabled={disabled}
             clip={clip}
+            style={{ height: '10rem' }}
             hasDivider={hasDivider}
-            style={{ height }}
         >
             {items.map((_, i) => {
                 if (helperText !== '') {
@@ -455,7 +449,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
     );
 };
 
-const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
+const StoryVerticalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -543,7 +537,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
     );
 };
 
-export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
+export const VerticalTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
@@ -551,7 +545,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         itemQuantity: 8,
         orientation: 'vertical',
         helperText: '',
-        height: '10rem',
     },
     argTypes: {
         contentLeft: {
@@ -584,12 +577,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
                 disable: true,
             },
         },
-        height: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
     },
     render: (args) => {
         switch (args.clip) {