intelicoreact 1.5.41 → 1.6.0

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;

package/dist/Atomic/UI/ProgressLine/ProgressLine.scss

@@ -1,4 +1,25 @@
 .progress-line {
+  --progress-line-font-family: "Sarabun, sans-serif";
+  --progress-line-font-size: 14px;
+  --progress-line-font-weight: 400;
+  --progress-line-font-style: normal;
+  --progress-line-line-height: 20px;
+  --progress-line-letter-spacing: 0.2px;
+  --progress-line-color-default: #171d33;
+  --progress-line-color-info: #46aaf2;
+  --progress-line-color-success: #54d3ad;
+  --progress-line-color-error: #fa2e69;
+  --progress-line-color-grey: #a6aab4;
+  --progress-line-color-warning: #ffdb7c;
+  --progress-line-color-primary-light: #a6c2ed;
+  --progress-line-color-de-york: #78c58d;
+  --progress-line-color-purple: #a193ef;
+  --progress-line-color-sea-buckthorn: #f59a2f;
+  --progress-line-color-pink: #ffcad6;
+  --progress-line-color-froly: #f06d8d;
+  --progress-line-color-brown: #b4a287;
+  --progress-line-background-default: #e6f0f7;
+
   position: relative;
 
   display: flex;
@@ -7,7 +28,6 @@
   box-sizing: border-box;
   width: 100%;
 
-  // Wrapper
   &__wrapper {
     position: relative;
 
@@ -21,14 +41,14 @@
     &__label {
       margin-bottom: 8px;
 
-      font-family: Sarabun, sans-serif;
-      font-size: 14px;
-      font-weight: 400;
-      font-style: normal;
-      line-height: 20px;
-      letter-spacing: 0.2px;
+      font-family: var(--progress-line-font-family, "Sarabun, sans-serif");
+      font-size: var(--progress-line-font-size, 14px);
+      font-weight: var(--progress-line-font-weight, 400);
+      font-style: var(--progress-line-font-style, normal);
+      line-height: var(--progress-line-line-height, 20px);
+      letter-spacing: var(--progress-line-letter-spacing, 0.2px);
 
-      color: #171d33;
+      color: var(--progress-line-color-default, #171d33);
 
       &.align-left {
         text-align: left;
@@ -47,19 +67,17 @@
       display: flex;
       flex-wrap: nowrap;
 
-      font-family: Sarabun, sans-serif;
-      font-size: 14px;
-      font-weight: 400;
-      font-style: normal;
-      line-height: 20px;
+      font-family: var(--progress-line-font-family, "Sarabun, sans-serif");
+      font-size: var(--progress-line-font-size, 14px);
+      font-weight: var(--progress-line-font-weight, 400);
+      font-style: var(--progress-line-font-style, normal);
+      line-height: var(--progress-line-line-height, 20px);
       white-space: nowrap;
-      letter-spacing: 0.2px;
+      letter-spacing: var(--progress-line-letter-spacing, 0.2px);
 
-      color: #171d33;
+      color: var(--progress-line-color-default, #171d33);
     }
 
-    // Progress Line Value Position
-    //--Top
     &[class*="value-top-"] {
       flex-flow: column;
 
@@ -86,7 +104,6 @@
       text-align: right;
     }
 
-    //--Middle
     &[class*="value-center-"] {
       align-items: center;
     }
@@ -111,7 +128,6 @@
       }
     }
 
-    //--Bottom
     &[class*="value-bottom-"] {
       flex-flow: column-reverse;
 
@@ -139,7 +155,7 @@
       height: 4px;
 
       border-radius: 8px;
-      background: #e6f0f7;
+      background: var(--progress-line-background-default, #e6f0f7);
 
       &--filled {
         width: 0;
@@ -149,128 +165,126 @@
       }
     }
 
-    // Progress Line Colors
     &.variant-info {
       [class$="__line--filled"] {
-        background: #46aaf2;
+        background: var(--progress-line-color-info, #46aaf2);
       }
 
       .variant-label-color {
-        color: #46aaf2;
+        color: var(--progress-line-color-info, #46aaf2);
       }
     }
 
     &.variant-success {
       [class$="__line--filled"] {
-        background: #54d3ad;
+        background: var(--progress-line-color-success, #54d3ad);
       }
 
       .variant-label-color {
-        color: #54d3ad;
+        color: var(--progress-line-color-success, #54d3ad);
       }
     }
 
     &.variant-error {
       [class$="__line--filled"] {
-        background: #fa2e69;
+        background: var(--progress-line-color-error, #fa2e69);
       }
 
       .variant-label-color {
-        color: #fa2e69;
+        color: var(--progress-line-color-error, #fa2e69);
       }
     }
 
     &.variant-grey {
       [class$="__line--filled"] {
-        background: #a6aab4;
+        background: var(--progress-line-color-grey, #a6aab4);
       }
 
       .variant-label-color {
-        color: #a6aab4;
+        color: var(--progress-line-color-grey, #a6aab4);
       }
     }
 
     &.variant-warning {
       [class$="__line--filled"] {
-        background: #ffdb7c;
+        background: var(--progress-line-color-warning, #ffdb7c);
       }
 
       .variant-label-color {
-        color: #ffdb7c;
+        color: var(--progress-line-color-warning, #ffdb7c);
       }
     }
 
     &.variant-primary-light {
       [class$="__line--filled"] {
-        background: #a6c2ed;
+        background: var(--progress-line-color-primary-light, #a6c2ed);
       }
 
       .variant-label-color {
-        color: #a6c2ed;
+        color: var(--progress-line-color-primary-light, #a6c2ed);
       }
     }
 
     &.variant-de-york {
       [class$="__line--filled"] {
-        background: #78c58d;
+        background: var(--progress-line-color-de-york, #78c58d);
       }
 
       .variant-label-color {
-        color: #78c58d;
+        color: var(--progress-line-color-de-york, #78c58d);
       }
     }
 
     &.variant-purple {
       [class$="__line--filled"] {
-        background: #a193ef;
+        background: var(--progress-line-color-purple, #a193ef);
       }
 
       .variant-label-color {
-        color: #a193ef;
+        color: var(--progress-line-color-purple, #a193ef);
       }
     }
 
     &.variant-sea-buckthorn {
       [class$="__line--filled"] {
-        background: #f59a2f;
+        background: var(--progress-line-color-sea-buckthorn, #f59a2f);
       }
 
       .variant-label-color {
-        color: #f59a2f;
+        color: var(--progress-line-color-sea-buckthorn, #f59a2f);
       }
     }
 
     &.variant-pink {
       [class$="__line--filled"] {
-        background: #ffcad6;
+        background: var(--progress-line-color-pink, #ffcad6);
       }
 
       .variant-label-color {
-        color: #ffcad6;
+        color: var(--progress-line-color-pink, #ffcad6);
       }
     }
 
     &.variant-froly {
       [class$="__line--filled"] {
-        background: #f06d8d;
+        background: var(--progress-line-color-froly, #f06d8d);
       }
 
       .variant-label-color {
-        color: #f06d8d;
+        color: var(--progress-line-color-froly, #f06d8d);
       }
     }
 
     &.variant-brown {
       [class$="__line--filled"] {
-        background: #b4a287;
+        background: var(--progress-line-color-brown, #b4a287);
       }
 
       .variant-label-color {
-        color: #b4a287;
+        color: var(--progress-line-color-brown, #b4a287);
       }
     }
 
-    // Extremums
     &__extremums {
       position: absolute;
 
@@ -280,14 +294,14 @@
       box-sizing: border-box;
       width: 100%;
 
-      font-family: Sarabun, sans-serif;
-      font-size: 14px;
-      font-weight: 400;
-      font-style: normal;
+      font-family: var(--progress-line-font-family, "Sarabun, sans-serif");
+      font-size: var(--progress-line-font-size, 14px);
+      font-weight: var(--progress-line-font-weight, 400);
+      font-style: var(--progress-line-font-style, normal);
       line-height: 1;
-      letter-spacing: 0.2px;
+      letter-spacing: var(--progress-line-letter-spacing, 0.2px);
 
-      color: #171d33;
+      color: var(--progress-line-color-default, #171d33);
 
       &--min {
         top: 0;

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

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ProgressLineTemplate: function() {
+        return ProgressLineTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _ProgressLine = /*#__PURE__*/ _interop_require_default(require("./ProgressLine"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'UI/ProgressLine',
+    component: _ProgressLine.default,
+    argTypes: {
+        label: {
+            title: 'Label',
+            type: 'string',
+            description: 'Label for Progress Line'
+        },
+        labelAlign: {
+            title: 'Label Align',
+            type: 'string',
+            description: 'Horisontal Align: <br/>`[left, center, right]`'
+        },
+        labelVerticalPosition: {
+            title: 'Label Vertical Position',
+            type: 'string',
+            default: 'middle right',
+            description: `One of:
+
+      'top',
+      'center',
+      'bottom'
+      `
+        },
+        labelHorizontalPosition: {
+            title: 'Label Horizontal Position',
+            type: 'string',
+            default: 'middle right',
+            description: `One of:
+
+      'left',
+      'center',
+      'right'
+      `
+        },
+        renderValue: {
+            type: 'boolean',
+            default: false,
+            description: 'Render Value'
+        },
+        isShowLine: {
+            type: 'boolean',
+            default: true,
+            description: 'Show Line'
+        },
+        renderValueInPercents: {
+            type: 'boolean',
+            default: false,
+            description: 'Render Value in <b>PERCENTS(%)</b>'
+        },
+        valueMeasurement: {
+            type: 'string',
+            default: '',
+            description: 'Value Measurement: pcs, %, etc.'
+        },
+        symbolsAfterComma: {
+            type: 'number',
+            default: 0,
+            description: 'Number of symbols after Comma if <b>"valueAsLabelInPercents"</b> equals <b>TRUE</b>'
+        },
+        value: {
+            type: 'number',
+            default: 0,
+            description: 'Value'
+        },
+        minValue: {
+            type: 'number',
+            default: 0,
+            description: 'Minimal Value'
+        },
+        maxValue: {
+            type: 'number',
+            default: 100,
+            description: 'Maximal Value'
+        },
+        showExtremums: {
+            type: 'boolean',
+            default: false,
+            description: 'Show Progress Line Extremums (Min Value, Max Value)'
+        },
+        extremumsPosition: {
+            type: 'string',
+            default: 'top',
+            description: `One of:
+
+      'top',
+      'center',
+      'bottom'
+      `
+        },
+        variant: {
+            type: 'string',
+            default: 'info',
+            description: `One of:
+
+      'info',
+      'success',
+      'error',
+      'grey',
+      'warning'
+      `
+        },
+        useVariantLabelColor: {
+            type: 'boolean',
+            default: false,
+            description: 'Use Variant Color for Label'
+        },
+        className: {
+            type: 'string',
+            description: 'ClassName for ProgressLine Block'
+        }
+    },
+    args: {
+        label: '',
+        labelAlign: 'left',
+        renderValue: false,
+        renderValueInPercents: false,
+        valueMeasurement: '',
+        valueHorizontalPosition: 'right',
+        valueVerticalPosition: 'center',
+        symbolsAfterComma: 0,
+        minValue: 0,
+        maxValue: 100000,
+        value: 50000,
+        showExtremums: false,
+        extremumsPosition: 'top',
+        variant: 'info',
+        useVariantLabelColor: false,
+        isShowLine: true,
+        className: ''
+    }
+};
+const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressLine.default, {
+        ...args
+    });
+const ProgressLineTemplate = Template.bind({});

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _ProgressLine = /*#__PURE__*/ _interop_require_default(require("./ProgressLine"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('progressLine', ()=>{
+    it('renders without crashing', ()=>{
+        const { container } = (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressLine.default, {}));
+        expect(container).toBeInTheDocument();
+    });
+    it('renders label correctly', ()=>{
+        const label = 'Test Label';
+        const { getByText } = (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressLine.default, {
+            label: label
+        }));
+        expect(getByText(label)).toBeInTheDocument();
+    });
+    it('renders value correctly', ()=>{
+        const value = 50;
+        const { getByText } = (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressLine.default, {
+            renderValue: true,
+            value: value
+        }));
+        expect(getByText('50')).toBeInTheDocument();
+    });
+    it('renders value in percents correctly', ()=>{
+        const value = 50;
+        const { getByText } = (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressLine.default, {
+            renderValue: true,
+            renderValueInPercents: true,
+            value: value
+        }));
+        expect(getByText('50%')).toBeInTheDocument();
+    });
+    it('renders extremums correctly', ()=>{
+        const minValue = 0;
+        const maxValue = 100;
+        const { getByText } = (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressLine.default, {
+            showExtremums: true,
+            minValue: minValue,
+            maxValue: maxValue
+        }));
+        expect(getByText('0')).toBeInTheDocument();
+        expect(getByText('100')).toBeInTheDocument();
+    });
+    it('applies variant class correctly', ()=>{
+        const variant = 'success';
+        const { container } = (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressLine.default, {
+            variant: variant
+        }));
+        expect(container.querySelector('.variant-success')).toBeInTheDocument();
+    });
+});