@learningpool/ui 1.9.0 → 1.10.1

package/components/navigation/MobileNavigation/MobileNavigation.d.ts

@@ -34,6 +34,7 @@ interface MobileNavigationProps {
     avatarPanelOnClickMainAction?: any;
     avatarPanelMainActionString?: string;
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
+    avatarPanelShowHelpLinks?: boolean;
 }
 declare const MobileNavigation: (props: MobileNavigationProps) => React.ReactElement;
 export default MobileNavigation;

package/components/navigation/MobileNavigation/MobileNavigationAvatar.d.ts

@@ -11,6 +11,7 @@ export interface ISwipeableTemporaryAvatarProps {
     setIsAvatarOpen?: any;
     mobileNavDirection?: string;
     setMobileNavDirection?: any;
+    localization?: any;
     dataAttributes?: any;
     avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
@@ -24,6 +25,7 @@ export interface ISwipeableTemporaryAvatarProps {
     avatarPanelMainActionString?: string;
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
     avatarPanelInvertNavString?: string;
+    avatarPanelShowHelpLinks?: boolean;
 }
 declare const SwipeableTemporaryAvatar: (props: ISwipeableTemporaryAvatarProps) => React.ReactElement;
 export default SwipeableTemporaryAvatar;

package/components/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -30,12 +30,15 @@ import ToggleOnIcon from '@mui/icons-material/ToggleOn';
 import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
 import { animated } from '@react-spring/web';
 import { defaultAttributes } from '../../../utils/dataAttributes';
+import { defaultMessages } from '../../../lang/en-us';
+import { Help, Lightbulb, Phone } from '@mui/icons-material';
 var SwipeableTemporaryAvatar = function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     var theme = useTheme();
-    var avatarName = props.avatarName, mobileNavDirection = props.mobileNavDirection, avatarPanelLogoutString = props.avatarPanelLogoutString, isAvatarOpen = props.isAvatarOpen, setIsAvatarOpen = props.setIsAvatarOpen, setMobileNavDirection = props.setMobileNavDirection, avatarPanelOnClickSwitchDirection = props.avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelInvertNavString = props.avatarPanelInvertNavString, dataAttributes = props.dataAttributes;
+    var avatarName = props.avatarName, mobileNavDirection = props.mobileNavDirection, avatarPanelLogoutString = props.avatarPanelLogoutString, isAvatarOpen = props.isAvatarOpen, setIsAvatarOpen = props.setIsAvatarOpen, setMobileNavDirection = props.setMobileNavDirection, avatarPanelOnClickSwitchDirection = props.avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelInvertNavString = props.avatarPanelInvertNavString, dataAttributes = props.dataAttributes, localization = props.localization, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks;
+    var messages = __assign(__assign({}, defaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
-    var _e = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _f[0], setIsOpen = _f[1];
     React.useEffect(function () { return handleOpenState(isAvatarOpen); }, [isAvatarOpen]);
     var handleOpenState = function (open) {
         setIsOpen(open);
@@ -51,12 +54,19 @@ var SwipeableTemporaryAvatar = function (props) {
             handleOpenState(open);
         };
     };
-    var _f = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _f[0], setAvatarInitials = _f[1];
+    var _g = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _g[0], setAvatarInitials = _g[1];
     useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
     var handleOnClickSwitchDirection = function () {
         setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl');
         avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection();
     };
+    // Add default helpful links below avatarPanelSettingItems,
+    // these can be toggled on/off with the avatarPanelShowHelpLinks prop
+    var defaultHelpLinks = [
+        { label: messages['help-center'], icon: _jsx(Help, {}), onClick: function () { return window.open('https://learningpool.zendesk.com', '_blank'); } },
+        { label: messages['feature-request'], icon: _jsx(Lightbulb, {}), onClick: function () { return window.open('https://app.smartsheet.com/b/form/823248624a324630a904e825098ca816', '_blank'); } },
+        { label: messages['contact-us'], icon: _jsx(Phone, {}), onClick: function () { return window.open('https://learningpool.com/support', '_blank'); } }
+    ];
     // Workaround to handle the react-spring calls without
     // adding additional hook calls on prop or state changes
     // --
@@ -71,7 +81,7 @@ var SwipeableTemporaryAvatar = function (props) {
         'avatarPanelOnClickMainAction',
         'mobileNavDirection'
     ];
-    var totalItems = __spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), additionalItems, true);
+    var totalItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), defaultHelpLinks !== null && defaultHelpLinks !== void 0 ? defaultHelpLinks : [], true), additionalItems, true);
     var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isAvatarOpen); }));
     return (_jsx(StyledSwipeableAvatar, __assign({ "data-id": dataIds.MobileNavAvatarPanel, anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
             keepMounted: true
@@ -118,7 +128,7 @@ var SwipeableTemporaryAvatar = function (props) {
                             component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
                                 handleOpenState(false);
                                 avatarPanelOnClickMainAction();
-                            } }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
+                            } }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2), marginTop: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
                                     avatarPanelSettingItems.length > 0 &&
                                     avatarPanelSettingItems.map(function (avatarMenuItem, index) {
                                         var _a;
@@ -134,7 +144,23 @@ var SwipeableTemporaryAvatar = function (props) {
                                                 } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                             minWidth: theme.spacing(5)
                                                         } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) })));
