@salutejs/sdds-serv 0.314.0-canary.1741.15775036215.0 → 0.314.0-canary.1973.15677961605.0

package/emotion/cjs/components/Divider/Divider.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { BodyS } from '../Typography';
+
+import { Divider } from './Divider';
+
+const meta: Meta<typeof Divider> = {
+    title: 'Data Display/Divider',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        orientation: {
+            options: ['horizontal', 'vertical'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'horizontal' } },
+        },
+        view: {
+            options: ['default', 'dark', 'light', 'inverse'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'default' } },
+        },
+        ...disableProps(['size']),
+    },
+};
+
+export default meta;
+
+const StyledWrapper = styled.div<{ orientation?: string }>`
+    display: inline-flex;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: #aab1e9;
+    align-items: center;
+    justify-content: center;
+    flex-direction: ${(props) => (props.orientation === 'horizontal' ? 'column' : 'row')};
+`;
+
+export const Default: StoryObj<ComponentProps<typeof Divider>> = {
+    args: {
+        view: 'default',
+        orientation: 'horizontal',
+        length: '100%',
+    },
+    render: (args) => (
+        <StyledWrapper orientation={args.orientation}>
+            <BodyS>Before</BodyS>
+            <Divider {...args} />
+            <BodyS>After</BodyS>
+        </StyledWrapper>
+    ),
+};

package/emotion/cjs/components/Divider/index.js

@@ -1,20 +1,19 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get Divider () {
-        return _Divider.Divider;
-    },
-    get dividerTokens () {
-        return _emotion.dividerTokens;
-    }
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _Divider.Divider;
+  }
 });
-var _Divider = require("./Divider");
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
+Object.defineProperty(exports, "dividerTokens", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.dividerTokens;
+  }
+});
+var _Divider = /*#__PURE__*/require("./Divider");
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");

package/emotion/cjs/components/Drawer/Drawer.config.js

@@ -1,83 +1,27 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-solid-card);\n                ",
-        ": 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08);\n                ",
-        ": var(--surface-transparent-primary);\n                ",
-        ": var(--overlay-blur);\n                ",
-        ": var(--overlay-soft);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1.5rem;\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0;\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1.25rem;\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
-    defaults: {
-        view: 'default',
-        size: 'm'
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-solid-card);\n                ", ": 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08);\n                ", ": var(--surface-transparent-primary);\n                ", ": var(--overlay-blur);\n                ", ": var(--overlay-soft);\n            "])), _emotion.drawerTokens.background, _emotion.drawerTokens.shadow, _emotion.drawerTokens.contentBackgroundColor, _emotion.drawerTokens.drawerOverlayWithBlurColor, _emotion.drawerTokens.drawerOverlayColor)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n            "])), _emotion.drawerTokens.padding)
     },
-    variations: {
-        view: {
-            default: (0, _emotion.css)(_templateObject(), _emotion.drawerTokens.background, _emotion.drawerTokens.shadow, _emotion.drawerTokens.contentBackgroundColor, _emotion.drawerTokens.drawerOverlayWithBlurColor, _emotion.drawerTokens.drawerOverlayColor)
-        },
-        size: {
-            m: (0, _emotion.css)(_templateObject1(), _emotion.drawerTokens.padding)
-        },
-        borderRadius: {
-            none: (0, _emotion.css)(_templateObject2(), _emotion.drawerTokens.borderRadius),
-            default: (0, _emotion.css)(_templateObject3(), _emotion.drawerTokens.borderRadius)
-        }
+    borderRadius: {
+      none: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0;\n            "])), _emotion.drawerTokens.borderRadius),
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.25rem;\n            "])), _emotion.drawerTokens.borderRadius)
     }
-};
+  }
+};

package/emotion/cjs/components/Drawer/Drawer.js

@@ -1,34 +1,32 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get Drawer () {
-        return Drawer;
-    },
-    get DrawerContent () {
-        return DrawerContent;
-    },
-    get DrawerFooter () {
-        return DrawerFooter;
-    },
-    get DrawerHeader () {
-        return DrawerHeader;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _Drawerconfig = require("./Drawer.config");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.drawerConfig, _Drawerconfig.config);
-var mergedContentConfig = (0, _emotion.mergeConfig)(_emotion.drawerContentConfig);
-var mergedHeaderConfig = (0, _emotion.mergeConfig)(_emotion.drawerHeaderConfig);
-var mergedFooterConfig = (0, _emotion.mergeConfig)(_emotion.drawerFooterConfig);
-var Drawer = (0, _emotion.component)(mergedConfig);
-var DrawerContent = (0, _emotion.component)(mergedContentConfig);
-var DrawerHeader = (0, _emotion.component)(mergedHeaderConfig);
-var DrawerFooter = (0, _emotion.component)(mergedFooterConfig);
+exports.DrawerHeader = exports.DrawerFooter = exports.DrawerContent = exports.Drawer = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Drawer = /*#__PURE__*/require("./Drawer.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.drawerConfig, _Drawer.config);
+var mergedContentConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.drawerContentConfig);
+var mergedHeaderConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.drawerHeaderConfig);
+var mergedFooterConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.drawerFooterConfig);
+
+/**
+ * Компонент Drawer.
+ */
+var Drawer = exports.Drawer = /*#__PURE__*/(0, _emotion.component)(mergedConfig);
+
+/**
+ * Компонент части контента Drawer.
+ */
+var DrawerContent = exports.DrawerContent = /*#__PURE__*/(0, _emotion.component)(mergedContentConfig);
+
+/**
+ * Компонент верхней части Drawer.
+ */
+var DrawerHeader = exports.DrawerHeader = /*#__PURE__*/(0, _emotion.component)(mergedHeaderConfig);
+
+/**
+ * Компонент нижней контента Drawer.
+ */
+var DrawerFooter = exports.DrawerFooter = /*#__PURE__*/(0, _emotion.component)(mergedFooterConfig);

