@learningpool/ui 1.11.4 → 1.12.0

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -49,10 +49,11 @@ import { animated } from '@react-spring/web';
 import { defaultMessages } from '../../../lang/en-us';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 import { getDefaultSupportLinks, getNavigationBackground, getNavigationContrastText } from '../helpers';
+import { Constants } from '../../stream/AppSwitcher/constants';
 var VerticalNavigation = function (props) {
     var _a;
     var theme = useTheme();
-    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, localization = props.localization, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, avatarName = props.avatarName, dataAttributes = props.dataAttributes, showSupportLinks = props.showSupportLinks, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "streamHomeApiKey", "streamHomeBaseUrl", "localization", "streamHomeAccessToken", "streamHomeApplications", "avatarName", "dataAttributes", "showSupportLinks", "avatarPanelShowHelpLinks"]);
+    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, StreamHomeUrl = props.StreamHomeUrl, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, localization = props.localization, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, avatarName = props.avatarName, dataAttributes = props.dataAttributes, showSupportLinks = props.showSupportLinks, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "StreamHomeUrl", "streamHomeApiKey", "streamHomeBaseUrl", "localization", "streamHomeAccessToken", "streamHomeApplications", "avatarName", "dataAttributes", "showSupportLinks", "avatarPanelShowHelpLinks"]);
     var messages = __assign(__assign({}, defaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
@@ -223,7 +224,7 @@ var VerticalNavigation = function (props) {
                                         var _a;
                                         return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + index + 1] })));
                                     }), hasStreamHome
