@salutejs/sdds-cs 0.319.0-canary.2021.15824070198.0 → 0.319.0-canary.2022.15704348481.0

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

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "Pagination", {
-    enumerable: true,
-    get: function() {
-        return _Pagination.Pagination;
-    }
+  enumerable: true,
+  get: function get() {
+    return _Pagination.Pagination;
+  }
 });
-var _Pagination = require("./Pagination");
+var _Pagination = /*#__PURE__*/require("./Pagination");

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

@@ -1,47 +1,19 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _templateObject;
+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'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--shadow-down-hard-m);\n\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");\n                ", ": 0.375rem;\n                ", ": 0.5625rem;\n                ", ": var(--surface-solid-card);\n            "])), _emotion.popoverTokens.boxShadow, _emotion.popoverTokens.arrowMaskWidth, _emotion.popoverTokens.arrowMaskHeight, _emotion.popoverTokens.arrowMaskImage, _emotion.popoverTokens.arrowHeight, _emotion.popoverTokens.arrowEdgeMargin, _emotion.popoverTokens.arrowBackground)
     }
-});
-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(--shadow-down-hard-m);\n\n                ",
-        ": 1rem;\n                ",
-        ": 1rem;\n                ",
-        ': url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");\n                ',
-        ": 0.375rem;\n                ",
-        ": 0.5625rem;\n                ",
-        ": var(--surface-solid-card);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
-    defaults: {
-        view: 'default'
-    },
-    variations: {
-        view: {
-            default: (0, _emotion.css)(_templateObject(), _emotion.popoverTokens.boxShadow, _emotion.popoverTokens.arrowMaskWidth, _emotion.popoverTokens.arrowMaskHeight, _emotion.popoverTokens.arrowMaskImage, _emotion.popoverTokens.arrowHeight, _emotion.popoverTokens.arrowEdgeMargin, _emotion.popoverTokens.arrowBackground)
-        }
-    }
-};
+  }
+};

package/emotion/cjs/components/Popover/Popover.js

