feat(icon): add className and style props

Author: CVVPK

src/components/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import { IconType } from './interfaces'
@@ -34,14 +34,28 @@ function getFontAwesomeIcon(icon: IconType): string {
 interface Props {
   /** The type of icon to display */
   icon: IconType
+  /**
+   * Defines the class of the icon.
+   */
+  className?: string
+  /**
+   * Defines the style of the icon.
+   */
+  style?: CSSProperties
 }
 
 /**
  * Icons provide contextual clues to users to make it easier to recognize functionality
  */
 const Icon = (props: Props) => {
-  const { icon } = props
-  return <FontAwesomeIcon icon={getFontAwesomeIcon(icon) as IconProp} />
+  const { icon, className, style } = props
+  return (
+    <FontAwesomeIcon
+      icon={getFontAwesomeIcon(icon) as IconProp}
+      className={className}
+      style={style}
+    />
+  )
 }
 
 export { Icon }

stories/CustomClasses.css

@@ -0,0 +1,18 @@
+.customClass {
+  border: 5px solid green;
+  background-color: yellow;
+  font-style: italic;
+  color: red;
+}
+
+.customClass2 {
+  background-color: violet;
+  color: black;
+  border: 2px solid purple;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.customClass:hover {
+  background-color: cornflowerblue;
+}

stories/icons.stories.tsx

@@ -74,3 +74,12 @@ storiesOf('Icons', module)
       <br />
     </div>
   ))
+  .add('Icon with custom class & style', () => (
+    <div>
+      <span>Custom class: </span>
+      <Icon icon="setting" className="customClass2" />
+      <br />
+      <span>Custom style: </span>
+      <Icon icon="setting" style={{ color: 'red' }} />
+    </div>
+  ))

stories/welcome.tsx

@@ -2,4 +2,6 @@ import React from 'react'
 
 import { storiesOf } from '@storybook/react'
 
+import './CustomClasses.css'
+
 storiesOf('Welcome', module).add('Introduction', () => <h1>Welcome to HospitalRun Storybook</h1>)

test/icon.test.tsx

@@ -126,4 +126,16 @@ describe('Icon', () => {
     expect(fontAwesomeIcon).toHaveLength(1)
     expect(fontAwesomeIcon.props().icon).toBe('cog')
   })
+
+  it('Icon can use custom class', () => {
+    const iconWrapper = shallow(<Icon icon="setting" className="customClass" />)
+    const fontAwesomeIcon = iconWrapper.find(FontAwesomeIcon)
+    expect(fontAwesomeIcon.props().className).toEqual('customClass')
+  })
+
+  it('Icon can use custom style', () => {
+    const iconWrapper = shallow(<Icon icon="setting" style={{ background: 'red' }} />)
+    const fontAwesomeIcon = iconWrapper.find(FontAwesomeIcon)
+    expect(fontAwesomeIcon.props().style).toMatchObject({ background: 'red' })
+  })
 })