@learningpool/ui 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.6.3](https://github.com/HT2-Labs/design-system/compare/v1.6.2...v1.6.3) (2023-02-09)
+
+
+### Bug Fixes
+
+* **AppSwitcher:** Uses 'customName' for applications (if set) [HOME-1121] ([#150](https://github.com/HT2-Labs/design-system/issues/150)) ([5b84774](https://github.com/HT2-Labs/design-system/commit/5b84774f34ffe5bbcc67a9bc92f85419f089340b))
+
+## [1.6.2](https://github.com/HT2-Labs/design-system/compare/v1.6.1...v1.6.2) (2023-02-07)
+
+
+### Bug Fixes
+
+* **VerticalNavigatioin:** - Fix overflow of long flyoutmenu items [DS-605] ([#149](https://github.com/HT2-Labs/design-system/issues/149)) ([bd1f88b](https://github.com/HT2-Labs/design-system/commit/bd1f88b36067af093ccf1dc8deb0deb061b34a82))
+
 ## [1.6.1](https://github.com/HT2-Labs/design-system/compare/v1.6.0...v1.6.1) (2023-02-07)
 
 

package/dist/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -191,6 +191,7 @@ var VerticalNavigation = function (props) {
                         ? theme.palette.primary.main
                         : theme.palette.background.paper,
                     flex: '1 1px',
+                    marginTop: '-1px',
                     overflow: 'auto',
                     position: 'relative'
                 } }, { children: _jsx(StyledNav, __assign({ tabIndex: -1, "aria-label": 'Primary' }, { children: _jsx(List, __assign({ style: {

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

@@ -11,7 +11,7 @@ export var DRAWER_WIDTH = {
 };
 export var FlyoutMenuPaper = styled(Paper, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open' && prop !== 'anchorEl'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  width: 200px;\n  z-index: 2;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  width: 200px;\n  z-index: 2;\n"])), function (props) { return props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px"); }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.anchorEl
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  min-width: 200px;\n  z-index: 2;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  min-width: 200px;\n  z-index: 2;\n"])), function (props) { return props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px"); }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.anchorEl
     ? "".concat(props.anchorEl.getBoundingClientRect().top, "px")
     : 'auto'; });
 export var FlyoutMenuWrap = styled('div', {

package/dist/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -30,7 +30,7 @@ export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templ
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
 export var StyledAside = styled('aside')(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) {
     return props.theme.palette.mode === 'dark'

package/dist/components/stream/AppSwitcher/AppSwitcher.js

@@ -59,8 +59,6 @@ var AppSwitcher = function (props) {
     var _a;
     var isAppSwitcherOpen = props.isAppSwitcherOpen, setIsAppSwitcherOpen = props.setIsAppSwitcherOpen, isDrawerOpen = props.isDrawerOpen, localization = props.localization, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
     var token = props.token;
-    // Controls whether the application panel is open or not.
-    // const [isOpen, setIsOpen] = useState(isAppSwitcherOpen)
     // Holds the applications which are displayed.
     var _c = useState([]), applications = _c[0], setApplications = _c[1];
     // Controls which tab is active.
@@ -73,18 +71,10 @@ var AppSwitcher = function (props) {
     var _g = useState(''), searchString = _g[0], setSearchString = _g[1];
     var messages = __assign(__assign({}, localization), defaultMessages);
     var userId = (_a = props.userId) !== null && _a !== void 0 ? _a : '';
-    /**
-     * Toggles display of the Stream suite application dialog.
-     * @param event {React.MouseEvent} - Click event.
-     */
-    // const handleToggleAppsClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    //   setIsOpen(!isOpen)
-    // }
     /**
      * Handles closing of the application dialog.
      */
     var handleDialogClose = function () {
-        // setIsOpen(false)
         setIsAppSwitcherOpen(false);
         setTimeout(function () {
             setSearchString('');

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

@@ -8,6 +8,7 @@ export declare const LogoVariants: {
 interface IAppSwitcherItemProps {
     internalName: string;
     shortName: string;
+    customName?: string;
     handleGoToAppClick: Function;
     applicationId?: number;
     url?: string;

package/dist/components/stream/AppSwitcher/AppSwitcherItem.js

@@ -19,20 +19,20 @@ export var LogoVariants = {
     Outlined: 'icon-outlined',
     White: 'icon-white'
 };
+/**
+ * Renders an application logo.
+ * @param internalName {string | null | undefined } - Internal name of the application.
+ * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
+ */
+var renderApplicationLogo = function (internalName, logoVariant) {
+    if (!internalName) {
+        return _jsx(_Fragment, {});
+    }
+    var urlToIcon = "".concat(Constants.AssetsUrl).concat(internalName, "/logo/latest/").concat(logoVariant !== null && logoVariant !== void 0 ? logoVariant : LogoVariants.Default, ".svg");
+    return (_jsx(StyledLogoSVG, { children: _jsx("image", { xlinkHref: urlToIcon, width: "60", height: "60" }) }));
+};
 var AppSwitcherItem = function (props) {
-    var applicationId = props.applicationId, internalName = props.internalName, shortName = props.shortName, url = props.url, handleGoToAppClick = props.handleGoToAppClick;
-    /**
-     * Renders an application logo.
-     * @param internalName {string | null | undefined } - Internal name of the application.
-     * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
-     */
-    var renderApplicationLogo = function (internalName, logoVariant) {
-        if (!internalName) {
-            return _jsx(_Fragment, {});
-        }
-        var urlToIcon = "".concat(Constants.AssetsUrl).concat(internalName, "/logo/latest/").concat(logoVariant !== null && logoVariant !== void 0 ? logoVariant : LogoVariants.Default, ".svg");
-        return (_jsx(StyledLogoSVG, { children: _jsx("image", { xlinkHref: urlToIcon, width: "60", height: "60" }) }));
-    };
+    var applicationId = props.applicationId, internalName = props.internalName, shortName = props.shortName, customName = props.customName, url = props.url, handleGoToAppClick = props.handleGoToAppClick;
     var solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid);
     return (_jsxs(AppLink, __assign({ href: url !== null && url !== void 0 ? url : '#', target: "_blank", onClick: function (event) { return applicationId ? handleGoToAppClick(event, applicationId) : null; } }, { children: [applicationId && (
             // Create a stack effect to indicate multiple
@@ -46,6 +46,6 @@ var AppSwitcherItem = function (props) {
                             top: '10px',
                             transform: 'scale(0.9)',
                             zIndex: 0
-                        } }, { children: solidLogo }))] })), solidLogo, _jsx(AppName, { children: shortName })] })));
+                        } }, { children: solidLogo }))] })), solidLogo, _jsx(AppName, { children: customName !== null && customName !== void 0 ? customName : shortName })] })));
 };
 export default AppSwitcherItem;

