intelicoreact 1.5.40 → 1.6.0

package/dist/Atomic/UI/PieChart/PieChart.js

@@ -1,47 +1,110 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _chart = require("chart.js");
-var _reactChartjs = require("react-chartjs-2");
-require("./PieChart.scss");
-_chart.Chart.register(_chart.ArcElement, _chart.Tooltip);
-const PieChart = _ref => {
-  let {
-    data,
-    cutout = "80%",
-    resultLabel,
-    resultValue = 0,
-    withLegend = false
-  } = _ref;
-  const options = {
-    cutout,
-    plugins: {
-      legend: {
-        display: withLegend
-      }
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "pie-chart-box",
-    style: {
-      maxWidth: `320px`
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactChartjs.Pie, {
-    data: data,
-    options: options
-  }), Boolean(resultLabel) && /*#__PURE__*/_react.default.createElement("div", {
-    className: "pie-chart__result"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pie-chart__result-value"
-  }, resultValue, /*#__PURE__*/_react.default.createElement("span", {
-    className: "pie-chart__result-percent"
-  }, "%"), " "), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pie-chart__result-label"
-  }, resultLabel)));
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _chart = require("chart.js");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactchartjs2 = require("react-chartjs-2");
+require("./PieChart.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+_chart.Chart.register(_chart.ArcElement, _chart.Tooltip, _chart.Legend);
+const CN = 'pie-chart-box';
+const PieChart = ({ data, cutout = '80%', resultLabel, resultValue = 0, withLegend = false, chartTitle = 'Pie Chart', chartDescription = 'Statistical data visualization', className, testId = CN, styles, ...chartOptions })=>{
+    const options = {
+        cutout,
+        plugins: {
+            legend: {
+                display: withLegend,
+                position: 'left',
+                align: 'center',
+                labels: {
+                    usePointStyle: true,
+                    padding: 20,
+                    font: {
+                        size: 12
+                    }
+                }
+            },
+            // Добавляем aria-label для графика
+            tooltip: {
+                enabled: true,
+                callbacks: {
+                    label: (context)=>{
+                        return `${context.label}: ${context.formattedValue}%`;
+                    }
+                }
+            }
+        },
+        // поддержка клавиатурной навигации
+        events: [
+            'mousemove',
+            'mouseout',
+            'click',
+            'touchstart',
+            'touchmove',
+            'keydown'
+        ],
+        ...chartOptions
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(CN, {
+            [`${CN}--with-legend`]: withLegend
+        }, className),
+        style: {
+            ...styles
+        },
+        role: "figure",
+        "aria-label": chartTitle,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
+                className: "visually-hidden",
+                children: chartTitle
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "visually-hidden",
+                children: chartDescription
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactchartjs2.Pie, {
+                data: data,
+                options: options,
+                "aria-label": chartTitle,
+                role: "img"
+            }),
+            Boolean(resultLabel) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "pie-chart__result",
+                role: "complementary",
+                "aria-label": `${resultLabel}: ${resultValue}%`,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "pie-chart__result-value",
+                        children: [
+                            resultValue,
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                className: "pie-chart__result-percent",
+                                children: "%"
+                            }),
+                            ' '
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "pie-chart__result-label",
+                        children: resultLabel
+                    })
+                ]
+            })
+        ]
+    });
 };
-var _default = exports.default = PieChart;
+const _default = PieChart;

package/dist/Atomic/UI/PieChart/PieChart.scss

