From 8a5cb8bad7de9aec4c98ab3e8e34eb65d82bd561 Mon Sep 17 00:00:00 2001
From: Teemu Taskula <teemu.taskula@taitounited.fi>
Date: Tue, 12 Sep 2017 15:27:05 +0300
Subject: [PATCH] feat(icon): Added touchable prop to icon

Icon reacts to touch / click by changing the opacity
---
 src/Icon.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/Icon.js b/src/Icon.js
index 53efa15..bc207ef 100644
--- a/src/Icon.js
+++ b/src/Icon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import colorGetter from './colorGetter';
 
 const getIconClassname = (type, name) => {
@@ -17,6 +17,15 @@ const IconEl = styled.i`
   line-height: 1;
   font-size: ${props => props.size || '18px'};
   color: ${props => props.color ? colorGetter(props, props.color) : '#222'};
+
+  ${props => props.touchable && css`
+    opacity: 1;
+    transition: opacity 0.1s linear;
+
+    &:active {
+      opacity: 0.4;
+    }
+  `}
 `;
 
 Icon.propTypes = {