intelicoreact 1.5.41 → 1.6.1

package/dist/Atomic/UI/Box/Box.js

@@ -1,46 +1,46 @@
+// global
 "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;
+    }
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 require("./Box.scss");
-// global
-
-// styles
-
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 const directionVariants = {
-  column: "column",
-  row: "row"
+    column: "column",
+    row: "row"
 };
 const sizes = {
-  none: "none",
-  xs: "xs",
-  s: "s",
-  m: "m",
-  l: "l",
-  xl: "xl"
+    none: "none",
+    xs: "xs",
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl"
 };
-const Box = function (_ref) {
-  let {
-    children,
-    paddingVariant = sizes.m,
-    radiiVariant = sizes.s,
-    direction = directionVariants.column,
-    className
-  } = _ref;
-  const styles = {
-    flexDirection: direction
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: styles,
-    className: (0, _classnames.default)("box", `box--padding-${paddingVariant}`, `box--radii-${radiiVariant}`, className, {
-      df: direction === directionVariants.row,
-      "dfc-jc": direction === directionVariants.column
-    })
-  }, children);
+const Box = function({ children, paddingVariant = sizes.m, radiiVariant = sizes.s, direction = directionVariants.column, className }) {
+    const styles = {
+        flexDirection: direction
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        style: styles,
+        className: (0, _classnames.default)("box", `box--padding-${paddingVariant}`, `box--radii-${radiiVariant}`, className, {
+            df: direction === directionVariants.row,
+            "dfc-jc": direction === directionVariants.column
+        }),
+        children: children
+    });
 };
-var _default = exports.default = Box;
+const _default = Box;

package/dist/Atomic/UI/Box/Box.scss

@@ -1,4 +1,4 @@
-@import "../../../scss/_vars";
+@use "../../../scss/_vars";
 
 .box {
   box-sizing: border-box;
@@ -11,23 +11,23 @@
   }
 
   &--radii-xs {
-    border-radius: $radii-xs;
+    border-radius: vars.$radii-xs;
   }
 
   &--radii-s {
-    border-radius: $radii-s;
+    border-radius: vars.$radii-s;
   }
 
   &--radii-m {
-    border-radius: $radii-m;
+    border-radius: vars.$radii-m;
   }
 
   &--radii-l {
-    border-radius: $radii-l;
+    border-radius: vars.$radii-l;
   }
 
   &--radii-xl {
-    border-radius: $radii-xl;
+    border-radius: vars.$radii-xl;
   }
 
   &--padding-none {
@@ -35,22 +35,22 @@
   }
 
   &--padding-xs {
-    padding: $spacing-xs;
+    padding: vars.$spacing-xs;
   }
 
   &--padding-s {
-    padding: $spacing-s;
+    padding: vars.$spacing-s;
   }
 
   &--padding-m {
-    padding: $spacing-m;
+    padding: vars.$spacing-m;
   }
 
   &--padding-l {
-    padding: $spacing-l;
+    padding: vars.$spacing-l;
   }
 
   &--padding-xl {
-    padding: $spacing-xl;
+    padding: vars.$spacing-xl;
   }
 }

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