-                                    }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + 4], disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                    }), avatarPanelShowHelpLinks && defaultHelpLinks &&
+                                    defaultHelpLinks.length > 0 &&
+                                    defaultHelpLinks.map(function (avatarMenuItem, index) {
+                                        var _a, _b;
+                                        return (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + ((_b = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _b !== void 0 ? _b : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                            // TODO: figure out if these are links or buttons
+                                            // @ts-expect-error
+                                            , __assign({ 
+                                                // TODO: figure out if these are links or buttons
+                                                // @ts-expect-error
+                                                component: Link, role: 'link', onClick: function () {
+                                                    handleOpenState(false);
+                                                    avatarMenuItem.onClick();
+                                                } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                            minWidth: theme.spacing(5)
+                                                        } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) })));
+                                    }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: animated.div, style: __assign({ marginTop: avatarPanelShowHelpLinks ? theme.spacing(2) : 0 }, animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + ((_e = defaultHelpLinks === null || defaultHelpLinks === void 0 ? void 0 : defaultHelpLinks.length) !== null && _e !== void 0 ? _e : 0) + 4]), disablePadding: true }, { children: _jsxs(StyledListItemButton
                                     // TODO: figure out if these are links or buttons
                                     // @ts-expect-error
                                     , __assign({ 

package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts

@@ -1,36 +1,4 @@
 import React from 'react';
-import { IApplication, IAvatarMenuItemProps, IVerticalNavigationItemProps } from '../../../types';
-interface VerticalNavigationProps {
-    logo?: string;
-    logoText?: string;
-    logoOnClick?: any;
-    items?: IVerticalNavigationItemProps[];
-    secondaryItems?: IVerticalNavigationItemProps[];
-    hasStreamHome?: boolean;
-    streamHomeAccessToken?: string;
-    streamHomeBaseUrl?: string;
-    streamHomeApiKey?: string;
-    streamHomeApplications?: IApplication[];
-    avatarName?: string;
-    isDrawerOpen?: boolean;
-    isPersistent?: boolean;
-    setIsPersistent?: any;
-    appRootID?: string;
-    localization?: any;
-    dataAttributes?: any;
-    hasAvatar?: boolean;
-    avatarPanelLogoutString?: string;
-    avatarPanelOnClickSwitchDirection?: any;
-    avatarPanelOnClickLogout?: any;
-    avatarPanelOnClickViewProfile?: any;
-    avatarPanelViewProfileString?: string;
-    avatarPanelOnClickEditProfile?: any;
-    avatarPanelEditProfileString?: string;
-    avatarPanelMenuItems?: Array<IAvatarMenuItemProps>;
-    avatarPanelOnClickMainAction?: any;
-    avatarPanelMainActionString?: string;
-    avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
-    avatarPanelFootnote?: any;
-}
-declare const VerticalNavigation: (props: VerticalNavigationProps) => React.ReactElement;
+import { IVerticalNavigationProps } from '../../../types';
+declare const VerticalNavigation: (props: IVerticalNavigationProps) => React.ReactElement;
 export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js

@@ -26,21 +26,28 @@ import { useTheme } from '@mui/material/styles';
 import EditIcon from '@mui/icons-material/Edit';
 import LogoutIcon from '@mui/icons-material/Logout';
 import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
-import { Person, Settings } from '@mui/icons-material';
+import { Help, Lightbulb, Person, Phone, Settings } from '@mui/icons-material';
 import { animated } from '@react-spring/web';
 import { FlyoutMenuItemText } from './VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles';
 import { defaultMessages } from '../../../lang/en-us';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 var AvatarPanel = function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     var theme = useTheme();
-    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization, dataAttributes = props.dataAttributes;
+    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization, dataAttributes = props.dataAttributes, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks;
     var messages = __assign(__assign({}, defaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     useEffect(function () {
         setAvatarInitials(handleAvatarInitials(avatarName));
     }, [avatarName]);
-    var _e = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _e[0], setAvatarInitials = _e[1];
+    var _f = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _f[0], setAvatarInitials = _f[1];
+    // Add default helpful links below avatarPanelSettingItems,
+    // these can be toggled on/off with the avatarPanelShowHelpLinks prop
+    var defaultHelpLinks = [
+        { label: messages['help-center'], icon: _jsx(Help, {}), onClick: function () { return window.open('https://learningpool.zendesk.com/', '_blank'); } },
+        { label: messages['feature-request'], icon: _jsx(Lightbulb, {}), onClick: function () { return window.open('https://app.smartsheet.com/b/form/823248624a324630a904e825098ca816', '_blank'); } },
+        { label: messages['contact-us'], icon: _jsx(Phone, {}), onClick: function () { return window.open('https://learningpool.com/support/', '_blank'); } }
+    ];
     // Workaround to handle the react-spring calls without
     // adding additional hook calls on prop or state changes
     // --
@@ -55,7 +62,7 @@ var AvatarPanel = function (props) {
         'avatarPanelOnClickMainAction',
         'avatarPanelFootnote'
     ];
-    var totalItems = __spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), additionalItems, true);
+    var totalItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), defaultHelpLinks !== null && defaultHelpLinks !== void 0 ? defaultHelpLinks : [], true), additionalItems, true);
     var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isAvatarOpen); }));
     return (_jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(StyledButton
             // @ts-expect-error
@@ -82,19 +89,30 @@ var AvatarPanel = function (props) {
                     // @ts-expect-error
                     , __assign({ 
                         // @ts-expect-error
-                        component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
-                            avatarPanelSettingItems.length > 0 &&
-                            avatarPanelSettingItems.map(function (avatarMenuItem, index) {
-                                var _a;
-                                return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
-                                    // TODO: figure out if these are links or buttons
-                                    // @ts-expect-error
-                                    , __assign({ 
+                        component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: { marginBottom: theme.spacing(2), marginTop: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
+                                avatarPanelSettingItems.length > 0 &&
+                                avatarPanelSettingItems.map(function (avatarMenuItem, index) {
+                                    var _a;
+                                    return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
                                         // TODO: figure out if these are links or buttons
                                         // @ts-expect-error
-                                        component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
-                                                    minWidth: theme.spacing(5)
-                                                } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index)));
-                            }) }))] })), _jsx(Box, __assign({ "data-id": dataIds.VerticalNavigationFlyoutFootnote, className: 'avatar-panel-footnote', style: animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + 4] }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
+                                        , __assign({ 
+                                            // TODO: figure out if these are links or buttons
+                                            // @ts-expect-error
+                                            component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                        minWidth: theme.spacing(5)
+                                                    } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index)));
+                                }), avatarPanelShowHelpLinks && defaultHelpLinks &&
+                                defaultHelpLinks.length > 0 &&
+                                defaultHelpLinks.map(function (avatarMenuItem, index) {
+                                    var _a, _b;
+                                    return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + ((_b = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _b !== void 0 ? _b : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                        // @ts-expect-error
+                                        , __assign({ 
+                                            // @ts-expect-error
+                                            component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                        minWidth: theme.spacing(5)
+                                                    } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index)));
+                                })] }))] })), _jsx(Box, __assign({ "data-id": dataIds.VerticalNavigationFlyoutFootnote, className: 'avatar-panel-footnote', style: animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + ((_e = defaultHelpLinks === null || defaultHelpLinks === void 0 ? void 0 : defaultHelpLinks.length) !== null && _e !== void 0 ? _e : 0) + 4] }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
 };
 export default AvatarPanel;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js

