@learningpool/ui 1.17.3 → 1.18.1

package/components/datadisplay/WelcomeBanner/WelcomeBanner.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface IBannerProps {
+    welcomeMessage: string;
+    userName: string;
+    userOrganization: string;
+}
+export default function WelcomeBanner({ welcomeMessage, userName, userOrganization }: IBannerProps): JSX.Element;
+export {};

package/components/datadisplay/WelcomeBanner/WelcomeBanner.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Tooltip } from '../../../';
+import { StyledBannerWrapper, StyledWavingHandIcon, StyledWelcomeMessage, StyledOrganizationChip } from './WelcomeBannerStyles';
+import { useMediaQuery } from '@mui/material';
+export default function WelcomeBanner({ welcomeMessage, userName, userOrganization }) {
+    const isMobileView = useMediaQuery('(max-width:768px)');
+    return (_jsxs(StyledBannerWrapper, { component: 'div', children: [_jsx(StyledWavingHandIcon, {}), _jsx(StyledWelcomeMessage, { children: `${welcomeMessage} - ${userName}` }), userOrganization &&
+                _jsx(Tooltip, { title: userOrganization, disableFocusListener: true, disableHoverListener: !isMobileView, children: _jsx(StyledOrganizationChip, { label: userOrganization, sx: { maxWidth: isMobileView ? '150px' : null } }) })] }));
+}