@@ -1,14 +1,10 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "Popover", {
-    enumerable: true,
-    get: function() {
-        return Popover;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _Popoverconfig = require("./Popover.config");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.popoverConfig, _Popoverconfig.config);
-var Popover = (0, _emotion.component)(mergedConfig);
+exports.Popover = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Popover = /*#__PURE__*/require("./Popover.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.popoverConfig, _Popover.config);
+var Popover = exports.Popover = /*#__PURE__*/(0, _emotion.component)(mergedConfig);

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

@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import styled from 'styled-components';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { Button } from '../Button/Button';
+
+import { Popover } from './Popover';
+
+import './style.css';
+
+const meta: Meta<typeof Popover> = {
+    title: 'Overlay/Popover',
+    decorators: [InSpacingDecorator],
+    component: Popover,
+    argTypes: {
+        placement: {
+            options: ['top', 'bottom', 'right', 'left', 'auto'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'bottom' } },
+            mapping: {
+                top: 'top',
+                bottom: 'bottom',
+                right: 'right',
+                left: 'left',
+                auto: 'auto',
+            },
+        },
+        trigger: {
+            options: ['click', 'hover'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'click' } },
+        },
+        closeOnOverlayClick: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closeOnEsc: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        isFocusTrapped: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        skidding: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        distance: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 6 } },
+        },
+        ...disableProps(['view']),
+    },
+    args: {
+        placement: 'bottom',
+        trigger: 'click',
+        closeOnOverlayClick: true,
+        closeOnEsc: true,
+        isFocusTrapped: true,
+        skidding: 0,
+        distance: 6,
+        animated: true,
+    },
+};
+
+export default meta;
+
+type StoryPopoverProps = ComponentProps<typeof Popover> & {
+    skidding?: number;
+    distance?: number;
+};
+
+const StyledContent = styled.div`
+    background: var(--surface-solid-card);
+    padding: 1rem;
+    border-radius: var(--popover-border-radius);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+const StoryDefault = (args: StoryPopoverProps) => {
+    const { skidding = 0, distance = 6 } = args;
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <Popover
+            opened={isOpen}
+            onToggle={(is) => setIsOpen(is)}
+            usePortal={false}
+            role="presentation"
+            id="popover"
+            target={<Button>Target</Button>}
+            hasArrow
+            offset={[skidding, distance]}
+            {...args}
+        >
+            <StyledContent>
+                <>Content</>
+                <Button onClick={() => setIsOpen(false)}>Close</Button>
+            </StyledContent>
+        </Popover>
+    );
+};
+
+export const Default: StoryObj<StoryPopoverProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};

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

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "Popover", {
-    enumerable: true,
-    get: function() {
-        return _Popover.Popover;
-    }
+  enumerable: true,
+  get: function get() {
+    return _Popover.Popover;
+  }
 });
-var _Popover = require("./Popover");
+var _Popover = /*#__PURE__*/require("./Popover");

package/emotion/cjs/components/Popover/style.css

@@ -0,0 +1,4 @@
+.popover-root {
+    --popover-border-radius: 0.5rem;
+    border-radius: var(--popover-border-radius);
+}

package/emotion/cjs/components/Popup/Popup.js

@@ -1,13 +1,13 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "Popup", {
-    enumerable: true,
-    get: function() {
-        return Popup;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.popupConfig);
-var Popup = (0, _emotion.component)(mergedConfig);
+exports.Popup = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.popupConfig);
+
+/**
+ * Базовый компонент Popup.
+ */
+var Popup = exports.Popup = /*#__PURE__*/(0, _emotion.component)(mergedConfig);

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

@@ -0,0 +1,171 @@
+import React from 'react';
+import styled from 'styled-components';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { SSRProvider } from '../SSRProvider';
+import { Button } from '../Button';
+
+import { Popup, popupClasses, PopupProvider } from '.';
+import type { PopupProps } from '.';
+
+const meta: Meta<PopupProps> = {
+    title: 'Overlay/Popup',
+    component: Popup,
+    decorators: [InSpacingDecorator],
+    parameters: {
+        docs: { story: { inline: false, iframeHeight: '30rem' } },
+    },
+    argTypes: {
+        placement: {
+            options: [
+                'center',
+                'top',
+                'bottom',
+                'right',
+                'left',
+                'top-right',
+                'top-left',
+                'bottom-right',
+                'bottom-left',
+            ],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPopupProps = { placement: string; offsetX: number; offsetY: number };
+
+const StyledButton = styled(Button)`
+    margin-top: 1rem;
+    width: 15rem;
+`;
+
+const StyledWrapper = styled.div`
+    height: 1200px;
+`;
+
+const OtherContent = styled.div`
+    margin-top: 1rem;
+    width: 400px;
+    height: 500px;
+    background: var(--surface-solid-tertiary);
+    position: absolute;
+
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1rem;
+
+    top: 0;
+    right: 0;
+`;
+
+const Content = styled.div`
+    background: var(--surface-solid-secondary);
+    padding: 1rem;
+`;
+
+const StyledPopupAnimation = styled(Popup)`
+    && .${popupClasses.root} {
+        animation: fadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${popupClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+`;
+
+const StyledPopupTransition = styled(Popup)`
+    && .${popupClasses.root} {
+        opacity: 1;
+        transition: opacity 0.5s 0.1s;
+    }
+
+    &&.${popupClasses.endTransition} .${popupClasses.root} {
+        opacity: 0;
+        transition: opacity 0.5s 0.1s;
+    }
+`;
+
+const StoryPopup = ({ placement, offsetX, offsetY }: StoryPopupProps) => {
+    const [isOpenA, setIsOpenA] = React.useState(false);
+    const [isOpenB, setIsOpenB] = React.useState(false);
+
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    return (
+        <SSRProvider>
+            <StyledWrapper>
+                <PopupProvider>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
+                        <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
+                    </div>
+                    <StyledPopupAnimation
+                        id="popupA"
+                        withAnimation
+                        frame={ref}
+                        opened={isOpenA}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                    >
+                        <Content>
+                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                            <>Content</>
+                        </Content>
+                    </StyledPopupAnimation>
+                    <OtherContent ref={ref}>
+                        <>Frame</>
+                    </OtherContent>
+                    <StyledPopupTransition
+                        id="popupB"
+                        withAnimation
+                        frame="document"
+                        opened={isOpenB}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                    >
+                        <Content>
+                            <Button onClick={() => setIsOpenB(false)}>Close</Button>
+                            <>Content</>
+                        </Content>
+                    </StyledPopupTransition>
+                </PopupProvider>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+export const PopupDemo: StoryObj<StoryPopupProps> = {
+    args: {
+        placement: 'center',
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryPopup {...args} />,
+};

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

@@ -1,26 +1,31 @@
 "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 Popup () {
-        return _Popup.Popup;
-    },
-    get PopupProvider () {
-        return _emotion.PopupProvider;
-    },
-    get popupClasses () {
-        return _emotion.popupClasses;
-    },
-    get usePopupContext () {
-        return _emotion.usePopupContext;
-    }
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function get() {
+    return _Popup.Popup;
+  }
 });
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _Popup = require("./Popup");
+Object.defineProperty(exports, "PopupProvider", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.PopupProvider;
+  }
+});
+Object.defineProperty(exports, "popupClasses", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.popupClasses;
+  }
+});
+Object.defineProperty(exports, "usePopupContext", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.usePopupContext;
+  }
+});
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Popup = /*#__PURE__*/require("./Popup");

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

@@ -0,0 +1,57 @@
+import React, { useState, useRef } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+
+import { Button } from '../Button/Button';
+import { BodyM } from '../Typography';
+
+import { Portal } from '.';
+
+const meta: Meta<typeof Portal> = {
+    title: 'Data Entry/Portal',
+    decorators: [InSpacingDecorator],
+    args: {
+        disabled: false,
+    },
+};
+
+export default meta;
+
+type StoryPortalProps = ComponentProps<typeof Portal>;
+
+const StyledWrapper = styled.div`
+    padding: 1.25rem;
+    margin-bottom: 0.625rem;
+    margin-top: 0.625rem;
+
+    border: 1px solid;
+`;
+
+const StoryDefault = ({ disabled }: StoryPortalProps) => {
+    const [show, setShow] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    return (
+        <>
+            <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
+            <StyledWrapper>
+                <BodyM style={{ marginBottom: '1.25rem' }}>Содержимое портала появится в нижнем блоке.</BodyM>
+                <BodyM style={{ marginBottom: '1.25rem' }}>
+                    Если портал выключен (disabled), то содержимое появится в данном блоке.
+                </BodyM>
+                {show && containerRef.current && (
+                    <Portal disabled={disabled} container={containerRef.current}>
+                        <BodyM bold>Содержимое портала</BodyM>
+                    </Portal>
+                )}
+            </StyledWrapper>
+            <StyledWrapper ref={containerRef} />
+        </>
+    );
+};
+
+export const Default: StoryObj<StoryPortalProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};

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

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "Portal", {
-    enumerable: true,
-    get: function() {
-        return _emotion.Portal;
-    }
+  enumerable: true,
+  get: function get() {
+    return _emotion.Portal;
+  }
 });
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");

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

@@ -1,18 +1,14 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
-    }
-});
-var config = {
-    defaults: {
-        view: 'default'
-    },
-    variations: {
-        view: {}
-    }
-};
+exports.config = void 0;
+var config = exports.config = {
+  defaults: {
+    view: 'default'
+  },
+  variations: {
+    view: {}
+  }
+};

package/emotion/cjs/components/Price/Price.js

@@ -1,15 +1,15 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "Price", {
-    enumerable: true,
-    get: function() {
-        return Price;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _Priceconfig = require("./Price.config");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.priceConfig, _Priceconfig.config);
-var PriceComponent = (0, _emotion.component)(mergedConfig);
-var Price = PriceComponent;
+exports.Price = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Price = /*#__PURE__*/require("./Price.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.priceConfig, _Price.config);
+var PriceComponent = /*#__PURE__*/(0, _emotion.component)(mergedConfig);
+
+/**
+ * Компонент для отображения цены / стоимости / суммы
+ */
+var Price = exports.Price = PriceComponent;

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

@@ -0,0 +1,34 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { Price } from '.';
+
+const meta: Meta<typeof Price> = {
+    title: 'Data Display/Price',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        currency: {
+            options: ['rub', 'usd', 'eur', 'inr'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...disableProps(['children', 'theme', 'as', 'forwardedAs']),
+    },
+};
+
+export default meta;
+
+type StoryPriceProps = ComponentProps<typeof Price> & { priceLabel: number };
+
+export const Default: StoryObj<StoryPriceProps> = {
+    args: {
+        locale: 'ru',
+        currency: 'rub',
+        stroked: false,
+        minimumFractionDigits: 0,
+        priceLabel: 12345.67,
+    },
+    render: ({ priceLabel, ...rest }) => <Price {...rest}>{priceLabel}</Price>,
+};