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

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

@@ -1,133 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-import styled from 'styled-components';
-
-import { Flow } from './Flow';
-
-const orientations = ['vertical', 'horizontal'];
-const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround'];
-const alignments = ['start', 'center', 'end'];
-
-const widths = [100, 32, 171, 74, 179, 55];
-const heights = [10, 50, 45, 33, 14, 55];
-
-const FlowCustom = styled(Flow)`
-    background: var(--surface-transparent-primary);
-    border-radius: 0.5rem;
-`;
-
-const Item = styled.div`
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    background: #aab1e9;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-
-const meta: Meta<typeof Flow> = {
-    title: 'Layout/Flow',
-    component: Flow,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        itemsCount: {
-            control: {
-                type: 'number',
-            },
-        },
-        containerWidth: {
-            control: {
-                type: 'text',
-            },
-        },
-        containerHeight: {
-            control: {
-                type: 'text',
-            },
-        },
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'select',
-            },
-        },
-        arrangement: {
-            options: arrangements,
-            control: {
-                type: 'select',
-            },
-        },
-        alignment: {
-            options: alignments,
-            control: {
-                type: 'select',
-            },
-        },
-        mainAxisGap: {
-            control: {
-                type: 'text',
-            },
-        },
-        crossAxisGap: {
-            control: {
-                type: 'text',
-            },
-        },
-        itemsPerLine: {
-            control: {
-                type: 'text',
-            },
-        },
-        minColWidth: {
-            control: {
-                type: 'text',
-            },
-        },
-        ...disableProps(['minColWidth']),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Flow>;
-
-export const Default: Story = {
-    args: {
-        containerWidth: '450px',
-        containerHeight: '200px',
-        orientation: 'horizontal',
-        arrangement: 'start',
-        alignment: 'start',
-        mainAxisGap: '10',
-        crossAxisGap: '10',
-        itemsPerLine: '',
-        itemsCount: 6,
-    },
-    render: ({ itemsCount, containerWidth, containerHeight, ...args }: ComponentProps<typeof Flow>) => {
-        const hasLines = Boolean(args.itemsPerLine);
-
-        return (
-            <FlowCustom {...args} style={{ width: containerWidth, height: containerHeight }}>
-                {new Array(itemsCount).fill(null).map((width, index) => (
-                    <Item
-                        key={index}
-                        style={
-                            hasLines
-                                ? {
-                                      minWidth: widths[index % widths.length],
-                                      minHeight: heights[index % heights.length],
-                                  }
-                                : {
-                                      width: widths[index % widths.length],
-                                      height: heights[index % heights.length],
-                                  }
-                        }
-                    >
-                        {index + 1}
-                    </Item>
-                ))}
-            </FlowCustom>
-        );
-    },
-};

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

@@ -1,119 +0,0 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import styled from 'styled-components';
-
-import { Col, Grid, Row } from './Grid';
-
-const meta: Meta = {
-    title: 'Layout/Grid',
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-const StyledContent = styled.div`
-    height: 10rem;
-    width: 100%;
-    background: #f5f5dc;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--inverse-text-primary);
-`;
-
-export const Default = {
-    args: {
-        colsCount: 6,
-    },
-    render: ({ colsCount }) => (
-        <Grid>
-            <Row>
-                {Array(colsCount)
-                    .fill(true)
-                    .map((_, i) => (
-                        <Col size={1} key={colsCount + i}>
-                            <StyledContent>{i + 1}</StyledContent>
-                        </Col>
-                    ))}
-            </Row>
-        </Grid>
-    ),
-};
-
-export const CustomColsPosition = {
-    render: () => (
-        <Grid view="default">
-            <Row>
-                <Col
-                    smallM={{
-                        size: 1,
-                    }}
-                    mediumS={{
-                        size: 2,
-                    }}
-                    mediumM={{
-                        size: 3,
-                        offset: 1,
-                    }}
-                    largeS={{
-                        size: 4,
-                        offset: 1,
-                    }}
-                    largeM={{
-                        size: 5,
-                        offset: 2,
-                    }}
-                >
-                    <StyledContent>1</StyledContent>
-                </Col>
-                <Col
-                    smallM={{
-                        size: 1,
-                        offset: 1,
-                    }}
-                    mediumS={{
-                        size: 2,
-                        offset: 1,
-                    }}
-                    mediumM={{
-                        size: 4,
-                    }}
-                    largeS={{
-                        size: 4,
-                        offset: 3,
-                    }}
-                    largeM={{
-                        size: 5,
-                        offset: 1,
-                    }}
-                >
-                    <StyledContent>2</StyledContent>
-                </Col>
-                <Col
-                    smallM={{
-                        size: 1,
-                    }}
-                    mediumS={{
-                        size: 2,
-                        offset: 1,
-                    }}
-                    mediumM={{
-                        size: 2,
-                        offset: 2,
-                    }}
-                    largeS={{
-                        size: 3,
-                        offset: 4,
-                    }}
-                    largeM={{
-                        size: 6,
-                        offset: 3,
-                    }}
-                >
-                    <StyledContent>3</StyledContent>
-                </Col>
-            </Row>
-        </Grid>
-    ),
-};

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

@@ -1,95 +0,0 @@
-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 = ['default', 'accent', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white'];
-const sizes = ['xl', 'l', 'm', 's', 'xs'];
-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([
-            'focused',
-            'children',
-            'theme',
-            'loader',
-            'onClick',
-            'onFocus',
-            'onBlur',
-            'contentLeft',
-            'contentRight',
-        ]),
-    },
-};
-
-export default meta;
-
-const getSizeForIcon = (size) => {
-    const map = {
-        mr: 's',
-        lr: 's',
-        xlr: 's',
-        m: 's',
-        l: 's',
-        xl: 's',
-        sr: 's',
-        xsr: 'xs',
-    };
-    if (map[size]) {
-        return map[size];
-    }
-
-    return size;
-};
-
-export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
-    args: {
-        children: <IconClose />,
-        view: 'default',
-        size: 'm',
-        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/Image/Image.component-test.js

@@ -1,85 +0,0 @@
-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.stories.tsx

@@ -1,44 +0,0 @@
-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/Indicator/Indicator.stories.tsx

@@ -1,34 +0,0 @@
-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', 'warning', 'negative', 'black', 'white'],
-            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/Link/Link.stories.tsx

@@ -1,57 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { TextM } from '../Typography';
-
-import { Link } from '.';
-
-const meta: Meta<typeof Link> = {
-    title: 'Navigation/Link',
-    decorators: [InSpacingDecorator],
-    component: Link,
-    argTypes: {
-        view: {
-            options: [
-                'default',
-                'secondary',
-                'tertiary',
-                'paragraph',
-                'accent',
-                'positive',
-                'warning',
-                'negative',
-                'clear',
-            ],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-type StoryLinkProps = {
-    text: string;
-    href: string;
-} & ComponentProps<typeof Link>;
-
-export const Default: StoryObj<StoryLinkProps> = {
-    args: {
-        text: 'приложение',
-        href: 'https://google.com',
-        view: 'default',
-        disabled: false,
-        focused: true,
-    },
-    render: ({ text, ...props }) => (
-        <TextM>
-            Скачайте{' '}
-            <Link target="_blank" {...props}>
-                {text}
-            </Link>
-            .
-        </TextM>
-    ),
-};

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

@@ -1,90 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, getConfigVariations } from '@salutejs/plasma-sb-utils';
-
-import { LinkButton } from './LinkButton';
-import { config } from './LinkButton.config';
-
-const { views, sizes } = getConfigVariations(config);
-
-const sizeMap = {
-    xxs: '0.75rem', // 12px
-    xs: '1rem', // 16px
-    s: '1.5rem', // 24px
-    m: '1.5rem', // 36px
-    l: '1.5rem', // 44px
-    xl: '1.5rem', // 56px
-};
-
-const meta: Meta<typeof LinkButton> = {
-    title: 'Data Entry/LinkButton',
-    decorators: [InSpacingDecorator],
-    component: LinkButton,
-    args: {
-        view: 'default',
-        size: 'm',
-        text: 'Hello',
-        disabled: false,
-        isLoading: false,
-    },
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof LinkButton> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-};
-
-const BellIcon = (props) => (
-    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
-        <path
-            d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
-            fill="currentColor"
-        />
-    </svg>
-);
-
-const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
-    const iconSize = size as keyof typeof sizeMap;
-
-    return (
-        <LinkButton
-            contentLeft={
-                enableContentLeft ? (
-                    <BellIcon width={sizeMap[iconSize]} height={sizeMap[iconSize]} color="inherit" />
-                ) : undefined
-            }
-            contentRight={
-                enableContentRight ? (
-                    <BellIcon width={sizeMap[iconSize]} height={sizeMap[iconSize]} color="inherit" />
-                ) : undefined
-            }
-            size={size}
-            {...rest}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        enableContentLeft: false,
-        enableContentRight: false,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};