@salutejs/sdds-cs 0.319.0-canary.2020.15831403447.0 → 0.319.0-canary.2021.15777687971.0

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

@@ -0,0 +1,94 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { IconClose } from '@salutejs/plasma-icons';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { IconButton } from './IconButton';
+
+type StoryButtonProps = ComponentProps<typeof IconButton> & { contentType: string; isLoading: boolean };
+
+const views = ['accent', 'secondary', 'clear'];
+const sizes = ['s'];
+const pins = [
+    'square-square',
+    'square-clear',
+    'clear-square',
+    'clear-clear',
+    'clear-circle',
+    'circle-clear',
+    'circle-circle',
+    '',
+];
+
+const meta: Meta<StoryButtonProps> = {
+    title: 'Data Entry/IconButton',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        pin: {
+            options: pins,
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'bottom' } },
+        },
+        ...disableProps([
+            'size',
+            'focused',
+            'children',
+            'theme',
+            'loader',
+            'onClick',
+            'onFocus',
+            'onBlur',
+            'contentLeft',
+            'contentRight',
+        ]),
+    },
+};
+
+export default meta;
+
+const getSizeForIcon = (size) => {
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
+    }
+
+    return size;
+};
+
+export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
+    args: {
+        children: <IconClose />,
+        view: 'accent',
+        size: 's',
+        disabled: false,
+        focused: true,
+        isLoading: false,
+    },
+    argTypes: { ...disableProps(['children']) },
+    render: (args) => (
+        <IconButton {...args}>
+            <IconClose color="inherit" size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
+};

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

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

package/emotion/es/components/Image/Image.component-test.js

@@ -0,0 +1,85 @@
+var _templateObject, _PadMe, _PadMe2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils';
+var src = 'https://bit.ly/3xRatFGimages/320_320_0.jpg';
+describe('plasma-core: Image', function () {
+  var _CypressTestDecorator, _CypressTestDecorator2, _CypressTestDecorator3;
+  var Image = getComponent('Image');
+  var Why = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        width: 8rem;\n        display: inline-block;\n    "])));
+  beforeEach(function () {
+    cy.intercept(src, function (req) {
+      req.reply({
+        fixture: 'images/320_320_0.jpg'
+      });
+    });
+  });
+  it('default', function () {
+    mount(_CypressTestDecorator || (_CypressTestDecorator = /*#__PURE__*/React.createElement(CypressTestDecorator, null, /*#__PURE__*/React.createElement(Image, {
+      src: src,
+      width: "320px",
+      height: "320px"
+    }))));
+    cy.matchImageSnapshot();
+  });
+  it('div', function () {
+    mount(_CypressTestDecorator2 || (_CypressTestDecorator2 = /*#__PURE__*/React.createElement(CypressTestDecorator, null, /*#__PURE__*/React.createElement(Image, {
+      base: "div",
+      src: src,
+      width: "320px",
+      height: "320px"
+    }))));
+    cy.matchImageSnapshot();
+  });
+  it('_ratio', function () {
+    var ratios = Object.keys({
+      '1 / 1': '100',
+      '1/1': '100',
+      '3 / 4': '133.3333',
+      '3/4': '133.3333',
+      '4 / 3': '75',
+      '4/3': '75',
+      '9 / 16': '177.7778',
+      '9/16': '177.7778',
+      '16 / 9': '56.25',
+      '16/9': '56.25',
+      '1 / 2': '200',
+      '1/2': '200',
+      '2 / 1': '50',
+      '2/1': '50'
+    });
+    mount( /*#__PURE__*/React.createElement(CypressTestDecorator, null, ratios.map(function (ratio) {
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: ratio
+      }, /*#__PURE__*/React.createElement(Why, {
+        key: "_base_div"
+      }, /*#__PURE__*/React.createElement(Image, {
+        base: "div",
+        ratio: ratio,
+        src: src
+      })), /*#__PURE__*/React.createElement(Why, {
+        key: "_base_img"
+      }, /*#__PURE__*/React.createElement(Image, {
+        ratio: ratio,
+        src: src
+      })), _PadMe || (_PadMe = /*#__PURE__*/React.createElement(PadMe, null)));
+    })));
+    cy.matchImageSnapshot();
+  });
+  it('_customRatio', function () {
+    mount(_CypressTestDecorator3 || (_CypressTestDecorator3 = /*#__PURE__*/React.createElement(CypressTestDecorator, null, /*#__PURE__*/React.createElement(Why, {
+      key: "_base_div"
+    }, /*#__PURE__*/React.createElement(Image, {
+      base: "div",
+      customRatio: 75,
+      src: src
+    })), /*#__PURE__*/React.createElement(Why, {
+      key: "_base_img"
+    }, /*#__PURE__*/React.createElement(Image, {
+      customRatio: 75,
+      src: src
+    })), _PadMe2 || (_PadMe2 = /*#__PURE__*/React.createElement(PadMe, null)))));
+    cy.matchImageSnapshot();
+  });
+});

