feat(Accordion): add icon shorthand for AccordionTitle (#3417)

* docs(AccordionExampleStandardShorthand): Custom Title Icon Example

Added an example on how to add a custom icon via the standard Shorthand

* fixed lint issues

* feat(Accordion): add `icon` shorthand for AccordionTitle

* fix typings & style

* fix tests

* fix types

docs/src/examples/modules/Accordion/Advanced/AccordionExampleIconShorthand.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Accordion } from 'semantic-ui-react'
+
+const panels = [
+  {
+    key: 'acquire-dog',
+    title: {
+      content: 'How do you acquire a dog?',
+      icon: 'question',
+    },
+    content: {
+      content: (
+        <span>
+          Three common ways for a prospective owner to acquire a dog is from pet
+          shops, private owners, or shelters.
+        </span>
+      ),
+    },
+  },
+  {
+    key: 'care-for-dogs',
+    title: {
+      content: 'How do I care for a dog?',
+      icon: 'question',
+    },
+    content: {
+      content: (
+        <span>
+          It is entirely acceptable to feed your dog a pure kibble diet. Or you
+          can mix their diet up with some cooked or raw meat, fish, vegetables
+          and rice.
+        </span>
+      ),
+    },
+  },
+]
+
+const AccordionExampleIconShorthand = () => (
+  <Accordion defaultActiveIndex={0} panels={panels} />
+)
+
+export default AccordionExampleIconShorthand

docs/src/examples/modules/Accordion/Advanced/index.js

@@ -28,6 +28,11 @@ const AccordionAdvancedExamples = () => (
       description='Panels of Accordion can be rendered via shorthand prop.'
       examplePath='modules/Accordion/Advanced/AccordionExampleShorthand'
     />
+    <ComponentExample
+      title='Icon shorthand'
+      description='An accordion title can have a customizable icon.'
+      examplePath='modules/Accordion/Advanced/AccordionExampleIconShorthand'
+    />
   </ExampleSection>
 )
 

docs/src/examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js

@@ -25,21 +25,24 @@ const panels = [
       content: (
         <div>
           <p>
-            Three common ways for a prospective owner to acquire a dog is from pet shops, private
-            owners, or shelters.
+            Three common ways for a prospective owner to acquire a dog is from
+            pet shops, private owners, or shelters.
           </p>
           <p>
-            A pet shop may be the most convenient way to buy a dog. Buying a dog from a private
-            owner allows you to assess the pedigree and upbringing of your dog before choosing to
-            take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog
-            who may not find one so readily.
+            A pet shop may be the most convenient way to buy a dog. Buying a dog
+            from a private owner allows you to assess the pedigree and
+            upbringing of your dog before choosing to take it home. Lastly,
+            finding your dog from a shelter, helps give a good home to a dog who
+            may not find one so readily.
           </p>
         </div>
       ),
     },
   },
 ]
 
-const AccordionExampleStandardShorthand = () => <Accordion defaultActiveIndex={0} panels={panels} />
+const AccordionExampleStandardShorthand = () => (
+  <Accordion defaultActiveIndex={0} panels={panels} />
+)
 
 export default AccordionExampleStandardShorthand

src/modules/Accordion/AccordionTitle.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../../generic'
+
+import { IconProps } from '../../elements/Icon'
+import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 
 export interface AccordionTitleProps extends StrictAccordionTitleProps {
   [key: string]: any
@@ -21,6 +23,9 @@ export interface StrictAccordionTitleProps {
   /** Shorthand for primary content. */
   content?: SemanticShorthandContent
 
+  /** Shorthand for Icon. */
+  icon?: SemanticShorthandItem<IconProps>
+
   /** AccordionTitle index inside Accordion. */
   index?: number | string
 

src/modules/Accordion/AccordionTitle.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import {
+  childrenUtils,
   createShorthandFactory,
   customPropTypes,
   getElementType,
@@ -32,6 +33,9 @@ export default class AccordionTitle extends Component {
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
 
+    /** Shorthand for Icon. */
+    icon: customPropTypes.itemShorthand,
+
     /** AccordionTitle index inside Accordion. */
     index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -47,13 +51,14 @@ export default class AccordionTitle extends Component {
   handleClick = e => _.invoke(this.props, 'onClick', e, this.props)
 
   render() {
-    const { active, children, className, content } = this.props
+    const { active, children, className, content, icon } = this.props
 
     const classes = cx(useKeyOnly(active, 'active'), 'title', className)
     const rest = getUnhandledProps(AccordionTitle, this.props)
     const ElementType = getElementType(AccordionTitle, this.props)
+    const iconValue = _.isNil(icon) ? 'dropdown' : icon
 
-    if (_.isNil(content)) {
+    if (!childrenUtils.isNil(children)) {
       return (
         <ElementType {...rest} className={classes} onClick={this.handleClick}>
           {children}
@@ -63,7 +68,7 @@ export default class AccordionTitle extends Component {
 
     return (
       <ElementType {...rest} className={classes} onClick={this.handleClick}>
-        <Icon name='dropdown' />
+        {Icon.create(iconValue, { autoGenerateKey: false })}
         {content}
       </ElementType>
     )

test/specs/modules/Accordion/AccordionTitle-test.js

@@ -9,6 +9,10 @@ describe('AccordionTitle', () => {
   common.rendersChildren(AccordionTitle)
 
   common.implementsCreateMethod(AccordionTitle)
+  common.implementsIconProp(AccordionTitle, {
+    alwaysPresent: true,
+    autoGenerateKey: false,
+  })
 
   common.propKeyOnlyToClassName(AccordionTitle, 'active')
 
@@ -18,8 +22,7 @@ describe('AccordionTitle', () => {
       const event = { target: null }
       const props = { content: 'title', index: 0 }
 
-      shallow(<AccordionTitle onClick={spy} {...props} />)
-        .simulate('click', event)
+      shallow(<AccordionTitle onClick={spy} {...props} />).simulate('click', event)
 
       spy.should.have.been.calledOnce()
       spy.should.have.been.calledWithMatch(event, props)