@salutejs/sdds-cs 0.319.0-canary.2017.15583893358.0 → 0.319.0-canary.2020.15824629894.0

package/emotion/cjs/components/Slider/Slider.component-test.js

@@ -1,223 +0,0 @@
-"use strict";
-
-var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
-var _plasmaCyUtils = /*#__PURE__*/require("@salutejs/plasma-cy-utils");
-var _styledComponents = /*#__PURE__*/require("styled-components");
-var _plasmaTypo = /*#__PURE__*/require("@salutejs/plasma-typo");
-var _plasmaIcons = /*#__PURE__*/require("@salutejs/plasma-icons");
-var _StandardTypoStyle, _PadMe, _PadMe2, _PadMe3, _PadMe4, _PadMe5, _PadMe6, _PadMe7, _PadMe8, _PadMe9, _PadMe10, _PadMe11, _PadMe12, _PadMe13, _PadMe14, _PadMe15, _PadMe16, _PadMe17, _PadMe18, _PadMe19, _PadMe20, _PadMe21, _PadMe22;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var StandardTypoStyle = /*#__PURE__*/(0, _styledComponents.createGlobalStyle)(_plasmaTypo.standard);
-describe('plasma-web: Slider', function () {
-  var _Slider, _CypressTestDecorator, _CypressTestDecorator2, _CypressTestDecorator3, _CypressTestDecorator4, _Slider2, _Slider3, _Slider4;
-  var Slider = (0, _plasmaCyUtils.getComponent)('Slider');
-  var CypressTestDecoratorWithTypo = function CypressTestDecoratorWithTypo(_ref) {
-    var children = _ref.children;
-    return /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.CypressTestDecorator, null, _StandardTypoStyle || (_StandardTypoStyle = /*#__PURE__*/_react["default"].createElement(StandardTypoStyle, null)), children);
-  };
-  it('simple', function () {
-    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, _Slider || (_Slider = /*#__PURE__*/_react["default"].createElement(Slider, {
-      min: 0,
-      max: 100,
-      value: 50
-    })), _PadMe || (_PadMe = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      min: 0,
-      max: 100,
-      value: [25, 75]
-    })));
-    cy.matchImageSnapshot();
-  });
-  it('_view', function () {
-    (0, _plasmaCyUtils.mount)(_CypressTestDecorator || (_CypressTestDecorator = /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 50,
-      min: 0,
-      max: 100,
-      view: "default"
-    }), _PadMe2 || (_PadMe2 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 50,
-      min: 0,
-      max: 100,
-      view: "accent"
-    }), _PadMe3 || (_PadMe3 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 50,
-      min: 0,
-      max: 100,
-      view: "gradient"
-    }))));
-    cy.matchImageSnapshot();
-  });
-  it('_size', function () {
-    (0, _plasmaCyUtils.mount)(_CypressTestDecorator2 || (_CypressTestDecorator2 = /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 50,
-      min: 0,
-      max: 100,
-      size: "s"
-    }), _PadMe4 || (_PadMe4 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 50,
-      min: 0,
-      max: 100,
-      size: "m"
-    }), _PadMe5 || (_PadMe5 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 50,
-      min: 0,
-      max: 100,
-      size: "l"
-    }))));
-    cy.matchImageSnapshot();
-  });
-  it('_disabled', function () {
-    (0, _plasmaCyUtils.mount)(_CypressTestDecorator3 || (_CypressTestDecorator3 = /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 50,
-      min: 0,
-      max: 100
-    }), _PadMe6 || (_PadMe6 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 50,
-      min: 0,
-      max: 100,
-      disabled: true
-    }))));
-    cy.matchImageSnapshot();
-  });
-  it('_placement', function () {
-    (0, _plasmaCyUtils.mount)(_CypressTestDecorator4 || (_CypressTestDecorator4 = /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Slider, {
-      label: "Text",
-      value: 50,
-      min: 0,
-      max: 100,
-      labelPlacement: "inner"
-    }), _PadMe7 || (_PadMe7 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), _PadMe8 || (_PadMe8 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      label: "Text",
-      value: 50,
-      min: 0,
-      max: 100,
-      labelPlacement: "outer"
-    }), _PadMe9 || (_PadMe9 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), _PadMe10 || (_PadMe10 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      label: "Text",
-      value: 50,
-      min: 0,
-      max: 100,
-      rangeValuesPlacement: "inner"
-    }), _PadMe11 || (_PadMe11 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), _PadMe12 || (_PadMe12 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      label: "Text",
-      value: 50,
-      min: 0,
-      max: 100,
-      rangeValuesPlacement: "outer"
-    }), _PadMe13 || (_PadMe13 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), _PadMe14 || (_PadMe14 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      label: "Text",
-      value: 50,
-      min: 0,
-      max: 100,
-      showRangeValues: true
-    }), _PadMe15 || (_PadMe15 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), _PadMe16 || (_PadMe16 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      label: "Text",
-      value: 50,
-      min: 0,
-      max: 100,
-      showRangeValues: false
-    }), _PadMe17 || (_PadMe17 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), _PadMe18 || (_PadMe18 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      label: "Text",
-      value: 50,
-      min: 0,
-      max: 100,
-      showCurrentValue: true
-    }), _PadMe19 || (_PadMe19 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), _PadMe20 || (_PadMe20 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), /*#__PURE__*/_react["default"].createElement(Slider, {
-      label: "Text",
-      value: 50,
-      min: 0,
-      max: 100,
-      showCurrentValue: false
-    }))));
-    cy.matchImageSnapshot();
-  });
-  it('_vertical: simple', function () {
-    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        display: 'flex',
-        height: '20rem'
-      }
-    }, _Slider2 || (_Slider2 = /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 0,
-      min: 0,
-      max: 100,
-      size: "s",
-      orientation: "vertical"
-    })), _PadMe21 || (_PadMe21 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), _Slider3 || (_Slider3 = /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 50,
-      min: 0,
-      max: 100,
-      size: "m",
-      orientation: "vertical"
-    })), _PadMe22 || (_PadMe22 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.PadMe, null)), _Slider4 || (_Slider4 = /*#__PURE__*/_react["default"].createElement(Slider, {
-      value: 100,
-      min: 0,
-      max: 100,
-      size: "l",
-      orientation: "vertical"
-    })))));
-    cy.matchImageSnapshot();
-  });
-  ['s'].map(function (size) {
-    return it("_vertical: sliderAlign, ".concat(size), function () {
-      var showIcon = true;
-      var props = {
-        value: 40,
-        min: 0,
-        max: 100,
-        size: size,
-        orientation: 'vertical',
-        label: 'Громкость',
-        labelContent: showIcon ? /*#__PURE__*/_react["default"].createElement(_plasmaIcons.IconMic, {
-          size: size === 's' ? 'xs' : 's'
-        }) : null,
-        showCurrentValue: true,
-        showScale: true
-      };
-      (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'center',
-          height: '14rem'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(Slider, _extends({
-        sliderAlign: "right"
-      }, props)), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          padding: '0 0.75rem'
-        }
-      }), /*#__PURE__*/_react["default"].createElement(Slider, _extends({
-        sliderAlign: "center"
-      }, props)), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          padding: '0 0.75rem'
-        }
-      }), /*#__PURE__*/_react["default"].createElement(Slider, _extends({
-        sliderAlign: "left"
-      }, props))), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'center',
-          marginTop: '2rem',
-          height: '14rem'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(Slider, _extends({
-        sliderAlign: "center",
-        reversed: true
-      }, props)), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          padding: '0 0.75rem'
-        }
-      }), /*#__PURE__*/_react["default"].createElement(Slider, _extends({
-        sliderAlign: "center",
-        reversed: true,
-        labelReversed: true
-      }, props)), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          padding: '0 0.75rem'
-        }
-      }))));
-      cy.matchImageSnapshot();
-    });
-  });
-});

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

