(CDPE-4655) Add tooltip to Sidebar.Footer

Prior to this commit, if the Sidebar Footer was used and the sign-out
button was present, there was no way to add a tooltip to explain the
usage of this button. This makes it difficult for someone using a screen
reader to find this button and use it.

With this commit, we add an optional parameter to the Sidebar Footer to
specify tooltip text. If specified, the tooltip will appear above the
sign-out button when hovered over.

Author: chrisleicester

CHANGELOG.md

@@ -1,10 +1,15 @@
+## react-components 5.33.1 (2022-03-04)
+
+- [SidebarFooter] Add tooltip option (by [@chrisleicester](https://github.com/chrisleicester) in [#552](https://github.com/puppetlabs/design-system/pull/552))
+
 ## react-components 5.33.0 (2022-02-28)
 
 - [Breadcrumb] Add Back type (by [@Lukeaber](https://github.com/Lukeaber) in [#549](https://github.com/puppetlabs/design-system/pull/549))
 
 ## react-components 5.32.5 (2022-02-24)
 
 - [Icon] Add change and change warning icon
+
 ## react-components 5.32.4 (2022-02-11)
 
 - [Icon] Add exception icon

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puppet/react-components",
-  "version": "5.33.0",
+  "version": "5.33.1",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "main": "build/library.js",
@@ -90,4 +90,4 @@
     "regenerator-runtime": "^0.13.7",
     "scroll-into-view-if-needed": "^2.2.25"
   }
-}
+}

packages/react-components/source/react/library/sidebar/Sidebar.md

@@ -68,6 +68,7 @@ import Badge from '../badge';
       onClick={console.log}
       enableSignout
       onSignout={console.log}
+      tooltip="Sign out!"
     />
   </Sidebar>
 </div>;

packages/react-components/source/react/library/sidebar/SidebarFooter.js

@@ -6,6 +6,7 @@ import Heading from '../heading';
 import Text from '../text';
 import Avatar from '../avatar';
 import Button from '../button';
+import TooltipHoverArea from '../tooltips/TooltipHoverArea';
 
 const propTypes = {
   /** The root HTML element  */
@@ -20,6 +21,8 @@ const propTypes = {
   profileIcon: PropTypes.node,
   /** Boolean flag to enable or disable (default) signout button */
   enableSignout: PropTypes.bool,
+  /** Sign-out icon tooltip text */
+  tooltip: PropTypes.string,
   /** Signout callback function */
   onSignout: PropTypes.func,
 };
@@ -31,6 +34,7 @@ const defaultProps = {
   minimized: false,
   profileIcon: null,
   enableSignout: false,
+  tooltip: null,
   onSignout: () => {},
 };
 
@@ -41,6 +45,7 @@ const SidebarFooter = ({
   minimized,
   profileIcon: profileIconProp,
   enableSignout,
+  tooltip,
   onSignout,
   ...rest
 }) => {
@@ -72,6 +77,13 @@ const SidebarFooter = ({
           <Icon type="sign-out" className="rc-sidebar-footer-signout-icon" />
         </Button>
       );
+      if (tooltip) {
+        signout = (
+          <TooltipHoverArea anchor="top" tooltip={tooltip}>
+            {signout}
+          </TooltipHoverArea>
+        );
+      }
     }
   }
 

packages/react-components/test/sidebar/Sidebar.js

@@ -130,5 +130,36 @@ describe('<Sidebar />', () => {
       wrapper.find('.rc-sidebar-footer-button-signout').simulate('click');
       expect(callback.calledOnce).to.be.true;
     });
+
+    it('should not render tooltip when no tooltip is specified', () => {
+      const callback = sinon.fake();
+      const wrapper = shallow(
+        <Sidebar.Footer enableSignout onSignout={callback} />,
+      );
+
+      expect(wrapper.find('TooltipHoverArea').length).to.eql(0);
+    });
+
+    it('should not render tooltip when sigout is disabled', () => {
+      const callback = sinon.fake();
+      const wrapper = shallow(
+        <Sidebar.Footer tooltip="I love being a tooltip" />,
+      );
+
+      expect(wrapper.find('TooltipHoverArea').length).to.eql(0);
+    });
+
+    it('should render a tooltip with signout is enabled and tooltip is specified', () => {
+      const callback = sinon.fake();
+      const wrapper = shallow(
+        <Sidebar.Footer
+          enableSignout
+          onSignout={callback}
+          tooltip="I love being a tooltip"
+        />,
+      );
+
+      expect(wrapper.find('TooltipHoverArea').length).to.eql(1);
+    });
   });
 });