@learningpool/ui 1.9.0 → 1.10.0

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/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.0",
   "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;
 }