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

package/emotion/cjs/components/Mask/Mask.js

@@ -1,13 +1,9 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "Mask", {
-    enumerable: true,
-    get: function() {
-        return Mask;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _TextField = require("../TextField");
-var Mask = (0, _emotion.composeMask)(_TextField.TextField);
+exports.Mask = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _TextField = /*#__PURE__*/require("../TextField");
+var Mask = exports.Mask = /*#__PURE__*/(0, _emotion.composeMask)(_TextField.TextField);

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

@@ -0,0 +1,176 @@
+import React from 'react';
+import type { 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 { Mask } from './Mask';
+
+const onChange = action('onChange');
+
+const sizes = ['s'];
+const views = ['default', 'positive', 'warning', 'negative'];
+
+const propsToDisable = [
+    'helperBlock',
+    'contentLeft',
+    'htmlSize',
+    'contentRight',
+    'onChangeChips',
+    'onSearch',
+    'type',
+    'name',
+    'onFocus',
+    'onBlur',
+    'onChange',
+    'value',
+    'checked',
+    'minLength',
+    'caption',
+    'values',
+    'enumerationType',
+    'chips',
+    'label',
+];
+
+const meta: Meta<typeof Mask> = {
+    title: 'Data Display/Mask',
+    component: Mask,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        requiredPlacement: {
+            options: ['left', 'right'],
+            control: {
+                type: 'select',
+            },
+        },
+        required: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'optional', truthy: false },
+        },
+        hasRequiredIndicator: {
+            control: {
+                type: 'boolean',
+            },
+            if: {
+                arg: 'required',
+                truthy: true,
+            },
+        },
+        optional: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'required', truthy: false },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...disableProps(propsToDisable),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = Omit<
+    ComponentProps<typeof Mask>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'value'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'enumerationType'
+    | 'chips'
+    | 'onChangeChips'
+>;
+
+const StoryDemo = ({ view, ...rest }: StoryPropsDefault) => {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '50%' }}>
+            <Mask
+                label="Маска телефона"
+                mask="+7 (000) 000 - 00 - 00"
+                maskChar="_"
+                showStartChars={false}
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска телефона: отображается всегда"
+                mask="+7 (000) 000 - 00 - 00"
+                maskChar="_"
+                view={view}
+                alwaysShowMask
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска даты"
+                mask="00/00/0000"
+                maskString="DD/MM/YYYY"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска даты: значения по умолчанию"
+                // eslint-disable-next-line no-octal-escape
+                mask="12.\04.0000"
+                maskChar="_"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска времени"
+                mask="00:00"
+                maskChar="_"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                {...rest}
+            />
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        size: 's',
+        view: 'default',
+        placeholder: 'Заполните поле',
+        disabled: false,
+        readOnly: false,
+        required: false,
+        requiredPlacement: 'right',
+        hasRequiredIndicator: true,
+        optional: false,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};

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

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

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

@@ -1,51 +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                ", ": rgba(35, 35, 35, 0.2);\n                ", ": var(--overlay-soft);\n                ", ": var(--surface-solid-card);\n                ", ": 1.25rem;\n                ", ": 2rem;\n                ", ": 0.625rem;\n                ", ": 0.375rem;\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-active);\n                ", ": var(--surface-accent);\n            "])), _emotion.modalTokens.modalOverlayWithBlurColor, _emotion.modalTokens.modalOverlayColor, _emotion.modalTokens.modalBodyBackground, _emotion.modalTokens.modalBodyBorderRadius, _emotion.modalTokens.modalBodyPadding, _emotion.modalTokens.modalContentPadding, _emotion.modalTokens.modalCloseButtonRadius, _emotion.modalTokens.modalCloseButtonColor, _emotion.modalTokens.modalCloseButtonHoverColor, _emotion.modalTokens.modalCloseButtonActiveColor, _emotion.modalTokens.modalOutlineFocusColor)
     }
-});
-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                ",
-        ": rgba(35, 35, 35, 0.2);\n                ",
-        ": var(--overlay-soft);\n                ",
-        ": var(--surface-solid-card);\n                ",
-        ": 1.25rem;\n                ",
-        ": 2rem;\n                ",
-        ": 0.625rem;\n                ",
-        ": 0.375rem;\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-secondary-hover);\n                ",
-        ": var(--text-secondary-active);\n                ",
-        ": var(--surface-accent);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
-    defaults: {
-        view: 'default'
-    },
-    variations: {
-        view: {
-            default: (0, _emotion.css)(_templateObject(), _emotion.modalTokens.modalOverlayWithBlurColor, _emotion.modalTokens.modalOverlayColor, _emotion.modalTokens.modalBodyBackground, _emotion.modalTokens.modalBodyBorderRadius, _emotion.modalTokens.modalBodyPadding, _emotion.modalTokens.modalContentPadding, _emotion.modalTokens.modalCloseButtonRadius, _emotion.modalTokens.modalCloseButtonColor, _emotion.modalTokens.modalCloseButtonHoverColor, _emotion.modalTokens.modalCloseButtonActiveColor, _emotion.modalTokens.modalOutlineFocusColor)
-        }
-    }
-};
+  }
+};

package/emotion/cjs/components/Modal/Modal.js

@@ -1,15 +1,15 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "Modal", {
-    enumerable: true,
-    get: function() {
-        return Modal;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _Modalconfig = require("./Modal.config");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.modalConfig, _Modalconfig.config);
-var ModalComponent = (0, _emotion.component)(mergedConfig);
-var Modal = ModalComponent;
+exports.Modal = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Modal = /*#__PURE__*/require("./Modal.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.modalConfig, _Modal.config);
+var ModalComponent = /*#__PURE__*/(0, _emotion.component)(mergedConfig);
+
+/**
+ * Модальное окно.
+ */
+var Modal = exports.Modal = ModalComponent;