package/emotion/es/components/Image/Image.js

@@ -1,6 +1,8 @@
 import { imageConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
-var mergedConfig = mergeConfig(imageConfig);
-var ImageComponent = component(mergedConfig);
+var mergedConfig = /*#__PURE__*/mergeConfig(imageConfig);
+var ImageComponent = /*#__PURE__*/component(mergedConfig);
+
 /**
  * Компонент Image.
- */ export var Image = ImageComponent;
+ */
+export var Image = ImageComponent;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import { Image, Ratio } from '.';
+import type { ImageProps } from '.';
+
+const meta: Meta<ImageProps> = {
+    title: 'Data Display/Image',
+    component: Image,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        base: {
+            options: ['div', 'img'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ratio: {
+            options: ['1/1', '3/4', '4/3', '9/16', '16/9', '1/2', '2/1'],
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['src', 'alt', 'customRatio']),
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<ImageProps & { ratio: Ratio }> = {
+    args: {
+        base: 'div',
+        src: './images/320_320_9.jpg',
+        alt: 'картинка для примера фоном',
+        width: '200px',
+        height: '200px',
+    },
+    render: (args) => (
+        <div style={{ maxWidth: '10rem' }}>
+            <Image {...args} />
+        </div>
+    ),
+};

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

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

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

@@ -1,133 +1,25 @@
-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-default);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-accent);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--on-light-surface-solid-primary);\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-positive);\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-negative);\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-warning);\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-primary);\n            "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.75rem;\n            "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.5rem;\n            "
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.375rem;\n            "
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, indicatorTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
-    defaults: {
-        size: 's',
-        view: 'default'
+  defaults: {
+    size: 's',
+    view: 'default'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-solid-default);\n            "])), tokens.color),
+      accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-accent);\n            "])), tokens.color),
+      inactive: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-light-surface-solid-primary);\n            "])), tokens.color),
+      positive: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-positive);\n            "])), tokens.color),
+      negative: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-negative);\n            "])), tokens.color),
+      warning: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-warning);\n            "])), tokens.color),
+      black: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n            "])), tokens.color)
     },
-    variations: {
-        view: {
-            default: css(_templateObject(), tokens.color),
-            accent: css(_templateObject1(), tokens.color),
-            inactive: css(_templateObject2(), tokens.color),
-            positive: css(_templateObject3(), tokens.color),
-            negative: css(_templateObject4(), tokens.color),
-            warning: css(_templateObject5(), tokens.color),
-            black: css(_templateObject6(), tokens.color)
-        },
-        size: {
-            l: css(_templateObject7(), tokens.size),
-            m: css(_templateObject8(), tokens.size),
-            s: css(_templateObject9(), tokens.size)
-        }
+    size: {
+      l: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem;\n            "])), tokens.size),
+      m: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.5rem;\n            "])), tokens.size),
+      s: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.375rem;\n            "])), tokens.size)
     }
-};
+  }
+};

package/emotion/es/components/Indicator/Indicator.js

@@ -1,5 +1,5 @@
 import { indicatorConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config } from './Indicator.config';
-var mergedConfig = mergeConfig(indicatorConfig, config);
-var Indicator = component(mergedConfig);
-export { Indicator, mergedConfig };
+var mergedConfig = /*#__PURE__*/mergeConfig(indicatorConfig, config);
+var Indicator = /*#__PURE__*/component(mergedConfig);
+export { Indicator, mergedConfig };

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

@@ -0,0 +1,34 @@
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { Indicator } from './Indicator';
+
+const meta: Meta<typeof Indicator> = {
+    title: 'Data Display/Indicator',
+    component: Indicator,
+    argTypes: {
+        view: {
+            options: ['default', 'accent', 'inactive', 'positive', 'negative', 'warning', 'black'],
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: ['l', 'm', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<ComponentProps<typeof Indicator>>;
+
+export const Default: Story = {
+    args: {
+        size: 's',
+        view: 'default',
+    },
+};

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

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