@salutejs/plasma-new-hope 0.193.0-canary.1550.11805988388.0 → 0.193.0-canary.1558.11807380775.0

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

@@ -25,58 +25,54 @@ const meta: Meta<StorySelectProps> = {
     component: Select,
     argTypes: {
         target: {
-            control: 'select',
             options: ['button-like', 'textfield-like'],
+            control: {
+                type: 'select',
+            },
         },
         size: {
-            control: 'select',
             options: size,
+            control: {
+                type: 'select',
+            },
         },
         view: {
-            control: 'select',
             options: view,
+            control: {
+                type: 'select',
+            },
         },
         labelPlacement: {
-            control: 'select',
             options: labelPlacement,
-            if: {
-                arg: 'target',
-                eq: 'textfield-like',
+            control: {
+                type: 'select',
             },
         },
         chipView: {
-            control: 'select',
             options: chip,
-            if: {
-                arg: 'target',
-                eq: 'textfield-like',
+            control: {
+                type: 'select',
             },
         },
         variant: {
-            control: 'select',
             options: variant,
+            control: {
+                type: 'select',
+            },
         },
         listWidth: {
-            control: 'text',
+            control: {
+                type: 'text',
+            },
         },
         listOverflow: {
-            control: 'text',
-        },
-        listHeight: {
-            control: 'text',
-        },
-        helperText: {
-            control: 'text',
-            if: {
-                arg: 'target',
-                eq: 'textfield-like',
+            control: {
+                type: 'text',
             },
         },
-        enableContentLeft: {
-            control: 'boolean',
-            if: {
-                arg: 'target',
-                eq: 'textfield-like',
+        listHeight: {
+            control: {
+                type: 'text',
             },
         },
     },
@@ -88,7 +84,7 @@ const meta: Meta<StorySelectProps> = {
         helperText: 'Helper text',
         size: 'm',
         view: 'default',
-        chipView: 'secondary',
+        chipView: 'default',
         enableContentLeft: false,
         isTargetAmount: false,
         variant: 'normal',
@@ -342,18 +338,13 @@ const SingleStory = (args: StorySelectProps) => {
                 items={items}
                 value={value}
                 onChange={setValue}
-                contentLeft={args.enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
             />
         </div>
     );
 };
 
 export const Single: StoryObj<StorySelectProps> = {
-    parameters: {
-        controls: {
-            exclude: ['chipView', 'isTargetAmount'],
-        },
-    },
     render: (args) => <SingleStory {...args} />,
     args: {
         closeAfterSelect: true,
@@ -370,7 +361,7 @@ const MultiselectStory = (args: StorySelectProps) => {
                 items={items}
                 value={value}
                 onChange={setValue}
-                contentLeft={args.enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
             />
         </div>
     );
@@ -395,7 +386,7 @@ const PredefinedStory = (args: StorySelectProps) => {
                 items={items}
                 value={valueSingle}
                 onChange={setValueSingle}
-                contentLeft={args.enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
             />
 
             <br />
@@ -406,7 +397,7 @@ const PredefinedStory = (args: StorySelectProps) => {
                 multiselect
                 value={valueMultiple}
                 onChange={setValueMultiple}
-                contentLeft={args.enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
             />
         </div>
     );
@@ -471,7 +462,7 @@ const CommonStory = (args: StorySelectProps) => {
                                     value={value}
                                     onChange={setValue}
                                     view="default"
-                                    contentLeft={enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                                    contentLeft={enableContentLeft ? <IconDone size="s" /> : undefined}
                                 />
                             </div>
                         </td>
@@ -484,7 +475,7 @@ const CommonStory = (args: StorySelectProps) => {
                                     value={valueMultiple}
                                     onChange={setValueMultiple}
                                     view="default"
-                                    contentLeft={enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                                    contentLeft={enableContentLeft ? <IconDone size="s" /> : undefined}
                                 />
                             </div>
                         </td>
@@ -615,7 +606,7 @@ const CommonStory = (args: StorySelectProps) => {
                                     value={value}
                                     onChange={setValue}
                                     view="positive"
-                                    contentLeft={enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                                    contentLeft={enableContentLeft ? <IconDone size="s" /> : undefined}
                                 />
                             </div>
                         </td>
@@ -628,7 +619,7 @@ const CommonStory = (args: StorySelectProps) => {
                                     value={valueMultiple}
                                     onChange={setValueMultiple}
                                     view="positive"
-                                    contentLeft={enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                                    contentLeft={enableContentLeft ? <IconDone size="s" /> : undefined}
                                 />
                             </div>
                         </td>
@@ -668,7 +659,7 @@ const CommonStory = (args: StorySelectProps) => {
                                     value={value}
                                     onChange={setValue}
                                     view="warning"
-                                    contentLeft={enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                                    contentLeft={enableContentLeft ? <IconDone size="s" /> : undefined}
                                 />
                             </div>
                         </td>
@@ -681,7 +672,7 @@ const CommonStory = (args: StorySelectProps) => {
                                     value={valueMultiple}
                                     onChange={setValueMultiple}
                                     view="warning"
-                                    contentLeft={enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                                    contentLeft={enableContentLeft ? <IconDone size="s" /> : undefined}
                                 />
                             </div>
                         </td>
@@ -721,7 +712,7 @@ const CommonStory = (args: StorySelectProps) => {
                                     value={value}
                                     onChange={setValue}
                                     view="negative"
-                                    contentLeft={enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                                    contentLeft={enableContentLeft ? <IconDone size="s" /> : undefined}
                                 />
                             </div>
                         </td>
@@ -734,7 +725,7 @@ const CommonStory = (args: StorySelectProps) => {
                                     value={valueMultiple}
                                     onChange={setValueMultiple}
                                     view="negative"
-                                    contentLeft={enableContentLeft ? <IconDone size="s" color="inherit" /> : undefined}
+                                    contentLeft={enableContentLeft ? <IconDone size="s" /> : undefined}
                                 />
                             </div>
                         </td>
@@ -844,7 +835,9 @@ export const Common: StoryObj<StorySelectProps> = {
     argTypes: {
         size: {
             options: size,
-            control: 'select',
+            control: {
+                type: 'select',
+            },
         },
     },
     args: {

package/emotion/es/examples/plasma_web/components/Modal/Modal.config.js

@@ -6,7 +6,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(modalTokens.modalOverlayWithBlurColor, ":var(--overlay-blur);", modalTokens.modalOverlayColor, ":var(--overlay-soft);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IG1vZGFsVG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29tcG9uZW50cy9Nb2RhbCc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHttb2RhbFRva2Vucy5tb2RhbE92ZXJsYXlXaXRoQmx1ckNvbG9yfTogdmFyKC0tb3ZlcmxheS1ibHVyKTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsT3ZlcmxheUNvbG9yfTogdmFyKC0tb3ZlcmxheS1zb2Z0KTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
+      "default": /*#__PURE__*/css(modalTokens.modalOverlayWithBlurColor, ":var(--overlay-blur);", modalTokens.modalOverlayColor, ":var(--overlay-soft);", modalTokens.modalBodyBackground, ":var(--surface-solid-card);", modalTokens.modalBodyBorderRadius, ":1.25rem;", modalTokens.modalBodyPadding, ":2rem;", modalTokens.modalContentPadding, ":0.625rem;;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IG1vZGFsVG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29tcG9uZW50cy9Nb2RhbCc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHttb2RhbFRva2Vucy5tb2RhbE92ZXJsYXlXaXRoQmx1ckNvbG9yfTogdmFyKC0tb3ZlcmxheS1ibHVyKTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsT3ZlcmxheUNvbG9yfTogdmFyKC0tb3ZlcmxheS1zb2Z0KTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsQm9keUJhY2tncm91bmR9OiB2YXIoLS1zdXJmYWNlLXNvbGlkLWNhcmQpO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxCb2R5Qm9yZGVyUmFkaXVzfTogMS4yNXJlbTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsQm9keVBhZGRpbmd9OiAycmVtO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxDb250ZW50UGFkZGluZ306IDAuNjI1cmVtO1xuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICB9LFxufTtcbiJdfQ== */"))
     }
   }
 };

package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
@@ -18,6 +19,7 @@ export default {
         docs: { story: { inline: false, iframeHeight: '30rem' } },
     },
     argTypes: {
+        ...disableProps(['hasBody']),
         placement: {
             options: [
                 'center',
@@ -75,6 +77,7 @@ type StoryModalProps = ComponentProps<typeof Modal> & {
     closeOnEsc: boolean;
     closeOnOverlayClick: boolean;
     withBlur: boolean;
+    hasClose?: boolean;
 };
 
 const StyledButton = styled(Button)`
@@ -135,6 +138,72 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     const [isOpenB, setIsOpenB] = useState(false);
     const [isOpenC, setIsOpenC] = useState(false);
 
+    return (
+        <SSRProvider>
+            <StyledWrapper>
+                <PopupProvider>
+                    <ButtonWrapper>
+                        <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
+                    </ButtonWrapper>
+                    <StyledModal
+                        id="modalA"
+                        frame="theme-root"
+                        withAnimation
+                        onClose={() => setIsOpenA(false)}
+                        opened={isOpenA}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                        hasBody
+                        {...rest}
+                    >
+                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                        <ButtonWrapper>
+                            <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
+                        </ButtonWrapper>
+                        <Modal
+                            id="modalB"
+                            frame="theme-root"
+                            onClose={() => setIsOpenB(false)}
+                            opened={isOpenB}
+                            placement="left"
+                            offset={[offsetX, offsetY]}
+                            hasBody
+                            {...rest}
+                        >
+                            <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
+                                Close
+                            </Button>
+                            <ButtonWrapper>
+                                <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
+                            </ButtonWrapper>
+                            <Modal
+                                id="modalC"
+                                frame="theme-root"
+                                onClose={() => setIsOpenC(false)}
+                                opened={isOpenC}
+                                placement="top"
+                                offset={[offsetX, offsetY]}
+                                hasBody
+                                {...rest}
+                            >
+                                <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
+                                    Close
+                                </Button>
+                                <>Content</>
+                            </Modal>
+                        </Modal>
+                    </StyledModal>
+                </PopupProvider>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+    const [isOpenC, setIsOpenC] = useState(false);
+
     return (
         <SSRProvider>
             <StyledWrapper>
@@ -199,7 +268,7 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     );
 };
 
-export const ModalDemo: StoryObj<StoryModalProps> = {
+export const Default: StoryObj<StoryModalProps> = {
     args: {
         placement: 'center',
         withBlur: false,
@@ -207,10 +276,30 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
         closeOnOverlayClick: true,
         offsetX: 0,
         offsetY: 0,
+        hasClose: true,
+    },
+    argTypes: {
+        hasClose: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
 
+export const CustomModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryCustomModalDemo {...args} />,
+};
+
 const StyledModalAnimation = styled(Modal)`
     /* stylelint-disable */
     && .${popupClasses.root} {