feat(collapsible-sidebar): add prop to hide Box logo (#3256)

* feat(collapsible-sidebar): add prop to hide Box logo

* feat(collapsible-sidebar): rename prop and adjust tests

Author: Machoper

src/features/collapsible-sidebar/CollapsibleSidebarLogo.js

@@ -72,13 +72,15 @@ type Props = {
     /** Controls whether or not the sidebar is expanded on the page */
     expanded: boolean,
 
+    isLogoVisible?: boolean,
+
     linkProps: Object,
 
     onToggle: () => void,
 } & InjectIntlProvidedProps;
 
 function CollapsibleSidebarLogo(props: Props) {
-    const { badge, buttonProps, className, expanded, linkProps, onToggle, intl } = props;
+    const { badge, buttonProps, className, expanded, isLogoVisible = true, linkProps, onToggle, intl } = props;
 
     const classes = classNames('bdl-CollapsibleSidebar-logo', className);
 
@@ -102,16 +104,18 @@ function CollapsibleSidebarLogo(props: Props) {
                 expandedElement={
                     <>
                         {toggleButton}
-                        <LinkBase className="bdl-CollapsibleSidebar-logoLink" {...linkProps}>
-                            <>
-                                <StyledLogo
-                                    className="bdl-CollapsibleSidebar-logoIcon"
-                                    height={32 + 2 * 1 /* border */ + 2 * 4 /* padding */}
-                                    width={61 + 2 * 1 /* border */ + 2 * 4 /* padding */}
-                                />
-                                {badge}
-                            </>
-                        </LinkBase>
+                        {isLogoVisible && (
+                            <LinkBase className="bdl-CollapsibleSidebar-logoLink" {...linkProps}>
+                                <>
+                                    <StyledLogo
+                                        className="bdl-CollapsibleSidebar-logoIcon"
+                                        height={32 + 2 * 1 /* border */ + 2 * 4 /* padding */}
+                                        width={61 + 2 * 1 /* border */ + 2 * 4 /* padding */}
+                                    />
+                                    {badge}
+                                </>
+                            </LinkBase>
+                        )}
                     </>
                 }
             />

src/features/collapsible-sidebar/__tests__/CollapsibleSidebarLogo.test.js

@@ -69,4 +69,18 @@ describe('components/core/collapsible-sidebar/CollapsibleSidebar', () => {
         const componentProp = sidebar.find('CollapsibleSidebarItem');
         expect(componentProp.find('LinkBase').prop('someprop')).toBe(someValue);
     });
+
+    test.each([
+        [true, true],
+        [false, false],
+        [undefined, true],
+    ])('render Box logo when isLogoVisible=%s', (isLogoVisible, result) => {
+        const sidebar = getWrapper({
+            expanded: true,
+            isLogoVisible,
+        });
+
+        const componentProp = sidebar.find('CollapsibleSidebarItem');
+        expect(componentProp.exists('.bdl-CollapsibleSidebar-logoLink')).toBe(result);
+    });
 });