@@ -0,0 +1,114 @@
+"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, {
+    BoxTemplate: function() {
+        return BoxTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _CheckboxInput = /*#__PURE__*/ _interop_require_default(require("../../FormElements/CheckboxInput/CheckboxInput"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("./Box"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getRadioArgType(options, defaultValue) {
+    return {
+        description: `string: ${JSON.stringify(options)}. optional. ${defaultValue} is default`,
+        control: {
+            type: "radio"
+        },
+        options
+    };
+}
+const _default = {
+    title: "UI/Box",
+    component: _Box.default,
+    argTypes: {
+        direction: getRadioArgType([
+            "column",
+            "row"
+        ], "column"),
+        paddingVariant: getRadioArgType([
+            "none",
+            "xs",
+            "s",
+            "m",
+            "l",
+            "xl"
+        ], "m"),
+        radiiVariant: getRadioArgType([
+            "none",
+            "xs",
+            "s",
+            "m",
+            "l",
+            "xl"
+        ], "s")
+    }
+};
+const Template = (args)=>{
+    const { className, onClick } = args;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                ...args,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                        label: "mock element one"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                        label: "mock element second"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("h2", {
+                children: [
+                    "direction: ",
+                    args.direction
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("h2", {
+                children: [
+                    "radii: ",
+                    args.radiiVariant
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("h2", {
+                children: [
+                    "padding: ",
+                    args.paddingVariant
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("h2", {
+                children: [
+                    "className: ",
+                    args.className
+                ]
+            })
+        ]
+    });
+};
+const BoxTemplate = Template.bind({});
+BoxTemplate.args = {
+    direction: "column",
+    radiiVariant: "s",
+    paddingVariant: "m",
+    className: "external-class-name"
+};

package/dist/Atomic/UI/Button/Button.js

@@ -1,46 +1,48 @@
 "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("./Button.scss");
-const RC = "button";
-const Button = _ref => {
-  let {
-    label,
-    onClick,
-    disabled,
-    icon,
-    className,
-    children,
-    style,
-    noIcon,
-    isIconRight,
-    testId = "button",
-    tabIndex = 0,
-    variant = "primary",
-    isTextEllipsis = false
-  } = _ref;
-  const noRenderIcon = noIcon || variant === "ellipse-apply" || variant === "ellipse-cancel";
-  return /*#__PURE__*/_react.default.createElement("button", {
-    "data-testid": testId,
-    tabIndex: tabIndex?.toString?.(),
-    style: style,
-    className: (0, _classnames.default)(RC, {
-      [`${RC}_${variant}`]: variant,
-      "button_icon-left": icon && !isIconRight,
-      "button_icon-right": icon && isIconRight
-    }, className),
-    onClick: onClick,
-    disabled: disabled
-  }, !noRenderIcon && icon, label && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("button__text", {
-      "text-ellipsis": isTextEllipsis
-    })
-  }, label), !label && children ? children : null);
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = 'button';
+const Button = ({ label, onClick, disabled, icon, className, children, style, noIcon, isIconRight, testId = 'button', tabIndex = 0, variant = 'primary', isTextEllipsis = false, ...props })=>{
+    const noRenderIcon = noIcon || variant === 'ellipse-apply' || variant === 'ellipse-cancel';
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+        ...props,
+        "data-testid": testId,
+        tabIndex: tabIndex,
+        style: style,
+        className: (0, _classnames.default)(RC, {
+            [`${RC}_${variant}`]: variant,
+            'button_icon-left': icon && !isIconRight,
+            'button_icon-right': icon && isIconRight
+        }, className),
+        onClick: onClick,
+        disabled: disabled,
+        type: "button",
+        children: [
+            !noRenderIcon && icon,
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)('button__text', {
+                    'text-ellipsis': isTextEllipsis
+                }),
+                children: label
+            }),
+            !label && children ? children : null
+        ]
+    });
 };
-var _default = exports.default = Button;
+const _default = Button;

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

@@ -0,0 +1,105 @@
+"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, {
+    ButtonTemplate: function() {
+        return ButtonTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactfeather = require("react-feather");
+const _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+global.lng = "en";
+const _default = {
+    title: "UI/Button",
+    component: _Button.default,
+    argTypes: {
+        variant: {
+            description: 'string: ["primary", "secondary", "dark-outline", "ellipse-apply", "ellipse-cancel"]',
+            control: {
+                type: "select",
+                options: [
+                    "primary",
+                    "success",
+                    "warning",
+                    "secondary",
+                    "dark-outline",
+                    "link",
+                    "ellipse-apply",
+                    "ellipse-cancel"
+                ]
+            }
+        },
+        isTextEllipsis: {
+            description: "boolean",
+            control: {
+                type: "boolean"
+            }
+        },
+        label: {
+            description: "string"
+        },
+        disabled: {
+            description: "boolean"
+        },
+        onClick: {
+            description: "function"
+        },
+        icon: {
+            description: "svg icon code",
+            control: {
+                type: "select",
+                options: [
+                    "Check",
+                    "Edit3",
+                    "Plus",
+                    "Tool",
+                    "UploadCloud",
+                    "X",
+                    "ArrowLeft"
+                ]
+            }
+        },
+        className: {
+            description: "string"
+        },
+        style: {
+            description: "object"
+        },
+        testId: {
+            description: "string"
+        }
+    }
+};
+const Template = (args)=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+        ...args
+    });
+};
+const ButtonTemplate = Template.bind({});
+ButtonTemplate.args = {
+    disabled: false,
+    onClick: ()=>null,
+    variant: "",
+    label: "Button",
+    icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {}),
+    isIconRight: true,
+    className: "test-class",
+    testId: "test-id"
+};

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

@@ -0,0 +1,147 @@
+"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 _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('button component', ()=>{
+    // Positive Scenarios
+    it('renders with default props', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {}));
+        const button = _react.screen.getByTestId('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass('button button_primary');
+        expect(button).not.toBeDisabled();
+    });
+    it('renders with a label', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            label: "Click me"
+        }));
+        const button = _react.screen.getByTestId('button');
+        expect(button).toHaveTextContent('Click me');
+    });
+    it('renders children when no label is provided', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: "Child Text "
+            })
+        }));
+        const child = _react.screen.getByText('Child Text');
+        expect(child).toBeInTheDocument();
+    });
+    it('renders with an icon', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                "data-testid": "icon"
+            })
+        }));
+        const icon = _react.screen.getByTestId('icon');
+        expect(icon).toBeInTheDocument();
+    });
+    it('renders with a right-aligned icon', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                "data-testid": "icon"
+            }),
+            isIconRight: true
+        }));
+        const button = _react.screen.getByTestId('button');
+        expect(button).toHaveClass('button_icon-right');
+    });
+    it('handles onClick event', ()=>{
+        const handleClick = jest.fn();
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            onClick: handleClick
+        }));
+        const button = _react.screen.getByTestId('button');
+        _react.fireEvent.click(button);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('applies different variants', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            variant: "ellipse-apply"
+        }));
+        const button = _react.screen.getByTestId('button');
+        expect(button).toHaveClass('button button_ellipse-apply');
+    });
+    it('handles disabled state', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            disabled: true
+        }));
+        const button = _react.screen.getByTestId('button');
+        expect(button).toBeDisabled();
+    });
+    it('applies custom styles', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            style: {
+                backgroundColor: 'red'
+            }
+        }));
+        const button = _react.screen.getByTestId('button');
+        expect(button).toHaveStyle('background-color: red');
+    });
+    it('handles isTextEllipsis prop', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            label: "Long text",
+            isTextEllipsis: true
+        }));
+        const text = _react.screen.getByText('Long text');
+        expect(text).toHaveClass('text-ellipsis');
+    });
+    it('renders without icon when noIcon is true', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                "data-testid": "icon"
+            }),
+            noIcon: true
+        }));
+        const icon = _react.screen.queryByTestId('icon');
+        expect(icon).not.toBeInTheDocument();
+    });
+    // Negative Scenarios
+    it('does not trigger onClick when disabled', ()=>{
+        const handleClick = jest.fn();
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            onClick: handleClick,
+            disabled: true
+        }));
+        const button = _react.screen.getByTestId('button');
+        _react.fireEvent.click(button);
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+    it('does not apply variant class if variant is not provided', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            variant: ""
+        }));
+        const button = _react.screen.getByTestId('button');
+        expect(button).not.toHaveClass('button_');
+    });
+    it('does not render label or children when both are absent', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {}));
+        const button = _react.screen.getByTestId('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toBeEmptyDOMElement();
+    });
+    it('does not render with invalid props', ()=>{
+        // @ts-expect-error - Testing invalid prop
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            invalidProp: "value"
+        }));
+        const button = _react.screen.getByTestId('button');
+        expect(button).toBeInTheDocument();
+    });
+    it('does not apply isIconRight class when no icon is provided', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            isIconRight: true
+        }));
+        const button = _react.screen.getByTestId('button');
+        expect(button).not.toHaveClass('button_icon-right');
+    });
+});