From abaea8c50809f37ae172e35be246c6bb5b4c3eae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Bel=C3=A1kovics?= <beladi96@gmail.com>
Date: Tue, 10 Sep 2019 21:20:56 +0200
Subject: [PATCH 1/7] WIP Add basic loading button

---
 src/atoms/button/button.stories.tsx |  3 ++-
 src/atoms/button/button.tsx         | 20 +++++++++++---
 src/atoms/icon/icon.stories.tsx     | 14 +++++++++-
 src/atoms/icon/icon.tsx             | 41 ++++++++++++++++++++++++++++-
 4 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/src/atoms/button/button.stories.tsx b/src/atoms/button/button.stories.tsx
index 11152c9..3898a78 100644
--- a/src/atoms/button/button.stories.tsx
+++ b/src/atoms/button/button.stories.tsx
@@ -22,7 +22,6 @@ export const tertiary = () => (
 
 export const disabled = () => (
   <Fragment>
-    {/** TODO: Box it! */}
     <Button onClick={action('clicked')} disabled>
       {text('Primary button content', 'primary')}
     </Button>
@@ -34,3 +33,5 @@ export const disabled = () => (
     </Button>
   </Fragment>
 );
+
+export const loading = () => <Button loading>{text('Content', 'primary')}</Button>;
diff --git a/src/atoms/button/button.tsx b/src/atoms/button/button.tsx
index 3e31fc5..e6b3142 100644
--- a/src/atoms/button/button.tsx
+++ b/src/atoms/button/button.tsx
@@ -11,9 +11,10 @@ import {
   typography,
   TypographyProps,
 } from 'styled-system';
-
 import { Theme, theme } from '../../theme';
 import { StyleFunction } from '../../utils/types';
+import { Flex } from '../flex/flex';
+import { Loading } from '../icon/icon';
 
 const defaultStyle = ({
   theme: {
@@ -130,6 +131,7 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
 interface Props {
   variant: ButtonVariant;
+  loading: boolean;
 }
 
 export type ButtonProps = Props &
@@ -155,8 +157,19 @@ const StyledButton = styled.button<ButtonProps>`
 `;
 
 // ts-ignore to fix type inconsistency because of color
-// @ts-ignore
-export const Button = (props: ButtonProps) => <StyledButton {...props} />;
+export const Button = (props: ButtonProps) =>
+  props.loading ? (
+    // @ts-ignore
+    <StyledButton {...props}>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Loading size="20px" />
+        Loading
+      </Flex>
+    </StyledButton>
+  ) : (
+    // @ts-ignore
+    <StyledButton {...props} />
+  );
 
 Button.defaultProps = {
   theme,
@@ -168,4 +181,5 @@ Button.defaultProps = {
   height: '40px',
   px: 3,
   py: 2,
+  loading: false,
 };
diff --git a/src/atoms/icon/icon.stories.tsx b/src/atoms/icon/icon.stories.tsx
index 3d60173..618e5ec 100644
--- a/src/atoms/icon/icon.stories.tsx
+++ b/src/atoms/icon/icon.stories.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
 import { atom } from '../../utils/structure';
-import { EmailIcon } from './icon';
+import { EmailIcon, Loading } from './icon';
 import { Box } from '../box/box';
+import { Flex } from '../flex/flex';
 
 export default { title: atom('Icon') };
 
@@ -12,3 +13,14 @@ export const email = () => (
     <EmailIcon color="#876543" variant="outline" />
   </Box>
 );
+
+export const loading = () => (
+  <Flex alignItems="center">
+    {/* <Loading size="16px" />
+    <Loading size="32px" />
+    <Loading size="64px" />
+    <Loading size="128px" />
+    <Loading size="256" /> */}
+    <Loading size="512px" />
+  </Flex>
+);
diff --git a/src/atoms/icon/icon.tsx b/src/atoms/icon/icon.tsx
index 83d845b..a439d9d 100644
--- a/src/atoms/icon/icon.tsx
+++ b/src/atoms/icon/icon.tsx
@@ -1,6 +1,6 @@
 // @ts-ignore
 import { themeGet } from '@styled-system/theme-get';
-import React, { HTMLProps, ReactNode } from 'react';
+import React, { FunctionComponent, HTMLProps, ReactNode } from 'react';
 import styled, { ThemeProps } from 'styled-components';
 import { color, ColorProps, compose, layout, LayoutProps, size, SizeProps } from 'styled-system';
 import { theme, Theme } from '../../theme';
@@ -69,3 +69,42 @@ EmailIcon.defaultProps = {
   color: 'primary.4',
   variant: 'fill',
 };
+
+export interface LoadingProps {
+  size: string;
+}
+export const Loading: FunctionComponent<LoadingProps> = ({ size }) => {
+  return (
+    <svg width={size} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+      <circle
+        cx="50"
+        cy="50"
+        fill="none"
+        r="40"
+        strokeWidth="15"
+        stroke="#00997F"
+        strokeDasharray="62.83185307179586 62.83185307179586"
+        transform="rotate(0 50 50)"
+      >
+        <animate
+          attributeName="r"
+          begin="0s"
+          dur="3s"
+          values={`40;29;40`}
+          keyTimes="0;0.45;1"
+          repeatCount="indefinite"
+        />
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          calcMode="linear"
+          values="0 50 50;360 50 50"
+          keyTimes="0;1"
+          dur="3s"
+          begin="0s"
+          repeatCount="indefinite"
+        ></animateTransform>
+      </circle>
+    </svg>
+  );
+};

From 7c196c703f56f78ff0876323c968b75ff4ce5e6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Bel=C3=A1kovics?= <beladi96@gmail.com>
Date: Wed, 11 Sep 2019 17:29:28 +0200
Subject: [PATCH 2/7] Correct animation

---
 src/atoms/button/button.stories.tsx | 6 +++++-
 src/atoms/icon/icon.stories.tsx     | 4 ++--
 src/atoms/icon/icon.tsx             | 6 +++---
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/atoms/button/button.stories.tsx b/src/atoms/button/button.stories.tsx
index 3898a78..27e33f2 100644
--- a/src/atoms/button/button.stories.tsx
+++ b/src/atoms/button/button.stories.tsx
@@ -34,4 +34,8 @@ export const disabled = () => (
   </Fragment>
 );
 
-export const loading = () => <Button loading>{text('Content', 'primary')}</Button>;
+export const loading = () => (
+  <Button loading disabled>
+    {text('Content', 'primary')}
+  </Button>
+);
diff --git a/src/atoms/icon/icon.stories.tsx b/src/atoms/icon/icon.stories.tsx
index 618e5ec..fd27578 100644
--- a/src/atoms/icon/icon.stories.tsx
+++ b/src/atoms/icon/icon.stories.tsx
@@ -16,11 +16,11 @@ export const email = () => (
 
 export const loading = () => (
   <Flex alignItems="center">
-    {/* <Loading size="16px" />
+    <Loading size="16px" />
     <Loading size="32px" />
     <Loading size="64px" />
     <Loading size="128px" />
-    <Loading size="256" /> */}
+    <Loading size="256" />
     <Loading size="512px" />
   </Flex>
 );
diff --git a/src/atoms/icon/icon.tsx b/src/atoms/icon/icon.tsx
index a439d9d..9ae9475 100644
--- a/src/atoms/icon/icon.tsx
+++ b/src/atoms/icon/icon.tsx
@@ -82,14 +82,14 @@ export const Loading: FunctionComponent<LoadingProps> = ({ size }) => {
         fill="none"
         r="40"
         strokeWidth="15"
-        stroke="#00997F"
+        stroke="#FFFFFF"
         strokeDasharray="62.83185307179586 62.83185307179586"
         transform="rotate(0 50 50)"
       >
         <animate
           attributeName="r"
           begin="0s"
-          dur="3s"
+          dur="2s"
           values={`40;29;40`}
           keyTimes="0;0.45;1"
           repeatCount="indefinite"
@@ -100,7 +100,7 @@ export const Loading: FunctionComponent<LoadingProps> = ({ size }) => {
           calcMode="linear"
           values="0 50 50;360 50 50"
           keyTimes="0;1"
-          dur="3s"
+          dur="2s"
           begin="0s"
           repeatCount="indefinite"
         ></animateTransform>

From b277f6358f5b7d2fa044975c1f92cec737f035d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Bel=C3=A1kovics?= <beladi96@gmail.com>
Date: Mon, 16 Sep 2019 20:02:14 +0200
Subject: [PATCH 3/7] Add button with icons

---
 src/atoms/button/button.stories.tsx |   9 ++-
 src/atoms/button/button.tsx         |  23 +++++-
 src/atoms/icon/email-svg.tsx        |  11 +++
 src/atoms/icon/icon.stories.tsx     |  14 ++--
 src/atoms/icon/icon.tsx             | 110 +++++-----------------------
 src/atoms/icon/loading-svg.tsx      |  39 ++++++++++
 6 files changed, 97 insertions(+), 109 deletions(-)
 create mode 100644 src/atoms/icon/email-svg.tsx
 create mode 100644 src/atoms/icon/loading-svg.tsx

diff --git a/src/atoms/button/button.stories.tsx b/src/atoms/button/button.stories.tsx
index 27e33f2..70a3574 100644
--- a/src/atoms/button/button.stories.tsx
+++ b/src/atoms/button/button.stories.tsx
@@ -3,6 +3,7 @@ import { text } from '@storybook/addon-knobs';
 import React, { Fragment } from 'react';
 import { atom } from '../../utils/structure';
 import { Button } from './button';
+import { Icon } from '../icon/icon';
 
 export default { title: atom('Button') };
 
@@ -34,8 +35,8 @@ export const disabled = () => (
   </Fragment>
 );
 
-export const loading = () => (
-  <Button loading disabled>
-    {text('Content', 'primary')}
-  </Button>
+export const loading = () => <Button loading />;
+
+export const withIcon = () => (
+  <Button icon={<Icon option="email" width="20px" color="primary.8" />}>{text('Content', 'Send')}</Button>
 );
diff --git a/src/atoms/button/button.tsx b/src/atoms/button/button.tsx
index e6b3142..32e4113 100644
--- a/src/atoms/button/button.tsx
+++ b/src/atoms/button/button.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLProps } from 'react';
+import React, { HTMLProps, ReactNode } from 'react';
 import styled, { css, ThemeProps } from 'styled-components';
 import {
   color,
@@ -14,7 +14,8 @@ import {
 import { Theme, theme } from '../../theme';
 import { StyleFunction } from '../../utils/types';
 import { Flex } from '../flex/flex';
-import { Loading } from '../icon/icon';
+import { Icon } from '../icon/icon';
+import { Paragraph } from '../paragraph/paragraph';
 
 const defaultStyle = ({
   theme: {
@@ -132,6 +133,7 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 interface Props {
   variant: ButtonVariant;
   loading: boolean;
+  icon: ReactNode;
 }
 
 export type ButtonProps = Props &
@@ -158,11 +160,23 @@ const StyledButton = styled.button<ButtonProps>`
 
 // ts-ignore to fix type inconsistency because of color
 export const Button = (props: ButtonProps) =>
-  props.loading ? (
+  props.icon ? (
     // @ts-ignore
     <StyledButton {...props}>
+      <Flex alignItems="center">
+        {props.icon}
+        <Flex flexGrow={1} justifyContent="center">
+          <Paragraph fontWeight="bold" lineHeight="0" pl={3}>
+            {props.children}
+          </Paragraph>
+        </Flex>
+      </Flex>
+    </StyledButton>
+  ) : props.loading ? (
+    // @ts-ignore
+    <StyledButton {...props} disabled>
       <Flex alignItems="center" justifyContent="space-between">
-        <Loading size="20px" />
+        <Icon option="loading" width="20px" color="#FFFFFF" />
         Loading
       </Flex>
     </StyledButton>
@@ -182,4 +196,5 @@ Button.defaultProps = {
   px: 3,
   py: 2,
   loading: false,
+  icon: '',
 };
diff --git a/src/atoms/icon/email-svg.tsx b/src/atoms/icon/email-svg.tsx
new file mode 100644
index 0000000..3095506
--- /dev/null
+++ b/src/atoms/icon/email-svg.tsx
@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from 'react';
+import { IconProps, StyledIcon } from './icon';
+
+export const EmailSVG: FunctionComponent<IconProps> = (props) => {
+  return (
+    // @ts-ignore
+    <StyledIcon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm0 2l-6.5 4.47a1 1 0 0 1-1 0L5 6z" />
+    </StyledIcon>
+  );
+};
diff --git a/src/atoms/icon/icon.stories.tsx b/src/atoms/icon/icon.stories.tsx
index fd27578..0763f53 100644
--- a/src/atoms/icon/icon.stories.tsx
+++ b/src/atoms/icon/icon.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { atom } from '../../utils/structure';
-import { EmailIcon, Loading } from './icon';
+import { Icon } from './icon';
 import { Box } from '../box/box';
 import { Flex } from '../flex/flex';
 
@@ -9,18 +9,14 @@ export default { title: atom('Icon') };
 
 export const email = () => (
   <Box>
-    <EmailIcon />
-    <EmailIcon color="#876543" variant="outline" />
+    <Icon option="email" width="16px" />
+    <Icon color="accent.5" option="email" width="32px" />
   </Box>
 );
 
 export const loading = () => (
   <Flex alignItems="center">
-    <Loading size="16px" />
-    <Loading size="32px" />
-    <Loading size="64px" />
-    <Loading size="128px" />
-    <Loading size="256" />
-    <Loading size="512px" />
+    <Icon option="loading" width="16px" color="#FF0000" />
+    <Icon option="loading" width="32px" color="#231391" />
   </Flex>
 );
diff --git a/src/atoms/icon/icon.tsx b/src/atoms/icon/icon.tsx
index 9ae9475..9e44f3e 100644
--- a/src/atoms/icon/icon.tsx
+++ b/src/atoms/icon/icon.tsx
@@ -1,110 +1,36 @@
 // @ts-ignore
 import { themeGet } from '@styled-system/theme-get';
-import React, { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import React, { HTMLProps } from 'react';
 import styled, { ThemeProps } from 'styled-components';
-import { color, ColorProps, compose, layout, LayoutProps, size, SizeProps } from 'styled-system';
 import { theme, Theme } from '../../theme';
+import { EmailSVG } from './email-svg';
+import { LoadingSVG } from './loading-svg';
+import { Box } from '../box/box';
 
-export type IconVariant = 'fill' | 'outline';
-export interface Props {
-  variant: IconVariant;
-}
-
-export type IconProps = Props & ThemeProps<Theme> & ColorProps & LayoutProps & SizeProps & HTMLProps<SVGElement>;
+export type IconOptions = 'email' | 'loading';
 
-interface Icons {
-  filledIcon: ReactNode;
-  outlinedIcon: ReactNode;
+export interface Props {
+  option?: IconOptions;
+  color: string;
 }
-type IconPropsWithIcons = IconProps & Icons;
 
-const styledProps = compose(
-  color,
-  layout,
-  size,
-);
+export type IconProps = Props & ThemeProps<Theme> & HTMLProps<SVGElement>;
 
-const StyledIcon = styled.svg<IconProps>`
+export const StyledIcon = styled.svg<IconProps>`
   fill: ${({ color }: IconProps) => themeGet(`colors.${color}`, color)};
-  ${styledProps};
 `;
 
-const Icon = ({ filledIcon, outlinedIcon, ...props }: IconPropsWithIcons) => {
-  // @ts-ignore
-  return <StyledIcon {...props}>{props.variant === 'fill' ? filledIcon : outlinedIcon}</StyledIcon>;
+export const Icon = ({ option, ...props }: IconProps) => {
+  return option === 'email' ? (
+    <EmailSVG {...props} />
+  ) : option === 'loading' ? (
+    <LoadingSVG {...props} />
+  ) : (
+    <Box>Icon not found</Box>
+  );
 };
 
 Icon.defaultProps = {
   theme,
-  size: 'iconSmall',
   color: 'primary.4',
-  variant: 'fill',
-};
-
-const EmailFill = () => (
-  <g data-name="Layer 2">
-    <g data-name="email">
-      <rect width="24" height="24" opacity="0" />
-      <path d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm0 2l-6.5 4.47a1 1 0 0 1-1 0L5 6z" />
-    </g>
-  </g>
-);
-
-const EmailOutline = () => (
-  <g data-name="Layer 2">
-    <g data-name="email">
-      <rect width="24" height="24" opacity="0" />
-      <path d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-.67 2L12 10.75 5.67 6zM19 18H5a1 1 0 0 1-1-1V7.25l7.4 5.55a1 1 0 0 0 .6.2 1 1 0 0 0 .6-.2L20 7.25V17a1 1 0 0 1-1 1z" />
-    </g>
-  </g>
-);
-
-export const EmailIcon = (props: IconProps) => {
-  return <Icon {...props} filledIcon={<EmailFill />} outlinedIcon={<EmailOutline />} />;
-};
-
-EmailIcon.defaultProps = {
-  theme,
-  size: 'iconSmall',
-  color: 'primary.4',
-  variant: 'fill',
-};
-
-export interface LoadingProps {
-  size: string;
-}
-export const Loading: FunctionComponent<LoadingProps> = ({ size }) => {
-  return (
-    <svg width={size} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-      <circle
-        cx="50"
-        cy="50"
-        fill="none"
-        r="40"
-        strokeWidth="15"
-        stroke="#FFFFFF"
-        strokeDasharray="62.83185307179586 62.83185307179586"
-        transform="rotate(0 50 50)"
-      >
-        <animate
-          attributeName="r"
-          begin="0s"
-          dur="2s"
-          values={`40;29;40`}
-          keyTimes="0;0.45;1"
-          repeatCount="indefinite"
-        />
-        <animateTransform
-          attributeName="transform"
-          type="rotate"
-          calcMode="linear"
-          values="0 50 50;360 50 50"
-          keyTimes="0;1"
-          dur="2s"
-          begin="0s"
-          repeatCount="indefinite"
-        ></animateTransform>
-      </circle>
-    </svg>
-  );
 };
diff --git a/src/atoms/icon/loading-svg.tsx b/src/atoms/icon/loading-svg.tsx
new file mode 100644
index 0000000..fa1e613
--- /dev/null
+++ b/src/atoms/icon/loading-svg.tsx
@@ -0,0 +1,39 @@
+import React, { FunctionComponent } from 'react';
+import { IconProps, StyledIcon } from './icon';
+
+export const LoadingSVG: FunctionComponent<IconProps> = (props: IconProps) => {
+  return (
+    //@ts-ignore
+    <StyledIcon {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+      <circle
+        cx="50"
+        cy="50"
+        fill="none"
+        r="40"
+        strokeWidth="15"
+        stroke={props.color}
+        strokeDasharray="62.83185307179586 62.83185307179586"
+        transform="rotate(0 50 50)"
+      >
+        <animate
+          attributeName="r"
+          begin="0s"
+          dur="2s"
+          values={`40;29;40`}
+          keyTimes="0;0.45;1"
+          repeatCount="indefinite"
+        />
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          calcMode="linear"
+          values="0 50 50;360 50 50"
+          keyTimes="0;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        ></animateTransform>
+      </circle>
+    </StyledIcon>
+  );
+};

From 62efcd381e18c02c868e0e64d077abeff9518f64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Bel=C3=A1kovics?= <beladi96@gmail.com>
Date: Tue, 17 Sep 2019 16:10:26 +0200
Subject: [PATCH 4/7] Finished button with icon

---
 src/atoms/button/button.stories.tsx |  5 +++--
 src/atoms/button/button.tsx         | 16 +++++++++-------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/atoms/button/button.stories.tsx b/src/atoms/button/button.stories.tsx
index 70a3574..8e8f60e 100644
--- a/src/atoms/button/button.stories.tsx
+++ b/src/atoms/button/button.stories.tsx
@@ -3,7 +3,6 @@ import { text } from '@storybook/addon-knobs';
 import React, { Fragment } from 'react';
 import { atom } from '../../utils/structure';
 import { Button } from './button';
-import { Icon } from '../icon/icon';
 
 export default { title: atom('Button') };
 
@@ -38,5 +37,7 @@ export const disabled = () => (
 export const loading = () => <Button loading />;
 
 export const withIcon = () => (
-  <Button icon={<Icon option="email" width="20px" color="primary.8" />}>{text('Content', 'Send')}</Button>
+  <Button icon="email" iconColor="primary.8">
+    {text('Content', 'Send')}
+  </Button>
 );
diff --git a/src/atoms/button/button.tsx b/src/atoms/button/button.tsx
index 32e4113..1af5b40 100644
--- a/src/atoms/button/button.tsx
+++ b/src/atoms/button/button.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLProps, ReactNode } from 'react';
+import React, { HTMLProps } from 'react';
 import styled, { css, ThemeProps } from 'styled-components';
 import {
   color,
@@ -14,7 +14,7 @@ import {
 import { Theme, theme } from '../../theme';
 import { StyleFunction } from '../../utils/types';
 import { Flex } from '../flex/flex';
-import { Icon } from '../icon/icon';
+import { Icon, IconOptions } from '../icon/icon';
 import { Paragraph } from '../paragraph/paragraph';
 
 const defaultStyle = ({
@@ -133,7 +133,8 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 interface Props {
   variant: ButtonVariant;
   loading: boolean;
-  icon: ReactNode;
+  icon: IconOptions;
+  iconColor: string;
 }
 
 export type ButtonProps = Props &
@@ -162,11 +163,11 @@ const StyledButton = styled.button<ButtonProps>`
 export const Button = (props: ButtonProps) =>
   props.icon ? (
     // @ts-ignore
-    <StyledButton {...props}>
+    <StyledButton {...props} py={1}>
       <Flex alignItems="center">
-        {props.icon}
+        <Icon option={props.icon} color={props.iconColor} width="25px" />
         <Flex flexGrow={1} justifyContent="center">
-          <Paragraph fontWeight="bold" lineHeight="0" pl={3}>
+          <Paragraph fontWeight="bold" lineHeight="0" pl={2} pr={1}>
             {props.children}
           </Paragraph>
         </Flex>
@@ -196,5 +197,6 @@ Button.defaultProps = {
   px: 3,
   py: 2,
   loading: false,
-  icon: '',
+  icon: 'email',
+  iconColor: 'primary.8',
 };

From ab6c726489bd97389488783e9351ab0819cab52f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Bel=C3=A1kovics?= <beladi96@gmail.com>
Date: Tue, 17 Sep 2019 16:25:46 +0200
Subject: [PATCH 5/7] Fix text-input

---
 src/atoms/icon/icon.tsx                       |  1 +
 .../text-input/text-input.stories.tsx         | 19 ++++++++++++-------
 src/components/text-input/text-input.tsx      |  2 +-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/atoms/icon/icon.tsx b/src/atoms/icon/icon.tsx
index 9e44f3e..ddc168f 100644
--- a/src/atoms/icon/icon.tsx
+++ b/src/atoms/icon/icon.tsx
@@ -33,4 +33,5 @@ export const Icon = ({ option, ...props }: IconProps) => {
 Icon.defaultProps = {
   theme,
   color: 'primary.4',
+  width: '24px',
 };
diff --git a/src/components/text-input/text-input.stories.tsx b/src/components/text-input/text-input.stories.tsx
index b7b3385..3fab5ed 100644
--- a/src/components/text-input/text-input.stories.tsx
+++ b/src/components/text-input/text-input.stories.tsx
@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 import { TextInput } from './text-input';
 import { component } from '../../utils/structure';
 import { action } from '@storybook/addon-actions';
-import { EmailIcon } from '../../atoms/icon/icon';
+import { Icon } from '../../atoms/icon/icon';
 import { Paragraph, Anchor } from '../../atoms';
 
 export default { title: component('TextInput') };
@@ -26,18 +26,23 @@ export const withOnChange = () => {
   );
 };
 export const withIcon = () => (
-  <TextInput label="Best skill with your nose" placeholder="Sorry for being nosy..." icon={<EmailIcon />} />
+  <TextInput label="Best skill with your nose" placeholder="Sorry for being nosy..." icon={<Icon option="email" />} />
 );
 
 export const withIconDisabled = () => (
-  <TextInput label="Best skill with your nose" placeholder="Sorry for being nosy..." icon={<EmailIcon />} disabled />
+  <TextInput
+    label="Best skill with your nose"
+    placeholder="Sorry for being nosy..."
+    icon={<Icon option="email" />}
+    disabled
+  />
 );
 
 export const withIconError = () => (
   <TextInput
     label="Best skill with your nose"
     placeholder="Sorry for being nosy..."
-    icon={<EmailIcon />}
+    icon={<Icon option="email" />}
     error="Too short"
   />
 );
@@ -47,7 +52,7 @@ export const withIconAndText = () => (
     label="Hand size"
     placeholder="Type here..."
     help="We handle this information privately"
-    icon={<EmailIcon />}
+    icon={<Icon option="email" />}
   />
 );
 
@@ -63,7 +68,7 @@ export const withIconAndComplexHelp = () => (
         </Anchor>
       </Paragraph>
     }
-    icon={<EmailIcon />}
+    icon={<Icon option="email" />}
   />
 );
 
@@ -80,6 +85,6 @@ export const withIconAndComplexHelpAndError = () => (
         </Anchor>
       </Paragraph>
     }
-    icon={<EmailIcon />}
+    icon={<Icon option="email" />}
   />
 );
diff --git a/src/components/text-input/text-input.tsx b/src/components/text-input/text-input.tsx
index af0346c..bb10151 100644
--- a/src/components/text-input/text-input.tsx
+++ b/src/components/text-input/text-input.tsx
@@ -56,7 +56,7 @@ const StyledInputContainer = styled(Flex)<StyledInputContainerProps>`
   }
 
   & > input:disabled ~ div > svg {
-    fill: ${({ theme: { colors } }: StyledInputContainerProps) => colors.neutral[5]};
+    fill: ${({ theme: { colors } }: StyledInputContainerProps) => colors.neutral[2]};
   }
 `;
 

From 4bd33025039c9ad87e8c328115e533f2cbebf568 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Bel=C3=A1kovics?= <beladi96@gmail.com>
Date: Tue, 17 Sep 2019 17:04:26 +0200
Subject: [PATCH 6/7] Fix button icon

---
 src/atoms/button/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/atoms/button/button.tsx b/src/atoms/button/button.tsx
index 1af5b40..61c4ede 100644
--- a/src/atoms/button/button.tsx
+++ b/src/atoms/button/button.tsx
@@ -197,6 +197,6 @@ Button.defaultProps = {
   px: 3,
   py: 2,
   loading: false,
-  icon: 'email',
+  icon: '',
   iconColor: 'primary.8',
 };

From 578124018a849c33b3995ec6f616dbc1bb44e336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Bel=C3=A1kovics?= <beladi96@gmail.com>
Date: Tue, 17 Sep 2019 17:31:48 +0200
Subject: [PATCH 7/7] Fix loding icon api

---
 src/atoms/button/button.tsx    | 2 +-
 src/atoms/icon/loading-svg.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/atoms/button/button.tsx b/src/atoms/button/button.tsx
index 61c4ede..bd37631 100644
--- a/src/atoms/button/button.tsx
+++ b/src/atoms/button/button.tsx
@@ -177,7 +177,7 @@ export const Button = (props: ButtonProps) =>
     // @ts-ignore
     <StyledButton {...props} disabled>
       <Flex alignItems="center" justifyContent="space-between">
-        <Icon option="loading" width="20px" color="#FFFFFF" />
+        <Icon option="loading" width="20px" color="white" />
         Loading
       </Flex>
     </StyledButton>
diff --git a/src/atoms/icon/loading-svg.tsx b/src/atoms/icon/loading-svg.tsx
index fa1e613..447e1ad 100644
--- a/src/atoms/icon/loading-svg.tsx
+++ b/src/atoms/icon/loading-svg.tsx
@@ -1,3 +1,5 @@
+// @ts-ignore
+import { themeGet } from '@styled-system/theme-get';
 import React, { FunctionComponent } from 'react';
 import { IconProps, StyledIcon } from './icon';
 
@@ -11,7 +13,7 @@ export const LoadingSVG: FunctionComponent<IconProps> = (props: IconProps) => {
         fill="none"
         r="40"
         strokeWidth="15"
-        stroke={props.color}
+        stroke={themeGet(`colors.${props.color}`, props.color)(props)}
         strokeDasharray="62.83185307179586 62.83185307179586"
         transform="rotate(0 50 50)"
       >