@alfalab/core-components-circular-progress-bar 2.4.2 → 2.4.3

package/cssm/index.module.css

@@ -2,8 +2,23 @@
     --color-light-bg-tertiary: #e7e9eb;
     --color-light-graphic-negative: #f15045;
     --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-secondary: #6d7986;
+    --color-light-graphic-tertiary: #b6bcc3;
 }
+:root {
+
+    /* Hard */
+
+    /* Up */
 
+    /* Hard up */
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
 :root {
     /* bg */
     --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
@@ -13,94 +28,184 @@
 
     /* negative */
     --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
-}
 
+    /* theme */
+    --circular-progress-bar-font-family: var(--font-family-system);
+    --circular-progress-bar-font-weight: 600;
+}
 .component {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
 }
-
 .svg {
     display: block;
     width: 100%;
 }
-
 .title,
 .subtitle {
     overflow: hidden;
     word-break: break-word;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0 6px;
 }
-
 .subtitle {
     max-height: 40px;
 }
-
-.l {
+.labelWrapper {
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%)
+}
+.labelWrapper.label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+.typography {
+    font-feature-settings: 'ss01';
+    font-weight: var(--circular-progress-bar-font-weight);
+    font-family: var(--circular-progress-bar-font-family);
+}
+.xxl {
     width: 144px;
     height: 144px
 }