@@ -1,8 +1,83 @@
 .pie-chart-box {
+  // Colors
+  --pie-chart-percent-color: #7a8599;
+  --pie-chart-label-color: #9aa0b9;
+
+  // Sizes
+  --pie-chart-box-width: 180px;
+  --pie-chart-box-width-with-legend: 350px;
+  --pie-chart-legend-padding: 20px;
+
+  // Typography
+  --pie-chart-value-font-size: 24px;
+  --pie-chart-value-line-height: 34px;
+
+  --pie-chart-percent-font-size: 18px;
+  --pie-chart-percent-line-height: 25px;
+  --pie-chart-percent-margin-right: -14px;
+  --pie-chart-percent-transform-y: -5px;
+  --pie-chart-percent-transform-x: 2px;
+
+  --pie-chart-label-font-size: 12px;
+  --pie-chart-label-line-height: 24px;
+
+  // Legend
+  --pie-chart-legend-font-size: 12px;
+  --pie-chart-legend-line-height: 16px;
+  --pie-chart-legend-item-margin: 8px;
+  --pie-chart-legend-dot-size: 8px;
+
   position: relative;
 
-  width: 180px;
+  width: var(--pie-chart-box-width, 180px);
   max-width: 100%;
+
+  &--with-legend {
+    width: var(--pie-chart-box-width-with-legend, 350px);
+
+    // Стили для легенды Chart.js
+    .chartjs-legend {
+      margin-left: var(--pie-chart-legend-padding, 20px);
+    }
+
+    .chartjs-legend ul {
+      margin: 0;
+      padding: 0;
+
+      list-style: none;
+    }
+
+    .chartjs-legend li {
+      display: flex;
+      align-items: center;
+
+      margin-bottom: var(--pie-chart-legend-item-margin, 8px);
+
+      font-size: var(--pie-chart-legend-font-size, 12px);
+      line-height: var(--pie-chart-legend-line-height, 16px);
+    }
+
+    .chartjs-legend li span {
+      display: flex;
+      align-items: center;
+    }
+
+    .chartjs-legend li span::before {
+      display: inline-block;
+
+      width: var(--pie-chart-legend-dot-size, 8px);
+      height: var(--pie-chart-legend-dot-size, 8px);
+      margin-right: var(--pie-chart-legend-item-margin, 8px);
+
+      content: "";
+
+      border-radius: 50%;
+    }
+
+    .pie-chart__result {
+      transform: translateX(-15%) translateY(-50%);
+    }
+  }
 }
 
 .pie-chart__result {
@@ -17,36 +92,37 @@
 
 .pie-chart__result-value {
   font-family: inherit;
-  font-size: 24px;
+  font-size: var(--pie-chart-value-font-size, 24px);
   font-weight: 500;
-  line-height: 34px;
+  line-height: var(--pie-chart-value-line-height, 34px);
   letter-spacing: 0;
 }
 
 .pie-chart__result-percent {
   display: inline-block;
 
-  margin-right: -14px;
+  margin-right: var(--pie-chart-percent-margin-right, -14px);
 
   font-family: inherit;
-  font-size: 18px;
+  font-size: var(--pie-chart-percent-font-size, 18px);
   font-weight: 400;
-  line-height: 25px;
+  line-height: var(--pie-chart-percent-line-height, 25px);
   letter-spacing: 0;
 
-  color: #7a8599;
+  color: var(--pie-chart-percent-color, #7a8599);
 
-  transform: translateY(-5px) translateX(2px);
+  transform: translateY(var(--pie-chart-percent-transform-y, -5px))
+    translateX(var(--pie-chart-percent-transform-x, 2px));
 }
 
 .pie-chart__result-label {
   font-family: inherit;
-  font-size: 12px;
+  font-size: var(--pie-chart-label-font-size, 12px);
   font-weight: 400;
-  line-height: 24px;
+  line-height: var(--pie-chart-label-line-height, 24px);
   white-space: nowrap;
   letter-spacing: 0;
   text-transform: uppercase;
 
-  color: #9aa0b9;
+  color: var(--pie-chart-label-color, #9aa0b9);
 }

package/dist/Atomic/UI/Price/Price.js

@@ -1,24 +1,31 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
-const Price = _ref => {
-  let {
-    value,
-    currencyCode,
-    isSymbolAfter,
-    className,
-    testId = "test-price"
-  } = _ref;
-  if (value === undefined || value === null) return null;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": testId,
-    className: `price ${className}`
-  }, (0, _fieldValueFormatters.formatToPriceWithCurrency)(value, currencyCode, isSymbolAfter ? "after" : "before"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const CN = 'price';
+const Price = ({ value, currencyCode, isSymbolAfter, className, testId = CN })=>{
+    if (value === undefined || value === null) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(CN, className),
+        role: "contentinfo",
+        "aria-label": `Price: ${(0, _fieldValueFormatters.formatToPriceWithCurrency)(value, currencyCode, isSymbolAfter ? 'after' : 'before')}`,
+        children: (0, _fieldValueFormatters.formatToPriceWithCurrency)(value, currencyCode, isSymbolAfter ? 'after' : 'before')
+    });
 };
-var _default = exports.default = Price;
+const _default = Price;

package/dist/Atomic/UI/PriceRange/PriceRange.js

@@ -1,22 +1,44 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
-const PriceRange = _ref => {
-  let {
-    from,
-    to,
-    mode,
-    testId = "test-priceRange"
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": testId,
-    className: "j4"
-  }, mode === "simple" ? /*#__PURE__*/_react.default.createElement("span", null, from, " - ", to) : /*#__PURE__*/_react.default.createElement("span", null, (0, _fieldValueFormatters.formatToPriceWithUSD)(from?.toString()), " -", " ", (0, _fieldValueFormatters.formatToPriceWithUSD)(to?.toString())));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const CN = 'price-range';
+const PriceRange = ({ from, to, mode, testId = CN })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(CN, 'j4'),
+        role: "region",
+        "aria-label": "Price range",
+        children: mode === 'simple' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+            "aria-live": "polite",
+            children: [
+                from,
+                ' - ',
+                to
+            ]
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+            "aria-live": "polite",
+            children: [
+                (0, _fieldValueFormatters.formatToPriceWithUSD)(from === null || from === void 0 ? void 0 : from.toString()),
+                ' - ',
+                (0, _fieldValueFormatters.formatToPriceWithUSD)(to === null || to === void 0 ? void 0 : to.toString())
+            ]
+        })
+    });
 };
-var _default = exports.default = PriceRange;
+const _default = PriceRange;

package/dist/Atomic/UI/ProgressLine/ProgressLine.js

@@ -1,79 +1,98 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _utils = require("../../../Functions/utils");
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _utils = require("../../../Functions/utils");
 require("./ProgressLine.scss");
