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

package/emotion/cjs/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/cjs/examples/plasma_web/components/Checkbox/Checkbox.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CheckboxOutline = exports.CheckboxDefalut = exports.Checkbox = void 0;
+exports.CheckboxOutline = exports.CheckboxDefault = exports.Checkbox = void 0;
 var _Checkbox = /*#__PURE__*/require("../../../../components/Checkbox");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _createConditionalComponent = /*#__PURE__*/require("../../../../utils/createConditionalComponent");
 var _Checkbox2 = /*#__PURE__*/require("./Checkbox.config");
 var _CheckboxOutline = /*#__PURE__*/require("./Checkbox.outline.config");
 var mergedConfigDefault = /*#__PURE__*/(0, _engines.mergeConfig)(_Checkbox.checkboxConfig, _Checkbox2.config);
-var CheckboxDefalut = exports.CheckboxDefalut = /*#__PURE__*/(0, _engines.component)(mergedConfigDefault);
+var CheckboxDefault = exports.CheckboxDefault = /*#__PURE__*/(0, _engines.component)(mergedConfigDefault);
 var mergedConfigOutline = /*#__PURE__*/(0, _engines.mergeConfig)(_Checkbox.checkboxConfig, _CheckboxOutline.config);
 var CheckboxOutline = exports.CheckboxOutline = /*#__PURE__*/(0, _engines.component)(mergedConfigOutline);
-var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _createConditionalComponent.createConditionalComponent)(CheckboxDefalut, [{
+var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _createConditionalComponent.createConditionalComponent)(CheckboxDefault, [{
   conditions: {
     prop: 'appearance',
     value: 'outline'

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

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RadioboxOutline = exports.RadioboxDefalut = exports.Radiobox = void 0;
+exports.RadioboxOutline = exports.RadioboxDefault = exports.Radiobox = void 0;
 var _Radiobox = /*#__PURE__*/require("../../../../components/Radiobox");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _createConditionalComponent = /*#__PURE__*/require("../../../../utils/createConditionalComponent");
 var _Radiobox2 = /*#__PURE__*/require("./Radiobox.config");
 var _RadioboxOutline = /*#__PURE__*/require("./Radiobox.outline.config");
 var mergedConfigDefault = /*#__PURE__*/(0, _engines.mergeConfig)(_Radiobox.radioboxConfig, _Radiobox2.config);
-var RadioboxDefalut = exports.RadioboxDefalut = /*#__PURE__*/(0, _engines.component)(mergedConfigDefault);
+var RadioboxDefault = exports.RadioboxDefault = /*#__PURE__*/(0, _engines.component)(mergedConfigDefault);
 var mergedConfigOutline = /*#__PURE__*/(0, _engines.mergeConfig)(_Radiobox.radioboxConfig, _RadioboxOutline.config);
 var RadioboxOutline = exports.RadioboxOutline = /*#__PURE__*/(0, _engines.component)(mergedConfigOutline);
-var Radiobox = exports.Radiobox = /*#__PURE__*/(0, _createConditionalComponent.createConditionalComponent)(RadioboxDefalut, [{
+var Radiobox = exports.Radiobox = /*#__PURE__*/(0, _createConditionalComponent.createConditionalComponent)(RadioboxDefault, [{
   conditions: {
     prop: 'appearance',
     value: 'outline'

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

@@ -12,7 +12,11 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _react.css)(_Sheet.sheetTokens.sheetOverlayColor, ":var(--overlay-soft);", _Sheet.sheetTokens.sheetOverlayWithBlurColor, ":var(--overlay-blur);", _Sheet.sheetTokens.contentBackgroundColor, ":var(--surface-solid-card);", _Sheet.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__*/(0, _react.css)(_Sheet.sheetTokens.sheetOverlayColor, ":var(--overlay-soft);", _Sheet.sheetTokens.sheetOverlayWithBlurColor, ":var(--overlay-blur);", _Sheet.sheetTokens.contentBackgroundColor, ":var(--surface-solid-card);", _Sheet.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__*/(0, _react.css)(_Sheet.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__*/(0, _react.css)(_Sheet.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/cjs/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>
         </>
     );