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

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

@@ -0,0 +1,330 @@
+import React, { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { IconLocation } from '@salutejs/plasma-icons';
+import { action } from '@storybook/addon-actions';
+
+import { Button } from '../Button';
+
+import { Dropdown } from '.';
+
+type DropdownProps = ComponentProps<typeof Dropdown>;
+
+const placements: DropdownProps['placement'][] = ['auto', 'top', 'right', 'bottom', 'left'];
+const triggers: DropdownProps['trigger'][] = ['click', 'hover'];
+const size = ['xs', 's', 'm', 'l', 'xl'];
+const variant = ['normal', 'tight'];
+
+const meta: Meta<DropdownProps> = {
+    title: 'Data Entry/Dropdown',
+    component: Dropdown,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+            mapping: placements,
+        },
+        trigger: {
+            options: triggers,
+            control: {
+                type: 'select',
+            },
+        },
+        openByRightClick: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        size: {
+            options: size,
+            control: {
+                type: 'select',
+            },
+        },
+        variant: {
+            options: variant,
+            control: {
+                type: 'select',
+            },
+        },
+        closeOnOverlayClick: {
+            control: { type: 'boolean' },
+            if: { arg: 'alwaysOpened', truthy: false },
+        },
+        closeOnSelect: {
+            control: { type: 'boolean' },
+            if: { arg: 'alwaysOpened', truthy: false },
+        },
+        listWidth: {
+            control: { type: 'text' },
+        },
+    },
+    args: {
+        size: 'm',
+        variant: 'normal',
+        placement: 'bottom-start',
+        trigger: 'click',
+        openByRightClick: false,
+        offset: [0, 0],
+        listWidth: '300px',
+        alwaysOpened: false,
+        closeOnOverlayClick: true,
+        closeOnSelect: true,
+    },
+    parameters: {
+        controls: {
+            include: [
+                'size',
+                'variant',
+                'placement',
+                'trigger',
+                'offset',
+                'listWidth',
+                'closeOnOverlayClick',
+                'closeOnSelect',
+            ],
+        },
+    },
+};
+
+export default meta;
+
+const items = (dropdownSize: DropdownProps['size']) => [
+    {
+        value: 'north_america',
+        label: 'Северная Америка',
+        contentLeft: <IconLocation size={dropdownSize !== 'xs' ? 's' : 'xs'} color="inherit" />,
+        contentRight: <IconLocation size={dropdownSize !== 'xs' ? 's' : 'xs'} color="inherit" />,
+    },
+    {
+        value: 'south_america',
+        label: 'Южная Америка',
+        items: [
+            {
+                value: 'brazil',
+                label: 'Бразилия',
+                items: [
+                    {
+                        value: 'rio_de_janeiro',
+                        label: 'Рио-де-Жанейро',
+                    },
+                    {
+                        value: 'sao_paulo',
+                        label: 'Сан-Паулу',
+                    },
+                ],
+            },
+            {
+                value: 'argentina',
+                label: 'Аргентина',
+                items: [
+                    {
+                        value: 'buenos_aires',
+                        label: 'Буэнос-Айрес',
+                    },
+                    {
+                        value: 'cordoba',
+                        label: 'Кордова',
+                    },
+                ],
+            },
+            {
+                value: 'colombia',
+                label: 'Колумбия',
+                items: [
+                    {
+                        value: 'bogota',
+                        label: 'Богота',
+                    },
+                    {
+                        value: 'medellin',
+                        label: 'Медельин',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'europe',
+        label: 'Европа',
+        dividerBefore: true,
+        dividerAfter: true,
+        items: [
+            {
+                value: 'france',
+                label: 'Франция',
+                items: [
+                    {
+                        value: 'paris',
+                        label: 'Париж',
+                    },
+                    {
+                        value: 'lyon',
+                        label: 'Лион',
+                    },
+                ],
+            },
+            {
+                value: 'germany',
+                label: 'Германия',
+                items: [
+                    {
+                        value: 'berlin',
+                        label: 'Берлин',
+                    },
+                    {
+                        value: 'munich',
+                        label: 'Мюнхен',
+                    },
+                ],
+            },
+            {
+                value: 'italy',
+                label: 'Италия',
+                items: [
+                    {
+                        value: 'rome',
+                        label: 'Рим',
+                    },
+                    {
+                        value: 'milan',
+                        label: 'Милан',
+                    },
+                ],
+            },
+            {
+                value: 'spain',
+                label: 'Испания',
+                items: [
+                    {
+                        value: 'madrid',
+                        label: 'Мадрид',
+                    },
+                    {
+                        value: 'barcelona',
+                        label: 'Барселона',
+                    },
+                ],
+            },
+            {
+                value: 'united_kingdom',
+                label: 'Великобритания',
+                items: [
+                    {
+                        value: 'london',
+                        label: 'Лондон',
+                    },
+                    {
+                        value: 'manchester',
+                        label: 'Манчестер',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'asia',
+        label: 'Азия',
+        items: [
+            {
+                value: 'china',
+                label: 'Китай',
+                items: [
+                    {
+                        value: 'beijing',
+                        label: 'Пекин',
+                    },
+                    {
+                        value: 'shanghai',
+                        label: 'Шанхай',
+                    },
+                ],
+            },
+            {
+                value: 'japan',
+                label: 'Япония',
+                items: [
+                    {
+                        value: 'tokyo',
+                        label: 'Токио',
+                    },
+                    {
+                        value: 'osaka',
+                        label: 'Осака',
+                    },
+                ],
+            },
+            {
+                value: 'india',
+                label: 'Индия',
+                items: [
+                    {
+                        value: 'delhi',
+                        label: 'Дели',
+                    },
+                    {
+                        value: 'mumbai',
+                        label: 'Мумбаи',
+                    },
+                ],
+            },
+            {
+                value: 'south_korea',
+                label: 'Южная Корея',
+                items: [
+                    {
+                        value: 'seoul',
+                        label: 'Сеул',
+                    },
+                    {
+                        value: 'busan',
+                        label: 'Пусан',
+                    },
+                ],
+            },
+            {
+                value: 'thailand',
+                label: 'Таиланд',
+                items: [
+                    {
+                        value: 'bangkok',
+                        label: 'Бангкок',
+                    },
+                    {
+                        value: 'phuket',
+                        label: 'Пхукет',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'africa',
+        label: 'Африка',
+        disabled: true,
+    },
+];
+
+const StoryNormal = (args: DropdownProps) => {
+    return (
+        <>
+            <Dropdown
+                {...args}
+                items={items(args.size)}
+                onToggle={action('onToggle')}
+                onHover={action('onHover')}
+                onItemSelect={action('onItemSelect')}
+                onItemClick={action('onItemClick')}
+            >
+                <Button text="Список стран" size={args.size} />
+            </Dropdown>
+        </>
+    );
+};
+
+export const Default: StoryObj<DropdownProps> = {
+    render: (args) => <StoryNormal {...args} />,
+};

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

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

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

@@ -1,91 +1,26 @@
 "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                ",
-        ": var(--surface-solid-card-hover);\n                ",
-        ": var(--overlay-soft);\n                ",
-        ": var(--outline-solid-secondary);\n                ",
-        ": var(--outline-solid-secondary-hover);\n                ",
-        ": var(--outline-accent);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-secondary);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1.5rem;\n                ",
-        ": 1.25rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.375rem;\n                ",
-        ": 0.5rem;\n\n                ",
-        ": var(--plasma-typo-h4-font-family);\n                ",
-        ": var(--plasma-typo-h4-font-size);\n                ",
-        ": var(--plasma-typo-h4-font-style);\n                ",
-        ": var(--plasma-typo-h4-bold-font-weight);\n                ",
-        ": var(--plasma-typo-h4-letter-spacing);\n                ",
-        ": var(--plasma-typo-h4-line-height);\n\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.4;\n            "
-    ]);
-    _templateObject2 = 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;
+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                ", ": var(--surface-solid-card-hover);\n                ", ": var(--overlay-soft);\n                ", ": var(--outline-solid-secondary);\n                ", ": var(--outline-solid-secondary-hover);\n                ", ": var(--outline-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-secondary);\n            "])), _emotion.dropzoneTokens.background, _emotion.dropzoneTokens.backgroundHover, _emotion.dropzoneTokens.overlayColorActive, _emotion.dropzoneTokens.borderColor, _emotion.dropzoneTokens.borderColorHover, _emotion.dropzoneTokens.borderColorActive, _emotion.dropzoneTokens.titleColor, _emotion.dropzoneTokens.descriptionColor)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n                ", ": 1.25rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.5rem;\n\n                ", ": var(--plasma-typo-h4-font-family);\n                ", ": var(--plasma-typo-h4-font-size);\n                ", ": var(--plasma-typo-h4-font-style);\n                ", ": var(--plasma-typo-h4-bold-font-weight);\n                ", ": var(--plasma-typo-h4-letter-spacing);\n                ", ": var(--plasma-typo-h4-line-height);\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n            "])), _emotion.dropzoneTokens.padding, _emotion.dropzoneTokens.borderRadius, _emotion.dropzoneTokens.contentWrapperGap, _emotion.dropzoneTokens.contentGap, _emotion.dropzoneTokens.contentColumnGap, _emotion.dropzoneTokens.titleFontFamily, _emotion.dropzoneTokens.titleFontSize, _emotion.dropzoneTokens.titleFontStyle, _emotion.dropzoneTokens.titleFontWeight, _emotion.dropzoneTokens.titleLetterSpacing, _emotion.dropzoneTokens.titleLineHeight, _emotion.dropzoneTokens.descriptionFontFamily, _emotion.dropzoneTokens.descriptionFontSize, _emotion.dropzoneTokens.descriptionFontStyle, _emotion.dropzoneTokens.descriptionFontWeight, _emotion.dropzoneTokens.descriptionLetterSpacing, _emotion.dropzoneTokens.descriptionLineHeight)
     },
-    variations: {
-        view: {
-            default: (0, _emotion.css)(_templateObject(), _emotion.dropzoneTokens.background, _emotion.dropzoneTokens.backgroundHover, _emotion.dropzoneTokens.overlayColorActive, _emotion.dropzoneTokens.borderColor, _emotion.dropzoneTokens.borderColorHover, _emotion.dropzoneTokens.borderColorActive, _emotion.dropzoneTokens.titleColor, _emotion.dropzoneTokens.descriptionColor)
-        },
-        size: {
-            m: (0, _emotion.css)(_templateObject1(), _emotion.dropzoneTokens.padding, _emotion.dropzoneTokens.borderRadius, _emotion.dropzoneTokens.contentWrapperGap, _emotion.dropzoneTokens.contentGap, _emotion.dropzoneTokens.contentColumnGap, _emotion.dropzoneTokens.titleFontFamily, _emotion.dropzoneTokens.titleFontSize, _emotion.dropzoneTokens.titleFontStyle, _emotion.dropzoneTokens.titleFontWeight, _emotion.dropzoneTokens.titleLetterSpacing, _emotion.dropzoneTokens.titleLineHeight, _emotion.dropzoneTokens.descriptionFontFamily, _emotion.dropzoneTokens.descriptionFontSize, _emotion.dropzoneTokens.descriptionFontStyle, _emotion.dropzoneTokens.descriptionFontWeight, _emotion.dropzoneTokens.descriptionLetterSpacing, _emotion.dropzoneTokens.descriptionLineHeight)
-        },
-        disabled: {
-            true: (0, _emotion.css)(_templateObject2(), _emotion.dropzoneTokens.disabledOpacity)
-        }
+    disabled: {
+      "true": /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.4;\n            "])), _emotion.dropzoneTokens.disabledOpacity)
     }
-};
+  }
+};

package/emotion/cjs/components/Dropzone/Dropzone.js

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

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

@@ -0,0 +1,58 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import { Dropzone } from './Dropzone';
+
+const onDragEnter = action('onDragEnter');
+const onDragLeave = action('onDragLeave');
+const onDrop = action('onDrop');
+const onChange = action('onChange');
+const onChoseFiles = action('onChoseFiles');
+
+const iconPlacements = ['top', 'left'];
+
+const meta: Meta<typeof Dropzone> = {
+    title: 'Data Entry/Dropzone',
+    component: Dropzone,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        iconPlacement: {
+            options: iconPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+            defaultValue: 'top',
+        },
+        ...disableProps(['view', 'size']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof Dropzone>;
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        iconPlacement: 'top',
+        width: 400,
+        height: 280,
+        disabled: false,
+        stretch: false,
+        title: 'Click to upload',
+        description: 'or drag and drop files here',
+    },
+    render: (args) => (
+        <div style={{ height: '100vh' }}>
+            <Dropzone
+                {...args}
+                onDragEnter={onDragEnter}
+                onDragLeave={onDragLeave}
+                onDrop={onDrop}
+                onChange={onChange}
+                onChoseFiles={onChoseFiles}
+            />
+        </div>
+    ),
+};

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

@@ -1,23 +1,25 @@
 "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 Dropzone () {
-        return _Dropzone.Dropzone;
-    },
-    get dropzoneClasses () {
-        return _emotion.dropzoneClasses;
-    },
-    get dropzoneTokens () {
-        return _emotion.dropzoneTokens;
-    }
+Object.defineProperty(exports, "Dropzone", {
+  enumerable: true,
+  get: function get() {
+    return _Dropzone.Dropzone;
+  }
 });
-var _Dropzone = require("./Dropzone");
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
+Object.defineProperty(exports, "dropzoneClasses", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.dropzoneClasses;
+  }
+});
+Object.defineProperty(exports, "dropzoneTokens", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.dropzoneTokens;
+  }
+});
+var _Dropzone = /*#__PURE__*/require("./Dropzone");
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");