@@ -100,11 +100,7 @@ var VerticalNavigationItem = function (props) {
                     ? null
                     : handlePopoverOpen(event); }, onMouseLeave: function () { return (hasCustomContent || fullHeightFlyout || isDrawerOpen)
                     ? null
-                    : handlePopoverClose(); }, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); }, "aria-current": isActive ? 'page' : null, "aria-expanded": (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? open : null, role: (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
-                            '& .MuiTypography-root': {
-                                fontSize: isSecondary ? '14px' : 'inherit'
-                            }
-                        } })] }), label), children && children.length > 0 && isDrawerOpen && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
+                    : handlePopoverClose(); }, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); }, "aria-current": isActive ? 'page' : null, "aria-expanded": (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? open : null, role: (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index })] }), label), children && children.length > 0 && isDrawerOpen && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -35,7 +35,7 @@ export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __m
 export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"])), function (props) { return getNavigationBackground(props.theme); });
 export var StyledDivider = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: \"\";\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all ", "ms ", ";\n    width: 66%;\n  }\n"], ["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: \"\";\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all ", "ms ", ";\n    width: 66%;\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: \"\";\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all ", "ms ", ";\n    width: 66%;\n  }\n"], ["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: \"\";\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all ", "ms ", ";\n    width: 66%;\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.05); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
 export var DrawerShadow = styled(Box, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
 })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, 0.125);\n  content: \"\";\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  position: fixed;\n  top: 0;\n  transition-duration: ", "ms;\n  transition-property: left right;\n  transition-timing-function: ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n    right: ", ";\n  }\n"], ["\n  background: rgba(0, 0, 0, 0.125);\n  content: \"\";\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  position: fixed;\n  top: 0;\n  transition-duration: ", "ms;\n  transition-property: left right;\n  transition-timing-function: ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n    right: ", ";\n  }\n"])), function (props) { return props.theme.direction === 'ltr'
@@ -53,5 +53,5 @@ export var NotchBackgroundClip = styled(Box)(templateObject_11 || (templateObjec
 export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -2px;\n  width: calc(100% - ", "px);\n"], ["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -2px;\n  width: calc(100% - ", "px);\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'rtl' ? "".concat(NOTCH.Width, "px") : 'auto'; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(NOTCH.Width, "px") : 'auto'; }, NOTCH.Width);
 export var StyledDrawer = styled(Drawer, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width ", "ms ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width ", "ms ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width ", "ms ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width ", "ms ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return (props.theme.direction === 'ltr' ? 0 : 'auto'); }, function (props) { return (props.theme.direction === 'rtl' ? 0 : 'auto'); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width ", "ms ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width ", "ms ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n\n  .MuiTypography-root {\n    color: inherit;\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width ", "ms ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width ", "ms ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n\n  .MuiTypography-root {\n    color: inherit;\n  }\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return (props.theme.direction === 'ltr' ? 0 : 'auto'); }, function (props) { return (props.theme.direction === 'rtl' ? 0 : 'auto'); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/lang/en-us.d.ts

@@ -20,4 +20,7 @@ export const defaultMessages: {
     logout: string;
     'view-profile': string;
     'edit-profile': string;
+    'help-center': string;
+    'feature-request': string;
+    'contact-us': string;
 };

package/lang/en-us.js

@@ -22,5 +22,8 @@ export var defaultMessages = {
     greeting: 'Hi',
     logout: 'Logout',
     'view-profile': 'View Profile',
-    'edit-profile': 'Edit Profile'
+    'edit-profile': 'Edit Profile',
+    'help-center': 'Help Centre',
+    'feature-request': 'Feature Request',
+    'contact-us': 'Contact Us'
 };

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.9.0",
+  "version": "1.10.1",
   "private": false,
   "main": "index.js",
   "module": "index.js",

package/types/components/navigation/VerticalNavigation.d.ts

@@ -33,6 +33,8 @@ export interface IVerticalNavigationProps {
     isPersistent?: boolean;
     setIsPersistent?: any;
     appRootID?: string;
+    localization?: any;
+    dataAttributes?: any;
     hasAvatar?: boolean;
     avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
@@ -46,4 +48,5 @@ export interface IVerticalNavigationProps {
     avatarPanelMainActionString?: string;
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
     avatarPanelFootnote?: any;
+    avatarPanelShowHelpLinks?: boolean;
 }

package/types/components/navigation/VerticalNavigationAvatar.d.ts

@@ -22,4 +22,5 @@ export interface IAvatarPanelProps {
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
     avatarPanelInvertNavString?: string;
     avatarPanelFootnote?: any;
+    avatarPanelShowHelpLinks?: boolean;
 }