From 56fb9b0df46690b9c2e38430b8117dc0d3ba2bfd Mon Sep 17 00:00:00 2001
From: Maarten Zuidhoorn <maarten@zuidhoorn.com>
Date: Wed, 13 Oct 2021 16:20:31 +0200
Subject: [PATCH] Animate icon button (#156)

* Animate icon button

* Bump version
---
 package.json                                    | 2 +-
 src/assets/icons/blog.svg                       | 5 +++++
 src/atoms/Icon.stories.mdx                      | 8 ++++++++
 src/atoms/Icon.tsx                              | 2 ++
 src/atoms/index.ts                              | 1 -
 src/{atoms => molecules}/IconButton.stories.mdx | 2 +-
 src/{atoms => molecules}/IconButton.test.tsx    | 0
 src/{atoms => molecules}/IconButton.tsx         | 5 ++---
 src/molecules/index.ts                          | 1 +
 src/theme.ts                                    | 6 +++++-
 10 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/icons/blog.svg
 rename src/{atoms => molecules}/IconButton.stories.mdx (94%)
 rename src/{atoms => molecules}/IconButton.test.tsx (100%)
 rename src/{atoms => molecules}/IconButton.tsx (82%)

diff --git a/package.json b/package.json
index 1d4f8731..5a7648f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mycrypto/ui",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "The shared UI component library used across all MyCrypto products.",
   "repository": "MyCryptoHQ/ui",
   "keywords": [
diff --git a/src/assets/icons/blog.svg b/src/assets/icons/blog.svg
new file mode 100644
index 00000000..4e55cb68
--- /dev/null
+++ b/src/assets/icons/blog.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#424242">
+    <path fill-rule="evenodd"
+          d="M2.4 1.2A1.2 1.2 0 013.6 0h16.8a1.2 1.2 0 011.2 1.2v21.6a1.2 1.2 0 01-1.2 1.2H3.6a1.2 1.2 0 01-1.2-1.2V1.2zm2.4 1.2v19.2h14.4V2.4H4.8zM6 7.2A1.2 1.2 0 017.2 6h6a1.2 1.2 0 110 2.4h-6A1.2 1.2 0 016 7.2zM6 12a1.2 1.2 0 011.2-1.2h9.6a1.2 1.2 0 110 2.4H7.2A1.2 1.2 0 016 12zm0 4.8a1.2 1.2 0 011.2-1.2h9.6a1.2 1.2 0 110 2.4H7.2A1.2 1.2 0 016 16.8z"
+          clip-rule="evenodd"/>
+</svg>
diff --git a/src/atoms/Icon.stories.mdx b/src/atoms/Icon.stories.mdx
index 6b029af4..bc8eb105 100644
--- a/src/atoms/Icon.stories.mdx
+++ b/src/atoms/Icon.stories.mdx
@@ -35,6 +35,14 @@ import { Icon } from './Icon';
   </Story>
 </Canvas>
 
+## Blog
+
+<Canvas>
+  <Story name="Blog" args={{ width: 25, type: 'blog' }}>
+    {(props) => <Icon {...props} />}
+  </Story>
+</Canvas>
+
 ## Caret
 
 <Canvas>
diff --git a/src/atoms/Icon.tsx b/src/atoms/Icon.tsx
index 928bba66..bbbe6954 100644
--- a/src/atoms/Icon.tsx
+++ b/src/atoms/Icon.tsx
@@ -5,6 +5,7 @@ import type { BoxProps } from '.';
 import { Box } from '.';
 import alert from '../assets/icons/alert.svg';
 import arrow from '../assets/icons/arrow.svg';
+import blog from '../assets/icons/blog.svg';
 import caret from '../assets/icons/caret.svg';
 import checkmark from '../assets/icons/checkmark.svg';
 import copy from '../assets/icons/copy.svg';
@@ -33,6 +34,7 @@ import twitter from '../assets/logos/twitter.svg';
 export const icons = {
   alert,
   arrow,
+  blog,
   caret,
   checkmark,
   copy,
diff --git a/src/atoms/index.ts b/src/atoms/index.ts
index dfab9560..56b74b0b 100644
--- a/src/atoms/index.ts
+++ b/src/atoms/index.ts
@@ -9,7 +9,6 @@ export * from './Container';
 export * from './Breadcrumb';
 export * from './Panel';
 export * from './FooterSeparator';
-export * from './IconButton';
 export * from './Copyable';
 
 export { default as Spinner } from './Spinner';
diff --git a/src/atoms/IconButton.stories.mdx b/src/molecules/IconButton.stories.mdx
similarity index 94%
rename from src/atoms/IconButton.stories.mdx
rename to src/molecules/IconButton.stories.mdx
index b12d47ef..7d6dcdbe 100644
--- a/src/atoms/IconButton.stories.mdx
+++ b/src/molecules/IconButton.stories.mdx
@@ -3,7 +3,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { IconButton } from './IconButton';
 
 <Meta
-  title="atoms/IconButton"
+  title="molecules/IconButton"
   component={IconButton}
   parameters={{ actions: { argTypesRegex: '^on.*' } }}
 />
diff --git a/src/atoms/IconButton.test.tsx b/src/molecules/IconButton.test.tsx
similarity index 100%
rename from src/atoms/IconButton.test.tsx
rename to src/molecules/IconButton.test.tsx
diff --git a/src/atoms/IconButton.tsx b/src/molecules/IconButton.tsx
similarity index 82%
rename from src/atoms/IconButton.tsx
rename to src/molecules/IconButton.tsx
index 41357fed..3367262f 100644
--- a/src/atoms/IconButton.tsx
+++ b/src/molecules/IconButton.tsx
@@ -1,9 +1,8 @@
 import type { FunctionComponent } from 'react';
 import type { ButtonProps } from 'rebass/styled-components';
 
-import { Button } from './Button';
-import type { IconType } from './Icon';
-import { Icon } from './Icon';
+import { Button, Icon } from '../atoms';
+import type { IconType } from '../atoms';
 
 export interface IconButtonProps {
   icon: IconType;
diff --git a/src/molecules/index.ts b/src/molecules/index.ts
index 68c32713..80d60a16 100644
--- a/src/molecules/index.ts
+++ b/src/molecules/index.ts
@@ -4,3 +4,4 @@ export * from './HeaderButton';
 export * from './Breadcrumbs';
 export * from './DonateButton';
 export * from './SubscribeInput';
+export * from './IconButton';
diff --git a/src/theme.ts b/src/theme.ts
index ab598b25..611e8f54 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -302,7 +302,11 @@ export const theme = {
       fontSize: 2,
       fontFamily: 'body',
       padding: '8px',
-      boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.07)'
+      boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.07)',
+      transition: 'transform 0.3s ease 0s',
+      '&:hover': {
+        transform: 'scale(1.05)'
+      }
     }
   },
   variants: {