@@ -1,277 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import styled from 'styled-components';
-import { InSpacingDecorator, disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
-import type { StoryObj, Meta } from '@storybook/react';
-import { IconMic } from '@salutejs/plasma-icons';
-
-import { Slider } from './Slider';
-import { config } from './Slider.config';
-
-const { views } = getConfigVariations(config);
-
-const pointerSizes = ['small', 'none'];
-const sliderAligns = ['center', 'left', 'right', 'none'];
-const labelPlacements = ['top', 'left'];
-const scaleAligns = ['side', 'bottom'];
-const orientations: Array<string> = ['vertical', 'horizontal'];
-const visibility = ['always', 'hover'];
-
-const meta: Meta<typeof Slider> = {
-    title: 'Data Entry/Slider',
-    component: Slider,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        pointerSize: {
-            options: pointerSizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps([
-            'size',
-            'value',
-            'onChangeCommitted',
-            'onChangeTextField',
-            'onBlurTextField',
-            'onKeyDownTextField',
-            'ariaLabel',
-            'onChange',
-            'fontSizeMultiplier',
-            'gap',
-            'settings',
-            'hasHoverAnimation',
-            'type',
-            'labelContentLeft',
-            'rangeValuesPlacement',
-            'name',
-            'defaultValue',
-            'labelContent',
-            'showRangeValues',
-            'hideMinValueDiff',
-            'hideMaxValueDiff',
-        ]),
-    },
-};
-
-export default meta;
-
-type StoryProps = Omit<ComponentProps<typeof Slider>, 'value' | 'onChangeCommitted'>;
-type StorySingleProps = StoryProps;
-
-type StorySingle = StoryObj<StorySingleProps>;
-type StoryDouble = StoryObj<StoryProps>;
-
-const SliderWrapper = styled.div<{ isVertical?: boolean }>`
-    padding: 1rem;
-
-    width: calc(100% - 2rem);
-    height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
-
-    background-color: rgb(232, 238, 242, 0.4);
-`;
-
-const StoryDefault = (args: StorySingleProps) => {
-    const [value, setValue] = useState(30);
-
-    const onChangeCommittedHandle = (values) => {
-        setValue(values);
-    };
-
-    const onChangeHandle = (values) => {
-        setValue(values);
-    };
-
-    const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
-    const isVertical = orientation === 'vertical';
-
-    return (
-        <SliderWrapper isVertical={isVertical}>
-            <Slider
-                value={value}
-                orientation={orientation}
-                labelPlacement={labelPlacement}
-                labelContent={showIcon ? <IconMic size="xs" /> : null}
-                onChangeCommitted={onChangeCommittedHandle}
-                onChange={onChangeHandle}
-                {...rest}
-                size="s"
-            />
-        </SliderWrapper>
-    );
-};
-
-export const Default: StorySingle = {
-    argTypes: {
-        sliderAlign: {
-            options: sliderAligns,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'vertical' },
-        },
-        labelPlacement: {
-            options: labelPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        labelReversed: {
-            control: {
-                type: 'boolean',
-                expanded: true,
-            },
-            if: { arg: 'orientation', eq: 'vertical' },
-        },
-        scaleAlign: {
-            options: scaleAligns,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        reversed: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'orientation', eq: 'vertical' },
-        },
-        pointerVisibility: {
-            options: visibility,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        currentValueVisibility: {
-            options: visibility,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-    args: {
-        view: 'default',
-        pointerSize: 'small',
-        pointerVisibility: 'always',
-        min: 0,
-        max: 100,
-        orientation: 'horizontal',
-        ariaLabel: 'Цена микрофона',
-        multipleStepSize: 10,
-        label: 'Цена микрофона',
-        labelPlacement: 'top',
-        sliderAlign: 'center',
-        scaleAlign: 'bottom',
-        showScale: true,
-        showCurrentValue: false,
-        currentValueVisibility: 'always',
-        showIcon: true,
-        reversed: false,
-        labelReversed: false,
-        disabled: false,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryMultipleValues = (args: StoryProps) => {
-    const [value, setValue] = useState([10, 80]);
-    const sortValues = (values) => {
-        return values
-            .map((val) => {
-                if (val < args.min) {
-                    return args.min;
-                }
-                if (val > args.max) {
-                    return args.max;
-                }
-                return val;
-            })
-            .sort((a, b) => a - b);
-    };
-
-    const onChangeHandle = (values) => {
-        setValue(sortValues(values));
-    };
-
-    const onChangeCommitedHandle = (values) => {
-        setValue(sortValues(values));
-    };
-
-    const onBlurTextField = (values) => {
-        setValue(sortValues(values));
-    };
-
-    const onKeyDownTextField = (values, event) => {
-        if (event.key === 'Enter') {
-            setValue(sortValues(values));
-        }
-    };
-
-    return (
-        <SliderWrapper isVertical={args.orientation === 'vertical'}>
-            <Slider
-                value={value}
-                onKeyDownTextField={onKeyDownTextField}
-                onBlurTextField={onBlurTextField}
-                onChangeCommitted={onChangeCommitedHandle}
-                onChange={onChangeHandle}
-                {...args}
-                size="s"
-            />
-        </SliderWrapper>
-    );
-};
-
-export const MultipleValues: StoryDouble = {
-    args: {
-        view: 'default',
-        pointerSize: 'small',
-        min: 0,
-        max: 100,
-        disabled: false,
-        label: 'Цена товара',
-        ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
-        multipleStepSize: 10,
-    },
-    argTypes: {
-        pointerSize: {
-            options: ['small', 'large'],
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps([
-            'size',
-            'orientation',
-            'labelPlacement',
-            'scaleAlign',
-            'sliderAlign',
-            'reversed',
-            'labelReversed',
-            'showCurrentValue',
-            'showScale',
-            'pointerVisibility',
-            'currentValueVisibility',
-        ]),
-    },
-    render: (args) => <StoryMultipleValues {...args} />,
-};

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

@@ -1,109 +0,0 @@
-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} />,
-};