-                                        ? (_jsx(VerticalNavigationItem, { "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + 1] }))
+                                        ? (_jsx(VerticalNavigationItem, { "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen, StreamHomeUrl: StreamHomeUrl !== null && StreamHomeUrl !== void 0 ? StreamHomeUrl : Constants.DefaultStreamHomeUrl })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + 1] }))
                                         : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
                                         var _a, _b;
                                         return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + index + 1] })));

package/components/stream/AppSwitcher/AppSwitcher.d.ts

@@ -22,6 +22,7 @@ interface IProps {
     setIsAppSwitcherOpen?: any;
     isDrawerOpen?: boolean;
     dataAttributes?: any;
+    StreamHomeUrl?: string;
 }
 declare const AppSwitcher: {
     (props: IProps): ReactElement | null;

package/components/stream/AppSwitcher/AppSwitcher.js

@@ -51,9 +51,10 @@ import PropTypes from 'prop-types';
 import jwtDecode from 'jwt-decode';
 import * as queryString from 'query-string';
 import AppSwitcherItem, { LogoVariants } from './AppSwitcherItem';
-import { AppListHeader, AppListItem, AppOrganisationCount, StyledSVG, BackButton, MenuContent, OrganisationLink, OrganisationList, SearchBox, SearchContent, SelectedOrganisation, AppSwitcherPanel } from './AppSwitcherStyles';
+import { AppListHeader, AppListItem, AppOrganisationCount, StyledSVG, BackButton, MenuContent, OrganisationLink, OrganisationList, SearchBox, SearchContent, SelectedOrganisation, AppSwitcherPanel, StyleHomeButton } from './AppSwitcherStyles';
 import { Constants } from './constants';
 import { defaultAttributes } from '../../../utils/dataAttributes';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 var AppSwitcher = function (props) {
     var _a;
     var isAppSwitcherOpen = props.isAppSwitcherOpen, setIsAppSwitcherOpen = props.setIsAppSwitcherOpen, isDrawerOpen = props.isDrawerOpen, localization = props.localization, dataAttributes = props.dataAttributes, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
@@ -269,7 +270,7 @@ var AppSwitcher = function (props) {
             display: isAppSwitcherOpen ? 'block' : 'none',
             left: isDrawerOpen ? Constants.DrawerWidth.Expanded : Constants.DrawerWidth.Collapsed - 3
         }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer }, { children: [activeTab === Constants.Tabs.ListApplications
-                ? (_jsxs("div", { children: [_jsxs(AppListHeader, __assign({ "data-id": dataIds.AppSwitcherHeader }, { children: [_jsx("svg", { children: _jsx("image", { xlinkHref: "".concat(Constants.AssetsUrl, "suite/logo/latest/icon.svg"), width: "24", height: "24" }) }), messages['your-apps']] })), _jsx(MenuContent, __assign({ style: {
+                ? (_jsxs("div", { children: [_jsxs(AppListHeader, __assign({ "data-id": dataIds.AppSwitcherHeader }, { children: [messages['your-apps'], _jsx(StyleHomeButton, __assign({ "aria-label": messages['go-to-hub'], endIcon: _jsx(ChevronRightIcon, {}), onClick: function (e) { var _a; return window.open((_a = props.StreamHomeUrl) !== null && _a !== void 0 ? _a : Constants.DefaultStreamHomeUrl); } }, { children: messages['go-to-hub'] }))] })), _jsx(MenuContent, __assign({ style: {
                                 display: activeTab === 1 ? 'flex' : 'none'
                             }, "data-id": dataIds.AppSwitcherList }, { children: applications.map(function (_a) {
                                 var applicationId = _a.applicationId, applicationName = _a.applicationName, shortName = _a.shortName, customName = _a.customName, internalName = _a.internalName, url = _a.url, children = _a.children;

package/components/stream/AppSwitcher/AppSwitcherStyles.d.ts

@@ -15,3 +15,36 @@ export declare const StyledSVG: import("@emotion/styled").StyledComponent<import
 export declare const OrganisationList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const OrganisationLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
 export declare const StyledLogoSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const StyleHomeButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material/Button").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "text" | "outlined" | "contained" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/stream/AppSwitcher/AppSwitcherStyles.js

@@ -3,6 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
     : '#E6EAF0'; }, function (props) { return props.theme.direction === 'ltr'
@@ -11,7 +12,7 @@ export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_
 export var List = styled('ul')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n"], ["\n"])));
 export var MenuContent = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"], ["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"])));
 export var SearchContent = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"], ["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"])));
-export var AppListHeader = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-inline-end: 0.5rem;\n    width: 24px;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-inline-end: 0.5rem;\n    width: 24px;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var AppListHeader = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: normal;\n  justify-content: space-between;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-inline-end: 0.5rem;\n    width: 24px;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: normal;\n  justify-content: space-between;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-inline-end: 0.5rem;\n    width: 24px;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : '#555'; });
 export var AppListItem = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  height: 104px;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"], ["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  height: 104px;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"])), 100 / 3);
@@ -47,4 +48,5 @@ export var StyledLogoSVG = styled('svg')(templateObject_16 || (templateObject_16
     : '#E6EAF0'; }, function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
     : '#E6EAF0'; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+export var StyleHomeButton = styled(Button)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  color: #00538e;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  text-transform: none;\n\n  &:hover {\n    background-color: transparent;\n  }\n"], ["\n  align-items: center;\n  color: #00538e;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  text-transform: none;\n\n  &:hover {\n    background-color: transparent;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

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

@@ -19,6 +19,7 @@ export declare const Constants: Readonly<{
     DefaultMessages: {
         'app-switcher': string;
         'your-apps': string;
+        'go-to-hub': string;
         'custom-apps': string;
         'add-item': string;
         'lp-apps': string;
@@ -35,6 +36,7 @@ export declare const Constants: Readonly<{
         Collapsed: number;
         Expanded: number;
     };
+    DefaultStreamHomeUrl: "https://home.learningpool.com";
 }>;
 export declare const applications: ({
     applicationId: number;

package/components/stream/AppSwitcher/constants.js

@@ -19,6 +19,7 @@ export var Constants = Object.freeze({
     DefaultMessages: {
         'app-switcher': 'App Switcher',
         'your-apps': 'Your Apps',
+        'go-to-hub': 'Go to Hub',
         'custom-apps': 'Explore Custom Apps',
         'add-item': 'Add item',
         'lp-apps': 'Explore Learning Pool Apps',
@@ -34,7 +35,8 @@ export var Constants = Object.freeze({
     DrawerWidth: {
         Collapsed: 60,
         Expanded: 300
-    }
+    },
+    DefaultStreamHomeUrl: 'https://home.learningpool.com'
 });
 export var applications = [
     { applicationId: 1, applicationName: 'Stream LXP', shortName: 'LXP', internalName: 'stream', url: 'https://learningpool.com' },

package/package.json

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

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

@@ -24,6 +24,7 @@ export interface IVerticalNavigationProps {
     items?: IVerticalNavigationItemProps[];
     secondaryItems?: IVerticalNavigationItemProps[];
     hasStreamHome?: boolean;
+    StreamHomeUrl?: string;
     streamHomeAccessToken?: string;
     streamHomeBaseUrl?: string;
     streamHomeApiKey?: string;