@alfalab/core-components 20.2.0 → 20.4.0

package/checkbox-group/cssm/Component.js

@@ -0,0 +1,79 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var CheckboxGroup = function (_a) {
+    var _b;
+    var children = _a.children, className = _a.className, _c = _a.direction, direction = _c === void 0 ? 'vertical' : _c, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, _d = _a.type, type = _d === void 0 ? 'checkbox' : _d, dataTestId = _a.dataTestId, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
+    var renderCheckbox = function (child) {
+        var _a = child.props, name = _a.name, checked = _a.checked, childClassName = _a.className;
+        var handleChange = function (event) {
+            if (onChange) {
+                onChange(event, { name: name, checked: !checked });
+            }
+        };
+        return React.cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { className: cn__default['default'](childClassName, styles__default['default'].checkbox) }));
+    };
+    var renderTag = function (child) {
+        var _a = child.props, name = _a.name, checked = _a.checked;
+        var handleChange = function (event) {
+            if (onChange) {
+                onChange(event, { name: name, checked: !checked });
+            }
+        };
+        var clone = React.cloneElement(child, __assign({ onClick: handleChange, disabled: disabled }, child.props));
+        return (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        React__default['default'].createElement("label", { className: cn__default['default'](styles__default['default'].checkbox, styles__default['default'].tagLabel) },
+            clone,
+            React__default['default'].createElement("input", { type: 'checkbox', autoComplete: 'off', onChange: handleChange, disabled: disabled || child.props.disabled, checked: checked, className: styles__default['default'].hiddenInput })));
+    };
+    var errorMessage = typeof error === 'boolean' ? '' : error;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][type], styles__default['default'][direction], (_b = {}, _b[styles__default['default'].error] = error, _b), className), "data-test-id": dataTestId },
+        label ? React__default['default'].createElement("span", { className: styles__default['default'].label }, label) : null,
+        children ? (React__default['default'].createElement("div", { className: styles__default['default'].checkboxList }, React.Children.map(children, function (child) {
+            if (React.isValidElement(child)) {
+                return type === 'checkbox' ? renderCheckbox(child) : renderTag(child);
+            }
+            return null;
+        }))) : null,
+        errorMessage && (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].sub, styles__default['default'].errorMessage) }, errorMessage)),
+        hint && !errorMessage && React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].sub, styles__default['default'].hint) }, hint)));
+};
+
+exports.CheckboxGroup = CheckboxGroup;

package/checkbox-group/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/checkbox-group/cssm/index.js

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('classnames');
+require('./index.module.css');
+
+
+
+exports.CheckboxGroup = Component.CheckboxGroup;

package/checkbox-group/cssm/index.module.css

@@ -0,0 +1,91 @@
+:root {
+    --color-light-text-negative: #d91d0b;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+    --gap-xs-neg: -8px;
+    --gap-xl-neg: -24px;
+}
+:root {
+    --checkbox-group-error-color: var(--color-light-text-negative);
+    --checkbox-group-hint-color: var(--color-light-text-secondary);
+    --checkbox-group-label-color: var(--color-light-text-primary);
+}
+.component {
+    display: flex;
+    flex-direction: column;
+}
+.error {
+    padding-left: var(--gap-xs);
+    border-left: 1px solid var(--color-light-text-negative);
+}
+.checkboxList {
+    display: flex;
+}
+.vertical .checkboxList {
+    flex-direction: column;
+    align-items: flex-start;
+}
+.vertical .checkbox {
+    margin-bottom: var(--gap-m)
+}
+.vertical .checkbox:last-child {
+        margin-bottom: 0;
+    }
+.horizontal .checkboxList {
+    flex-wrap: wrap;
+    margin-right: var(--gap-xl-neg);
+    margin-bottom: var(--gap-xs-neg);
+}
+.tag.horizontal .checkboxList {
+    margin-right: var(--gap-xs-neg);
+}
+.horizontal .checkbox {
+    margin-right: var(--gap-xl);
+    margin-bottom: var(--gap-xs);
+}
+.horizontal .tagLabel {
+    margin-right: var(--gap-xs);
+}
+.label {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    margin-bottom: var(--gap-s);
+    color: var(--checkbox-group-label-color);
+}
+.sub {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    margin-top: var(--gap-s);
+}
+.errorMessage {
+    color: var(--checkbox-group-error-color);
+}
+.hint {
+    color: var(--checkbox-group-hint-color);
+}
+.hiddenInput {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    opacity: 0;
+}
+.tagLabel {
+    position: relative;
+}

package/circular-progress-bar/cssm/Component.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import React from 'react';
+type CircularProgressBarProps = {
+    /**
+     * Уровень прогресса, %
+     */
+    value: number;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Основной текст
+     */
+    title?: string;
+    /**
+     * Дополнительный текст
+     */
+    subtitle?: string;
+    /**
+     * Цвет заполнения
+     */
+    view?: 'positive' | 'negative';
+    /**
+     * Размер (l - 144x144px, m - 120x120px)
+     */
+    size?: 'l' | 'm';
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+};
+/**
+ * Компонент круглого прогресс бара.
+ */
+declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
+export { CircularProgressBarProps, CircularProgressBar };

