@spaced-out/ui-design-system
Version:
Sense UI components library
285 lines (280 loc) • 8.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TabSlot = exports.RightSlot = exports.PageTitle = exports.PageName = exports.PAGE_NAME_LIST = void 0;
var React = _interopRequireWildcard(require("react"));
var _color = require("../../styles/variables/_color");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _qa = require("../../utils/qa");
var _Button = require("../Button");
var _Icon = require("../Icon");
var _Text = require("../Text");
var _Tooltip = require("../Tooltip");
var _PageTitleModule = _interopRequireDefault(require("./PageTitle.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
// Define the expected props for page title children
// Type for a page title child element that can be checked for displayName
const PAGE_NAME_LIST = exports.PAGE_NAME_LIST = Object.freeze({
dashboard: {
title: 'Dashboard',
iconName: 'house',
iconType: 'duotone'
},
engage: {
title: 'Engage',
iconName: 'bullseye-pointer',
iconType: 'duotone'
},
journeys: {
title: 'Journeys',
iconName: 'bullseye-pointer',
iconType: 'duotone'
},
workflows: {
title: 'Workflows',
iconName: 'bullseye-pointer',
iconType: 'duotone'
},
trm: {
title: 'TRM',
iconName: 'screen-users',
iconType: 'duotone'
},
analytics: {
title: 'Analytics',
iconName: 'chart-column',
iconType: 'duotone'
},
messaging: {
title: 'Messaging',
iconName: 'messages',
iconType: 'duotone'
},
chatbot: {
title: 'Chatbot',
iconName: 'message-bot',
iconType: 'duotone'
},
referrals: {
title: 'Referrals',
iconName: 'user-check',
iconType: 'duotone'
},
records: {
title: 'Records',
iconName: 'folder-open',
iconType: 'duotone'
},
bulkCleanup: {
title: 'Bulk Cleanup',
iconName: 'retweet',
iconType: 'duotone'
},
support: {
title: 'Support',
iconName: 'headset',
iconType: 'duotone'
},
audit: {
title: 'Audit',
iconName: 'print-magnifying-glass',
iconType: 'duotone'
},
timeline: {
title: 'Timeline',
iconName: 'timeline',
iconType: 'duotone'
},
people: {
title: 'People',
iconName: 'people-group',
iconType: 'duotone'
},
jobs: {
title: 'Jobs',
iconName: 'briefcase',
iconType: 'duotone'
},
contacts: {
title: 'Contacts',
iconName: 'address-card',
iconType: 'duotone'
},
meetings: {
title: 'Meetings',
iconName: 'calendars',
iconType: 'duotone'
},
contacts3: {
title: 'Contacts',
iconName: 'browser',
iconType: 'duotone'
},
tracking: {
title: 'Tracking',
iconName: 'user-check',
iconType: 'duotone'
},
earnings: {
title: 'Earnings',
iconName: 'wallet',
iconType: 'duotone'
},
settings: {
title: 'Settings',
iconName: 'gear',
iconType: 'duotone'
},
broadcast: {
title: 'Broadcast',
iconName: 'bullhorn',
iconType: 'duotone'
}
});
// Type for PAGE_NAME_LIST keys
const TabSlot = _ref => {
let {
children,
className,
testId,
...props
} = _ref;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...props,
className: (0, _classify.default)(_PageTitleModule.default.tabSlot, className),
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'wrapper'
}),
children: children
});
};
exports.TabSlot = TabSlot;
TabSlot.displayName = 'TabSlot';
const RightSlot = _ref2 => {
let {
children,
testId,
...props
} = _ref2;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...props,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'wrapper'
}),
children: children
});
};
exports.RightSlot = RightSlot;
RightSlot.displayName = 'RightSlot';
const PageName = _ref3 => {
let {
children,
testId,
...props
} = _ref3;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...props,
className: _PageTitleModule.default.pageTitle,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'wrapper'
}),
children: children
});
};
exports.PageName = PageName;
PageName.displayName = 'PageName';
const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
let {
classNames,
children,
pageNameKey,
showBackButton,
onBack,
testId
} = _ref4;
const getNamedComp = comp => {
const childrenArray = React.Children.toArray(children);
if (childrenArray.length) {
const nodes = [];
for (const child of childrenArray) {
if (/*#__PURE__*/React.isValidElement(child)) {
const pageTitleChildElement = child;
if (pageTitleChildElement?.type?.displayName === comp) {
nodes.push(child);
}
}
}
return nodes.length > 1 ? nodes : nodes[0];
}
return null;
};
const handleBack = () => {
onBack?.();
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'wrapper'
}),
className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper),
ref: ref,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classify.default)(_PageTitleModule.default.leftSlot, classNames?.leftSlot),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _PageTitleModule.default.headerWithBackBtn,
children: [showBackButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
title: "Navigate Back",
delayMotionDuration: "slow",
placement: "top-start",
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'back-tooltip'
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
onClick: handleBack,
type: "tertiary",
iconLeftName: "chevron-left",
ariaLabel: "Navigate Back Button",
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'back-button'
})
})
}), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(PageName, {
testId: testId,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.TitleMedium, {
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'title'
}),
children: [PAGE_NAME_LIST[pageNameKey].title, ' ']
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
type: PAGE_NAME_LIST[pageNameKey].iconType,
name: PAGE_NAME_LIST[pageNameKey].iconName,
size: "medium",
color: _Text.TEXT_COLORS.primary,
style: {
'--fa-primary-color': _color.colorIconPrimary,
'--fa-secondary-color': _color.colorIconSecondary,
'--fa-primary-opacity': '1.0',
'--fa-secondary-opacity': '1.0'
},
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'icon'
})
})]
}) : getNamedComp('PageName')]
}), getNamedComp('TabSlot')]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classify.default)(_PageTitleModule.default.rightSlot, classNames?.rightSlot),
children: getNamedComp('RightSlot')
})]
});
});