From f618ab5f8ab2d4585917873c0b4ca90b456501e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daria=20Domaga=C5=82a?=
 <40663133+dariadomagala@users.noreply.github.com>
Date: Thu, 3 Nov 2022 08:32:58 +0100
Subject: [PATCH] feat: add compact option to product menu, remove console
 errors (#1446)

* feat: add compact option to product menu, remove console errors

* feat: add glyph to the settings menu
---
 .storybook/custom/components/DocsPage.js     |  2 +-
 src/Shellbar/Shellbar.js                     | 58 ++++++++++++++++++--
 src/Shellbar/__stories__/Shellbar.stories.js |  1 +
 src/SideNavigation/_SideNavListItem.js       |  6 +-
 4 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/.storybook/custom/components/DocsPage.js b/.storybook/custom/components/DocsPage.js
index b8d55434a..d1760f67b 100644
--- a/.storybook/custom/components/DocsPage.js
+++ b/.storybook/custom/components/DocsPage.js
@@ -80,7 +80,7 @@ const DocsPage = () => {
                     <DocsStoryDescription />
         </div>
         <Heading>Examples</Heading>
-        {stories.map((story) => story && <DocsStory
+        {stories?.map((story) => story && <DocsStory
             key={story.id}
             {...story}
             expanded
diff --git a/src/Shellbar/Shellbar.js b/src/Shellbar/Shellbar.js
index e07af64af..6576a01a4 100644
--- a/src/Shellbar/Shellbar.js
+++ b/src/Shellbar/Shellbar.js
@@ -386,6 +386,52 @@ class Shellbar extends Component {
                                 popperProps={{ id: `${cssNamespace}-shellbar-mobile-action-popover` }} />
                         </div>
                     }
+                    {productSwitch && productSwitch.compact && (
+                        <Popover
+                            {...popoverPropsFor?.[productSwitch]}
+                            body={
+                                productSwitchList && (
+                                    <Menu>
+                                        <Menu.List>
+                                            {productSwitchList.map((item, index) => {
+                                                return (
+                                                    <Menu.Item
+                                                        key={index}
+                                                        onClick={item.callback}>
+                                                        {item.glyph && (
+                                                            <>
+                                                                <Icon glyph={item.glyph} size={item.size} />
+                                                                    &nbsp;&nbsp;&nbsp;
+                                                            </>
+                                                        )}
+                                                        {item.title}
+                                                    </Menu.Item>
+                                                );
+                                            })}
+                                        </Menu.List>
+                                    </Menu>
+                                )
+                            }
+                            control={
+                                <Button
+                                    className={classnames(
+                                        `${cssNamespace}-shellbar__button--menu`,
+                                        `${cssNamespace}-button--menu`,
+                                        {
+                                            [`${cssNamespace}-button`]: isUsingCssModules,
+                                            [buttonClassnames(`${cssNamespace}-button--menu`)]: isUsingCssModules
+                                        }
+                                    )}
+                                    glyph='megamenu'
+                                    iconProps={{ className: classnames(`${cssNamespace}-shellbar__button--icon`) }}
+                                    option='transparent'
+                                    textClassName={classnames(`${cssNamespace}-shellbar__title`)}>
+                                    {productSwitch.label}
+                                </Button>
+                            }
+                            noArrow
+                            popperProps={{ id: `${cssNamespace}-shellbar-product-popover` }} />
+                    )}
                     {profile && (
                         <div className={classnames(`${cssNamespace}-shellbar__action`, `${cssNamespace}-shellbar__action--show-always`)}>
                             <div className={classnames(`${cssNamespace}-user-menu`)}>
@@ -441,7 +487,7 @@ class Shellbar extends Component {
                                                     className={classnames(`${cssNamespace}-shellbar__avatar--circle`)}
                                                     color={profile.colorAccent}
                                                     size='xs'>
-                                                    {profile.initials}
+                                                    {profile.glyph ? <Icon glyph={profile.glyph} /> : profile.initials}
                                                 </Avatar>
                                             )}
                                         </button>
@@ -451,7 +497,7 @@ class Shellbar extends Component {
                             </div>
                         </div>
                     )}
-                    {productSwitch && (
+                    {productSwitch && !productSwitch.compact && (
                         <div className={classnames(`${cssNamespace}-shellbar__action`, `${cssNamespace}-shellbar__action--desktop`)}>
                             <div className={classnames(`${cssNamespace}-product-switch`)}>
                                 <Popover
@@ -542,17 +588,19 @@ Shellbar.propTypes = {
     /** For navigating between products. An object that contains an accessible and localized label for product switch button. */
     productSwitch: PropTypes.shape({
         /** Accessible and localized label for product switch button */
-        label: PropTypes.string.isRequired
+        label: PropTypes.string.isRequired,
+        /** Renders the switch in a form of a dropdown */
+        compact: PropTypes.bool
     }),
     /** Array of objects containing data about the products.
-     * Callback, title, and glyph are required; selected and subtitle are optional. */
+     * Callback and title are required; selected, glyph and subtitle are optional. */
     productSwitchList: PropTypes.arrayOf(
         PropTypes.shape({
             callback: PropTypes.func.isRequired,
             /** Localized text for the heading */
             title: PropTypes.string.isRequired,
             /** The icon to include. See the icon page for the list of icons */
-            glyph: PropTypes.string.isRequired,
+            glyph: PropTypes.string,
             /** For pre-selecting an item in the product switch list */
             selected: PropTypes.bool,
             subtitle: PropTypes.string
diff --git a/src/Shellbar/__stories__/Shellbar.stories.js b/src/Shellbar/__stories__/Shellbar.stories.js
index d6630ca3c..f1d3e7143 100644
--- a/src/Shellbar/__stories__/Shellbar.stories.js
+++ b/src/Shellbar/__stories__/Shellbar.stories.js
@@ -116,6 +116,7 @@ export const coPilot = () => (
         }}
         productMenu={productMenu}
         productSwitch={{
+            compact: false,
             label: 'Product Switch'
         }}
         productSwitchList={[
diff --git a/src/SideNavigation/_SideNavListItem.js b/src/SideNavigation/_SideNavListItem.js
index e32f70f3d..3fd9dd909 100644
--- a/src/SideNavigation/_SideNavListItem.js
+++ b/src/SideNavigation/_SideNavListItem.js
@@ -60,7 +60,7 @@ class SideNavListItem extends React.Component {
                     href={url}
                     onClick={!hasChild ? (e) => {
                         !hasChild && onClick(e);
-                        onItemSelect(e, id, hasChild);
+                        if (onItemSelect) onItemSelect(e, id, hasChild);
                     } : null}>
                     {glyph ? (
                         <Icon
@@ -88,7 +88,7 @@ class SideNavListItem extends React.Component {
                         className={divClasses}
                         onClick={(e) => { /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
                             onClick(e);
-                            onItemSelect(e, id, hasChild);
+                            if (onItemSelect) onItemSelect(e, id, hasChild);
                         }}>
                         {link}
                         <Button
@@ -128,7 +128,7 @@ class SideNavListItem extends React.Component {
                             className: getClasses(),
                             onClick: (e) => {
                                 onClick(e);
-                                onItemSelect(e, id, hasChild);
+                                if (onItemSelect) onItemSelect(e, id, hasChild);
                                 if (hasChild) {
                                     this.handleExpand();
                                 }