package/circular-progress-bar/cssm/Component.js

@@ -0,0 +1,49 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cn = require('classnames');
+var React = require('react');
+var coreComponentsTypography = require('../../typography/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+/**
+ * Компонент круглого прогресс бара.
+ */
+var CircularProgressBar = function (_a) {
+    var value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, className = _a.className, dataTestId = _a.dataTestId, _d = _a.title, title = _d === void 0 ? value : _d, subtitle = _a.subtitle, children = _a.children;
+    var memorized = React.useMemo(function () {
+        var strokeWidth = 8;
+        var maxProgress = 100;
+        var minProgress = 0;
+        var width = size === 'l' ? 144 : 120;
+        var height = size === 'l' ? 144 : 120;
+        var center = width / 2;
+        var radius = center - strokeWidth / 2;
+        var circumference = Math.PI * radius * 2;
+        var progress = Math.min(Math.max(value, minProgress), maxProgress);
+        var strokeDasharray = circumference.toFixed(3);
+        var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
+        return {
+            width: width,
+            height: height,
+            center: center,
+            radius: radius,
+            strokeDasharray: strokeDasharray,
+            strokeDashoffset: strokeDashoffset,
+        };
+    }, [value, size]);
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][size], className), "data-test-id": dataTestId },
+        React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.width + " " + memorized.height, className: styles__default['default'].svg, xmlns: 'http://www.w3.org/2000/svg' },
+            React__default['default'].createElement("circle", { className: styles__default['default'].backgroundCircle, cx: memorized.center, cy: memorized.center, r: memorized.radius }),
+            React__default['default'].createElement("circle", { className: cn__default['default'](styles__default['default'].progressCircle, styles__default['default'][view]), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeDasharray: memorized.strokeDasharray, strokeDashoffset: memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
+        React__default['default'].createElement("div", { className: styles__default['default'].label }, children || (React__default['default'].createElement(React__default['default'].Fragment, null,
+            title && (React__default['default'].createElement(coreComponentsTypography.Typography.Title, { className: styles__default['default'].title, color: 'secondary', tag: 'div', view: size === 'l' ? 'small' : 'xsmall' }, title)),
+            subtitle && (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default['default'].subtitle, color: 'primary', view: 'primary-small' }, subtitle)))))));
+};
+
+exports.CircularProgressBar = CircularProgressBar;

package/circular-progress-bar/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/circular-progress-bar/cssm/index.js

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('classnames');
+require('react');
+require('../../typography/cssm');
+require('./index.module.css');
+var Component = require('./Component.js');
+
+
+
+exports.CircularProgressBar = Component.CircularProgressBar;

package/circular-progress-bar/cssm/index.module.css

