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

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

@@ -1,101 +1,21 @@
-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                --plasma-spinner-color: var(--text-primary);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                --plasma-spinner-color: var(--text-secondary);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                --plasma-spinner-color: var(--text-tertiary);\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                --plasma-spinner-color: var(--text-paragraph);\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                --plasma-spinner-color: var(--text-accent);\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                --plasma-spinner-color: var(--text-positive);\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n                --plasma-spinner-color: var(--text-warning);\n            "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n                --plasma-spinner-color: var(--text-negative);\n            "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
-    defaults: {
-        view: 'accent',
-        size: 'm'
-    },
-    variations: {
-        view: {
-            default: css(_templateObject()),
-            secondary: css(_templateObject1()),
-            tertiary: css(_templateObject2()),
-            paragraph: css(_templateObject3()),
-            accent: css(_templateObject4()),
-            positive: css(_templateObject5()),
-            warning: css(_templateObject6()),
-            negative: css(_templateObject7())
-        }
+  defaults: {
+    view: 'accent',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-spinner-color: var(--text-primary);\n            "]))),
+      secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-spinner-color: var(--text-secondary);\n            "]))),
+      tertiary: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-spinner-color: var(--text-tertiary);\n            "]))),
+      paragraph: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-spinner-color: var(--text-paragraph);\n            "]))),
+      accent: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-spinner-color: var(--text-accent);\n            "]))),
+      positive: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-spinner-color: var(--text-positive);\n            "]))),
+      warning: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-spinner-color: var(--text-warning);\n            "]))),
+      negative: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-spinner-color: var(--text-negative);\n            "])))
     }
-};
+  }
+};

package/emotion/es/components/Spinner/Spinner.js

@@ -1,13 +1,11 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import styled from 'styled-components';
 import { spinnerConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config } from './Spinner.config';
-var mergedConfig = mergeConfig(spinnerConfig, config);
-var SpinnerComponent = component(mergedConfig);
+var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig, config);
+var SpinnerComponent = /*#__PURE__*/component(mergedConfig);
 /**
  * Компонент для отображения индикатора загрузки.
- */ export var Spinner = styled(SpinnerComponent).withConfig({
-    displayName: "Spinner",
-    componentId: "sc-3c1e0cd4-0"
-})([
-    ""
-]);
+ */
+export var Spinner = /*#__PURE__*/styled(SpinnerComponent)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral([""])));

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

@@ -0,0 +1,109 @@
+import React, { useState, useRef, useEffect, ComponentProps } from 'react';
+import styled, { css } from 'styled-components';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { InSpacingDecorator, disableProps } from '../../helpers';
+import { Button } from '../Button';
+import { BodyL } from '../Typography';
+
+import { Spinner } from '.';
+
+const meta: Meta<typeof Spinner> = {
+    title: 'Data Display/Spinner',
+    decorators: [InSpacingDecorator],
+    component: Spinner,
+    argTypes: {
+        size: {
+            options: [8, 16, 32, 64, 96, 128],
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: ['default', 'secondary', 'tertiary', 'paragraph', 'accent', 'positive', 'warning', 'negative'],
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['color', 'theme', 'as', 'forwardedAs']),
+    },
+};
+
+export default meta;
+
+type StorySpinnerProps = ComponentProps<typeof Spinner>;
+
+export const Default: StoryObj<StorySpinnerProps> = {
+    args: {
+        size: 32,
+        view: 'default',
+    },
+};
+
+const StyledWrapper = styled.div<{ $loading?: boolean }>`
+    &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        content: '';
+        display: none;
+        background: var(--surface-transparent-primary);
+    }
+
+    ${({ $loading }) =>
+        $loading &&
+        css`
+            &::after {
+                display: block;
+            }
+        `}
+`;
+
+const StyledSpinner = styled(Spinner)`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+`;
+
+const StoryLive = (props: StorySpinnerProps) => {
+    const [loading, setLoading] = useState(false);
+    const timeoutRef = useRef(null);
+
+    useEffect(() => {
+        if (loading) {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+
+            timeoutRef.current = setTimeout(() => setLoading(false), 10000);
+        }
+    }, [loading]);
+
+    return (
+        <StyledWrapper $loading={loading}>
+            <BodyL id="example-live-text" mb="8x">
+                При нажатии кнопки приложение будет на 10 секунд переведено в состояние загрузки, отображая при этом
+                индикатор Spinner, который не может быть сфокусирован и не доступен для взаимодействия. Через 10 секунд
+                кнопку снова станет возможно нажать.
+            </BodyL>
+            <Button
+                text={loading ? 'Загрузка' : 'Нажмите'}
+                onClick={() => setLoading(true)}
+                aria-busy={loading}
+                aria-describedby="example-live-text"
+                disabled={loading}
+            />
+            {loading && <StyledSpinner {...props} />}
+        </StyledWrapper>
+    );
+};
+
+export const Live: StoryObj<StorySpinnerProps> = {
+    render: (args) => <StoryLive {...args} />,
+};

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

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