feat(Icon): adding disabled prop to Icon

CHANGELOG.md

@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add Button `fluid` prop @Bugaa92 ([#6](https://github.com/stardust-ui/react/pull/6))
+- Add Icon `disabled` prop @Bugaa92 ([#12](https://github.com/stardust-ui/react/pull/12))
 
 <!--------------------------------[ v0.2.2 ]------------------------------- -->
 ## [v0.2.2](https://github.com/stardust-ui/react/tree/v0.2.2) (2018-07-24)

docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Icon } from '@stardust-ui/react'
+
+const IconExampleDisabled = () => (
+  <div>
+    <Icon disabled name="users" size="big" />
+    <Icon disabled color="red" name="users" size="big" />
+    <Icon disabled color="orange" name="users" size="big" />
+    <Icon disabled color="yellow" name="users" size="big" />
+  </div>
+)
+
+export default IconExampleDisabled

docs/src/examples/components/Icon/States/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const States = () => (
+  <ExampleSection title="States">
+    <ComponentExample
+      title="Disabled"
+      description="An icon can show it is currently unable to be interacted with."
+      examplePath="components/Icon/States/IconExampleDisabled"
+    />
+  </ExampleSection>
+)
+
+export default States

docs/src/examples/components/Icon/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import Types from './Types'
 import Variations from './Variations'
+import States from './States'
 
 const IconExamples = () => (
   <div>
     <Types />
+    <States />
     <Variations />
   </div>
 )

src/components/Icon/Icon.tsx

@@ -43,6 +43,9 @@ class Icon extends UIComponent<any, any> {
       'black',
     ]),
 
+    /** An icon can show it is currently unable to be interacted with. */
+    disabled: PropTypes.bool,
+
     /** The type of font that needs to be used */
     kind: PropTypes.string,
 
@@ -53,7 +56,17 @@ class Icon extends UIComponent<any, any> {
     size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']),
   }
 
-  static handledProps = ['as', 'bordered', 'circular', 'className', 'color', 'kind', 'name', 'size']
+  static handledProps = [
+    'as',
+    'bordered',
+    'circular',
+    'className',
+    'color',
+    'disabled',
+    'kind',
+    'name',
+    'size',
+  ]
 
   static defaultProps = {
     as: 'i',

src/components/Icon/iconRules.ts

@@ -1,4 +1,5 @@
 import fontAwesomeIcons from './fontAwesomeIconRules'
+import { disabledStyles } from '../../styles/customCSS'
 
 const sizes = new Map([
   ['mini', 0.4],
@@ -38,7 +39,7 @@ const getBorderedStyles = (circular, borderColor, color) => ({
 })
 
 const iconRules = {
-  root: ({ props: { color, kind, name, size, bordered, circular }, variables: v }) => {
+  root: ({ props: { color, disabled, kind, name, size, bordered, circular }, variables: v }) => {
     const { fontFamily, content } = getIcon(kind, name)
     const iconColor = color || v.color
 
@@ -69,6 +70,8 @@ const iconRules = {
       },
 
       ...((bordered || circular) && getBorderedStyles(circular, v.borderColor, iconColor)),
+
+      ...(disabled && disabledStyles),
     }
   },
 }

src/styles/customCSS.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react'
+
+export const disabledStyles: CSSProperties = {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+}