package/emotion/cjs/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,215 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { ComponentProps } from 'react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+import { IconDone } from '@salutejs/plasma-icons';
+
+import { Button } from '../Button';
+import { SSRProvider } from '../SSRProvider';
+import { H2, H3 } from '../Typography';
+import { PopupProvider } from '../Popup';
+
+import type { ClosePlacementType } from '.';
+import { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from '.';
+
+export default {
+    title: 'Overlay/Drawer',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        placement: {
+            options: ['top', 'bottom', 'right', 'left'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'center' } },
+        },
+        offsetX: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        offsetY: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        closeOnEsc: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closeOnOverlayClick: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
+        },
+        showHeader: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        showFooter: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        showActions: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closePlacement: {
+            options: ['right', 'left'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'right' } },
+        },
+        borderRadius: {
+            options: ['none', 'default'],
+            control: {
+                type: 'select',
+            },
+        },
+        customBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
+        customContentBackgroundColor: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+} as Meta;
+
+type StoryDrawerProps = ComponentProps<typeof Drawer> & {
+    placement: string;
+    offsetX: number;
+    offsetY: number;
+    closeOnEsc: boolean;
+    closeOnOverlayClick: boolean;
+    showHeader: boolean;
+    showFooter: boolean;
+    showActions: boolean;
+    closePlacement: string;
+    hasClose: boolean;
+    asModal: boolean;
+};
+
+const StyledWrapper = styled.div`
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+`;
+
+const StyledContentWrapper = styled.div`
+    height: 80%;
+    display: flex;
+    flex-grow: 1;
+`;
+
+const StyledContent = styled.div`
+    background: #a8a875;
+    flex-grow: 1;
+    height: 100%;
+`;
+
+const StyledSection = styled.div`
+    background: #808080;
+    min-height: 20%;
+`;
+
+const StyledIconButton = styled(Button)`
+    position: relative;
+    width: 1.5rem;
+    height: 1.5rem;
+`;
+
+const StoryDrawerDemo = ({
+    showHeader,
+    showFooter,
+    showActions,
+    hasClose,
+    closePlacement,
+    ...rest
+}: StoryDrawerProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <StyledWrapper>
+                    <StyledSection>
+                        <Button text="Открыть панель" onClick={() => setIsOpen(true)} />
+                    </StyledSection>
+                    <StyledContentWrapper>
+                        <Drawer opened={isOpen} onClose={() => setIsOpen(false)} {...rest}>
+                            <DrawerHeader
+                                hasClose={hasClose}
+                                closePlacement={closePlacement as ClosePlacementType}
+                                actions={
+                                    showActions && (
+                                        <StyledIconButton size="s" view="clear">
+                                            <IconDone size="s" color="inherit" />
+                                        </StyledIconButton>
+                                    )
+                                }
+                                onClose={() => setIsOpen(false)}
+                            >
+                                {showHeader && <H3>Header</H3>}
+                            </DrawerHeader>
+                            <DrawerContent>Content</DrawerContent>
+                            {showFooter && (
+                                <DrawerFooter>
+                                    <H3>Footer</H3>
+                                </DrawerFooter>
+                            )}
+                        </Drawer>
+                        <StyledContent>
+                            <H2 style={{ margin: '2rem' }}>Some basic content</H2>
+                        </StyledContent>
+                    </StyledContentWrapper>
+                    <StyledSection />
+                </StyledWrapper>
+            </PopupProvider>
+        </SSRProvider>
+    );
+};
+
+export const DrawerDemo: StoryObj<StoryDrawerProps> = {
+    args: {
+        placement: 'right',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+        showHeader: true,
+        showFooter: true,
+        showActions: true,
+        hasClose: true,
+        asModal: true,
+        closePlacement: 'right',
+        width: '25vw',
+        height: '100dvh',
+        borderRadius: 'none',
+    },
+    render: (args) => <StoryDrawerDemo {...args} />,
+};

package/emotion/cjs/components/Drawer/index.js

@@ -1,25 +1,30 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get Drawer () {
-        return _Drawer.Drawer;
-    },
-    get DrawerContent () {
-        return _Drawer.DrawerContent;
-    },
-    get DrawerFooter () {
-        return _Drawer.DrawerFooter;
-    },
-    get DrawerHeader () {
-        return _Drawer.DrawerHeader;
-    }
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer.Drawer;
+  }
 });
-var _Drawer = require("./Drawer");
+Object.defineProperty(exports, "DrawerContent", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer.DrawerContent;
+  }
+});
+Object.defineProperty(exports, "DrawerFooter", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer.DrawerFooter;
+  }
+});
+Object.defineProperty(exports, "DrawerHeader", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer.DrawerHeader;
+  }
+});
+var _Drawer = /*#__PURE__*/require("./Drawer");