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

package/emotion/cjs/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 } from '../../../../components/_Icon';
+import { IconCross, IconLock } 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 labelPlacements = ['outer', 'inner'];
 const hintTargetPlacements = ['outer', 'inner'];
+const labelPlacements = ['outer', 'inner'];
 const placements: Array<PopoverPlacement> = [
     'top',
     'top-start',
@@ -43,6 +43,16 @@ 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,
@@ -58,19 +68,28 @@ 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,
@@ -93,7 +112,10 @@ const meta: Meta<typeof TextField> = {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'labelPlacement', eq: 'inner' },
+            if: {
+                arg: 'labelPlacement',
+                eq: 'inner',
+            },
         },
         size: {
             options: sizes,
@@ -101,53 +123,83 @@ 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',
@@ -183,19 +235,28 @@ type StoryPropsDefault = Omit<
     enableContentRight: boolean;
 };
 
-const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsDefault) => {
+const StoryDemo = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsDefault) => {
     const [text, setText] = useState('Значение поля');
 
-    const iconSize = rest.size === 'xs' ? 'xs' : 's';
+    const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
 
     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}
-                contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
-                contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
+                readOnly={readOnly}
+                contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
+                contentRight={contentRight}
                 view={view}
                 onChange={(e) => {
                     setText(e.target.value);
@@ -211,9 +272,10 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
                 label="Uncontrolled TextField"
                 defaultValue="Дефолтное значение"
                 enumerationType="plain"
-                contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-                contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+                contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
+                contentRight={contentRight}
                 view={view}
+                readOnly={readOnly}
                 onFocus={onFocus}
                 onBlur={onBlur}
                 onSearch={onSearch}
@@ -285,10 +347,10 @@ type StoryPropsChips = Omit<
     enableContentRight: boolean;
 };
 
-const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
+const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsChips) => {
     const [text, setText] = useState('Значение поля');
 
-    const iconSize = rest.size === 'xs' ? 'xs' : 's';
+    const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
 
     const validateChip = (value) => (value === '1 value' ? { view: 'negative' } : {});
 
@@ -297,9 +359,10 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             {...rest}
             enumerationType="chip"
             value={text}
-            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
+            contentRight={contentRight}
             view={view}
+            readOnly={readOnly}
             onChange={(e) => {
                 setText(e.target.value);
                 onChange(e.target.value);
@@ -308,7 +371,10 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             onBlur={onBlur}
             onChangeChips={onChipsChange}
             chipValidator={validateChip}
-            style={{ width: '70%', margin: '0 auto' }}
+            style={{
+                width: '70%',
+                margin: '0 auto',
+            }}
         />
     );
 };

package/emotion/cjs/examples/plasma_web/components/Popover/Popover.config.js

@@ -12,7 +12,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _react.css)(_Popover.popoverTokens.boxShadow, ":var(--shadow-down-hard-m);", _Popover.popoverTokens.arrowMaskWidth, ":1rem;", _Popover.popoverTokens.arrowMaskHeight, ":1rem;", _Popover.popoverTokens.arrowMaskImage, ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", _Popover.popoverTokens.arrowHeight, ":0.375rem;", _Popover.popoverTokens.arrowEdgeMargin, ":0.5625rem;", _Popover.popoverTokens.arrowBackground, ":var(--surface-solid-tertiary);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Qb3BvdmVyL1BvcG92ZXIuY29uZmlnLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVV3QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfd2ViL2NvbXBvbmVudHMvUG9wb3Zlci9Qb3BvdmVyLmNvbmZpZy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgcG9wb3ZlclRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvUG9wb3Zlcic7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHtwb3BvdmVyVG9rZW5zLmJveFNoYWRvd306IHZhcigtLXNoYWRvdy1kb3duLWhhcmQtbSk7XG5cbiAgICAgICAgICAgICAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dNYXNrV2lkdGh9OiAxcmVtO1xuICAgICAgICAgICAgICAgICR7cG9wb3ZlclRva2Vucy5hcnJvd01hc2tIZWlnaHR9OiAxcmVtO1xuICAgICAgICAgICAgICAgICR7cG9wb3ZlclRva2Vucy5hcnJvd01hc2tJbWFnZX06IHVybChcImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjNhV1IwYUQwaU1UWWlJR2hsYVdkb2REMGlNVFlpSUhodGJHNXpQU0pvZEhSd09pOHZkM2QzTG5jekxtOXlaeTh5TURBd0wzTjJaeUlnZUcxc2JuTTZjM1puUFNKb2RIUndPaTh2ZDNkM0xuY3pMbTl5Wnk4eU1EQXdMM04yWnlJK0NpQWdQSEJoZEdnZ1kyeHBjQzF5ZFd4bFBTSmxkbVZ1YjJSa0lpQmtQU0p0TUN3NUxqZzFiREUyTERCakxUUXVOREVzTUNBdE9Dd3lMalk1SUMwNExEWmpNQ3d0TXk0ek1TQXRNeTQxT1N3dE5pQXRPQ3d0Tm5vaUlHWnBiR3c5SWlNeE56RTNNVGNpSUdacGJHd3RjblZzWlQwaVpYWmxibTlrWkNJZ2FXUTlJbFJoYVd3aUx6NEtQQzl6ZG1jK1wiKTtcbiAgICAgICAgICAgICAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dIZWlnaHR9OiAwLjM3NXJlbTtcbiAgICAgICAgICAgICAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dFZGdlTWFyZ2lufTogMC41NjI1cmVtO1xuICAgICAgICAgICAgICAgICR7cG9wb3ZlclRva2Vucy5hcnJvd0JhY2tncm91bmR9OiB2YXIoLS1zdXJmYWNlLXNvbGlkLXRlcnRpYXJ5KTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
+      "default": /*#__PURE__*/(0, _react.css)(_Popover.popoverTokens.arrowMaskWidth, ":1rem;", _Popover.popoverTokens.arrowMaskHeight, ":1rem;", _Popover.popoverTokens.arrowMaskImage, ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", _Popover.popoverTokens.arrowHeight, ":0.375rem;", _Popover.popoverTokens.arrowEdgeMargin, ":0.5625rem;", _Popover.popoverTokens.arrowBackground, ":var(--surface-solid-tertiary);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Qb3BvdmVyL1BvcG92ZXIuY29uZmlnLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVV3QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfd2ViL2NvbXBvbmVudHMvUG9wb3Zlci9Qb3BvdmVyLmNvbmZpZy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgcG9wb3ZlclRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvUG9wb3Zlcic7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHtwb3BvdmVyVG9rZW5zLmFycm93TWFza1dpZHRofTogMXJlbTtcbiAgICAgICAgICAgICAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dNYXNrSGVpZ2h0fTogMXJlbTtcbiAgICAgICAgICAgICAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dNYXNrSW1hZ2V9OiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUIzYVdSMGFEMGlNVFlpSUdobGFXZG9kRDBpTVRZaUlIaHRiRzV6UFNKb2RIUndPaTh2ZDNkM0xuY3pMbTl5Wnk4eU1EQXdMM04yWnlJZ2VHMXNibk02YzNablBTSm9kSFJ3T2k4dmQzZDNMbmN6TG05eVp5OHlNREF3TDNOMlp5SStDaUFnUEhCaGRHZ2dZMnhwY0MxeWRXeGxQU0psZG1WdWIyUmtJaUJrUFNKdE1DdzVMamcxYkRFMkxEQmpMVFF1TkRFc01DQXRPQ3d5TGpZNUlDMDRMRFpqTUN3dE15NHpNU0F0TXk0MU9Td3ROaUF0T0N3dE5ub2lJR1pwYkd3OUlpTXhOekUzTVRjaUlHWnBiR3d0Y25Wc1pUMGlaWFpsYm05a1pDSWdhV1E5SWxSaGFXd2lMejRLUEM5emRtYytcIik7XG4gICAgICAgICAgICAgICAgJHtwb3BvdmVyVG9rZW5zLmFycm93SGVpZ2h0fTogMC4zNzVyZW07XG4gICAgICAgICAgICAgICAgJHtwb3BvdmVyVG9rZW5zLmFycm93RWRnZU1hcmdpbn06IDAuNTYyNXJlbTtcbiAgICAgICAgICAgICAgICAke3BvcG92ZXJUb2tlbnMuYXJyb3dCYWNrZ3JvdW5kfTogdmFyKC0tc3VyZmFjZS1zb2xpZC10ZXJ0aWFyeSk7XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgIH0sXG59O1xuIl19 */"))
     }
   }
 };

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

@@ -8,8 +8,6 @@ import { WithTheme } from '../../../_helpers';
 
 import { Popover } from './Popover';
 
-import './style.css';
-
 const meta: Meta<typeof Popover> = {
     title: 'web/Overlay/Popover',
     decorators: [WithTheme],
@@ -82,7 +80,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
 const StyledContent = styled.div`
     background: var(--surface-solid-tertiary);
     padding: 1rem;
-    border-radius: var(--popover-border-radius);
+    border-radius: 0.5rem;
 
     display: flex;
     flex-direction: column;