@salutejs/plasma-new-hope 0.320.1-canary.1917.14487866851.0 → 0.320.1-canary.1921.14492825856.0

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

@@ -0,0 +1,90 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { IconDone } from '../../../../components/_Icon';
+import { Button } from '../Button/Button';
+
+import { ToastContainer, showToast } from './ToastNew';
+
+const views = ['default'];
+const sizes = ['m'];
+const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
+
+const meta: Meta<typeof ToastContainer> = {
+    title: 'b2c/Overlay/Toast',
+    component: ToastContainer,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        pilled: {
+            control: { type: 'boolean' },
+        },
+        hasClose: {
+            control: { type: 'boolean' },
+        },
+        enableContentLeft: {
+            control: { type: 'boolean' },
+        },
+        width: {
+            control: { type: 'text' },
+        },
+        textColor: {
+            control: { type: 'text' },
+        },
+        duration: {
+            control: { type: 'number' },
+        },
+        position: {
+            options: positions,
+            control: {
+                type: 'select',
+            },
+        },
+        gap: {
+            control: { type: 'number' },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof ToastContainer> & {
+    enableContentLeft?: boolean;
+};
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const handleShowToast = () => {
+        showToast('Текст всплывающего уведомления');
+    };
+
+    return (
+        <div>
+            <ToastContainer {...args} contentLeft={args.enableContentLeft && <IconDone size="xs" color="inherit" />} />
+
+            <Button onClick={handleShowToast}>Показать тост</Button>
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'm',
+        pilled: false,
+        hasClose: true,
+        enableContentLeft: true,
+    },
+    render: StoryDefault,
+};

package/emotion/es/examples/plasma_web/components/Checkbox/Checkbox.js

@@ -4,10 +4,10 @@ import { createConditionalComponent } from "../../../../utils/createConditionalC
 import { config } from "./Checkbox.config";
 import { config as outlineConfig } from "./Checkbox.outline.config";
 var mergedConfigDefault = /*#__PURE__*/mergeConfig(checkboxConfig, config);
-export var CheckboxDefalut = /*#__PURE__*/component(mergedConfigDefault);
+export var CheckboxDefault = /*#__PURE__*/component(mergedConfigDefault);
 var mergedConfigOutline = /*#__PURE__*/mergeConfig(checkboxConfig, outlineConfig);
 export var CheckboxOutline = /*#__PURE__*/component(mergedConfigOutline);
-export var Checkbox = /*#__PURE__*/createConditionalComponent(CheckboxDefalut, [{
+export var Checkbox = /*#__PURE__*/createConditionalComponent(CheckboxDefault, [{
   conditions: {
     prop: 'appearance',
     value: 'outline'

package/emotion/es/examples/plasma_web/components/Radiobox/Radiobox.js

@@ -4,10 +4,10 @@ import { createConditionalComponent } from "../../../../utils/createConditionalC
 import { config } from "./Radiobox.config";
 import { config as outlineConfig } from "./Radiobox.outline.config";
 var mergedConfigDefault = /*#__PURE__*/mergeConfig(radioboxConfig, config);
-export var RadioboxDefalut = /*#__PURE__*/component(mergedConfigDefault);
+export var RadioboxDefault = /*#__PURE__*/component(mergedConfigDefault);
 var mergedConfigOutline = /*#__PURE__*/mergeConfig(radioboxConfig, outlineConfig);
 export var RadioboxOutline = /*#__PURE__*/component(mergedConfigOutline);
-export var Radiobox = /*#__PURE__*/createConditionalComponent(RadioboxDefalut, [{
+export var Radiobox = /*#__PURE__*/createConditionalComponent(RadioboxDefault, [{
   conditions: {
     prop: 'appearance',
     value: 'outline'

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

@@ -6,7 +6,11 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(sheetTokens.sheetOverlayColor, ":var(--overlay-soft);", sheetTokens.sheetOverlayWithBlurColor, ":var(--overlay-blur);", sheetTokens.contentBackgroundColor, ":var(--surface-solid-card);", sheetTokens.handleBackgroundColor, ":var(--surface-solid-tertiary);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9TaGVldC9TaGVldC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9TaGVldC9TaGVldC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHNoZWV0VG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29tcG9uZW50cy9TaGVldCc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHtzaGVldFRva2Vucy5zaGVldE92ZXJsYXlDb2xvcn06IHZhcigtLW92ZXJsYXktc29mdCk7XG4gICAgICAgICAgICAgICAgJHtzaGVldFRva2Vucy5zaGVldE92ZXJsYXlXaXRoQmx1ckNvbG9yfTogdmFyKC0tb3ZlcmxheS1ibHVyKTtcbiAgICAgICAgICAgICAgICAke3NoZWV0VG9rZW5zLmNvbnRlbnRCYWNrZ3JvdW5kQ29sb3J9OiB2YXIoLS1zdXJmYWNlLXNvbGlkLWNhcmQpO1xuICAgICAgICAgICAgICAgICR7c2hlZXRUb2tlbnMuaGFuZGxlQmFja2dyb3VuZENvbG9yfTogdmFyKC0tc3VyZmFjZS1zb2xpZC10ZXJ0aWFyeSk7XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgIH0sXG59O1xuIl19 */"))
+      "default": /*#__PURE__*/css(sheetTokens.sheetOverlayColor, ":var(--overlay-soft);", sheetTokens.sheetOverlayWithBlurColor, ":var(--overlay-blur);", sheetTokens.contentBackgroundColor, ":var(--surface-solid-card);", sheetTokens.handleBackgroundColor, ":var(--surface-solid-tertiary);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9TaGVldC9TaGVldC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9TaGVldC9TaGVldC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHNoZWV0VG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29tcG9uZW50cy9TaGVldCc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHtzaGVldFRva2Vucy5zaGVldE92ZXJsYXlDb2xvcn06IHZhcigtLW92ZXJsYXktc29mdCk7XG4gICAgICAgICAgICAgICAgJHtzaGVldFRva2Vucy5zaGVldE92ZXJsYXlXaXRoQmx1ckNvbG9yfTogdmFyKC0tb3ZlcmxheS1ibHVyKTtcbiAgICAgICAgICAgICAgICAke3NoZWV0VG9rZW5zLmNvbnRlbnRCYWNrZ3JvdW5kQ29sb3J9OiB2YXIoLS1zdXJmYWNlLXNvbGlkLWNhcmQpO1xuICAgICAgICAgICAgICAgICR7c2hlZXRUb2tlbnMuaGFuZGxlQmFja2dyb3VuZENvbG9yfTogdmFyKC0tc3VyZmFjZS1zb2xpZC10ZXJ0aWFyeSk7XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgICAgICBoYW5kbGVQbGFjZW1lbnQ6IHtcbiAgICAgICAgICAgIGlubmVyOiBjc3NgXG4gICAgICAgICAgICAgICAgJHtzaGVldFRva2Vucy5oYW5kbGVNYXJnaW5Ub3B9OiAtMi4zNzVyZW07XG4gICAgICAgICAgICBgLFxuICAgICAgICAgICAgb3V0ZXI6IGNzc2BcbiAgICAgICAgICAgICAgICAke3NoZWV0VG9rZW5zLmhhbmRsZU1hcmdpblRvcH06IC0xLjM3NXJlbTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
+    },
+    handlePlacement: {
+      inner: /*#__PURE__*/css(sheetTokens.handleMarginTop, ":-2.375rem;;label:plasma-new-hope__inner;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9TaGVldC9TaGVldC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JzQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfd2ViL2NvbXBvbmVudHMvU2hlZXQvU2hlZXQuY29uZmlnLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBzaGVldFRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvU2hlZXQnO1xuXG5leHBvcnQgY29uc3QgY29uZmlnID0ge1xuICAgIGRlZmF1bHRzOiB7XG4gICAgICAgIHZpZXc6ICdkZWZhdWx0JyxcbiAgICB9LFxuICAgIHZhcmlhdGlvbnM6IHtcbiAgICAgICAgdmlldzoge1xuICAgICAgICAgICAgZGVmYXVsdDogY3NzYFxuICAgICAgICAgICAgICAgICR7c2hlZXRUb2tlbnMuc2hlZXRPdmVybGF5Q29sb3J9OiB2YXIoLS1vdmVybGF5LXNvZnQpO1xuICAgICAgICAgICAgICAgICR7c2hlZXRUb2tlbnMuc2hlZXRPdmVybGF5V2l0aEJsdXJDb2xvcn06IHZhcigtLW92ZXJsYXktYmx1cik7XG4gICAgICAgICAgICAgICAgJHtzaGVldFRva2Vucy5jb250ZW50QmFja2dyb3VuZENvbG9yfTogdmFyKC0tc3VyZmFjZS1zb2xpZC1jYXJkKTtcbiAgICAgICAgICAgICAgICAke3NoZWV0VG9rZW5zLmhhbmRsZUJhY2tncm91bmRDb2xvcn06IHZhcigtLXN1cmZhY2Utc29saWQtdGVydGlhcnkpO1xuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICAgICAgaGFuZGxlUGxhY2VtZW50OiB7XG4gICAgICAgICAgICBpbm5lcjogY3NzYFxuICAgICAgICAgICAgICAgICR7c2hlZXRUb2tlbnMuaGFuZGxlTWFyZ2luVG9wfTogLTIuMzc1cmVtO1xuICAgICAgICAgICAgYCxcbiAgICAgICAgICAgIG91dGVyOiBjc3NgXG4gICAgICAgICAgICAgICAgJHtzaGVldFRva2Vucy5oYW5kbGVNYXJnaW5Ub3B9OiAtMS4zNzVyZW07XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgIH0sXG59O1xuIl19 */")),
+      outer: /*#__PURE__*/css(sheetTokens.handleMarginTop, ":-1.375rem;;label:plasma-new-hope__outer;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9TaGVldC9TaGVldC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJzQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfd2ViL2NvbXBvbmVudHMvU2hlZXQvU2hlZXQuY29uZmlnLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBzaGVldFRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvU2hlZXQnO1xuXG5leHBvcnQgY29uc3QgY29uZmlnID0ge1xuICAgIGRlZmF1bHRzOiB7XG4gICAgICAgIHZpZXc6ICdkZWZhdWx0JyxcbiAgICB9LFxuICAgIHZhcmlhdGlvbnM6IHtcbiAgICAgICAgdmlldzoge1xuICAgICAgICAgICAgZGVmYXVsdDogY3NzYFxuICAgICAgICAgICAgICAgICR7c2hlZXRUb2tlbnMuc2hlZXRPdmVybGF5Q29sb3J9OiB2YXIoLS1vdmVybGF5LXNvZnQpO1xuICAgICAgICAgICAgICAgICR7c2hlZXRUb2tlbnMuc2hlZXRPdmVybGF5V2l0aEJsdXJDb2xvcn06IHZhcigtLW92ZXJsYXktYmx1cik7XG4gICAgICAgICAgICAgICAgJHtzaGVldFRva2Vucy5jb250ZW50QmFja2dyb3VuZENvbG9yfTogdmFyKC0tc3VyZmFjZS1zb2xpZC1jYXJkKTtcbiAgICAgICAgICAgICAgICAke3NoZWV0VG9rZW5zLmhhbmRsZUJhY2tncm91bmRDb2xvcn06IHZhcigtLXN1cmZhY2Utc29saWQtdGVydGlhcnkpO1xuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICAgICAgaGFuZGxlUGxhY2VtZW50OiB7XG4gICAgICAgICAgICBpbm5lcjogY3NzYFxuICAgICAgICAgICAgICAgICR7c2hlZXRUb2tlbnMuaGFuZGxlTWFyZ2luVG9wfTogLTIuMzc1cmVtO1xuICAgICAgICAgICAgYCxcbiAgICAgICAgICAgIG91dGVyOiBjc3NgXG4gICAgICAgICAgICAgICAgJHtzaGVldFRva2Vucy5oYW5kbGVNYXJnaW5Ub3B9OiAtMS4zNzVyZW07XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgIH0sXG59O1xuIl19 */"))
     }
   }
 };

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

@@ -10,8 +10,16 @@ import { Body } from '../../../typography/components/Body/Body';
 import { Sheet } from './Sheet';
 
 const meta: Meta<typeof Sheet> = {
-    title: 'web/Overlay/Select',
+    title: 'web/Overlay/Sheet',
     decorators: [WithTheme],
+    argTypes: {
+        handlePlacement: {
+            options: ['inner', 'outer'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
     args: {
         withBlur: false,
         withOverlay: true,
@@ -19,6 +27,8 @@ const meta: Meta<typeof Sheet> = {
         hasHandle: true,
         isHeaderFixed: false,
         isFooterFixed: false,
+        handlePlacement: 'outer',
+        fullScreen: false,
     },
 };
 
@@ -29,10 +39,18 @@ type StorySheetProps = ComponentProps<typeof Sheet> & {
     storyHasFooter: boolean;
 };
 
+type StorySheetPropsExtension = StorySheetProps & {
+    fullScreen: boolean;
+};
+
 const StyledBody = styled(Body)`
     padding-bottom: 300px;
 `;
 
+const StyledBodyFullScreen = styled(Body)`
+    height: calc(100vh - 10rem);
+`;
+
 const StoryDefault = ({
     withOverlay,
     withTransition,
@@ -42,7 +60,9 @@ const StoryDefault = ({
     isHeaderFixed,
     hasHandle,
     withBlur,
-}: StorySheetProps) => {
+    handlePlacement,
+    fullScreen,
+}: StorySheetPropsExtension) => {
     const [opened, setOpened] = useState(false);
 
     return (
@@ -50,6 +70,7 @@ const StoryDefault = ({
             <Button onClick={() => setOpened(true)}>Открыть</Button>
             <Sheet
                 opened={opened}
+                handlePlacement={handlePlacement}
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setOpened(false)}
@@ -72,7 +93,7 @@ const StoryDefault = ({
                 }
                 isFooterFixed={isFooterFixed}
             >
-                <StyledBody>body</StyledBody>
+                {fullScreen ? <StyledBodyFullScreen>body</StyledBodyFullScreen> : <StyledBody>body</StyledBody>}
             </Sheet>
         </>
     );