-const ProgressLine = _ref => {
-  let {
-    label = "",
-    labelAlign = "left",
-    renderValue = false,
-    renderValueInPercents = false,
-    valueMeasurement = "",
-    valueHorizontalPosition = "right",
-    valueVerticalPosition = "center",
-    symbolsAfterComma = 0,
-    minValue = 0,
-    maxValue = 100,
-    value = 0,
-    showExtremums = false,
-    extremumsPosition = "top",
-    variant = "info",
-    useVariantLabelColor = true,
-    isShowLine = true,
-    className = ""
-  } = _ref;
-  const getFilledLineWidth = () => {
-    if (value > maxValue) value = maxValue;
-    return `${((value - minValue) * 100 / (maxValue - minValue)).toFixed(symbolsAfterComma)}%`;
-  };
-  const renderLabel = () => {
-    if (!label) return null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: `progress-line__wrapper__label align-${labelAlign}`
-    }, label);
-  };
-  const renderProgressValue = () => {
-    if (!renderValue) return null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "progress-line__wrapper__value"
-    }, renderValueInPercents ? getFilledLineWidth() : `${(0, _utils.addBitDepthPoints)(String(value))} ${valueMeasurement}`);
-  };
-  const renderExtremums = () => {
-    if (!showExtremums) return null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: `progress-line__wrapper__extremums position-${extremumsPosition}`
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "progress-line__wrapper__extremums--min"
-    }, renderValueInPercents ? "0 %" : `${minValue} ${valueMeasurement}`), /*#__PURE__*/_react.default.createElement("div", {
-      className: "progress-line__wrapper__extremums--max"
-    }, renderValueInPercents ? "100 %" : `${maxValue} ${valueMeasurement}`));
-  };
-  const renderFilledLine = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "progress-line__wrapper__line--filled",
-      style: {
-        width: getFilledLineWidth()
-      }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const CN = 'progress-line';
+const ProgressLine = ({ label = '', labelAlign = 'left', renderValue = false, renderValueInPercents = false, valueMeasurement = '', valueHorizontalPosition = 'right', valueVerticalPosition = 'center', symbolsAfterComma = 0, minValue = 0, maxValue = 100, value = 0, showExtremums = false, extremumsPosition = 'top', variant = 'info', useVariantLabelColor = true, isShowLine = true, className, testId = CN })=>{
+    const getFilledLineWidth = ()=>{
+        if (value > maxValue) value = maxValue;
+        return `${((value - minValue) * 100 / (maxValue - minValue)).toFixed(symbolsAfterComma)}%`;
+    };
+    const renderLabel = ()=>{
+        if (!label) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: `progress-line__wrapper__label align-${labelAlign}`,
+            children: label
+        });
+    };
+    const renderProgressValue = ()=>{
+        if (!renderValue) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "progress-line__wrapper__value",
+            "aria-live": "polite",
+            children: renderValueInPercents ? getFilledLineWidth() : `${(0, _utils.addBitDepthPoints)(String(value))} ${valueMeasurement}`
+        });
+    };
+    const renderExtremums = ()=>{
+        if (!showExtremums) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            "aria-hidden": "true",
+            className: `progress-line__wrapper__extremums position-${extremumsPosition}`,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "progress-line__wrapper__extremums--min",
+                    children: renderValueInPercents ? '0 %' : `${minValue} ${valueMeasurement}`
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "progress-line__wrapper__extremums--max",
+                    children: renderValueInPercents ? '100 %' : `${maxValue} ${valueMeasurement}`
+                })
+            ]
+        });
+    };
+    const renderFilledLine = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "progress-line__wrapper__line--filled",
+            role: "progressbar",
+            "aria-label": `Progress: ${value} out of ${maxValue}`,
+            "aria-valuenow": value,
+            "aria-valuemin": minValue,
+            "aria-valuemax": maxValue,
+            style: {
+                width: getFilledLineWidth()
+            }
+        });
+    };
+    const renderLine = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "progress-line__wrapper__line",
+            children: [
+                renderExtremums(),
+                renderFilledLine()
+            ]
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(CN, className),
+        "data-testid": testId,
+        role: "region",
+        "aria-label": "Progress line",
+        children: [
+            renderLabel(),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: `progress-line__wrapper variant-${useVariantLabelColor && variant} value-${valueVerticalPosition}-${valueHorizontalPosition} ${className}`,
+                children: [
+                    renderProgressValue(),
+                    isShowLine && renderLine()
+                ]
+            })
+        ]
     });
-  };
-  const renderLine = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "progress-line__wrapper__line"
-    }, renderExtremums(), renderFilledLine());
-  };
-  const render = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "progress-line"
-    }, renderLabel(), /*#__PURE__*/_react.default.createElement("div", {
-      className: `progress-line__wrapper variant-${useVariantLabelColor && variant} value-${valueVerticalPosition}-${valueHorizontalPosition} ${className}`
-    }, renderProgressValue(), isShowLine && renderLine()));
-  };
-  return render();
 };
-var _default = exports.default = ProgressLine;
+const _default = ProgressLine;