package/dist/package.json

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

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.6.1",
+  "version": "1.6.3",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/lib/components/navigation/VerticalNavigation/VerticalNavigation.tsx

@@ -307,6 +307,7 @@ const VerticalNavigation = (
             ? theme.palette.primary.main
             : theme.palette.background.paper,
           flex: '1 1px',
+          marginTop: '-1px',
           overflow: 'auto',
           position: 'relative'
         }}

package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.tsx

@@ -27,7 +27,7 @@ export const FlyoutMenuPaper = styled(Paper, {
   top: ${props => props.anchorEl
     ? `${props.anchorEl.getBoundingClientRect().top}px`
     : 'auto'};
-  width: 200px;
+  min-width: 200px;
   z-index: 2;
 `
 

package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationStyles.tsx

@@ -113,7 +113,6 @@ export const StyledNav = styled('nav')`
   flex: 1 auto;
   flex-direction: column;
   justify-content: flex-start;
-  margin-top: -1px;
   overflow-x: hidden;
   overflow-y: auto;
 

package/src/lib/components/stream/AppSwitcher/AppSwitcher.tsx

@@ -35,8 +35,6 @@ const AppSwitcher = (props: IProps): ReactElement | null => {
   } = props
   let { token } = props
 
-  // Controls whether the application panel is open or not.
-  // const [isOpen, setIsOpen] = useState(isAppSwitcherOpen)
   // Holds the applications which are displayed.
   const [applications, setApplications] = useState<IApplication[]>([])
   // Controls which tab is active.
@@ -52,19 +50,10 @@ const AppSwitcher = (props: IProps): ReactElement | null => {
 
   let userId = props.userId ?? ''
 
-  /**
-   * Toggles display of the Stream suite application dialog.
-   * @param event {React.MouseEvent} - Click event.
-   */
-  // const handleToggleAppsClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-  //   setIsOpen(!isOpen)
-  // }
-
   /**
    * Handles closing of the application dialog.
    */
   const handleDialogClose = (): void => {
-    // setIsOpen(false)
     setIsAppSwitcherOpen(false)
 
     setTimeout(() => {

package/src/lib/components/stream/AppSwitcher/AppSwitcherItem.tsx

@@ -13,36 +13,37 @@ export const LogoVariants = {
 interface IAppSwitcherItemProps {
   internalName: string
   shortName: string
+  customName?: string
   handleGoToAppClick: Function
   applicationId?: number
   url?: string
 }
 
+/**
+ * Renders an application logo.
+ * @param internalName {string | null | undefined } - Internal name of the application.
+ * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
+ */
+const renderApplicationLogo = (internalName: string | null | undefined, logoVariant: string): ReactElement | null => {
+  if (!internalName) {
+    return <></>
+  }
+
+  const urlToIcon = `${Constants.AssetsUrl}${internalName}/logo/latest/${logoVariant ?? LogoVariants.Default}.svg`
+
+  return (
+    <StyledLogoSVG>
+      <image xlinkHref={urlToIcon} width="60" height="60" />
+    </StyledLogoSVG>
+  )
+}
+
 const AppSwitcherItem = (props: IAppSwitcherItemProps): ReactElement => {
   const {
-    applicationId, internalName, shortName,
+    applicationId, internalName, shortName, customName,
     url, handleGoToAppClick
   } = props
 
-  /**
-   * Renders an application logo.
-   * @param internalName {string | null | undefined } - Internal name of the application.
-   * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
-   */
-  const renderApplicationLogo = (internalName: string | null | undefined, logoVariant: string): ReactElement | null => {
-    if (!internalName) {
-      return <></>
-    }
-
-    const urlToIcon = `${Constants.AssetsUrl}${internalName}/logo/latest/${logoVariant ?? LogoVariants.Default}.svg`
-
-    return (
-      <StyledLogoSVG>
-        <image xlinkHref={urlToIcon} width="60" height="60" />
-      </StyledLogoSVG>
-    )
-  }
-
   const solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid)
 
   return (
@@ -74,7 +75,7 @@ const AppSwitcherItem = (props: IAppSwitcherItemProps): ReactElement => {
       )}
       {solidLogo}
       <AppName>
-        {shortName}
+        {customName ?? shortName}
       </AppName>
     </AppLink>
   )

package/src/stories/Components/Navigation/VerticalNavigation/Examples.stories.tsx

@@ -43,7 +43,7 @@ export const Default: ComponentStory<typeof VerticalNavigation> = (args) => {
           onClick: () => console.log('Action: First sub item clicked')
         },
         { label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do' },
-        { label: 'Third Item' },
+        { label: 'Longstringoftextthatdoesntwrap Item' },
         { label: 'Forth Item' }
       ]
     },