Animate icon button (#156)

* Animate icon button

* Bump version

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": [

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>

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,

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';

src/atoms/IconButton.stories.mdx → 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.*' } }}
 />

src/atoms/IconButton.tsx → 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;

src/molecules/index.ts

@@ -4,3 +4,4 @@ export * from './HeaderButton';
 export * from './Breadcrumbs';
 export * from './DonateButton';
 export * from './SubscribeInput';
+export * from './IconButton';

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: {