@salutejs/plasma-new-hope 0.164.0-canary.1452.11292135082.0 → 0.164.0-canary.1458.11292839291.0

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

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