@salutejs/sdds-serv 0.314.0-canary.2021.15824070198.0 → 0.314.0-canary.2022.15704348481.0

package/emotion/es/components/Select/index.js

@@ -1 +1 @@
-export { Select } from './Select';
+export { Select } from './Select';

package/emotion/es/components/Select/style.css

@@ -0,0 +1,37 @@
+.container {
+    width: 100%;
+}
+
+table {
+    border-collapse: collapse;
+    box-shadow: 0 0 20px rgba(0,0,0,0.1);
+}
+
+th,
+td {
+    padding: 15px;
+}
+
+th {
+    text-align: left;
+}
+
+table, th, td {
+    border: 1px solid lightgray;
+    border-collapse: collapse;
+}
+
+thead {
+    th {
+        background-color: #55608f;
+        color: #fff;
+    }
+}
+
+tbody {
+
+    td {
+        position: relative;
+
+    }
+}

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

@@ -1,58 +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                ",
-        ": var(--overlay-soft);\n                ",
-        ": var(--overlay-blur);\n                ",
-        ": var(--surface-solid-card);\n                ",
-        ": var(--surface-solid-tertiary);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": -2.375rem;\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": -1.375rem;\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, sheetTokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
-    defaults: {
-        view: 'default'
+  defaults: {
+    view: 'default'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--overlay-soft);\n                ", ": var(--overlay-blur);\n                ", ": var(--surface-solid-card);\n                ", ": var(--surface-solid-tertiary);\n            "])), sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleBackgroundColor)
     },
-    variations: {
-        view: {
-            default: css(_templateObject(), sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleBackgroundColor)
-        },
-        handlePlacement: {
-            inner: css(_templateObject1(), sheetTokens.handleMarginTop),
-            outer: css(_templateObject2(), sheetTokens.handleMarginTop)
-        }
+    handlePlacement: {
+      inner: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": -2.375rem;\n            "])), sheetTokens.handleMarginTop),
+      outer: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": -1.375rem;\n            "])), sheetTokens.handleMarginTop)
     }
-};
+  }
+};

package/emotion/es/components/Sheet/Sheet.js

@@ -1,7 +1,9 @@
 import { sheetConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config } from './Sheet.config';
-var mergedConfig = mergeConfig(sheetConfig, config);
-var SheetComponent = component(mergedConfig);
+var mergedConfig = /*#__PURE__*/mergeConfig(sheetConfig, config);
+var SheetComponent = /*#__PURE__*/component(mergedConfig);
+
 /**
  * Открывает окно-шторку поверх основного экрана.
- */ export var Sheet = SheetComponent;
+ */
+export var Sheet = SheetComponent;

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