package/components/datadisplay/WelcomeBanner/WelcomeBannerStyles.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+export declare const StyledBannerWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledWavingHandIcon: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
+    color?: "inherit" | "action" | "disabled" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
+    fontSize?: "small" | "inherit" | "large" | "medium" | undefined;
+    htmlColor?: string | undefined;
+    inheritViewBox?: boolean | undefined;
+    shapeRendering?: string | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    titleAccess?: string | undefined;
+    viewBox?: string | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledWelcomeMessage: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledOrganizationChip: import("@emotion/styled").StyledComponent<{
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material/Chip").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: "default" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: "small" | "medium" | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "outlined" | "filled" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/datadisplay/WelcomeBanner/WelcomeBannerStyles.js

@@ -0,0 +1,25 @@
+import MUIChip from '@mui/material/Chip';
+import WavingHandIcon from '@mui/icons-material/WavingHand';
+import { styled } from '@mui/material/styles';
+import { Box, Typography } from '../../../';
+export const StyledBannerWrapper = styled(Box) `
+  align-items: center;
+  column-gap: 16px;
+  display: flex;
+  flex-flow: row wrap;
+  position: relative;
+`;
+export const StyledWavingHandIcon = styled(WavingHandIcon) `
+  color: orange;
+  margin-right: 0.5rem;
+`;
+export const StyledWelcomeMessage = styled(Typography) `
+  font-weight: 500;
+  line-height: 1.2;
+`;
+export const StyledOrganizationChip = styled(MUIChip) `
+  margin-left: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

package/components/stream/AppHub/AppHub.js

@@ -2,32 +2,58 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { defaultMessages } from '../../../lang/en-us';
 import AppHubItem from './AppHubProduct';
 import AppHubCustom from './AppHubCustom';
-import { AppHubPanel, AppHubTitle, AppHubHeader, AppHubRow } from './AppHubStyles';
+import { AppHubPanel, AppHubTitle, AppHubHeader, AppHubRow, ManageLinksHeader, StyledSettingsIcon } from './AppHubStyles';
 import Grid from '@mui/material/Unstable_Grid2';
+import Link from '@mui/material/Link';
 import { Constants } from './constants';
 import { renderBannerAdvertRow } from './AppHubBannerAdvert';
+import WelcomeBanner from '../../datadisplay/WelcomeBanner/WelcomeBanner';
+import { handleHubTracking } from '../../../utils/helpers';
+import { HubEventTypeID } from '../../../utils/Enums/HubEventTypes.enum';
 const AppHub = (props) => {
-    const { isPageLayout, localization, customLinkBgColor, data } = props;
+    const { data, isPageLayout, localization, customLinkBgColor, isAppSwitcher, userName, userOrganization, hasPromotionalCampaigns, hubApiKey, hubToken } = props;
     const messages = { ...defaultMessages, ...localization };
+    const manageLinkButton = {
+        url: `${window.location.origin}/links`,
+        title: messages['manage-links'],
+        hubReferenceId: 'manage',
+        hubEventTypeId: HubEventTypeID.ACCESSED
+    };
+    const gridSpacing = isAppSwitcher
+        ? { columns: { xs: 8 } }
+        : { columns: { xs: 12 } };
     const renderRow = (rowData, rowIndex) => {
-        const { type, items, title, addButton } = rowData;
+        const { type, items, title, allowEditLinks } = rowData;
         switch (type) {
             case Constants.DataRowType.BannerAdvert: {
+                // Potentially remove this
+                if (isAppSwitcher) {
+                    return;
+                }
+                rowData.welcomeMessage = messages['stream-hub-welcome'];
+                rowData.userName = userName;
+                rowData.userOrganization = userOrganization;
                 return (renderBannerAdvertRow(rowData, rowIndex));
             }
             case Constants.DataRowType.Product: {
-                return (_jsxs(AppHubRow, { children: [title && _jsx(AppHubHeader
-                        // @ts-ignore
-                        , { 
-                            // @ts-ignore
-                            component: isPageLayout ? 'h2' : 'div', children: title }), _jsx(Grid, { container: true, spacing: { xs: 2, md: 3 }, rowSpacing: { xs: 3, md: 4 }, columns: { xs: 12 }, children: items.map(({ subtitle, shortName, internalName, url, children, ...rest }, index) => (_jsxs(Grid, { xs: 12, sm: 6, md: 4, children: [url && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, url: url, ...rest })), children && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, options: children }))] }, `${shortName}_${rowIndex}_${index}`))) })] }, `row_${rowIndex}`));
+                return (_jsxs(AppHubRow, { children: [(title && !isAppSwitcher) && _jsx(AppHubHeader, { component: isPageLayout ? 'h2' : 'div', children: title }), _jsx(Grid, { container: true, spacing: { xs: 2, md: 3 }, rowSpacing: { xs: 3, md: 4 }, columns: gridSpacing.columns, children: items.map(({ subtitle, shortName, internalName, url, children, hubEventTypeId, hubReferenceId, ...rest }, index) => {
+                                if (!url && !children) {
+                                    return null;
+                                }
+                                return (_jsxs(Grid, { xs: 12, sm: 6, md: 4, children: [url && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, url: url, isAppSwitcher: isAppSwitcher, hubEventTypeId: hubEventTypeId, hubReferenceId: hubReferenceId, hubApiKey: hubApiKey, hubToken: hubToken, ...rest })), children && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, options: children, isAppSwitcher: isAppSwitcher, hubEventTypeId: hubEventTypeId, hubReferenceId: hubReferenceId, hubApiKey: hubApiKey, hubToken: hubToken, ...rest }))] }, `${shortName}_${rowIndex}_${index}`));
+                            }) })] }, `row_${rowIndex}`));
             }
             case Constants.DataRowType.CustomLink: {
-                return (_jsxs(AppHubRow, { children: [title && _jsx(AppHubHeader
-                        // @ts-ignore
-                        , { 
-                            // @ts-ignore
-                            component: isPageLayout ? 'h2' : 'div', children: title }), _jsxs(Grid, { container: true, spacing: { xs: 2, md: 3 }, children: [addButton && addButton.order === Constants.AddButtonOrder.Start && (_jsx(Grid, { xs: 6, sm: 4, md: 2, children: _jsx(AppHubCustom, { isAddButton: true, name: addButton.title ?? messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) })), items.map(({ name, url, icon }, index) => (_jsx(Grid, { xs: 6, sm: 4, md: 2, children: url && (_jsx(AppHubCustom, { name: name, customLinkBgColor: customLinkBgColor, url: url, icon: icon })) }, `${name}_${rowIndex}_${index}`))), addButton && addButton.order === Constants.AddButtonOrder.End && (_jsx(Grid, { xs: 6, sm: 4, md: 2, children: _jsx(AppHubCustom, { isAddButton: true, name: addButton.title ?? messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) }))] })] }, `row_${rowIndex}`));
+                return (_jsxs(AppHubRow, { children: [title &&
+                            _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { xs: 10, children: _jsx(AppHubHeader, { component: isPageLayout ? 'h2' : 'div', children: title }) }), (allowEditLinks && !isAppSwitcher) &&
+                                        _jsx(Grid, { xs: 2, children: _jsx(Link, { href: manageLinkButton.url, "data-testid": manageLinkButton.hubReferenceId, onClick: () => handleHubTracking({
+                                                    apiKey: hubApiKey,
+                                                    token: hubToken,
+                                                    isAppSwitcher,
+                                                    eventTypeId: manageLinkButton.hubEventTypeId,
+                                                    referenceId: manageLinkButton.hubReferenceId,
+                                                    url: manageLinkButton.url
+                                                }), children: _jsxs(ManageLinksHeader, { component: isPageLayout ? 'h2' : 'div', children: [_jsx(StyledSettingsIcon, {}), manageLinkButton.title] }) }) })] }), _jsx(Grid, { container: true, spacing: { xs: 2, md: 3 }, columns: gridSpacing.columns, children: items.map(({ name, url, icon, hubEventTypeId, hubReferenceId, ...rest }, index) => (_jsx(Grid, { xs: 12, sm: 6, md: 4, ...rest, children: url && (_jsx(AppHubCustom, { name: name, customLinkBgColor: customLinkBgColor, url: url, icon: icon, isAppSwitcher: isAppSwitcher, hubEventTypeId: hubEventTypeId, hubReferenceId: hubReferenceId, hubApiKey: hubApiKey, hubToken: hubToken, ...rest })) }, `${name}_${rowIndex}_${index}`))) })] }, `row_${rowIndex}`));
             }
             default: {
                 console.log('no items');
@@ -39,10 +65,7 @@ const AppHub = (props) => {
         console.log('No data available');
         return null;
     }
-    return (_jsxs(AppHubPanel, { role: isPageLayout ? 'main' : '', children: [_jsx(AppHubTitle
-            // @ts-ignore
-            , { 
-                // @ts-ignore
-                component: isPageLayout ? 'h1' : 'div', children: messages['stream-hub-welcome'] }), data && data.map((row, rowIndex) => renderRow(row, rowIndex))] }));
+    return (_jsxs(AppHubPanel, { role: isPageLayout ? 'main' : '', children: [!hasPromotionalCampaigns &&
+                _jsx(AppHubTitle, { component: isPageLayout ? 'h1' : 'div', children: _jsx(WelcomeBanner, { welcomeMessage: messages['stream-hub-welcome'], userName: userName, userOrganization: userOrganization }) }), data && data.map((row, rowIndex) => renderRow(row, rowIndex))] }));
 };
 export default AppHub;

package/components/stream/AppHub/AppHubBannerAdvert.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useState } from 'react';
-import { AppHubRow } from './AppHubStyles';
+import { AppHubRow, AppHubTitle } from './AppHubStyles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { StyledAdvertPaper, StyledAdvertLink, StyledAdvertImage } from './AppHubAdvertStyles';
 import { defaultMessages } from '../../../lang/en-us';
+import WelcomeBanner from '../../datadisplay/WelcomeBanner/WelcomeBanner';
 const addUtmParams = (baseUrl, source, medium, campaign) => {
     try {
         const url = new URL(baseUrl);
@@ -18,7 +19,7 @@ const addUtmParams = (baseUrl, source, medium, campaign) => {
     }
 };
 export const renderBannerAdvertRow = (rowData, rowIndex) => {
-    const { items } = rowData;
+    const { items, welcomeMessage, userName, userOrganization } = rowData;
     const [hasValidImage, setHasValidImage] = useState(true);
     const handleImageError = () => {
         setHasValidImage(false);
@@ -26,5 +27,5 @@ export const renderBannerAdvertRow = (rowData, rowIndex) => {
     const validItems = items.filter((item) => item.hubImageUrl && item.basePromoUrl);
     if (!hasValidImage || validItems.length === 0)
         return null;
-    return (_jsx(AppHubRow, { children: _jsx(Grid, { container: true, spacing: 2, children: validItems.map((item, index) => (_jsx(Grid, { xs: 12, children: _jsx(StyledAdvertPaper, { elevation: 0, children: _jsx(StyledAdvertLink, { href: addUtmParams(item.basePromoUrl, 'hub', 'hub_dashboard_banner_advert', item.name), target: "_blank", children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText || defaultMessages['banner-image-alt-text'], onError: handleImageError }) }) }) }, index))) }) }, `row_${rowIndex}`));
+    return (_jsx(AppHubRow, { children: _jsxs(Grid, { container: true, spacing: 2, children: [validItems.map((item, index) => (_jsx(Grid, { xs: 12, children: _jsx(StyledAdvertPaper, { elevation: 0, children: _jsx(StyledAdvertLink, { href: addUtmParams(item.basePromoUrl, 'hub', 'hub_dashboard_banner_advert', item.name), target: "_blank", children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText || defaultMessages['banner-image-alt-text'], onError: handleImageError }) }) }) }, index))), _jsx(AppHubTitle, { component: 'h1', style: { marginTop: '2rem' }, children: _jsx(WelcomeBanner, { welcomeMessage: welcomeMessage, userName: userName, userOrganization: userOrganization }) })] }) }, `row_${rowIndex}`));
 };

package/components/stream/AppHub/AppHubCustom.d.ts

@@ -1,16 +1,21 @@
 import { ReactElement } from 'react';
-export declare const LogoVariants: {
-    Default: string;
-    Solid: string;
-    Outlined: string;
-    White: string;
-};
 interface IAppHubCustomProps {
     name: string;
     url: string;
     isAddButton?: boolean;
     customLinkBgColor?: string;
     icon?: any;
+    hubEventTypeId: string;
+    hubReferenceId: string;
+    isAppSwitcher: boolean;
+    hubApiKey: string;
+    hubToken: string;
 }
+export declare const LogoVariants: {
+    Default: string;
+    Solid: string;
+    Outlined: string;
+    White: string;
+};
 declare const AppHubCustom: (props: IAppHubCustomProps) => ReactElement;
 export default AppHubCustom;

package/components/stream/AppHub/AppHubCustom.js

@@ -1,6 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { StyledPaper, StyledBoxWrap, StyledTypography, StyledAvatar, StyledLink, StyledAddCircleOutlineIcon } from './AppHubCustomStyles';
-import { handleAvatarInitials } from '../../../utils/helpers';
+import { StyledPaper } from './AppHubProductStyles';
+import { StyledBoxWrap, StyledTypography, StyledLink } from './AppHubCustomStyles';
+import { handleHubTracking } from '../../../utils/helpers';
+// Link Icons
+import LinkIcon from '@mui/icons-material/Link';
+import SchoolIcon from '@mui/icons-material/School';
+import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import AutoStoriesIcon from '@mui/icons-material/AutoStories';
+import CoPresentIcon from '@mui/icons-material/CoPresent';
+import PreviewIcon from '@mui/icons-material/Preview';
 // Bug in the naming of the icons on the CDN
 export const LogoVariants = {
     Default: 'icon',
@@ -8,13 +17,43 @@ export const LogoVariants = {
     Outlined: 'icon-outlined',
     White: 'icon-white'
 };
+/**
+ * Renders icon according to given name.
+ * @param {string} name - Link name.
+ * @returns {ReactElement | null } MUI Icon.
+ */
+const getLinkIcon = (name) => {
+    const style = { margin: '0.2rem 1rem 0 1rem' };
+    switch (name) {
+        case 'Academy':
+            return _jsx(SchoolIcon, { style: style });
+        case 'Contact Us':
+            return _jsx(LocalPhoneIcon, { style: style });
+        case 'Customer Portal':
+            return _jsx(CoPresentIcon, { style: style });
+        case 'Product Roadmaps':
+            return _jsx(TrendingUpIcon, { style: style });
+        case 'Release Notes':
+            return _jsx(AutoStoriesIcon, { style: style });
+        case 'Showcase':
+            return _jsx(PreviewIcon, { style: style });
+        default: return _jsx(LinkIcon, { style: style });
+    }
+};
 const AppHubCustom = (props) => {
-    const { name, url, isAddButton, customLinkBgColor, icon } = props;
-    const addIcon = icon ?? _jsx(StyledAddCircleOutlineIcon, {});
-    return (_jsx(StyledPaper, { elevation: 0, children: _jsx(StyledLink, { href: url, target: !isAddButton ? '_blank' : '_self', underline: 'none', children: _jsxs(StyledBoxWrap, { children: [!isAddButton && (_jsx(StyledAvatar, { children: icon ?? (name ? handleAvatarInitials(name) : null), customLinkBgColor: customLinkBgColor })), isAddButton && addIcon, _jsx(StyledTypography
+    const { name, url, customLinkBgColor, icon, isAppSwitcher, hubApiKey, hubToken, hubEventTypeId, hubReferenceId, ...rest } = props;
+    const linkIcon = getLinkIcon(name);
+    return (_jsx(StyledPaper, { elevation: 0, ...rest, children: _jsx(StyledLink, { href: url, target: '_blank', underline: 'none', onClick: () => handleHubTracking({
+                apiKey: hubApiKey,
+                token: hubToken,
+                eventTypeId: hubEventTypeId,
+                referenceId: hubReferenceId,
+                url,
+                isAppSwitcher
+            }), ...rest, children: _jsxs(StyledBoxWrap, { children: [linkIcon, _jsx(StyledTypography
                     // @ts-ignore
                     , { 
                         // @ts-ignore
-                        component: 'div', children: name })] }) }) }));
+                        component: 'div', ...rest, children: name })] }) }) }));
 };
 export default AppHubCustom;

package/components/stream/AppHub/AppHubCustomStyles.js

@@ -32,11 +32,10 @@ export const StyledPaper = styled(Paper) `
 `;
 export const StyledBoxWrap = styled(Box) `
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
+  justify-content: start;
   padding: .5rem;
-  text-align: center;
 `;
 export const StyledLink = styled(Link) `
   height: 100%;
@@ -76,15 +75,22 @@ export const StyledAddCircleOutlineIcon = styled(AddCircleOutlineIcon) `
 `;
 export const StyledTypography = styled(Typography) `
   color: ${props => props.theme.palette.text.primary};
+  display: flex;
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.3;
-  margin-top: .5rem;
+  margin-top: .2rem;
 
-  /* Truncate text to 2 lines */
+  /* Truncate text to 1 line */
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
+
+  &:hover {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
 `;

package/components/stream/AppHub/AppHubProduct.d.ts

@@ -4,6 +4,7 @@ export declare const LogoVariants: {
     Solid: string;
     Outlined: string;
     White: string;
+    NoneOutlined: string;
 };
 interface IAppHubItemProps {
     internalName: string;
@@ -13,6 +14,11 @@ interface IAppHubItemProps {
     options?: any;
     url?: string;
     localization?: any;
+    hubEventTypeId: string | number;
+    hubReferenceId: string;
+    isAppSwitcher: boolean;
+    hubApiKey: string;
+    hubToken: string;
 }
 declare const AppHubItem: (props: IAppHubItemProps) => ReactElement;
 export default AppHubItem;

package/components/stream/AppHub/AppHubProduct.js

@@ -1,17 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { ListItemButton, Link, TextField, Tooltip } from '../../../index';
+import { ListItemButton, TextField, Tooltip } from '../../../index';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { visuallyHidden } from '@mui/utils';
 import { Constants } from './constants';
 import { defaultMessages } from '../../../lang/en-us';
-import { StyledPaper, StyledBoxWrap, StyledBoxText, StyledAutocomplete, StyledTypography, StyledTypographySubtitle, StyledButton } from './AppHubProductStyles';
+import { StyledPaper, StyledBoxWrap, StyledBoxText, StyledAutocomplete, StyledTypography, StyledTypographySubtitle, StyledLink } from './AppHubProductStyles';
+import { handleHubTracking } from '../../../utils/helpers';
 import { useTheme } from '@mui/material';
 // Bug in the naming of the icons on the CDN
 export const LogoVariants = {
     Default: 'icon',
     Solid: 'icon-solid',
     Outlined: 'icon-outlined',
-    White: 'icon-white'
+    White: 'icon-white',
+    NoneOutlined: 'icon-none-outlined'
 };
 /**
  * Renders an application logo.
@@ -23,37 +25,52 @@ const renderApplicationLogo = (internalName, logoVariant) => {
         return _jsx(_Fragment, {});
     }
     const urlToIcon = `${Constants.AssetsUrl}${internalName}/logo/latest/${logoVariant ?? LogoVariants.Default}.svg`;
-    return (_jsx("img", { src: urlToIcon, width: "90", height: "90", alt: internalName ?? '' }));
+    return (_jsx("img", { src: urlToIcon, width: "30", height: "30", alt: internalName ?? '' }));
 };
 const AppHubItem = (props) => {
-    const { internalName, shortName, customName, url, subtitle, localization, options, ...rest } = props;
+    const { internalName, shortName, customName, url, subtitle, localization, options, isAppSwitcher, hubEventTypeId, hubReferenceId, hubApiKey, hubToken } = props;
     const initialOptions = { ...options };
-    const solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid);
+    const solidLogo = renderApplicationLogo(internalName, LogoVariants.NoneOutlined);
     const messages = { ...defaultMessages, ...localization };
-    return (_jsx(StyledPaper, { elevation: 0, children: _jsxs(StyledBoxWrap, { children: [solidLogo, _jsxs(StyledBoxText, { children: [subtitle && (_jsx(StyledTypographySubtitle
-                        // @ts-ignore
-                        , { 
-                            // @ts-ignore
-                            component: 'div', children: subtitle })), _jsx(Tooltip, { placement: 'top', title: customName ?? shortName, children: _jsx(StyledTypography
-                            // @ts-ignore
-                            , { 
+    return (_jsx(StyledPaper, { elevation: 0, children: _jsx(StyledLink, { href: url, target: '_blank', underline: 'none', onClick: () => !options
+                ? handleHubTracking({
+                    apiKey: hubApiKey,
+                    token: hubToken,
+                    eventTypeId: hubEventTypeId,
+                    referenceId: hubReferenceId,
+                    url: url,
+                    isAppSwitcher
+                })
+                : null, children: _jsxs(StyledBoxWrap, { children: [_jsxs("div", { style: { display: 'flex' }, children: [solidLogo, options && options.length > 0 && (_jsx(StyledAutocomplete, { disablePortal: true, size: 'small', options: options.map((option) => option.applicationName), 
+                                // TODO: Add link, icon and screen reader text here:
+                                renderOption: (option) => {
+                                    // Autocomplete only uses applicationName and we need more properties
+                                    // Careful of this if we do any sorting or grouping in future
+                                    // @ts-ignore
+                                    const index = option['data-option-index'];
+                                    const optionItem = initialOptions[index];
+                                    const handleClick = (event) => {
+                                        optionItem.onClick && optionItem.onClick(event);
+                                        handleHubTracking({
+                                            apiKey: hubApiKey,
+                                            token: hubToken,
+                                            eventTypeId: hubEventTypeId,
+                                            referenceId: hubReferenceId,
+                                            url: url,
+                                            isAppSwitcher
+                                        });
+                                    };
+                                    return (_jsxs(ListItemButton, { onClick: event => {
+                                            handleClick(event);
+                                        }, children: [option.key, _jsx(LaunchIcon, { sx: { marginInlineStart: '1rem', transform: useTheme().direction === 'rtl' ? 'scaleX(-1)' : 'none' } }), _jsxs("span", { style: visuallyHidden, children: [", ", messages['open-in-new-window']] })] }, `${option.key}_${option.id}`));
+                                }, renderInput: (params) => _jsx(TextField, { ...params, placeholder: messages['select-org'] }) }))] }), _jsxs(StyledBoxText, { children: [_jsx(Tooltip, { placement: 'top', title: customName ?? shortName, children: _jsx(StyledTypography
                                 // @ts-ignore
-                                component: 'div', className: 'appHubCardTitle', children: customName ?? shortName }) }), url && (_jsxs(StyledButton, { href: url, 
+                                , { 
+                                    // @ts-ignore
+                                    component: 'div', className: 'appHubCardTitle', children: customName ?? shortName }) }), subtitle && (_jsx(StyledTypographySubtitle
                             // @ts-ignore
-                            component: Link, 
-                            // @ts-ignore
-                            target: '_blank', variant: 'outlined', ...rest, children: [messages.open, _jsxs("span", { style: visuallyHidden, children: [", ", messages['open-in-new-window']] })] })), options && options.length > 0 && (_jsx(StyledAutocomplete, { disablePortal: true, size: 'small', options: options.map((option) => option.applicationName), 
-                            // TODO: Add link, icon and screen reader text here:
-                            renderOption: (option) => {
-                                // Autocomplete only uses applicationName and we need more properties
-                                // Careful of this if we do any sorting or grouping in future
+                            , { 
                                 // @ts-ignore
-                                const index = option['data-option-index'];
-                                const optionItem = initialOptions[index];
-                                const handleClick = (event) => {
-                                    optionItem.onClick && optionItem.onClick(event);
-                                };
-                                return (_jsxs(ListItemButton, { onClick: event => handleClick(event), children: [option.key, _jsx(LaunchIcon, { sx: { marginInlineStart: '1rem', transform: useTheme().direction === 'rtl' ? 'scaleX(-1)' : 'none' } }), _jsxs("span", { style: visuallyHidden, children: [", ", messages['open-in-new-window']] })] }, `${option.key}_${option.id}`));
-                            }, renderInput: (params) => _jsx(TextField, { ...params, placeholder: messages['select-org'] }) }))] })] }) }));
+                                component: 'div', children: subtitle }))] })] }) }) }));
 };
 export default AppHubItem;

package/components/stream/AppHub/AppHubProductStyles.d.ts

@@ -85,3 +85,14 @@ export declare const StyledButton: import("@emotion/styled").StyledComponent<Omi
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon">, "ref"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledAutocomplete: import("@emotion/styled").StyledComponent<import("@mui/material").AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, "div"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledLink: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").LinkBaseProps, "classes"> & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").LinkClasses> | undefined;
+    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<readonly string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material/styles").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<readonly string[] | import("csstype").Property.Color | undefined>);
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    TypographyClasses?: (Partial<import("@mui/material").TypographyClasses> & Partial<import("@mui/material/styles").ClassNameMap<never>>) | undefined;
+    underline?: "none" | "always" | "hover" | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "href" | "type" | "download" | "hrefLang" | "media" | "ping" | "target" | "referrerPolicy" | "align" | "underline" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/stream/AppHub/AppHubProductStyles.js

@@ -1,13 +1,14 @@
 import { styled } from '@mui/material/styles';
-import { Paper, Box, Typography, Autocomplete, Button } from '../../../index';
+import { Paper, Box, Typography, Autocomplete, Button, Link } from '../../../index';
 export const StyledPaper = styled(Paper) `
   width: 100%;
   height: 100%;
+  max-height: 250px;
   background: transparent;
-  box-shadow: 0 0 0 1px ${props => props.theme.palette.mode === 'dark'
+  box-shadow: 0 0 0 2px ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(255,255,255,.1)'
     : '#ddd'};
-  border-radius: 10px;
+  border-radius: 5px;
   border: none;
   transition: all 180ms ease;
 
@@ -22,23 +23,22 @@ export const StyledPaper = styled(Paper) `
   }
 `;
 export const StyledBoxWrap = styled(Box) `
-  display: flex;
   flex-direction: row;
-  padding: .5rem;
+  padding: 1rem;
 `;
 export const StyledBoxText = styled(Box) `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
-  margin-inline-start: 1rem;
+  margin-top: 1rem;
   width: 100%;
 `;
 export const StyledTypography = styled(Typography) `
   color: ${props => props.theme.palette.text.primary};
   font-size: 1rem;
   font-weight: 500;
-  line-height: 1.3;
+  line-height: 1.5;
 
   /* Truncate text to 2 lines */
   overflow: hidden;
@@ -51,7 +51,16 @@ export const StyledTypographySubtitle = styled(Typography) `
   color: ${props => props.theme.palette.text.secondary};
   font-size: .85rem;
   font-weight: 400;
-  line-height: 1.3;
+  line-height: 1.5;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  /* Truncate text to 4 lines */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
 `;
 export const StyledButton = styled(Button) `
   background: ${props => props.theme.palette.mode === 'dark'
@@ -72,7 +81,8 @@ export const StyledButton = styled(Button) `
   }
 `;
 export const StyledAutocomplete = styled(Autocomplete) `
-  width: 100%;
+  margin-left: 1rem;
+  width: 75%;
 
   .MuiInputBase-root {
     background: ${props => props.theme.palette.mode === 'dark'
@@ -111,3 +121,16 @@ export const StyledAutocomplete = styled(Autocomplete) `
     : props.theme.palette.primary.main};
   }
 `;
+export const StyledLink = styled(Link) `
+  height: 100%;
+  display: block;
+  border-radius: 10px;
+  box-shadow: 0 0 0 0 transparent;
+  transition: all 180ms ease;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255,255,255,.5)'
+    : props.theme.palette.primary.main};
+  }
+`;

package/components/stream/AppHub/AppHubStyles.d.ts

@@ -8,32 +8,9 @@ export declare const AppHubRow: import("@emotion/styled").StyledComponent<import
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const AppHubTitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const AppHubHeader: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const AppHubTitle: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TypographyTypeMap<{}, "span">>;
+export declare const AppHubHeader: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TypographyTypeMap<{}, "span">>;
+export declare const ManageLinksHeader: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TypographyTypeMap<{}, "span">>;
 export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").PaperClasses> | undefined;
@@ -52,3 +29,17 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledSettingsIcon: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
+    color?: "inherit" | "action" | "disabled" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
+    fontSize?: "small" | "inherit" | "large" | "medium" | undefined;
+    htmlColor?: string | undefined;
+    inheritViewBox?: boolean | undefined;
+    shapeRendering?: string | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    titleAccess?: string | undefined;
+    viewBox?: string | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/stream/AppHub/AppHubStyles.js

@@ -1,15 +1,16 @@
 import { styled } from '@mui/material/styles';
 import { Paper, Box, Typography } from '../../../index';
+import { Settings as SettingsIcon } from '@mui/icons-material';
 export const AppHubPanel = styled('div') `
   padding: 1rem;
   max-width: 1000px;
 `;
 export const AppHubRow = styled(Box) `
-  margin: 2rem 0 0;
+  margin: 2rem 0 0 2rem;
 `;
 export const AppHubTitle = styled(Typography) `
   font-size: 2rem;
-  font-weight: 700;
+  font-weight: 500;
   line-height: 1.3;
   color: ${props => props.theme.palette.text.primary};
   margin-bottom: 0.5rem;
@@ -20,6 +21,18 @@ export const AppHubHeader = styled(Typography) `
   color: ${props => props.theme.palette.text.secondary};
   margin: 0 0 1rem;
 `;
+export const ManageLinksHeader = styled(Typography) `
+  display: flex;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #013366;
+  margin: 0 0 1rem;
+
+  svg {
+    color: #013366;
+    margin-right: 5px;
+  }
+`;
 export const StyledPaper = styled(Paper) `
   display: flex;
   flex-direction: row;
@@ -31,3 +44,8 @@ export const StyledBox = styled(Box) `
   display: flex;
   flex-direction: column;
 `;
+export const StyledSettingsIcon = styled(SettingsIcon) `
+width: 20px;
+height: auto;
+color: #013366;
+`;

package/components/stream/AppHub/constants.d.ts

@@ -16,24 +16,23 @@ export declare const hubApplications: ({
     shortName: string;
     internalName: string;
     url: string;
+    productDescription: string;
     children?: undefined;
     customName?: undefined;
-    subtitle?: undefined;
 } | {
     applicationId: number;
     applicationName: string;
     shortName: string;
     internalName: string;
+    productDescription: string;
     children: {
-        applicationId: number;
         applicationName: string;
-        shortName: string;
-        internalName: string;
-        onClick: () => Window | null;
+        name: string;
+        url: string;
+        onClick: () => void;
     }[];
     url?: undefined;
     customName?: undefined;
-    subtitle?: undefined;
 } | {
     applicationId: number;
     applicationName: string;
@@ -41,50 +40,55 @@ export declare const hubApplications: ({
     internalName: string;
     customName: string;
     url: string;
+    productDescription: string;
     children?: undefined;
-    subtitle?: undefined;
 } | {
     applicationId: number;
     applicationName: string;
     shortName: string;
     internalName: string;
     customName: string;
+    productDescription: string;
     children: {
-        applicationId: number;
         applicationName: string;
-        shortName: string;
-        internalName: string;
-        customName: string;
-        onClick: () => Window | null;
+        name: string;
+        url: string;
+        onClick: () => void;
     }[];
     url?: undefined;
-    subtitle?: undefined;
-} | {
+})[];
+export declare const otherProducts: {
     applicationId: number;
-    applicationName: string;
+    name: string;
     shortName: string;
     internalName: string;
-    customName: string;
-    subtitle: string;
     url: string;
-    children?: undefined;
-})[];
-export declare const hubCustomLinks: ({
-    name: string;
-    url: string;
-    customLinkBgColor?: undefined;
-} | {
+    customName: null;
+    subtitle: string;
+}[];
+export declare const hubCustomLinks: {
     name: string;
     url: string;
-    customLinkBgColor: string;
-})[];
-export declare const hubSupportItems: {
+    type: string;
+}[];
+export declare const hubUsefulLinks: {
+    id: string;
     name: string;
     url: string;
-    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+    imageUrl: string;
+    type: string;
+    sortOrder: number;
 }[];
-export declare const hubBannerAdverts: {
+export declare const hubBannerAdverts: ({
+    name: string;
+    hubImageUrl: string;
+    basePromoUrl: string;
+    imageUrl?: undefined;
+    url?: undefined;
+} | {
     name: string;
     imageUrl: string;
     url: string;
-}[];
+    hubImageUrl?: undefined;
+    basePromoUrl?: undefined;
+})[];

package/components/stream/AppHub/constants.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import HomeIcon from '@mui/icons-material/Home';
+const url = 'http://learningpool.com';
 export const Constants = Object.freeze({
     DataRowType: {
         Product: 'product',
@@ -13,51 +12,136 @@ export const Constants = Object.freeze({
     }
 });
 export const hubApplications = [
-    { applicationId: 1, applicationName: 'Stream LXP', shortName: 'LXP', internalName: 'stream', url: 'https://learningpool.com' },
+    {
+        applicationId: 1,
+        applicationName: 'Stream LXP',
+        shortName: 'LXP',
+        internalName: 'stream',
+        url,
+        productDescription: 'This is an example description of this product'
+    },
     {
         applicationId: 2,
         applicationName: 'Stream Analytics',
         shortName: 'Long Wrapping Text Name Truncation Test Stream Analytics',
         internalName: 'analytics',
+        productDescription: 'This is an example description of this product',
         children: [
-            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: () => window.open('http://learningpool.com', '_blank') },
-            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: () => window.open('http://learningpool.com', '_blank') },
-            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: () => window.open('http://learningpool.com', '_blank') },
-            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: () => window.open('http://learningpool.com', '_blank') },
-            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: () => window.open('http://learningpool.com', '_blank') }
+            { applicationName: 'Stream Analytics', name: 'Long Wrapping Test Stream Analytics', url, onClick: () => { } },
+            { applicationName: 'Stream Analytics', name: 'Long Wrapping Test Stream Analytics', url, onClick: () => { } },
+            { applicationName: 'Stream Analytics', name: 'Long Wrapping Test Stream Analytics', url, onClick: () => { } },
+            { applicationName: 'Stream Analytics', name: 'Long Wrapping Test Stream Analytics', url, onClick: () => { } },
+            { applicationName: 'Stream Analytics', name: 'Long Wrapping Test Stream Analytics', url, onClick: () => { } }
         ]
     },
-    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Event Management', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com' },
+    {
+        applicationId: 3,
+        applicationName: 'Stream Automation',
+        shortName: 'Event Management',
+        internalName: 'automation',
+        customName: 'Waves 1',
+        url,
+        productDescription: 'This is an example description of this product'
+    },
     {
         applicationId: 7,
         applicationName: 'Stream LMS',
         shortName: 'LMS',
         internalName: 'lms',
-        customName: 'Custom Name Test',
+        customName: 'Custom LMS instance 1',
+        productDescription: 'This is an example description of this product',
         children: [
-            { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: 'Custom Name Test', onClick: () => window.open('http://learningpool.com', '_blank') },
-            { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: 'Custom Name Test', onClick: () => window.open('http://learningpool.com', '_blank') },
-            { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: 'Custom Name Test', onClick: () => window.open('http://learningpool.com', '_blank') }
+            { applicationName: 'Stream LMS', name: 'LMS', url, onClick: () => { } },
+            { applicationName: 'Stream LMS', name: 'LMS', url, onClick: () => { } },
+            { applicationName: 'Stream LMS', name: 'LMS', url, onClick: () => { } }
         ]
     },
-    { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', customName: '', subtitle: 'Subtitle Test', url: 'https://learningpool.com' }
+    {
+        applicationId: 4,
+        applicationName: 'Stream Authoring',
+        shortName: 'Authoring',
+        internalName: 'authoring',
+        customName: 'Authoring',
+        productDescription: 'This is an example description of this product',
+        url
+    }
+];
+export const otherProducts = [
+    {
+        applicationId: 6,
+        name: 'Event Management',
+        shortName: 'Events',
+        internalName: 'eventmanagement',
+        url,
+        customName: null,
+        subtitle: 'Event Management allows you to effectively manage both in-person and virtual based training for your organisation.'
+    },
+    {
+        applicationId: 8,
+        name: 'IQ',
+        shortName: 'IQ',
+        internalName: 'iq',
+        url,
+        customName: null,
+        subtitle: 'The IQ Analytics portal is designed to clearly highlight behavioral insights gathered from your Adaptive Content courses.'
+    }
 ];
 export const hubCustomLinks = [
-    { name: 'Learning Pool', url: 'https://learningpool.com' },
-    { name: 'Custom Link', url: 'https://learningpool.com' },
-    { name: 'Another Custom Link', url: 'https://learningpool.com', customLinkBgColor: '#ff0000' },
-    { name: 'Wrapping Text Name Truncation Test Link', url: 'https://learningpool.com' },
-    { name: 'Link', url: 'https://learningpool.com' },
-    { name: 'Another Custom Link', url: 'https://learningpool.com' },
-    { name: 'Another Custom Link', url: 'https://learningpool.com' },
-    { name: 'Another Custom Link', url: 'https://learningpool.com' },
-    { name: 'Another Custom Link', url: 'https://learningpool.com' }
+    { name: 'Learning Pool', url, type: 'custom' },
+    { name: 'Custom Link', url, type: 'custom' },
+    { name: 'Another Custom Link', url, type: 'custom' },
+    { name: 'Wrapping Text Name Truncation Test Link', url, type: 'custom' },
+    { name: 'Link', url, type: 'custom' },
+    { name: 'Another Custom Link', url, type: 'custom' },
+    { name: 'Another Custom Link', url, type: 'custom' },
+    { name: 'Another Custom Link', url, type: 'custom' },
+    { name: 'Another Custom Link', url, type: 'custom' }
 ];
-export const hubSupportItems = [
-    { name: 'Contact us', url: 'https://learningpool.com', icon: _jsx(HomeIcon, {}) }
+export const hubUsefulLinks = [
+    {
+        id: '45eda0c0-e2c1-11ed-a91b-8fa52457e26b',
+        name: 'Academy',
+        url: 'https://academy.thelpacademy.com/',
+        imageUrl: 'images/icon_academy.svg',
+        type: 'useful',
+        sortOrder: 1
+    },
+    {
+        id: '45fa23e0-e2c1-11ed-a91b-8fa52457e26b',
+        name: 'Contact Us',
+        url: 'https://learningpool.com/support/',
+        imageUrl: 'images/icon_phone.svg',
+        type: 'useful',
+        sortOrder: 2
+    },
+    {
+        id: '46056e80-e2c1-11ed-a91b-8fa52457e26b',
+        name: 'Customer Portal',
+        url: 'https://learningpool.force.com/customerportal',
+        imageUrl: 'images/icon_learningpool.svg',
+        type: 'useful',
+        sortOrder: 3
+    },
+    {
+        id: '46159b20-e2c1-11ed-a91b-8fa52457e26b',
+        name: 'Product Roadmaps',
+        url: 'https://learningpool.com/roadmaps',
+        imageUrl: 'images/icon_map.svg',
+        type: 'useful',
+        sortOrder: 4
+    },
+    {
+        id: '462db700-e2c1-11ed-a91b-8fa52457e26b',
+        name: 'Showcase',
+        url: 'https://lpshowcase.learningpool.com/',
+        imageUrl: 'images/icon_frame.svg',
+        type: 'useful',
+        sortOrder: 6
+    }
 ];
 export const hubBannerAdverts = [
-    { name: 'Banner Advert', imageUrl: 'https://uuicdn.learningpool.com/promotionalcampaigns/banner/latest/1000x138.png', url: 'https://learningpool.com' },
-    { name: 'Another Banner Advert no image', imageUrl: '3', url: 'https://learningpool.com' },
-    { name: 'Another Banner Advert', imageUrl: 'https://uuicdn.learningpool.com/promotionalcampaigns/banner/latest/1000x138.png', url: 'https://learningpool.com' }
+    { name: 'Banner Advert', hubImageUrl: 'https://uuicdn.learningpool.com/promotionalcampaigns/banner/latest/1000x138.png', basePromoUrl: url },
+    // Uncomment this to allow more ads
+    // { name: 'Another Banner Advert', hubImageUrl: 'https://uuicdn.learningpool.com/promotionalcampaigns/banner/latest/1000x138.png', basePromoUrl: url },
+    { name: 'Another Banner Advert no image', imageUrl: '3', url }
 ];

package/index.d.ts

@@ -129,6 +129,7 @@ export { default as Drawer } from './components/navigation/Drawer/Drawer';
 export { default as List } from './components/datadisplay/List/List';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
 export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
+export { default as WelcomeBanner } from './components/datadisplay/WelcomeBanner/WelcomeBanner';
 export { default as AppHub } from './components/stream/AppHub/AppHub';
 export { default as AppSwitcher } from './components/stream/AppSwitcher/AppSwitcher';
 export { default as Header } from './components/landmarks/Header/Header';

package/index.js

@@ -139,6 +139,7 @@ export { default as Drawer } from './components/navigation/Drawer/Drawer';
 export { default as List } from './components/datadisplay/List/List';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
 export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
+export { default as WelcomeBanner } from './components/datadisplay/WelcomeBanner/WelcomeBanner';
 // Stream Suite components
 export { default as AppHub } from './components/stream/AppHub/AppHub';
 export { default as AppSwitcher } from './components/stream/AppSwitcher/AppSwitcher';

package/lang/en-us.d.ts

@@ -13,6 +13,7 @@ export const defaultMessages: {
     'open-in-new-window': string;
     'stream-hub-welcome': string;
     'banner-image-alt-text': string;
+    'manage-links': string;
     'site-navigation': string;
     'open-navigation': string;
     'close-navigation': string;

package/lang/en-us.js

@@ -14,6 +14,7 @@ export const defaultMessages = {
     'open-in-new-window': 'opens in a new window',
     'stream-hub-welcome': 'Welcome to Stream Home',
     'banner-image-alt-text': 'Banner Image advert',
+    'manage-links': 'Manage Links',
     // Navigation
     'site-navigation': 'Site navigation',
     'open-navigation': 'Open navigation',

package/package.json

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

package/types/components/stream/AppHub.d.ts

@@ -3,11 +3,20 @@ export interface IApplicationHubProps {
     localization?: any;
     isPageLayout?: boolean;
     customLinkBgColor?: string;
+    userName?: string;
+    userOrganization?: string;
+    hasPromotionalCampaigns?: boolean;
+    isAppSwitcher: boolean;
+    hubApiKey: string;
+    hubToken: string;
 }
 export interface IApplicationHubRowProps {
     items: any;
     title: string;
     type?: any;
-    addButton?: any;
+    allowEditLinks?: boolean;
     customName?: string;
+    welcomeMessage?: string;
+    userName?: string;
+    userOrganization?: string;
 }

package/utils/Enums/HubEventTypes.enum.d.ts

@@ -0,0 +1,12 @@
+export declare enum HubEventTypeID {
+    REQUEST_DEMO = "request_demo",
+    OTHER_PRODUCT = "other_product",
+    ACCESSED = "accessed",
+    APP_OPENED = "app_opened",
+    LINK_OPENED = "link_opened",
+    CREATE = "create",
+    EDIT = "edit",
+    UPDATE = "update",
+    DELETE = "delete",
+    RESET_PASSWORD = "reset_password"
+}

package/utils/Enums/HubEventTypes.enum.js

@@ -0,0 +1,15 @@
+/* eslint-disable no-unused-vars */
+// TODO: Remove rule for enums
+export var HubEventTypeID;
+(function (HubEventTypeID) {
+    HubEventTypeID["REQUEST_DEMO"] = "request_demo";
+    HubEventTypeID["OTHER_PRODUCT"] = "other_product";
+    HubEventTypeID["ACCESSED"] = "accessed";
+    HubEventTypeID["APP_OPENED"] = "app_opened";
+    HubEventTypeID["LINK_OPENED"] = "link_opened";
+    HubEventTypeID["CREATE"] = "create";
+    HubEventTypeID["EDIT"] = "edit";
+    HubEventTypeID["UPDATE"] = "update";
+    HubEventTypeID["DELETE"] = "delete";
+    HubEventTypeID["RESET_PASSWORD"] = "reset_password";
+})(HubEventTypeID || (HubEventTypeID = {}));

package/utils/helpers.d.ts

@@ -34,3 +34,20 @@ export declare const useFadeIn: (delayOrder: number, reverse?: boolean) => Objec
  * @returns Object
  */
 export declare const useFadeAndMoveIn: (delayOrder: number, reverse?: boolean) => Object;
+interface IHubTrackingProps {
+    apiKey: string;
+    token: string;
+    isAppSwitcher: boolean;
+    eventTypeId: string;
+    referenceId: string;
+    url: string;
+}
+/**
+ * Add tracking log to the Hub.
+ * @param {Bolean} param.isAppSwitcher - Is the interaction from App switcher.
+ * @param {String} param.eventTypeId - Type of click event.
+ * @param {String} param.referenceId - Clicked Id of the object.
+ * @param {String} param.url - Url of the object on click.
+ */
+export declare const handleHubTracking: ({ apiKey, token, isAppSwitcher, eventTypeId, referenceId, url }: IHubTrackingProps) => Promise<void>;
+export {};

package/utils/helpers.js

@@ -108,3 +108,32 @@ export const useFadeAndMoveIn = (delayOrder, reverse = false) => {
     };
     return useStaggerIn(animationConfig, delayOrder, reverse);
 };
+/**
+ * Add tracking log to the Hub.
+ * @param {Bolean} param.isAppSwitcher - Is the interaction from App switcher.
+ * @param {String} param.eventTypeId - Type of click event.
+ * @param {String} param.referenceId - Clicked Id of the object.
+ * @param {String} param.url - Url of the object on click.
+ */
+export const handleHubTracking = async ({ apiKey, token, isAppSwitcher, eventTypeId, referenceId, url }) => {
+    const { host, hostname } = window.location;
+    if (hostname === 'localhost') {
+        console.log('Send tracking to Hub', { isAppSwitcher, eventTypeId, referenceId, url });
+    }
+    if (!eventTypeId || !referenceId) {
+        return;
+    }
+    fetch(`https://api.${host}/interaction`, {
+        method: 'POST',
+        headers: new Headers({
+            Authorization: `Bearer ${token}`,
+            'x-api-key': apiKey
+        }),
+        body: JSON.stringify({
+            referenceId,
+            eventTypeId,
+            url,
+            isHub: isAppSwitcher
+        })
+    });
+};