[WNMGDS-676] Update help drawer toggle to be a button (#860)

* Update helpdrawer toggle to be transparent button, allow extra props

* Update tests and snaps, move display block to CSS

* update snapshot

* update html example with button

Co-authored-by: Scott Weber <[email protected]>

packages/design-system-docs/src/pages/components/HelpDrawer/help-drawer.example.html

@@ -10,9 +10,9 @@
     labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
     laboris nisi ut aliquip ex ea commodo consequat.
   </p>
-  <span class="ds-u-display--block">
-    <a href="javascript:void(0);">Toggle the help drawer.</a>
-  </span>
+  <button class="ds-c-button ds-c-button--transparent ds-c-help-drawer__toggle" type="button">
+    Toggle the help drawer.
+  </button>
   <div class="ds-c-help-drawer">
     <div class="ds-c-help-drawer__header">
       <div

packages/design-system/src/components/HelpDrawer/HelpDrawerToggle.jsx

@@ -1,36 +1,40 @@
+import Button from '../Button/Button';
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 /**
  * A link that triggers the visibility of a help drawer
  */
 export class HelpDrawerToggle extends React.PureComponent {
   componentDidUpdate(prevProps) {
-    if (!this.props.helpDrawerOpen && prevProps.helpDrawerOpen) {
+    if (!this.props.helpDrawerOpen && prevProps.helpDrawerOpen && this.buttonRef) {
       this.buttonRef.focus();
     }
   }
 
   render() {
-    const inlineClass = `ds-u-display--${this.props.inline ? 'inline' : 'block'}`;
-    /* eslint-disable jsx-a11y/anchor-is-valid */
+    const { className, children, inline, showDrawer, ...others } = this.props;
+    const classes = classNames(
+      'ds-c-help-drawer__toggle',
+      inline && 'ds-u-display--inline',
+      className
+    );
+
     return (
-      // Use a <span> since a <div> may be invalid depending where this link is nested
-      <span className={inlineClass}>
-        <a
-          href="javascript:void(0);"
-          className={this.props.className}
-          ref={(el) => (this.buttonRef = el)}
-          onClick={() => this.props.showDrawer()}
-        >
-          {this.props.children}
-        </a>
-      </span>
+      <Button
+        className={classes}
+        inputRef={(el) => (this.buttonRef = el)}
+        onClick={() => showDrawer()}
+        variation="transparent"
+        {...others}
+      >
+        {children}
+      </Button>
     );
   }
 }
 
-/* eslint-disable react/no-unused-prop-types */
 HelpDrawerToggle.propTypes = {
   /**
    * Whether or not the Help Drawer controlled by this toggle is open or closed.

packages/design-system/src/components/HelpDrawer/HelpDrawerToggle.test.jsx

@@ -1,12 +1,11 @@
 import HelpDrawerToggle from './HelpDrawerToggle.jsx';
 import React from 'react';
-import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 
 const defaultProps = {
   helpDrawerOpen: false,
-  inline: true,
-  showDrawer: () => {},
+  inline: false,
+  showDrawer: jest.fn(),
 };
 
 function renderHelpDrawerToggle(props) {
@@ -20,23 +19,32 @@ function renderHelpDrawerToggle(props) {
 }
 
 describe('HelpDrawerToggle', () => {
-  it('calls props.showDrawer on link click', () => {
-    const showDrawer = jest.fn();
-    const { wrapper } = renderHelpDrawerToggle({ showDrawer });
-    const link = wrapper.find('a');
-    link.simulate('click');
-    expect(showDrawer).toHaveBeenCalled();
+  beforeEach(() => {
+    defaultProps.showDrawer.mockClear();
   });
 
-  it('renders a snapshot', () => {
-    const tree = renderer
-      .create(
-        <HelpDrawerToggle {...defaultProps}>
-          <p>link content</p>
-        </HelpDrawerToggle>
-      )
-      .toJSON();
+  it('renders a button', () => {
+    const { wrapper } = renderHelpDrawerToggle();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('calls props.showDrawer on toggle click', () => {
+    const { wrapper } = renderHelpDrawerToggle();
+    const toggle = wrapper.find('Button');
+    toggle.simulate('click');
+    expect(defaultProps.showDrawer).toHaveBeenCalled();
+  });
+
+  it('applies display utility through inline props', () => {
+    const { wrapper } = renderHelpDrawerToggle({ inline: true });
+    const toggle = wrapper.find('Button');
+    expect(toggle.hasClass('ds-u-display--inline')).toBe(true);
+  });
 
-    expect(tree).toMatchSnapshot();
+  it('passes through extra props', () => {
+    const ariaLabel = 'test';
+    const { wrapper } = renderHelpDrawerToggle({ ariaLabel });
+    const toggle = wrapper.find('Button');
+    expect(toggle.props().ariaLabel).toBe(ariaLabel);
   });
 });

packages/design-system/src/components/HelpDrawer/__snapshots__/HelpDrawerToggle.test.jsx.snap

@@ -1,16 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HelpDrawerToggle renders a snapshot 1`] = `
-<span
-  className="ds-u-display--inline"
+exports[`HelpDrawerToggle renders a button 1`] = `
+<Button
+  className="ds-c-help-drawer__toggle"
+  component="button"
+  helpDrawerOpen={false}
+  inputRef={[Function]}
+  onClick={[Function]}
+  type="button"
+  variation="transparent"
 >
-  <a
-    href="javascript:void(0);"
-    onClick={[Function]}
-  >
-    <p>
-      link content
-    </p>
-  </a>
-</span>
+  <p>
+    content
+  </p>
+</Button>
 `;

packages/design-system/src/styles/components/_HelpDrawer.scss

@@ -34,6 +34,12 @@
   }
 }
 
+.ds-c-help-drawer__toggle {
+  display: block;
+  font-weight: $font-normal;
+  padding: 0;
+}
+
 .ds-c-help-drawer__close-button {
   flex-shrink: 0;
 }