-
-.l .label {
-        max-width: 120px;
+.xxl .labelWrapper {
+        max-width: 128px;
     }
-
-.l .title {
+.xxl .title {
         max-height: 32px;
     }
-
+.xl {
+    width: 128px;
+    height: 128px
+}
+.xl .labelWrapper {
+        max-width: 108px;
+    }
+.xl .title {
+        max-height: 32px;
+    }
+.l {
+    width: 80px;
+    height: 80px
+}
+.l .labelWrapper {
+        max-width: 64px;
+    }
+.l .title {
+        max-height: 24px;
+    }
 .m {
-    width: 120px;
-    height: 120px
+    width: 64px;
+    height: 64px
 }
-
-.m .label {
-        max-width: 96px;
+.m .labelWrapper {
+        max-width: 48px;
     }
-
 .m .title {
-        max-height: 24px;
+        max-height: 16px;
+        margin: 0;
     }
-
 .s {
-    width: 96px;
-    height: 96px
+    width: 48px;
+    height: 48px
 }
-
-.s .label {
-        max-width: 72px;
+.s .labelWrapper {
+        max-width: 40px;
     }
-
 .s .title {
-        max-height: 24px;
+        max-height: 16px;
+        margin: 0;
     }
-
-.label {
-    text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    transform: translate(-50%, -50%);
+.xs {
+    width: 24px;
+    height: 24px
 }
-
+.xs .labelWrapper {
+        max-width: 24px;
+    }
 .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);
+    stroke: var(--circular-progress-bar-bg-color)
+}
+.backgroundCircle.stroke {
+        stroke: transparent;
+    }
+.progressCircle {
+    stroke-linecap: round
+}
+.progressCircle.bg-positive {
+        fill: var(--circular-progress-bar-positive-color);
+    }
+.progressCircle.bg-negative {
+        fill: var(--circular-progress-bar-negative-color);
+    }
+.iconWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+.iconWrapper.xxl {
+        max-width: 64px;
+        max-height: 64px;
+    }
+.iconWrapper.xl {
+        max-width: 64px;
+        max-height: 64px;
+    }
+.iconWrapper.l {
+        max-width: 48px;
+        max-height: 48px;
+    }
+.iconWrapper.m {
+        max-width: 36px;
+        max-height: 36px;
+    }
+.iconWrapper.s {
+        max-width: 24px;
+        max-height: 24px;
+    }
+.iconWrapper.xs {
+        max-width: 16px;
+        max-height: 16px;
+    }
+.iconWrapper.icon-tertiary {
+        color: var(--color-light-graphic-tertiary);
+    }
+.iconWrapper.icon-positive {
+        color: var(--color-light-graphic-positive);
+    }
+.iconWrapper.icon-negative {
+        color: var(--color-light-graphic-negative);
+    }
+.iconWrapper.icon-primary-inverted {
+        color: var(--color-light-graphic-primary-inverted);
+    }
+.iconWrapper.icon-primary {
+        color: var(--color-light-graphic-primary);
+    }
+.iconWrapper.icon-secondary {
+        color: var(--color-light-graphic-secondary);
+    }
+.icon {
+    width: 100%;
+    height: 100%;
 }

package/esm/Component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { ReactNode } from "react";
+import { ReactNode, ElementType } from "react";
 type CircularProgressBarProps = {
     /**
      * Уровень прогресса, %
@@ -14,18 +14,73 @@ type CircularProgressBarProps = {
      * Основной текст
      */
     title?: ReactNode;
+    /**
+     * Цвет контента
+     */
+    contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
     /**
      * Дополнительный текст
      */
     subtitle?: ReactNode;
+    /**
+     * Основной текст при 100%
+     */
+    titleComplete?: ReactNode;
+    /**
+     * Дополнительный текст при 100%
+     */
+    subtitleComplete?: ReactNode;
     /**
      * Цвет заполнения
      */
     view?: 'positive' | 'negative';
     /**
-     * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
+     * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
+     */
+    size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
+    /**
+     * Наличие желоба
+     */
+    stroke?: boolean;
+    /**
+     * Заливка при 100%
+     */
+    fillComplete?: boolean;
+    /**
+     * Цвет текста при 100%
+     */
+    completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';
+    /**
+     * Цвет иконки при 100%
+     */
+    completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';
+    /**
+     * Компонент иконки
+     */
+    icon?: ElementType<{
+        className?: string;
+    }>;
+    /**
+     * Компонент иконки при 100%
+     */
+    iconComplete?: ElementType<{
+        className?: string;
+    }>;
+    /**
+     * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)
+     */
+    direction?: 'clockwise' | 'counter-clockwise';
+    /**
+     * Высота компонента, min = 24; max = 144
+     * использовать совместно с size :
+     * xxl от 144
+     * xl  от 128 до 143
+     * l   от 80 до 127
+     * m   от 64 до 79
+     * s   от 48 до 63
+     * xs  от 24 до 47
      */
-    size?: 'l' | 'm' | 's';
+    height?: number;
     /**
      * Id компонента для тестов
      */

package/esm/Component.js

@@ -2,47 +2,131 @@ import cn from 'classnames';
 import React, { useMemo } from 'react';
 import { Typography } from '@alfalab/core-components-typography/esm';
 
-var styles = {"component":"circular-progress-bar__component_mot4l","svg":"circular-progress-bar__svg_mot4l","title":"circular-progress-bar__title_mot4l","subtitle":"circular-progress-bar__subtitle_mot4l","l":"circular-progress-bar__l_mot4l","label":"circular-progress-bar__label_mot4l","m":"circular-progress-bar__m_mot4l","s":"circular-progress-bar__s_mot4l","backgroundCircle":"circular-progress-bar__backgroundCircle_mot4l","progressCircle":"circular-progress-bar__progressCircle_mot4l","positive":"circular-progress-bar__positive_mot4l","negative":"circular-progress-bar__negative_mot4l"};
+/*! *****************************************************************************
+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 styles = {"component":"circular-progress-bar__component_1piud","svg":"circular-progress-bar__svg_1piud","title":"circular-progress-bar__title_1piud","subtitle":"circular-progress-bar__subtitle_1piud","labelWrapper":"circular-progress-bar__labelWrapper_1piud","label":"circular-progress-bar__label_1piud","typography":"circular-progress-bar__typography_1piud","xxl":"circular-progress-bar__xxl_1piud","xl":"circular-progress-bar__xl_1piud","l":"circular-progress-bar__l_1piud","m":"circular-progress-bar__m_1piud","s":"circular-progress-bar__s_1piud","xs":"circular-progress-bar__xs_1piud","backgroundCircle":"circular-progress-bar__backgroundCircle_1piud","progressCircle":"circular-progress-bar__progressCircle_1piud","positive":"circular-progress-bar__positive_1piud","negative":"circular-progress-bar__negative_1piud","stroke":"circular-progress-bar__stroke_1piud","bg-positive":"circular-progress-bar__bg-positive_1piud","bg-negative":"circular-progress-bar__bg-negative_1piud","iconWrapper":"circular-progress-bar__iconWrapper_1piud","icon-tertiary":"circular-progress-bar__icon-tertiary_1piud","icon-positive":"circular-progress-bar__icon-positive_1piud","icon-negative":"circular-progress-bar__icon-negative_1piud","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1piud","icon-primary":"circular-progress-bar__icon-primary_1piud","icon-secondary":"circular-progress-bar__icon-secondary_1piud","icon":"circular-progress-bar__icon_1piud"};
 require('./index.css')
 
 var SIZES = {
-    s: 96,
-    m: 120,
-    l: 144,
+    xs: 24,
+    s: 48,
+    m: 64,
+    l: 80,
+    xl: 128,
+    xxl: 144,
+};
+var STROKE = {
+    xs: 4,
+    s: 4,
+    m: 6,
+    l: 8,
+    xl: 10,
+    xxl: 12,
+};
+var VIEW_TITLE = {
+    xs: 'small',
+    s: 'small',
+    m: 'small',
+    l: 'xsmall',
+    xl: 'medium',
+    xxl: 'medium',
+};
+var VIEW_TEXT = {
+    xs: 'secondary-small',
+    s: 'secondary-small',
+    m: 'secondary-large',
+    l: 'secondary-large',
+    xl: 'secondary-large',
+    xxl: 'secondary-large',
 };
 /**
  * Компонент круглого прогресс бара.
  */
 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.toString() : _d, subtitle = _a.subtitle, children = _a.children;
+    var _b, _c, _d;
+    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children;
     var memorized = useMemo(function () {
-        var strokeWidth = 8;
+        var strokeWidth = STROKE[size];
         var maxProgress = 100;
         var minProgress = 0;
-        var width = SIZES[size];
-        var height = SIZES[size];
-        var center = width / 2;
+        var widthSVG = SIZES[size];
+        var heightSVG = SIZES[size];
+        var center = widthSVG / 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,
+            widthSVG: widthSVG,
+            heightSVG: heightSVG,
             center: center,
             radius: radius,
             strokeDasharray: strokeDasharray,
             strokeDashoffset: strokeDashoffset,
         };
     }, [value, size]);
-    return (React.createElement("div", { className: cn(styles.component, styles[size], className), "data-test-id": dataTestId },
-        React.createElement("svg", { viewBox: "0 0 " + memorized.width + " " + memorized.height, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("circle", { className: styles.backgroundCircle, cx: memorized.center, cy: memorized.center, r: memorized.radius }),
-            React.createElement("circle", { className: cn(styles.progressCircle, styles[view]), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeDasharray: memorized.strokeDasharray, strokeDashoffset: memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
-        React.createElement("div", { className: styles.label }, children || (React.createElement(React.Fragment, null,
-            typeof title === 'string' ? (React.createElement(Typography.Title, { className: styles.title, color: 'secondary', tag: 'div', view: size === 'l' ? 'small' : 'xsmall' }, title)) : (title),
-            typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: 'primary', view: 'primary-small' }, subtitle)) : (subtitle))))));
+    var isComplete = value === 100;
+    var isCompleteTextColor = isComplete && completeTextColor;
+    var titleContent = titleComplete && isComplete ? titleComplete : title;
+    var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
+    var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
+    var renderTitleString = function () {
+        return (React.createElement(React.Fragment, null, SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent))));
+    };
+    var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
+    var renderSubTitle = function () {
+        return typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
+    };
+    var renderIcon = function () {
+        var _a;
+        return (React.createElement("span", { className: cn(styles.iconWrapper, styles[size], styles.tertiary, styles["icon-" + contentColor], (_a = {},
+                _a[styles["icon-" + completeIconColor]] = completeIconColor,
+                _a)) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
+    };
+    var renderContent = function () {
+        return Icon || (IconComplete && isComplete) ? (renderIcon()) : (React.createElement(React.Fragment, null,
+            SIZES[size] > 24 && renderTitle(),
+            SIZES[size] > 64 && renderSubTitle()));
+    };
+    return (React.createElement("div", { className: cn(styles.component, styles[size], className), style: __assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
+        React.createElement("svg", { viewBox: "0 0 " + memorized.widthSVG + " " + memorized.heightSVG, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
+            React.createElement("circle", { className: cn(styles.backgroundCircle, styles[size], (_b = {},
+                    _b[styles.stroke] = !stroke,
+                    _b)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
+            React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[size], (_c = {},
+                    _c[styles["bg-" + view]] = fillComplete && isComplete,
+                    _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
+                    ? -memorized.strokeDashoffset
+                    : memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
+        React.createElement("div", { className: cn(styles.labelWrapper, (_d = {},
+                _d[styles.label] = Icon || IconComplete,
+                _d)) }, children || renderContent())));
 };
 
 export { CircularProgressBar };