(CDPE-4655) Add tooltip to Sidebar.Footer

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}
+      signoutTooltip="This is a custom tooltip"
     />
   </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 */
+  signoutTooltip: PropTypes.string,
   /** Signout callback function */
   onSignout: PropTypes.func,
 };
@@ -31,6 +34,7 @@ const defaultProps = {
   minimized: false,
   profileIcon: null,
   enableSignout: false,
+  signoutTooltip: 'Sign out',
   onSignout: () => {},
 };
 
@@ -41,6 +45,7 @@ const SidebarFooter = ({
   minimized,
   profileIcon: profileIconProp,
   enableSignout,
+  signoutTooltip,
   onSignout,
   ...rest
 }) => {
@@ -65,12 +70,14 @@ const SidebarFooter = ({
 
     if (enableSignout) {
       signout = (
-        <Button
-          className="rc-sidebar-footer-button-signout"
-          onClick={onSignout}
-        >
-          <Icon type="sign-out" className="rc-sidebar-footer-signout-icon" />
-        </Button>
+        <TooltipHoverArea anchor="top" tooltip={signoutTooltip}>
+          <Button
+            className="rc-sidebar-footer-button-signout"
+            onClick={onSignout}
+          >
+            <Icon type="sign-out" className="rc-sidebar-footer-signout-icon" />
+          </Button>
+        </TooltipHoverArea>
       );
     }
   }

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

@@ -130,5 +130,39 @@ describe('<Sidebar />', () => {
       wrapper.find('.rc-sidebar-footer-button-signout').simulate('click');
       expect(callback.calledOnce).to.be.true;
     });
+
+    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 the default tooltip when no tooltip is specified', () => {
+      const callback = sinon.fake();
+      const wrapper = shallow(
+        <Sidebar.Footer enableSignout onSignout={callback} />,
+      );
+      expect(wrapper.find('TooltipHoverArea').prop('tooltip')).to.eql(
+        'Sign out',
+      );
+    });
+
+    it('should render a a custom tooltip when specified', () => {
+      const callback = sinon.fake();
+      const wrapper = shallow(
+        <Sidebar.Footer
+          enableSignout
+          onSignout={callback}
+          signoutTooltip="I love being a tooltip"
+        />,
+      );
+
+      expect(wrapper.find('TooltipHoverArea').prop('tooltip')).to.eql(
+        'I love being a tooltip',
+      );
+    });
   });
 });