From 33a956768630203fa5318f94627503b685d85e04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Cruz?= <andremiguelcruz@msn.com>
Date: Mon, 1 Oct 2018 04:12:29 +0100
Subject: [PATCH] feat: add interactive prop to icon

---
 src/components/icon/Icon.css  | 4 ++++
 src/components/icon/Icon.js   | 9 ++++++---
 src/components/icon/README.md | 1 +
 stories/icon.js               | 5 +++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/icon/Icon.css b/src/components/icon/Icon.css
index f6e3e01..27ea2b0 100644
--- a/src/components/icon/Icon.css
+++ b/src/components/icon/Icon.css
@@ -8,6 +8,10 @@
     transition: fill 0.2s ease, fill-opacity 0.2s ease;
     fill: currentColor;
 
+    &.interactive {
+        cursor: pointer;
+    }
+
     & svg {
         width: inherit;
         height: inherit;
diff --git a/src/components/icon/Icon.js b/src/components/icon/Icon.js
index 84f36a5..cbadb2c 100644
--- a/src/components/icon/Icon.js
+++ b/src/components/icon/Icon.js
@@ -27,10 +27,12 @@ InlineIcon.propTypes = {
 };
 
 const Icon = (props) => {
-    const { svg, className } = props;
+    const { svg, interactive, className, ...rest } = props;
     const finalProps = {
-        ...props,
-        className: classNames(styles.icon, className),
+        tabIndex: interactive ? 0 : undefined,
+        ...rest,
+        svg,
+        className: classNames(styles.icon, interactive && styles.interactive, className),
     };
 
     return typeof svg === 'string' ?
@@ -40,6 +42,7 @@ const Icon = (props) => {
 
 Icon.propTypes = {
     svg: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+    interactive: PropTypes.bool,
     className: PropTypes.string,
 };
 
diff --git a/src/components/icon/README.md b/src/components/icon/README.md
index ac57359..21fd542 100644
--- a/src/components/icon/README.md
+++ b/src/components/icon/README.md
@@ -54,5 +54,6 @@ Alternatively you may change the `width` and `height` CSS properties.
 | name | type | default | description |
 | ---- | ---- | ------- | ----------- |
 | svg | string, object | | The svg contents or the object exported by [external-svg-sprite-loader](https://github.com/Karify/external-svg-sprite-loader) |
+| interactive | boolean | false | True will make the icon behave similarly to a button |
 
 Any other properties supplied will be spread to the root element.
diff --git a/stories/icon.js b/stories/icon.js
index 6fa4ce7..b02f026 100644
--- a/stories/icon.js
+++ b/stories/icon.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withReadme } from 'storybook-readme';
-import { withKnobs, object } from '@storybook/addon-knobs';
+import { withKnobs, boolean, object } from '@storybook/addon-knobs';
 import * as components from '../src';
 import readme from '../src/components/icon/README.md';
 
@@ -61,6 +61,7 @@ storiesOf('Icon', module)
 ))
 .add('Knobs playground ⚽', () => {
     const style = object('style', { fill: 'red', fillOpacity: 1, fontSize: '4.8rem' });
+    const interactive = boolean('interactive');
 
-    return <ReplyIcon style={ style } />;
+    return <ReplyIcon style={ style } interactive={ interactive } />;
 });