@appcorp/kismaa-web-ui 0.2.29 → 0.2.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,31 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { ButtonProps } from './type';
|
|
3
|
+
export declare const colorMap: {
|
|
4
|
+
PRIMARY: string;
|
|
5
|
+
SECONDARY: string;
|
|
6
|
+
TERTIARY: string;
|
|
7
|
+
QUATERNARY: string;
|
|
8
|
+
LOADING: string;
|
|
9
|
+
SUCCESS: string;
|
|
10
|
+
ERROR: string;
|
|
11
|
+
ICON: string;
|
|
12
|
+
TEXT: string;
|
|
13
|
+
};
|
|
14
|
+
export declare const hoverMap: {
|
|
15
|
+
PRIMARY: string;
|
|
16
|
+
SECONDARY: string;
|
|
17
|
+
QUATERNARY: string;
|
|
18
|
+
TERTIARY: string;
|
|
19
|
+
ERROR: string;
|
|
20
|
+
SUCCESS: string;
|
|
21
|
+
LOADING: string;
|
|
22
|
+
ICON: string;
|
|
23
|
+
TEXT: string;
|
|
24
|
+
};
|
|
25
|
+
export declare const sizeMap: {
|
|
26
|
+
SM: string;
|
|
27
|
+
MD: string;
|
|
28
|
+
LG: string;
|
|
29
|
+
XL: string;
|
|
30
|
+
};
|
|
3
31
|
export declare const Button: FC<ButtonProps>;
|
|
@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
var _a, _b, _c, _d;
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.Button = void 0;
|
|
7
|
+
exports.Button = exports.sizeMap = exports.hoverMap = exports.colorMap = void 0;
|
|
8
8
|
var react_1 = __importDefault(require("react"));
|
|
9
9
|
var solid_1 = require("@heroicons/react/24/solid");
|
|
10
10
|
var type_1 = require("./type");
|
|
11
|
-
|
|
11
|
+
exports.colorMap = (_a = {},
|
|
12
12
|
_a[type_1.BUTTON_TYPES.PRIMARY] = 'bg-primary text-white transition-all ease-in-out duration-300',
|
|
13
13
|
_a[type_1.BUTTON_TYPES.SECONDARY] = 'bg-secondary text-white transition-all ease-in-out duration-300',
|
|
14
14
|
_a[type_1.BUTTON_TYPES.TERTIARY] = 'border-[1px] border-gray-300 text-tertiary bg-transparent transition-all ease-in-out duration-300',
|
|
@@ -30,7 +30,7 @@ var outlinedColorMap = (_b = {},
|
|
|
30
30
|
_b[type_1.BUTTON_TYPES.ICON] = '',
|
|
31
31
|
_b[type_1.BUTTON_TYPES.TEXT] = '',
|
|
32
32
|
_b);
|
|
33
|
-
|
|
33
|
+
exports.hoverMap = (_c = {},
|
|
34
34
|
_c[type_1.BUTTON_TYPES.PRIMARY] = 'hover:bg-purple-400',
|
|
35
35
|
_c[type_1.BUTTON_TYPES.SECONDARY] = 'hover:bg-primary',
|
|
36
36
|
_c[type_1.BUTTON_TYPES.QUATERNARY] = 'hover:bg-[#A9C2EB]',
|
|
@@ -41,7 +41,7 @@ var hoverMap = (_c = {},
|
|
|
41
41
|
_c[type_1.BUTTON_TYPES.ICON] = '',
|
|
42
42
|
_c[type_1.BUTTON_TYPES.TEXT] = 'hover:text-primary',
|
|
43
43
|
_c);
|
|
44
|
-
|
|
44
|
+
exports.sizeMap = (_d = {},
|
|
45
45
|
_d[type_1.BUTTON_SIZES.SM] = 'text-base font-medium lg:px-6 lg:py-2 px-4 py-1',
|
|
46
46
|
_d[type_1.BUTTON_SIZES.MD] = 'text-base lg:px-6 lg:py-3 px-4 py-2',
|
|
47
47
|
_d[type_1.BUTTON_SIZES.LG] = 'text-lg lg:px-10 lg:py-4 px-8 py-3',
|
|
@@ -50,11 +50,11 @@ var sizeMap = (_d = {},
|
|
|
50
50
|
var Button = function (_a) {
|
|
51
51
|
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, handleOnClick = _a.handleOnClick, iconPrefix = _a.iconPrefix, iconSuffix = _a.iconSuffix, label = _a.label, _c = _a.outlined, outlined = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? type_1.BUTTON_SIZES.MD : _d, type = _a.type;
|
|
52
52
|
var disabledStyles = 'opacity-50 cursor-not-allowed';
|
|
53
|
-
var buttonClasses = "flex items-center justify-center gap-2 rounded-md w-[100%] cursor-pointer ".concat(outlined ? outlinedColorMap[type] : colorMap[type], " ").concat(disabled || type === type_1.BUTTON_TYPES.LOADING
|
|
53
|
+
var buttonClasses = "flex items-center justify-center gap-2 rounded-md w-[100%] cursor-pointer ".concat(outlined ? outlinedColorMap[type] : exports.colorMap[type], " ").concat(disabled || type === type_1.BUTTON_TYPES.LOADING
|
|
54
54
|
? disabledStyles
|
|
55
55
|
: type === type_1.BUTTON_TYPES.SUCCESS || type === type_1.BUTTON_TYPES.ERROR
|
|
56
56
|
? ''
|
|
57
|
-
: "".concat(!outlined ? hoverMap[type] : ''), " ").concat(sizeMap[size]);
|
|
57
|
+
: "".concat(!outlined ? exports.hoverMap[type] : ''), " ").concat(exports.sizeMap[size]);
|
|
58
58
|
var renderContent = function () {
|
|
59
59
|
if (type === type_1.BUTTON_TYPES.LOADING) {
|
|
60
60
|
return (react_1.default.createElement("div", { className: "flex min-w-32 items-center justify-center gap-2" },
|
|
@@ -44,9 +44,10 @@ var Navbar = function (_a) {
|
|
|
44
44
|
react_1.default.createElement("div", { className: "flex items-center justify-end gap-4" },
|
|
45
45
|
showSearch && (react_1.default.createElement("div", { className: "", onClick: handleSearch },
|
|
46
46
|
react_1.default.createElement(search_icon_1.SearchIcon, { className: "size-5 cursor-pointer" }))),
|
|
47
|
-
loggedInUser ? (react_1.default.createElement(
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
loggedInUser ? (react_1.default.createElement("button", { className: "".concat(molecules_1.colorMap[molecules_1.BUTTON_TYPES.SECONDARY], " ").concat(molecules_1.hoverMap[molecules_1.BUTTON_TYPES.SECONDARY], " ").concat(molecules_1.sizeMap[molecules_1.BUTTON_SIZES.SM], " cursor-pointer rounded-md") },
|
|
48
|
+
react_1.default.createElement(link_1.default, { href: '/user/dashboard', className: "flex items-center gap-3" },
|
|
49
|
+
(loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, alt: loggedInUser.firstName, height: 32, width: 32, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: "h-8 w-8 rounded-full" })),
|
|
50
|
+
react_1.default.createElement("span", null, loggedInUser.firstName)))) : (react_1.default.createElement("div", { className: "flex items-center justify-end" }, headerActions
|
|
50
51
|
.filter(function (_a) {
|
|
51
52
|
var enabled = _a.enabled;
|
|
52
53
|
return enabled;
|
|
@@ -71,9 +72,10 @@ var Navbar = function (_a) {
|
|
|
71
72
|
react_1.default.createElement("div", null,
|
|
72
73
|
react_1.default.createElement(link_1.default, { href: navLinks[2].href, className: "flex cursor-pointer flex-row items-center justify-start gap-4", onClick: toggleMobileMenu },
|
|
73
74
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.SUBH3 }, navLinks[2].label))),
|
|
74
|
-
loggedInUser ? (react_1.default.createElement(
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
loggedInUser ? (react_1.default.createElement("button", { className: "".concat(molecules_1.colorMap[molecules_1.BUTTON_TYPES.SECONDARY], " ").concat(molecules_1.hoverMap[molecules_1.BUTTON_TYPES.SECONDARY], " ").concat(molecules_1.sizeMap[molecules_1.BUTTON_SIZES.SM], " cursor-pointer rounded-md") },
|
|
76
|
+
react_1.default.createElement(link_1.default, { href: '/user/dashboard', className: "flex items-center gap-2" },
|
|
77
|
+
(loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, alt: loggedInUser.firstName, height: 32, width: 32, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: "h-8 w-8 rounded-full" })),
|
|
78
|
+
react_1.default.createElement("span", null, loggedInUser.firstName)))) : (react_1.default.createElement("div", { className: "flex flex-col items-center gap-2" }, headerActions
|
|
77
79
|
.filter(function (_a) {
|
|
78
80
|
var enabled = _a.enabled;
|
|
79
81
|
return enabled;
|