@salutejs/plasma-new-hope 0.272.0-canary.1770.13398571521.0 → 0.272.0-canary.1776.13400228272.0

package/emotion/cjs/examples/plasma_web/components/Range/Range.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconChevronLeft } from '../../../../components/_Icon';
@@ -45,10 +45,7 @@ const meta: Meta<typeof Range> = {
             control: {
                 type: 'select',
             },
-            if: {
-                arg: 'required',
-                truthy: true,
-            },
+            if: { arg: 'required', truthy: true },
         },
         ...disableProps(['view']),
     },
@@ -79,14 +76,10 @@ const getSizeForIcon = (size) => {
     return size;
 };
 
-const ActionButton = ({ size, readOnly }) => {
+const ActionButton = ({ size }) => {
     return (
-        <IconButton view="clear" size={size} disabled={readOnly}>
-            <IconChevronLeft
-                color={readOnly ? 'var(--text-secondary)' : 'inherit'}
-                size={getSizeForIcon(size)}
-                style={{ transform: 'rotate(180deg)' }}
-            />
+        <IconButton view="clear" size={size}>
+            <IconChevronLeft size={getSizeForIcon(size)} />
         </IconButton>
     );
 };
@@ -122,7 +115,7 @@ const StoryDefault = ({
             firstValue={firstValue}
             secondValue={secondValue}
             contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <ActionButton size={size} readOnly={rest.readOnly} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
             firstTextfieldContentLeft={
                 enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
             }
@@ -273,7 +266,7 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: Sto
             firstValueSuccess={firstValueSuccess}
             secondValueSuccess={secondValueSuccess}
             contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <ActionButton size={size} readOnly={rest.readOnly} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
             onChangeFirstValue={(e) => {
                 handleChangeValue(
                     e,

package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx

@@ -8,7 +8,6 @@ import { textAreaConfig } from '../../../../components/TextArea';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import type { PopoverPlacement } from '../Popover/Popover';
-import { IconLock } from '../../../../components/_Icon';
 
 import { config } from './TextArea.config';
 import { TextArea } from './TextArea';
@@ -39,16 +38,6 @@ const placements: Array<PopoverPlacement> = [
     'auto',
 ];
 
-const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-
-    if (readOnly) {
-        return <IconLock size={iconSize} color="var(--text-secondary)" style={{ opacity: 0.4 }} />;
-    }
-
-    return <IconComponent size={iconSize} color="inherit" />;
-};
-
 type StoryTextAreaPropsCustom = {
     hasHint?: boolean;
     enableContentRight?: boolean;
@@ -72,25 +61,19 @@ const meta: Meta<StoryTextAreaProps> = {
             control: {
                 type: 'boolean',
             },
-            if: {
-                arg: 'optional',
-                truthy: false,
-            },
+            if: { arg: 'optional', truthy: false },
         },
         optional: {
             control: {
                 type: 'boolean',
             },
-            if: {
-                arg: 'required',
-                truthy: false,
-            },
+            if: { arg: 'required', truthy: false },
         },
         size: {
             options: sizes,
             defaultValue: 'm',
             control: {
-                type: 'inline-radio',
+                type: 'select',
             },
         },
         view: {
@@ -109,28 +92,19 @@ const meta: Meta<StoryTextAreaProps> = {
             control: {
                 type: 'boolean',
             },
-            if: {
-                arg: 'clear',
-                truthy: true,
-            },
+            if: { arg: 'clear', truthy: true },
         },
         cols: {
             control: {
                 type: 'number',
             },
-            if: {
-                arg: 'clear',
-                truthy: false,
-            },
+            if: { arg: 'clear', truthy: false },
         },
         rows: {
             control: {
                 type: 'number',
             },
-            if: {
-                arg: 'clear',
-                truthy: false,
-            },
+            if: { arg: 'clear', truthy: false },
         },
         hasHint: {
             control: {
@@ -139,65 +113,47 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         hintText: {
             control: { type: 'text' },
-            if: {
-                arg: 'hasHint',
-                truthy: true,
-            },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintView: {
             options: hintViews,
             control: {
                 type: 'select',
             },
-            if: {
-                arg: 'hasHint',
-                truthy: true,
-            },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintSize: {
             options: hintSizes,
             control: {
                 type: 'select',
             },
-            if: {
-                arg: 'hasHint',
-                truthy: true,
-            },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintTrigger: {
             options: hintTriggers,
             control: {
                 type: 'inline-radio',
             },
-            if: {
-                arg: 'hasHint',
-                truthy: true,
-            },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintPlacement: {
             options: placements,
             control: {
                 type: 'select',
             },
-            if: {
-                arg: 'hasHint',
-                truthy: true,
-            },
+            if: { arg: 'hasHint', truthy: true },
             mappers: placements,
         },
         hintHasArrow: {
             control: { type: 'boolean' },
-            if: {
-                arg: 'hasHint',
-                truthy: true,
-            },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintWidth: {
             control: { type: 'text' },
-            if: {
-                arg: 'hasHint',
-                truthy: true,
-            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        helperText: {
+            control: { type: 'text' },
         },
         width: {
             control: { type: 'text' },
@@ -216,7 +172,6 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         ...disableProps([
             'helperBlock',
-            'helperText',
             '$isFocused',
             'contentRight',
             'autoComplete',
@@ -240,7 +195,6 @@ const meta: Meta<StoryTextAreaProps> = {
             'hintOffset',
             'hintContentLeft',
             'hintView',
-            'hintOpened',
         ]),
     },
     args: {
@@ -284,24 +238,19 @@ const onBlur = action('onBlur');
 const StoryDefault = (props: StoryTextAreaProps) => {
     const [value, setValue] = useState('Значение поля');
 
+    const iconSize = props.size === 'xs' ? 'xs' : 's';
+
     return (
         <TextArea
             value={value}
-            contentRight={
-                props.enableContentRight || props.readOnly
-                    ? getIcon(IconPlaceholder, props.size, props.readOnly)
-                    : undefined
-            }
+            contentRight={props.enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             onChange={(e) => {
                 setValue(e.target.value);
                 onChange(e);
             }}
             onFocus={onFocus}
             onBlur={onBlur}
-            style={{
-                width: '70%',
-                margin: '0 auto',
-            }}
+            style={{ width: '70%', margin: '0 auto' }}
             {...props}
         />
     );