@@ -0,0 +1,361 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import styled from 'styled-components';
+
+import { Button } from '../Button';
+import { BodyM } from '../Typography';
+
+import { Sheet } from '.';
+import type { SheetProps } from '.';
+
+const meta: Meta<SheetProps> = {
+    title: 'Overlay/Sheet',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        handlePlacement: {
+            options: ['inner', 'outer'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        withBlur: false,
+        withOverlay: true,
+        withTransition: true,
+        hasHandle: true,
+        isHeaderFixed: false,
+        isFooterFixed: false,
+        handlePlacement: 'outer',
+        fullScreen: false,
+    },
+};
+
+export default meta;
+
+type StorySheetProps = ComponentProps<typeof Sheet> & {
+    storyHasHeader: boolean;
+    storyHasFooter: boolean;
+};
+
+const StyledBody = styled(BodyM)`
+    padding-bottom: 200px;
+`;
+
+const StyledBodyFullScreen = styled(BodyM)`
+    height: calc(100vh - 10rem);
+`;
+
+type StorySheetPropsExtension = StorySheetProps & {
+    fullScreen: boolean;
+};
+const StoryDefault = ({
+    withOverlay,
+    withTransition,
+    storyHasFooter,
+    isFooterFixed,
+    storyHasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+    handlePlacement,
+    fullScreen,
+}: StorySheetPropsExtension) => {
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <>
+            <Button onClick={() => setOpened(true)}>Открыть</Button>
+            <Sheet
+                opened={opened}
+                handlePlacement={handlePlacement}
+                withOverlay={withOverlay}
+                withTransition={withTransition}
+                onClose={() => setOpened(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    storyHasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    storyHasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
+            >
+                {fullScreen ? <StyledBodyFullScreen>body</StyledBodyFullScreen> : <StyledBody>body</StyledBody>}
+            </Sheet>
+        </>
+    );
+};
+
+export const Default: StoryObj<StorySheetProps> = {
+    args: {
+        storyHasHeader: true,
+        storyHasFooter: true,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryWithoutOverlay = () => {
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <>
+            <Button onClick={() => setOpened(true)}>Открыть</Button>
+            <Sheet opened={opened} withOverlay={false} onClose={() => setOpened(false)}>
+                <StyledBody>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
+                    consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
+                    fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
+                    placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
+                    dolorem labore quaerat vero maxime ab ipsa nihil.
+                </StyledBody>
+            </Sheet>
+        </>
+    );
+};
+
+export const WithoutOverlay: StoryObj = {
+    render: () => <StoryWithoutOverlay />,
+};
+
+const StoryWithScroll = ({
+    withOverlay,
+    withTransition,
+    storyHasFooter,
+    isFooterFixed,
+    storyHasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <>
+            <Button onClick={() => setOpened(true)}>Открыть</Button>
+            <Sheet
+                opened={opened}
+                withOverlay={withOverlay}
+                withTransition={withTransition}
+                onClose={() => setOpened(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    storyHasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    storyHasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
+            >
+                <BodyM>
+                    <Button onClick={() => setOpened(false)}>Закрыть</Button>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
+                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
+                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
+                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
+                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
+                    </p>
+                    <Button onClick={() => setOpened(false)}>Закрыть</Button>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
+                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
+                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
+                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
+                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
+                    </p>
+                </BodyM>
+            </Sheet>
+        </>
+    );
+};
+
+export const WithScroll: StoryObj<StorySheetProps> = {
+    args: {
+        storyHasHeader: true,
+        storyHasFooter: true,
+    },
+    render: (args) => <StoryWithScroll {...args} />,
+};
+
+const StoryWithInsideScroll = ({
+    withOverlay,
+    withTransition,
+    storyHasFooter,
+    isFooterFixed,
+    storyHasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <>
+            <Button onClick={() => setOpened(true)}>Открыть</Button>
+            <Sheet
+                opened={opened}
+                withOverlay={withOverlay}
+                withTransition={withTransition}
+                onClose={() => setOpened(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    storyHasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    storyHasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
+            >
+                <p>Вложенные кнопки</p>
+                <div
+                    style={{
+                        height: '150px',
+                        overflowY: 'scroll',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '1rem',
+                    }}
+                >
+                    <Button>Кнопка 1</Button>
+                    <Button>Кнопка 2</Button>
+                    <Button>Кнопка 3</Button>
+                    <Button>Кнопка 4</Button>
+                    <Button>Кнопка 5</Button>
+                    <Button>Кнопка 6</Button>
+                    <Button>Кнопка 7</Button>
+                    <Button>Кнопка 8</Button>
+                </div>
+                <BodyM>Lorem ipsum dolor sit amet consectetur adipisicing elit.</BodyM>
+            </Sheet>
+        </>
+    );
+};
+
+export const WithInsideScroll: StoryObj<StorySheetProps> = {
+    args: {
+        storyHasHeader: true,
+        storyHasFooter: true,
+    },
+    render: (args) => <StoryWithInsideScroll {...args} />,
+};
+
+const StoryWithDoubleScroll = ({
+    withOverlay,
+    withTransition,
+    storyHasFooter,
+    isFooterFixed,
+    storyHasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <>
+            <Button onClick={() => setOpened(true)}>Открыть</Button>
+            <Sheet
+                opened={opened}
+                withOverlay={withOverlay}
+                withTransition={withTransition}
+                onClose={() => setOpened(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    storyHasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    storyHasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
+            >
+                <BodyM>
+                    <Button onClick={() => setOpened(false)}>Закрыть</Button>
+                    <p>Вложенные кнопки</p>
+                    <div
+                        style={{
+                            height: '150px',
+                            overflowY: 'scroll',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '1rem',
+                        }}
+                    >
+                        <Button>Кнопка 1</Button>
+                        <Button>Кнопка 2</Button>
+                        <Button>Кнопка 3</Button>
+                        <Button>Кнопка 4</Button>
+                        <Button>Кнопка 5</Button>
+                        <Button>Кнопка 6</Button>
+                        <Button>Кнопка 7</Button>
+                        <Button>Кнопка 8</Button>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
+                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
+                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
+                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
+                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
+                    </p>
+                    <Button onClick={() => setOpened(false)}>Закрыть</Button>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
+                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
+                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
+                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
+                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
+                    </p>
+                </BodyM>
+            </Sheet>
+        </>
+    );
+};
+
+export const WithDoubleScroll: StoryObj<StorySheetProps> = {
+    args: {
+        storyHasHeader: true,
+        storyHasFooter: true,
+    },
+    render: (args) => <StoryWithDoubleScroll {...args} />,
+};

package/emotion/es/components/Sheet/index.js

@@ -1,2 +1,2 @@
 export { Sheet } from './Sheet';
-export { sheetClasses } from '@salutejs/plasma-new-hope/emotion';
+export { sheetClasses } from '@salutejs/plasma-new-hope/emotion';