intelicoreact 1.5.41 → 1.6.1

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _ProgressLine = /*#__PURE__*/ _interop_require_default(require("./ProgressLine"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _ProgressLine.default;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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);
   }
 }

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

@@ -0,0 +1,79 @@
+"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, {
+    StatusNumberTemplate: function() {
+        return StatusNumberTemplate;
+    },
+    StatusTemplate: function() {
+        return StatusTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _Status = /*#__PURE__*/ _interop_require_default(require("./Status"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'UI/Status',
+    component: _Status.default,
+    argTypes: {
+        status: {
+            description: 'string: ["active", "pause", "error", "processing", "new", "outline", "warning", "info"]',
+            control: {
+                type: 'select',
+                options: [
+                    'active',
+                    'pause',
+                    'error',
+                    'processing',
+                    'new',
+                    'outline',
+                    'warning',
+                    'info',
+                    null
+                ]
+            }
+        },
+        label: {
+            description: 'string'
+        },
+        disabled: {
+            description: 'boolean'
+        },
+        children: {
+            description: 'any rect children'
+        }
+    }
+};
+const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+        ...args
+    });
+const StatusTemplate = Template.bind({});
+const StatusNumberTemplate = Template.bind({});
+StatusTemplate.args = {
+    label: '',
+    status: undefined,
+    disabled: false,
+    noBackground: false,
+    icon: ''
+};
+StatusNumberTemplate.args = {
+    active: 0,
+    pause: 0,
+    status: 'used',
+    disabled: false
+};

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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const _Status = /*#__PURE__*/ _interop_require_default(require("./Status"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('status Component', ()=>{
+    it('renders without crashing', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            status: "active",
+            value: "Test",
+            label: "Test Label",
+            onClick: ()=>{}
+        }));
+        expect(_react.screen.getByTestId('status')).toBeInTheDocument();
+    });
+    it('renders with correct label', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            status: "active",
+            value: "Test",
+            label: "Test Label",
+            onClick: ()=>{}
+        }));
+        expect(_react.screen.getByText('Test')).toBeInTheDocument();
+    });
+    it('formats label correctly', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            status: "active",
+            value: "test",
+            onClick: ()=>{}
+        }));
+        expect(_react.screen.getByText('Test')).toBeInTheDocument();
+    });
+    it('does not render when no status is provided', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            onClick: ()=>{}
+        }));
+        expect(_react.screen.queryByTestId('status')).not.toBeInTheDocument();
+    });
+    it('renders number type status correctly', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            type: "number",
+            active: 5,
+            pause: 3,
+            status: "active",
+            onClick: ()=>{}
+        }));
+        expect(_react.screen.getByText('5')).toBeInTheDocument();
+        expect(_react.screen.getByText('3')).toBeInTheDocument();
+    });
+    it('calls onClick when clicked', ()=>{
+        const onClickMock = jest.fn();
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            status: "active",
+            value: "Test",
+            onClick: onClickMock
+        }));
+        _react.fireEvent.click(_react.screen.getByTestId('status'));
+        expect(onClickMock).toHaveBeenCalledTimes(1);
+    });
+    it('applies the correct class when disabled', ()=>{
+        const { container } = (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            status: "active",
+            value: "Test",
+            disabled: true
+        }));
+        expect(container.firstChild).toHaveClass('disabled');
+    });
+    it('renders icon if provided', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            status: "active",
+            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: "Icon"
+            }),
+            value: "Test"
+        }));
+        expect(_react.screen.getByText('Icon')).toBeInTheDocument();
+    });
+    it('does not apply no background when status is not pause', ()=>{
+        const { container } = (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            status: "active",
+            value: "Test",
+            type: "string",
+            noBackground: true
+        }));
+        expect(container.firstChild).not.toHaveClass('status--no-bg');
+    });
+    it('renders pause with gray text when no background and status is pause', ()=>{
+        const { container } = (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+            status: "pause",
+            value: "Test",
+            noBackground: true
+        }));
+        expect(container.querySelector('.color--gray-gull')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _Status = /*#__PURE__*/ _interop_require_default(require("./Status"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _Status.default;