intelicoreact 1.5.40 → 1.6.0

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/Status/Status.js

@@ -1,56 +1,67 @@
 "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 _classnames = _interopRequireDefault(require("classnames"));
+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"));
 require("./Status.scss");
-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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
 }
-var _default = exports.default = Status;
+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;

package/dist/Atomic/UI/Status/Status.scss

@@ -1,39 +1,58 @@
-@import "../../../scss/vars";
+@use "../../../scss/vars";
 
 .status {
+  // settings
+  --status-height: 20px;
+  --status-padding: 0 8px;
+  --status-font-size: 11px;
+  --status-font-weight: 400;
+  --status-border-radius: 15px;
+  --status-number-font-size: 10px;
+  --status-no-bg-font-size: 13px;
+
+  // colors
+  --status-error-color: #ffff;
+  --status-error-bg-color: #9aa0b9;
+  --status-review-bg-color: #fce2e8;
+  --status-processing-bg-color: #e2e6f8;
+  --status-info-color: #1f7499;
+  --status-info-bg-color: #cde1ff;
+  --status-pending-color: #f59a2f;
+  --status-outline-border-color: #d6d9e4;
+  --status-disabled-color: #777;
   display: inline-flex;
   justify-content: center;
   align-items: center;
 
-  height: 20px;
-  padding: 0 8px;
+  height: var(--status-height, 20px);
+  padding: var(--status-padding, 0 8px);
 
-  font-size: 11px;
-  font-weight: 400;
+  font-size: var(--status-font-size, 11px);
+  font-weight: var(--status-font-weight, 400);
 
-  border-radius: 15px;
+  border-radius: var(--status-border-radius, 15px);
 
   &--number {
     display: flex;
     justify-content: center;
     align-items: center;
 
-    height: 20px;
+    height: var(--status-height, 20px);
 
-    font-size: 10px;
+    font-size: var(--status-number-font-size, 10px);
 
-    border-radius: 15px;
+    border-radius: var(--status-border-radius, 15px);
   }
 
   &--active,
   &--approved {
-    color: $color--green-haze;
-    background-color: $color--panache;
+    color: vars.$color--green-haze;
+    background-color: vars.$color--panache;
   }
 
   &--error {
-    color: #ffff;
-    background-color: #9aa0b9;
+    color: var(--status-error-color, #ffff);
+    background-color: var(--status-error-bg-color, #9aa0b9);
   }
 
   &--review,
@@ -42,51 +61,51 @@
   &--No,
   &--declined,
   &--blocked {
-    color: $color--froly;
-    background-color: #fce2e8;
+    color: vars.$color--froly;
+    background-color: var(--status-review-bg-color, #fce2e8);
   }
 
   &--processing {
-    color: #9aa0b9;
-    background-color: #e2e6f8;
+    color: var(--status-error-bg-color, #9aa0b9);
+    background-color: var(--status-processing-bg-color, #e2e6f8);
   }
 
   &--new,
   &--preApproved {
-    color: $color--primary;
-    background-color: #e2e6f8;
+    color: vars.$color--primary;
+    background-color: var(--status-processing-bg-color, #e2e6f8);
   }
 
   &--pending,
   &--primary,
   &--warning {
-    color: #f59a2f;
-    background-color: $color--sandy-beach;
+    color: var(--status-pending-color, #f59a2f);
+    background-color: vars.$color--sandy-beach;
   }
 
   &--info {
-    color: #1f7499;
-    background-color: #cde1ff;
+    color: var(--status-info-color, #1f7499);
+    background-color: var(--status-info-bg-color, #cde1ff);
   }
 
   &--number-active,
   &--Yes {
-    color: $color--green-haze;
+    color: vars.$color--green-haze;
   }
 
   &--no-bg {
-    font-size: 13px;
+    font-size: var(--status-no-bg-font-size, 13px);
 
     background: none;
   }
 
   &--disabled {
-    color: #777;
-    background-color: $color--border;
+    color: var(--status-disabled-color, #777);
+    background-color: vars.$color--border;
   }
 
   &--outline {
-    color: #1f7499;
-    border: 1px solid #d6d9e4;
+    color: var(--status-info-color, #1f7499);
+    border: 1px solid var(--status-outline-border-color, #d6d9e4);
   }
 }