@@ -0,0 +1,93 @@
+:root {
+    --color-light-bg-tertiary: #e7e9eb;
+    --color-light-graphic-negative: #f15045;
+    --color-light-graphic-positive: #2fc26e;
+}
+
+:root {
+    /* bg */
+    --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
+
+    /* positive */
+    --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
+
+    /* negative */
+    --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
+}
+
+.component {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.svg {
+    display: block;
+    width: 100%;
+}
+
+.title,
+.subtitle {
+    overflow: hidden;
+    word-break: break-word;
+}
+
+.subtitle {
+    max-height: 40px;
+}
+
+.l {
+    width: 144px;
+    height: 144px
+}
+
+.l .label {
+        max-width: 120px;
+    }
+
+.l .title {
+        max-height: 32px;
+    }
+
+.m {
+    width: 120px;
+    height: 120px
+}
+
+.m .label {
+        max-width: 96px;
+    }
+
+.m .title {
+        max-height: 24px;
+    }
+
+.label {
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+}
+
+.backgroundCircle,
+.progressCircle {
+    width: 100%;
+    height: 100%;
+    fill: transparent;
+    stroke-width: 8;
+}
+
+.positive {
+    stroke: var(--circular-progress-bar-positive-color);
+}
+
+.negative {
+    stroke: var(--circular-progress-bar-negative-color);
+}
+
+.backgroundCircle {
+    stroke: var(--circular-progress-bar-bg-color);
+}

package/collapse/cssm/Component.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import React from 'react';
+type CollapseProps = {
+    /**
+     * Состояние компонента
+     *
+     */
+    expanded?: boolean;
+    /**
+     * Текст ссылки в `expanded` состоянии
+     *
+     */
+    collapsedLabel?: string;
+    /**
+     * Текст ссылки в `collapsed` состоянии
+     *
+     */
+    expandedLabel?: string;
+    /**
+     * Дочерние элементы `Collapse`
+     */
+    children?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Обработчик смены состояний `expanded/collapsed`
+     */
+    onExpandedChange?: (expanded?: boolean) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
+export { CollapseProps, Collapse };

package/collapse/cssm/Component.js

@@ -0,0 +1,63 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var ArrowDownMBlackIcon = require('@alfalab/icons-classic/ArrowDownMBlackIcon');
+var ArrowUpMBlackIcon = require('@alfalab/icons-classic/ArrowUpMBlackIcon');
+var coreComponentsLink = require('../../link/cssm');
+var debounce = require('lodash.debounce');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var Collapse = React.forwardRef(function (_a, ref) {
+    var _b;
+    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
+    var uncontrolled = expanded === undefined;
+    var contentRef = React.useRef(null);
+    var contentCaseRef = React.useRef(null);
+    var _c = React.useState(expanded), expandedState = _c[0], setExpandedState = _c[1];
+    var isExpanded = uncontrolled ? expandedState : expanded;
+    var recalculate = React.useCallback(function () {
+        var contentHeight;
+        if (!contentCaseRef.current || !contentRef.current) {
+            return;
+        }
+        if (isExpanded) {
+            contentHeight = contentCaseRef.current.offsetHeight;
+        }
+        else {
+            contentHeight = 0;
+        }
+        contentRef.current.style.height = contentHeight + "px";
+    }, [isExpanded]);
+    React.useEffect(function () {
+        var handleResize = debounce__default['default'](function () { return recalculate(); }, 300);
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, [recalculate]);
+    React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
+    var contentClassName = cn__default['default'](styles__default['default'].content, (_b = {},
+        _b[styles__default['default'].expandedContent] = isExpanded,
+        _b));
+    var labelClassName = isExpanded ? styles__default['default'].expandedLabel : '';
+    var ToggledIcon = isExpanded ? ArrowUpMBlackIcon.ArrowUpMBlackIcon : ArrowDownMBlackIcon.ArrowDownMBlackIcon;
+    var handleExpandedChange = React.useCallback(function () {
+        if (uncontrolled) {
+            setExpandedState(!isExpanded);
+        }
+        if (onExpandedChange)
+            onExpandedChange();
+    }, [isExpanded, onExpandedChange, uncontrolled]);
+    return (React__default['default'].createElement("div", { ref: ref, className: cn__default['default'](className, styles__default['default'].collapse), id: id, "data-test-id": dataTestId },
+        React__default['default'].createElement("div", { ref: contentRef, className: contentClassName },
+            React__default['default'].createElement("div", { ref: contentCaseRef }, children)),
+        (expandedLabel || collapsedLabel) && (React__default['default'].createElement(coreComponentsLink.Link, { className: labelClassName, pseudo: true, onClick: handleExpandedChange, rightAddons: React__default['default'].createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
+});
+
+exports.Collapse = Collapse;

package/collapse/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/collapse/cssm/index.js

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/icons-classic/ArrowDownMBlackIcon');
+require('@alfalab/icons-classic/ArrowUpMBlackIcon');
+require('../../link/cssm');
+require('lodash.debounce');
+require('./index.module.css');
+var Component = require('./Component.js');
+
+
+
+exports.Collapse = Component.Collapse;

package/collapse/cssm/index.module.css

@@ -0,0 +1,34 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+.collapse {
+    font-family: var(--font-family);
+}
+.collapse *,
+.collapse:before,
+.collapse:after {
+    box-sizing: border-box;
+}
+.content {
+    position: relative;
+    overflow: hidden;
+    visibility: hidden;
+    height: 0;
+    transition: height 0.2s;
+}
+.expandedContent {
+    visibility: visible;
+    height: auto;
+}
+.expandedLabel {
+    margin-top: 15px;
+}

package/confirmation/component.d.ts

@@ -19,6 +19,14 @@ type ConfirmationProps = {
      * Состояние ошибки подписания
      */
     error?: boolean;
+    /**
+     * Состояние ошибки лимитов - превышено кол-во попыток ввода или запросов кода
+     */
+    errorOverlimit?: boolean;
+    /**
+     * Состояние критической ошибки лимитов - превышены все лимиты и попытки, пользователя блокируют
+     */
+    errorOverlimitIsFatal?: boolean;
     /**
      * Текст ошибки подписания
      */
@@ -61,6 +69,18 @@ type ConfirmationProps = {
      * Заголовок экрана подписания
      */
     signTitle?: string | React.ReactNode;
+    /**
+     * Заголовок экрана ошибки лимитов
+     */
+    overlimitTitle?: string;
+    /**
+     * Текстовое описание блокировки формы при превышении лимитов
+     */
+    overlimitText?: string;
+    /**
+     * Длительно блокировки при превышении лимитов, в милисекундах
+     */
+    overlimitCountdownDuration?: number;
     /**
      * Заголовок экрана блокирующей ошибки
      */
@@ -118,10 +138,18 @@ type ConfirmationProps = {
      * Обработчик события нажатия на кнопку "Запросить код"
      */
     onSmsRetryClick: () => void;
+    /**
+     * Обработчик события нажатия на кнопку "Запросить код" в блоке превышение лимитов
+     */
+    onOverlimitSmsRetryClick?: () => void;
     /**
      * Обработчик события завершения обратного отсчета для повторного запроса сообщения
      */
     onCountdownFinished?: () => void;
+    /**
+     * Обработчик события завершения обратного отсчета для блокировки формы
+     */
+    onOverlimitCountdownFinished?: () => void;
     /**
      * Обработчик события нажатия на ссылку "не приходит сообщение?"
      */