feat(Accordion): support div for the title (#1318)

* feat(Accordion): support div for the title

This change also support non-`<button>` element for the expando button, via `renderExpando` prop.

Fixes #1178.

* chore(AccordionItem): test fix

Author: asudoh

.yarn-offline-mirror/carbon-components-9.14.0.tgz

@@ -109,7 +109,7 @@ describe('AccordionItem', () => {
     const wrapper = mount(
       <AccordionItem onClick={onClick} onHeadingClick={onHeadingClick} />
     );
-    const heading = wrapper.find('.bx--accordion__heading');
+    const heading = wrapper.find('button.bx--accordion__heading');
 
     it('should call onClick', () => {
       wrapper.simulate('click');
@@ -126,7 +126,7 @@ describe('AccordionItem', () => {
     const toggler = mount(
       <AccordionItem title="A heading">Lorem ipsum.</AccordionItem>
     );
-    const heading = toggler.find('.bx--accordion__heading');
+    const heading = toggler.find('button.bx--accordion__heading');
 
     it('should set state to open when clicked', () => {
       expect(toggler.state().open).toEqual(false);

src/components/AccordionItem/AccordionItem-test.js

@@ -4,6 +4,8 @@ import classnames from 'classnames';
 import { iconChevronRight } from 'carbon-icons';
 import Icon from '../Icon';
 
+const defaultRenderExpando = props => <button {...props} />;
+
 export default class AccordionItem extends Component {
   state = {};
 
@@ -23,6 +25,12 @@ export default class AccordionItem extends Component {
      */
     title: PropTypes.node,
 
+    /**
+     * The callback function to render the expando button.
+     * Can be a React component class.
+     */
+    renderExpando: PropTypes.func,
+
     /**
      * The description of the expando icon.
      */
@@ -46,6 +54,7 @@ export default class AccordionItem extends Component {
 
   static defaultProps = {
     title: 'title',
+    renderExpando: defaultRenderExpando,
     iconDescription: 'Expand/Collapse',
     open: false,
     onClick: () => {},
@@ -85,6 +94,7 @@ export default class AccordionItem extends Component {
     const {
       className,
       title,
+      renderExpando: Expando,
       iconDescription,
       children,
       onClick, // eslint-disable-line no-unused-vars
@@ -106,7 +116,7 @@ export default class AccordionItem extends Component {
         onKeyPress={this.handleKeyPress}
         role="presentation"
         {...other}>
-        <button
+        <Expando
           type="button"
           className="bx--accordion__heading"
           role="tab"
@@ -116,8 +126,8 @@ export default class AccordionItem extends Component {
             icon={iconChevronRight}
             description={iconDescription}
           />
-          <p className="bx--accordion__title">{title}</p>
-        </button>
+          <div className="bx--accordion__title">{title}</div>
+        </Expando>
         <div className="bx--accordion__content">{children}</div>
       </li>
     );