intelicoreact 1.5.38 → 1.5.41

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

@@ -1,98 +1,79 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-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");
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../../../Functions/utils");
 require("./ProgressLine.scss");
-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 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()
+      }
     });
+  };
+  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();
 };
-const _default = ProgressLine;
+var _default = exports.default = ProgressLine;

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

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

package/dist/Atomic/UI/Status/Status.js

@@ -1,67 +1,56 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-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"));
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 require("./Status.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
+function Status(_ref) {
+  let {
+    icon,
+    value,
+    label,
+    status,
+    disabled,
+    type,
+    active = 0,
+    pause = 0,
+    className,
+    noBackground,
+    children,
+    testId = "status",
+    onClick = () => {}
+  } = _ref;
+  if (!status) return false;
+  const text = children && typeof children === "string" ? children : value || label || status;
+  const formatedLabel = text?.[0].toUpperCase() + text?.slice(1);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => onClick(),
+    "data-testid": testId,
+    className: (0, _classnames.default)({
+      disabled
+    }, className)
+  }, type === "number" ? /*#__PURE__*/_react.default.createElement("div", null, active === 0 && pause === 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "status status--error"
+  }, /*#__PURE__*/_react.default.createElement("span", null, active)) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "status status--warning"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "status--number-active"
+  }, active), /*#__PURE__*/_react.default.createElement("span", {
+    className: "color--gray-gull"
+  }, " / "), /*#__PURE__*/_react.default.createElement("span", {
+    className: `${pause > 0 ? "color--froly" : "color--gray-gull"}`
+  }, pause))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`status status--${status} ${className || ""}`, {
+      "status--no-bg": noBackground
+    }, {
+      "color--gray-gull": noBackground && status === "pause" && !className
+    }, {
+      j4: icon
+    })
+  }, icon, formatedLabel));
 }
-function defaultOnClick() {}
-const Status = ({ icon, value, label, status, disabled, type, active = 0, pause = 0, className, noBackground, children, testId = 'status', onClick = defaultOnClick })=>{
-    if (!status) return null;
-    const text = children && typeof children === 'string' ? children : value || label || status;
-    const formattedLabel = (text === null || text === void 0 ? void 0 : text[0].toUpperCase()) + (text === null || text === void 0 ? void 0 : text.slice(1));
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        onClick: onClick,
-        "data-testid": testId,
-        className: (0, _classnames.default)({
-            disabled
-        }, className),
-        children: type === 'number' ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            children: active === 0 && pause === 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "status status--error",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                    children: active
-                })
-            }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "status status--warning",
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        className: "status--number-active",
-                        children: active
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        className: "color--gray-gull",
-                        children: " / "
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        className: pause > 0 ? 'color--froly' : 'color--gray-gull',
-                        children: pause
-                    })
-                ]
-            })
-        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: (0, _classnames.default)('status', `status--${status}`, {
-                'status--no-bg': noBackground && status === 'pause',
-                'color--gray-gull': noBackground && status === 'pause' && !className,
-                'j4': !!icon
-            }, className),
-            children: [
-                icon,
-                formattedLabel
-            ]
-        })
-    });
-};
-const _default = Status;
+var _default = exports.default = Status;