@learningpool/ui 1.6.0-beta.1 → 1.6.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts +3 -1
  2. package/components/navigation/VerticalNavigation/VerticalNavigation.js +56 -59
  3. package/package.json +1 -1
package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts CHANGED
@@ -11,7 +11,9 @@ interface VerticalNaviationProps {
11
11
  items?: VerticalNaviationItemProps[];
12
12
  secondaryItems?: VerticalNaviationItemProps[];
13
13
  hasStreamHome?: boolean;
14
- token?: string;
14
+ streamHomeAccessToken?: string;
15
+ streamHomeBaseUrl?: string;
16
+ streamHomeApiKey?: string;
15
17
  avatarName?: string;
16
18
  isDrawerOpen?: boolean;
17
19
  }
package/components/navigation/VerticalNavigation/VerticalNavigation.js CHANGED
@@ -27,7 +27,7 @@ var StyledDrawer = styled(Drawer)(function (_a) {
27
27
  var VerticalNavigation = function (props) {
28
28
  var _a, _b;
29
29
  var theme = useTheme();
30
- var items = props.items, secondaryItems = props.secondaryItems, hasStreamHome = props.hasStreamHome, logo = props.logo, logoText = props.logoText, token = props.token;
30
+ var items = props.items, secondaryItems = props.secondaryItems, hasStreamHome = props.hasStreamHome, logo = props.logo, logoText = props.logoText, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken;
31
31
  var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
32
32
  var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
33
33
  var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
@@ -58,69 +58,66 @@ var VerticalNavigation = function (props) {
58
58
  }
59
59
  setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
60
60
  }; };
61
- var listContent = function () {
62
- var _a, _b, _c, _d;
63
- return (_jsxs(Box, __assign({ sx: {
64
- display: 'flex',
65
- flex: '1 auto',
66
- flexDirection: 'column',
67
- justifyContent: 'flex-start'
68
- } }, { children: [_jsxs(DrawerHeader, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
69
- ? typeof logo === 'string'
70
- ? (_jsx("img", { src: logo, height: logoHeight, width: logoWidth, style: {
71
- marginRight: isMediumAndUp ? '20px' : '24px'
72
- }, alt: "Site Logo" }))
73
- : logo
74
- : (_jsx(StreamSuiteLogo, { style: {
75
- height: logoHeight,
76
- width: logoWidth,
77
- marginRight: isMediumAndUp ? '20px' : '24px',
78
- fill: theme.palette.mode === 'dark'
79
- ? theme.palette.primary.contrastText
80
- : theme.palette.primary.main
81
- } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen })] }), _jsxs(NotchContainer, { children: [_jsx(NotchBackground, {}), _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] }), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsxs(StyledNav, { children: [_jsx(List, __assign({ sx: {
82
- height: '100%',
83
- width: DRAWER_WIDTH.Expanded,
84
- marginTop: "-".concat(theme.spacing(0.5))
85
- } }, { children: items && items.length > 0 && items.map(function (item, index) {
61
+ var listContent = function () { return (_jsxs(Box, __assign({ sx: {
62
+ display: 'flex',
63
+ flex: '1 auto',
64
+ flexDirection: 'column',
65
+ justifyContent: 'flex-start'
66
+ } }, { children: [_jsxs(DrawerHeader, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
67
+ ? typeof logo === 'string'
68
+ ? (_jsx("img", { src: logo, height: logoHeight, width: logoWidth, style: {
69
+ marginRight: isMediumAndUp ? '20px' : '24px'
70
+ }, alt: "Site Logo" }))
71
+ : logo
72
+ : (_jsx(StreamSuiteLogo, { style: {
73
+ height: logoHeight,
74
+ width: logoWidth,
75
+ marginRight: isMediumAndUp ? '20px' : '24px',
76
+ fill: theme.palette.mode === 'dark'
77
+ ? theme.palette.primary.contrastText
78
+ : theme.palette.primary.main
79
+ } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen })] }), _jsxs(NotchContainer, { children: [_jsx(NotchBackground, {}), _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] }), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsxs(StyledNav, { children: [_jsx(List, __assign({ sx: {
80
+ height: '100%',
81
+ width: DRAWER_WIDTH.Expanded,
82
+ marginTop: "-".concat(theme.spacing(0.5))
83
+ } }, { children: items && items.length > 0 && items.map(function (item, index) {
84
+ var _a;
85
+ return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
86
+ // @ts-expect-error
87
+ , __assign({
88
+ // @ts-expect-error
89
+ component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen, index: index })] }), item.label) })));
90
+ }) })), _jsxs(List, __assign({ sx: {
91
+ width: DRAWER_WIDTH.Expanded,
92
+ marginTop: 'auto',
93
+ backgroundColor: theme.palette.mode === 'dark'
94
+ ? theme.palette.primary.main
95
+ : theme.palette.background.paper
96
+ } }, { children: [hasStreamHome
97
+ ? (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ sx: {
98
+ minHeight: 48,
99
+ justifyContent: isDrawerOpen ? 'initial' : 'center'
100
+ } }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: 'App switcher', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ sx: {
101
+ minWidth: 0,
102
+ mr: isDrawerOpen ? 2.5 : 'auto',
103
+ justifyContent: 'center'
104
+ } }, { children: _jsx(AppSwitcher, { apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '' }) })) })), _jsx(ListItemText, { primary: 'App switcher', isDrawerOpen: isDrawerOpen })] })) })))
105
+ : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
86
106
  var _a;
87
107
  return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
88
108
  // @ts-expect-error
89
109
  , __assign({
90
110
  // @ts-expect-error
91
- component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen, index: index })] }), item.label) })));
92
- }) })), _jsxs(List, __assign({ sx: {
93
- width: DRAWER_WIDTH.Expanded,
94
- marginTop: 'auto',
95
- backgroundColor: theme.palette.mode === 'dark'
96
- ? theme.palette.primary.main
97
- : theme.palette.background.paper
98
- } }, { children: [hasStreamHome
99
- ? (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ sx: {
100
- minHeight: 48,
101
- justifyContent: isDrawerOpen ? 'initial' : 'center'
102
- } }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: 'App switcher', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ sx: {
103
- minWidth: 0,
104
- mr: isDrawerOpen ? 2.5 : 'auto',
105
- justifyContent: 'center'
106
- } }, { children: _jsx(AppSwitcher, { apiKey: (_b = (_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_STREAM_HOME_API_KEY) !== null && _b !== void 0 ? _b : '', baseUrl: (_d = (_c = process === null || process === void 0 ? void 0 : process.env) === null || _c === void 0 ? void 0 : _c.REACT_APP_STREAM_HOME_API_URL) !== null && _d !== void 0 ? _d : '', token: token !== null && token !== void 0 ? token : '' }) })) })), _jsx(ListItemText, { primary: 'App switcher', isDrawerOpen: isDrawerOpen })] })) })))
107
- : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
108
- var _a;
109
- return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
110
- // @ts-expect-error
111
- , __assign({
112
- // @ts-expect-error
113
- component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen, index: index }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen })] }), item.label) })));
114
- }), avatarName
115
- ? (_jsx(ListItem, __assign({ disablePadding: true, sx: {
116
- overflow: 'hidden'
117
- } }, { children: _jsxs(ListItemAvatar, __assign({ isDrawerOpen: isDrawerOpen, component: Link }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: avatarName, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true, sx: { mr: 3 } }, { children: _jsx(Avatar, __assign({ sx: {
118
- bgcolor: theme.palette.mode === 'dark'
119
- ? theme.palette.primary.contrastText
120
- : theme.palette.primary.main
121
- } }, { children: avatarInitials })) })) })), _jsx(ListItemText, { primary: avatarName, isDrawerOpen: isDrawerOpen })] })) })))
122
- : null] }))] })] })));
123
- };
111
+ component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen, index: index }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen })] }), item.label) })));
112
+ }), avatarName
113
+ ? (_jsx(ListItem, __assign({ disablePadding: true, sx: {
114
+ overflow: 'hidden'
115
+ } }, { children: _jsxs(ListItemAvatar, __assign({ isDrawerOpen: isDrawerOpen, component: Link }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: avatarName, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true, sx: { mr: 3 } }, { children: _jsx(Avatar, __assign({ sx: {
116
+ bgcolor: theme.palette.mode === 'dark'
117
+ ? theme.palette.primary.contrastText
118
+ : theme.palette.primary.main
119
+ } }, { children: avatarInitials })) })) })), _jsx(ListItemText, { primary: avatarName, isDrawerOpen: isDrawerOpen })] })) })))
120
+ : null] }))] })] }))); };
124
121
  return (_jsxs(StyledAside, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsxs(StyledDrawer, __assign({ "aria-label": 'Navigation Menu', id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen, onClose: toggleDrawer(false), ModalProps: {
125
122
  keepMounted: true
126
123
  }, variant: 'permanent' }, { children: [_jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation Menu' : 'Open Navigation Menu', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", sx: {
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.6.0-beta.1",
12
+ "version": "1.6.0-beta.2",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",