@salutejs/sdds-cs 0.318.1-canary.2030.15843645408.0 → 0.318.1-canary.2036.15817315131.0

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

@@ -0,0 +1,217 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { ComponentProps } from 'react';
+import { disableProps, 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: {
+        ...disableProps(['view', 'size']),
+        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;
+    color: var(--text-secondary);
+`;
+
+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/es/components/Drawer/index.js

@@ -1 +1 @@
-export { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from './Drawer';
+export { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from './Drawer';

package/emotion/es/components/Dropdown/Dropdown.config.js

@@ -1,89 +1,17 @@
-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                ",
-        ": 0rem;\n                ",
-        ": 12.5rem;\n                ",
-        ": 0.625rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": 1.5rem;\n                ",
-        ": 0rem;\n                ",
-        ": 0.5rem 0.75rem;\n                ",
-        ": 0.25rem 0.75rem;\n\n                ",
-        ": 0.5rem;\n\n                ",
-        ": 0.375rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.375rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n\n                ",
-        ": 0rem;\n                ",
-        ": 0rem;\n                ",
-        ": 0rem;\n                ",
-        ": 0rem;\n                ",
-        ": 0.125rem;\n                ",
-        ": 0.375rem;\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
-        ": 0.4;\n                ",
-        ": var(--outline-solid-primary);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--surface-solid-card-brightness);\n                ",
-        ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--surface-clear);\n                ",
-        ": var(--surface-transparent-accent);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--surface-solid-primary);\n                ",
-        ": var(--text-accent);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
-    defaults: {
-        view: 'default',
-        size: 's'
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0rem;\n                ", ": 12.5rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0rem;\n                ", ": 0.5rem 0.75rem;\n                ", ": 0.25rem 0.75rem;\n\n                ", ": 0.5rem;\n\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemMargin, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight)
     },
-    variations: {
-        size: {
-            s: css(_templateObject(), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemMargin, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight)
-        },
-        view: {
-            default: css(_templateObject1(), tokens.dividerColor, tokens.disabledOpacity, tokens.borderColor, tokens.focusColor, tokens.background, tokens.boxShadow, tokens.disclosureIconColor, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.disclosureIconColor, tokens.dividerColor, tokens.disclosureIconColor)
-        }
+    view: {
+      "default": /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.4;\n                ", ": var(--outline-solid-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-solid-card-brightness);\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-accent);\n            "])), tokens.dividerColor, tokens.disabledOpacity, tokens.borderColor, tokens.focusColor, tokens.background, tokens.boxShadow, tokens.disclosureIconColor, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.disclosureIconColor, tokens.dividerColor, tokens.disclosureIconColor)
     }
-};
+  }
+};

package/emotion/es/components/Dropdown/Dropdown.js

@@ -1,40 +1,13 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { dropdownConfig, component, mergeConfig, fixedForwardRef } from '@salutejs/plasma-new-hope/emotion';
 import React from 'react';
 import { config } from './Dropdown.config';
-var mergedConfig = mergeConfig(dropdownConfig, config);
-var DropdownNewHope = component(mergedConfig);
-var DropdownComponent = function(props, ref) {
-    return /*#__PURE__*/ React.createElement(DropdownNewHope, _object_spread({
-        ref: ref
-    }, props));
+var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
+var DropdownNewHope = /*#__PURE__*/component(mergedConfig);
+var DropdownComponent = function DropdownComponent(props, ref) {
+  return /*#__PURE__*/React.createElement(DropdownNewHope, _extends({
+    ref: ref
+  }, props));
 };
-var Dropdown = fixedForwardRef(DropdownComponent);
-export { Dropdown };
+var Dropdown = /*#__PURE__*/fixedForwardRef(DropdownComponent);
+export { Dropdown };