From 0033f551b13a2a1fba68b7f4081cc17db4e25d65 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Wed, 18 Jul 2018 20:20:46 +0200
Subject: [PATCH] feat(Icon): adding disabled prop to Icon

---
 CHANGELOG.md                                      |  1 +
 .../Icon/States/IconExampleDisabled.shorthand.tsx | 13 +++++++++++++
 .../src/examples/components/Icon/States/index.tsx | 15 +++++++++++++++
 docs/src/examples/components/Icon/index.tsx       |  2 ++
 src/components/Icon/Icon.tsx                      | 15 ++++++++++++++-
 src/components/Icon/iconRules.ts                  |  5 ++++-
 src/styles/customCSS.ts                           |  6 ++++++
 7 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx
 create mode 100644 docs/src/examples/components/Icon/States/index.tsx
 create mode 100644 src/styles/customCSS.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b475373ea..0091f8aa1e 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx
new file mode 100644
index 0000000000..cf96b7e913
--- /dev/null
+++ b/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
diff --git a/docs/src/examples/components/Icon/States/index.tsx b/docs/src/examples/components/Icon/States/index.tsx
new file mode 100644
index 0000000000..9b7c5c4d87
--- /dev/null
+++ b/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
diff --git a/docs/src/examples/components/Icon/index.tsx b/docs/src/examples/components/Icon/index.tsx
index 91ff33f942..1bce2c8166 100644
--- a/docs/src/examples/components/Icon/index.tsx
+++ b/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>
 )
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 93b0d2c1dd..285e0b8053 100644
--- a/src/components/Icon/Icon.tsx
+++ b/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',
diff --git a/src/components/Icon/iconRules.ts b/src/components/Icon/iconRules.ts
index 7d7510a044..1bc4e90091 100644
--- a/src/components/Icon/iconRules.ts
+++ b/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),
     }
   },
 }
diff --git a/src/styles/customCSS.ts b/src/styles/customCSS.ts
new file mode 100644
index 0000000000..1c3772ae50
--- /dev/null
+++ b/src/styles/customCSS.ts
@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react'
+
+export const disabledStyles: CSSProperties = {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+}