@salutejs/plasma-new-hope 0.262.0-canary.1770.13273833712.0 → 0.263.0-canary.1762.13280637086.0

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

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
-import { IconCross, IconLock } from '../../../../components/_Icon';
+import { IconCross } from '../../../../components/_Icon';
 import type { PopoverPlacement } from '../Popover/Popover';
 
 import { TextField } from './TextField';
@@ -21,8 +21,8 @@ const chipViews = ['default', 'secondary', 'accent', 'positive', 'warning', 'neg
 const hintViews = ['default'];
 const hintSizes = ['m', 's'];
 const hintTriggers = ['hover', 'click'];
-const hintTargetPlacements = ['outer', 'inner'];
 const labelPlacements = ['outer', 'inner'];
+const hintTargetPlacements = ['outer', 'inner'];
 const placements: Array<PopoverPlacement> = [
     'top',
     'top-start',
@@ -43,16 +43,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" />;
-};
-
 const meta: Meta<typeof TextField> = {
     title: 'b2c/Data Entry/TextField',
     component: TextField,
@@ -68,28 +58,19 @@ const meta: Meta<typeof TextField> = {
             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 },
         },
         hasDivider: {
             control: {
                 type: 'boolean',
             },
-            if: {
-                arg: 'clear',
-                truthy: true,
-            },
+            if: { arg: 'clear', truthy: true },
         },
         view: {
             options: views,
@@ -112,10 +93,7 @@ const meta: Meta<typeof TextField> = {
             control: {
                 type: 'boolean',
             },
-            if: {
-                arg: 'labelPlacement',
-                eq: 'inner',
-            },
+            if: { arg: 'labelPlacement', eq: 'inner' },
         },
         size: {
             options: sizes,
@@ -123,83 +101,53 @@ const meta: Meta<typeof TextField> = {
                 type: 'inline-radio',
             },
         },
-        titleCaption: {
-            control: { type: 'text' },
-        },
-        leftHelper: {
-            control: { type: 'text' },
-        },
         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 },
         },
         hintTargetPlacement: {
             options: hintTargetPlacements,
             control: {
                 type: 'inline-radio',
             },
-            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 },
         },
         chipType: {
             control: 'select',
@@ -235,28 +183,19 @@ type StoryPropsDefault = Omit<
     enableContentRight: boolean;
 };
 
-const StoryDemo = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsDefault) => {
+const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsDefault) => {
     const [text, setText] = useState('Значение поля');
 
-    const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
+    const iconSize = rest.size === 'xs' ? 'xs' : 's';
 
     return (
-        <div
-            style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '2rem',
-                width: '70%',
-                margin: '0 auto',
-            }}
-        >
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '70%', margin: '0 auto' }}>
             <TextField
                 {...rest}
                 enumerationType="plain"
                 value={text}
-                readOnly={readOnly}
-                contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
-                contentRight={contentRight}
+                contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
                 view={view}
                 onChange={(e) => {
                     setText(e.target.value);
@@ -272,10 +211,9 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, readOnly, ...r
                 label="Uncontrolled TextField"
                 defaultValue="Дефолтное значение"
                 enumerationType="plain"
-                contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
-                contentRight={contentRight}
+                contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
                 view={view}
-                readOnly={readOnly}
                 onFocus={onFocus}
                 onBlur={onBlur}
                 onSearch={onSearch}
@@ -347,10 +285,10 @@ type StoryPropsChips = Omit<
     enableContentRight: boolean;
 };
 
-const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsChips) => {
+const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
     const [text, setText] = useState('Значение поля');
 
-    const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
+    const iconSize = rest.size === 'xs' ? 'xs' : 's';
 
     const validateChip = (value) => (value === '1 value' ? { view: 'negative' } : {});
 
@@ -359,10 +297,9 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...
             {...rest}
             enumerationType="chip"
             value={text}
-            contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
-            contentRight={contentRight}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             view={view}
-            readOnly={readOnly}
             onChange={(e) => {
                 setText(e.target.value);
                 onChange(e.target.value);
@@ -371,10 +308,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...
             onBlur={onBlur}
             onChangeChips={onChipsChange}
             chipValidator={validateChip}
-            style={{
-                width: '70%',
-                margin: '0 auto',
-            }}
+            style={{ width: '70%', margin: '0 auto' }}
         />
     );
 };