From f2b47c9e6bac10e04f170e4cd65e11a1623af537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 30 Sep 2020 09:22:56 -0300
Subject: [PATCH 01/26] add strong/bold property fot Tiltle component

---
 src/dataDisplay/Title/index.tsx         | 21 +++++++++++----------
 src/dataDisplay/Title/title.stories.tsx | 11 +++++++++++
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/dataDisplay/Title/index.tsx b/src/dataDisplay/Title/index.tsx
index bffd8d4a..a641a004 100644
--- a/src/dataDisplay/Title/index.tsx
+++ b/src/dataDisplay/Title/index.tsx
@@ -7,45 +7,46 @@ type Props = {
   children: string | React.ReactNode;
   size: ThemeTitleSize;
   withoutMargin?: boolean;
+  strong?: boolean;
 };
 
-const StyledH1 = styled.h1<{ withoutMargin?: boolean }>`
+const StyledH1 = styled.h1<{ withoutMargin?: boolean; strong?: boolean }>`
   font-family: 'Averta';
   font-size: ${({ theme }) => theme.title.size.xl.fontSize};
   line-height: ${({ theme }) => theme.title.size.xl.lineHeight};
-  font-weight: normal;
+  font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
   margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '30px')} 0;
 `;
 
-const StyledH2 = styled.h2<{ withoutMargin?: boolean }>`
+const StyledH2 = styled.h2<{ withoutMargin?: boolean; strong?: boolean }>`
   font-family: 'Averta';
   font-size: ${({ theme }) => theme.title.size.lg.fontSize};
   line-height: ${({ theme }) => theme.title.size.lg.lineHeight};
-  font-weight: normal;
+  font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
   margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '28px')} 0;
 `;
 
-const StyledH3 = styled.h3<{ withoutMargin?: boolean }>`
+const StyledH3 = styled.h3<{ withoutMargin?: boolean; strong?: boolean }>`
   font-family: 'Averta';
   font-size: ${({ theme }) => theme.title.size.md.fontSize};
   line-height: ${({ theme }) => theme.title.size.md.lineHeight};
-  font-weight: normal;
+  font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
   margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '26px')} 0;
 `;
 
-const StyledH4 = styled.h4<{ withoutMargin?: boolean }>`
+const StyledH4 = styled.h4<{ withoutMargin?: boolean; strong?: boolean }>`
   font-family: 'Averta';
   font-size: ${({ theme }) => theme.title.size.sm.fontSize};
   line-height: ${({ theme }) => theme.title.size.sm.lineHeight};
-  font-weight: normal;
+  font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
   margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '22px')} 0;
 `;
 
-const StyledH5 = styled.h5<{ withoutMargin?: boolean }>`
+const StyledH5 = styled.h5<{ withoutMargin?: boolean; strong?: boolean }>`
   font-family: 'Averta';
   font-size: ${({ theme }) => theme.title.size.xs.fontSize};
   line-height: ${({ theme }) => theme.title.size.xs.lineHeight};
-  font-weight: normal;
+  font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
   margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '18px')} 0;
 `;
 
diff --git a/src/dataDisplay/Title/title.stories.tsx b/src/dataDisplay/Title/title.stories.tsx
index aabd4b3e..d8460d30 100644
--- a/src/dataDisplay/Title/title.stories.tsx
+++ b/src/dataDisplay/Title/title.stories.tsx
@@ -25,3 +25,14 @@ export const WithSizes = (): React.ReactElement => {
     </>
   );
 };
+
+export const Bold = (): React.ReactElement => (
+  <>
+    <Title size="lg" strong>
+      Title LG
+    </Title>
+    <Title size="md" strong>
+      Title MD
+    </Title>
+  </>
+);

From 4853333fcb32657bf0b7e24835d1522eae62730c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 22 Oct 2020 12:00:38 -0300
Subject: [PATCH 02/26] fix vertical divider story

---
 src/dataDisplay/Divider/divider.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dataDisplay/Divider/divider.stories.tsx b/src/dataDisplay/Divider/divider.stories.tsx
index f446ebf0..e5ca3d60 100644
--- a/src/dataDisplay/Divider/divider.stories.tsx
+++ b/src/dataDisplay/Divider/divider.stories.tsx
@@ -19,7 +19,7 @@ export const Horizontal = (): React.ReactElement => (
 );
 
 export const Vertical = (): React.ReactElement => (
-  <div style={{ display: 'flex' }}>
+  <div style={{ display: 'flex', height: '150px', justifyContent: 'center', alignItems: 'center' }}>
     <div>Some content</div>
     <Divider orientation="vertical" />
     <div>Some content2</div>

From ff0b18ddc953d9326b1d1335e4f9d81c42eb704c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 22 Oct 2020 12:20:32 -0300
Subject: [PATCH 03/26] add format

---
 src/dataDisplay/Divider/divider.stories.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/dataDisplay/Divider/divider.stories.tsx b/src/dataDisplay/Divider/divider.stories.tsx
index e5ca3d60..311e9e84 100644
--- a/src/dataDisplay/Divider/divider.stories.tsx
+++ b/src/dataDisplay/Divider/divider.stories.tsx
@@ -19,7 +19,13 @@ export const Horizontal = (): React.ReactElement => (
 );
 
 export const Vertical = (): React.ReactElement => (
-  <div style={{ display: 'flex', height: '150px', justifyContent: 'center', alignItems: 'center' }}>
+  <div
+    style={{
+      display: 'flex',
+      height: '150px',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}>
     <div>Some content</div>
     <Divider orientation="vertical" />
     <div>Some content2</div>

From 7372e49b0b15ad8a384041f18a0bc0d603ae3ba7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 25 Nov 2020 10:56:42 -0300
Subject: [PATCH 04/26] add Dot component

---
 src/dataDisplay/Dot/dot.stories.tsx | 26 +++++++++++++++++
 src/dataDisplay/Dot/index.tsx       | 44 +++++++++++++++++++++++++++++
 src/dataDisplay/index.ts            |  1 +
 3 files changed, 71 insertions(+)
 create mode 100644 src/dataDisplay/Dot/dot.stories.tsx
 create mode 100644 src/dataDisplay/Dot/index.tsx

diff --git a/src/dataDisplay/Dot/dot.stories.tsx b/src/dataDisplay/Dot/dot.stories.tsx
new file mode 100644
index 00000000..f448b016
--- /dev/null
+++ b/src/dataDisplay/Dot/dot.stories.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Title } from '..';
+
+import Dot from './index';
+
+export default {
+  title: 'Data Display/Dot',
+  component: Dot,
+  parameters: {
+    componentSubtitle: 'Generic Dot container for text or icons.',
+  },
+};
+
+export const Text = (): React.ReactElement => <Dot content="text" />;
+
+export const Icon = (): React.ReactElement => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}>
+    <Dot content="icon" />
+    <Title size="xs">Some title</Title>
+  </div>
+);
diff --git a/src/dataDisplay/Dot/index.tsx b/src/dataDisplay/Dot/index.tsx
new file mode 100644
index 00000000..9985ef2d
--- /dev/null
+++ b/src/dataDisplay/Dot/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Title, Icon } from '../../index';
+
+type Props = {
+  className?: string;
+  content?: 'text' | 'icon';
+};
+
+const DotText = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  height: 36px;
+  width: 36px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const DotIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  height: 36px;
+  width: 36px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const Dot = ({ className, content }: Props): React.ReactElement => {
+  return content === 'text' ? (
+    <DotText className={className}>
+      <Title size="xs">1</Title>
+    </DotText>
+  ) : (
+    <DotIcon className={className}>
+      <Icon size="sm" type="check" color="white" />
+    </DotIcon>
+  );
+};
+
+export default Dot;
diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts
index d5c82a96..0f29ac95 100644
--- a/src/dataDisplay/index.ts
+++ b/src/dataDisplay/index.ts
@@ -1,5 +1,6 @@
 export { default as Card } from './Card';
 export { default as Divider } from './Divider';
+export { default as Dot } from './Dot';
 export { default as FixedIcon } from './FixedIcon';
 export { default as FixedDialog } from './FixedDialog';
 export * from './Icon';

From 43026b8eb648e86c1e0f5d3e518f18031650c614 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 25 Nov 2020 14:32:04 -0300
Subject: [PATCH 05/26] Take font from theme

---
 src/dataDisplay/Icon/icon.stories.tsx |  2 +-
 src/dataDisplay/Title/index.tsx       | 10 +++++-----
 src/inputs/ButtonLink/index.tsx       |  2 +-
 src/inputs/Link/index.tsx             |  2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx
index 4a66c7aa..8fb4401d 100644
--- a/src/dataDisplay/Icon/icon.stories.tsx
+++ b/src/dataDisplay/Icon/icon.stories.tsx
@@ -28,7 +28,7 @@ export const Icons = (): React.ReactElement => {
     width: 140px;
     height: 140px;
     border: 1px solid ${({ theme }) => theme.colors.background};
-    font-family: 'Averta', sans-serif;
+    font-family: ${({ theme }) => theme.fonts.fontFamily}, sans-serif;
     font-size: 14px;
   `;
 
diff --git a/src/dataDisplay/Title/index.tsx b/src/dataDisplay/Title/index.tsx
index a641a004..c8b521a3 100644
--- a/src/dataDisplay/Title/index.tsx
+++ b/src/dataDisplay/Title/index.tsx
@@ -11,7 +11,7 @@ type Props = {
 };
 
 const StyledH1 = styled.h1<{ withoutMargin?: boolean; strong?: boolean }>`
-  font-family: 'Averta';
+  font-family: ${({ theme }) => theme.fonts.fontFamily};
   font-size: ${({ theme }) => theme.title.size.xl.fontSize};
   line-height: ${({ theme }) => theme.title.size.xl.lineHeight};
   font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
@@ -19,7 +19,7 @@ const StyledH1 = styled.h1<{ withoutMargin?: boolean; strong?: boolean }>`
 `;
 
 const StyledH2 = styled.h2<{ withoutMargin?: boolean; strong?: boolean }>`
-  font-family: 'Averta';
+  font-family: ${({ theme }) => theme.fonts.fontFamily};
   font-size: ${({ theme }) => theme.title.size.lg.fontSize};
   line-height: ${({ theme }) => theme.title.size.lg.lineHeight};
   font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
@@ -27,7 +27,7 @@ const StyledH2 = styled.h2<{ withoutMargin?: boolean; strong?: boolean }>`
 `;
 
 const StyledH3 = styled.h3<{ withoutMargin?: boolean; strong?: boolean }>`
-  font-family: 'Averta';
+  font-family: ${({ theme }) => theme.fonts.fontFamily};
   font-size: ${({ theme }) => theme.title.size.md.fontSize};
   line-height: ${({ theme }) => theme.title.size.md.lineHeight};
   font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
@@ -35,7 +35,7 @@ const StyledH3 = styled.h3<{ withoutMargin?: boolean; strong?: boolean }>`
 `;
 
 const StyledH4 = styled.h4<{ withoutMargin?: boolean; strong?: boolean }>`
-  font-family: 'Averta';
+  font-family: ${({ theme }) => theme.fonts.fontFamily};
   font-size: ${({ theme }) => theme.title.size.sm.fontSize};
   line-height: ${({ theme }) => theme.title.size.sm.lineHeight};
   font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
@@ -43,7 +43,7 @@ const StyledH4 = styled.h4<{ withoutMargin?: boolean; strong?: boolean }>`
 `;
 
 const StyledH5 = styled.h5<{ withoutMargin?: boolean; strong?: boolean }>`
-  font-family: 'Averta';
+  font-family: ${({ theme }) => theme.fonts.fontFamily};
   font-size: ${({ theme }) => theme.title.size.xs.fontSize};
   line-height: ${({ theme }) => theme.title.size.xs.lineHeight};
   font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
diff --git a/src/inputs/ButtonLink/index.tsx b/src/inputs/ButtonLink/index.tsx
index d6663570..a55848fc 100644
--- a/src/inputs/ButtonLink/index.tsx
+++ b/src/inputs/ButtonLink/index.tsx
@@ -18,7 +18,7 @@ const StyledButtonLink = styled.button<Props>`
   text-decoration: underline;
   cursor: pointer;
   color: ${({ theme, color }) => theme['colors'][color]};
-  font-family: inherit;
+  font-family: ${({ theme }) => theme.fonts.fontFamily};
   display: flex;
   align-items: center;
 
diff --git a/src/inputs/Link/index.tsx b/src/inputs/Link/index.tsx
index bd3bc333..419a9aca 100644
--- a/src/inputs/Link/index.tsx
+++ b/src/inputs/Link/index.tsx
@@ -12,7 +12,7 @@ const StyledLink = styled.a<Props>`
   text-decoration: underline;
   cursor: pointer;
   color: ${({ theme, color = 'primary' }) => theme['colors'][color]};
-  font-family: inherit;
+  font-family: ${({ theme }) => theme.fonts.fontFamily};
   font-size: ${({ size = 'md', theme }) => theme.text.size[size].fontSize};
 `;
 

From d93c13bd72ed1384ead8e84f1c94510e1702345a Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 25 Nov 2020 14:32:09 -0300
Subject: [PATCH 06/26] refactor dot

---
 src/dataDisplay/Dot/dot.stories.tsx | 25 ++++++++++-----------
 src/dataDisplay/Dot/index.tsx       | 34 ++++++-----------------------
 2 files changed, 19 insertions(+), 40 deletions(-)

diff --git a/src/dataDisplay/Dot/dot.stories.tsx b/src/dataDisplay/Dot/dot.stories.tsx
index f448b016..0314227e 100644
--- a/src/dataDisplay/Dot/dot.stories.tsx
+++ b/src/dataDisplay/Dot/dot.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Title } from '..';
 
-import Dot from './index';
+import { Dot, Text, Icon } from '../../index';
 
 export default {
   title: 'Data Display/Dot',
@@ -11,16 +10,16 @@ export default {
   },
 };
 
-export const Text = (): React.ReactElement => <Dot content="text" />;
+export const DotWithText = (): React.ReactElement => (
+  <Dot color="primary">
+    <Text size="sm" color="white">
+      1
+    </Text>
+  </Dot>
+);
 
-export const Icon = (): React.ReactElement => (
-  <div
-    style={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    }}>
-    <Dot content="icon" />
-    <Title size="xs">Some title</Title>
-  </div>
+export const DotWithIcon = (): React.ReactElement => (
+  <Dot color="rinkeby">
+    <Icon color="white" type="check" size="sm" />
+  </Dot>
 );
diff --git a/src/dataDisplay/Dot/index.tsx b/src/dataDisplay/Dot/index.tsx
index 9985ef2d..637beb26 100644
--- a/src/dataDisplay/Dot/index.tsx
+++ b/src/dataDisplay/Dot/index.tsx
@@ -1,44 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Title, Icon } from '../../index';
+import { ThemeColors } from '../../theme';
 
 type Props = {
   className?: string;
-  content?: 'text' | 'icon';
+  color: ThemeColors;
 };
 
-const DotText = styled.div`
+const StyledDot = styled.div<Props>`
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   height: 36px;
   width: 36px;
-  background-color: ${({ theme }) => theme.colors.primary};
-  color: ${({ theme }) => theme.colors.white};
+  background-color: ${({ theme, color }) => theme.colors[color]};
 `;
 
-const DotIcon = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  height: 36px;
-  width: 36px;
-  background-color: ${({ theme }) => theme.colors.primary};
-  color: ${({ theme }) => theme.colors.white};
-`;
-
-const Dot = ({ className, content }: Props): React.ReactElement => {
-  return content === 'text' ? (
-    <DotText className={className}>
-      <Title size="xs">1</Title>
-    </DotText>
-  ) : (
-    <DotIcon className={className}>
-      <Icon size="sm" type="check" color="white" />
-    </DotIcon>
-  );
-};
+const Dot: React.FC<Props> = ({ children, ...rest }): React.ReactElement => (
+  <StyledDot {...rest}>{children}</StyledDot>
+);
 
 export default Dot;

From c3b156780b6683a2ca5afa4d0e0bc4de55507a82 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 25 Nov 2020 14:49:07 -0300
Subject: [PATCH 07/26] refactor title

---
 src/dataDisplay/Title/index.tsx | 37 ++++++---------------------------
 1 file changed, 6 insertions(+), 31 deletions(-)

diff --git a/src/dataDisplay/Title/index.tsx b/src/dataDisplay/Title/index.tsx
index c8b521a3..ba899bed 100644
--- a/src/dataDisplay/Title/index.tsx
+++ b/src/dataDisplay/Title/index.tsx
@@ -50,47 +50,22 @@ const StyledH5 = styled.h5<{ withoutMargin?: boolean; strong?: boolean }>`
   margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '18px')} 0;
 `;
 
-const Title = ({
-  children,
-  size,
-  withoutMargin,
-  ...rest
-}: Props): React.ReactElement => {
+const Title = ({ children, size, ...rest }: Props): React.ReactElement => {
   switch (size) {
     case 'xl': {
-      return (
-        <StyledH1 withoutMargin={withoutMargin} {...rest}>
-          {children}
-        </StyledH1>
-      );
+      return <StyledH1 {...rest}>{children}</StyledH1>;
     }
     case 'lg': {
-      return (
-        <StyledH2 withoutMargin={withoutMargin} {...rest}>
-          {children}
-        </StyledH2>
-      );
+      return <StyledH2 {...rest}>{children}</StyledH2>;
     }
     case 'md': {
-      return (
-        <StyledH3 withoutMargin={withoutMargin} {...rest}>
-          {children}
-        </StyledH3>
-      );
+      return <StyledH3 {...rest}>{children}</StyledH3>;
     }
     case 'sm': {
-      return (
-        <StyledH4 withoutMargin={withoutMargin} {...rest}>
-          {children}
-        </StyledH4>
-      );
+      return <StyledH4 {...rest}>{children}</StyledH4>;
     }
     case 'xs': {
-      return (
-        <StyledH5 withoutMargin={withoutMargin} {...rest}>
-          {children}
-        </StyledH5>
-      );
+      return <StyledH5 {...rest}>{children}</StyledH5>;
     }
   }
 };

From abba8c50ad363e4737214bc331fff5ef64875cda Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 25 Nov 2020 16:41:21 -0300
Subject: [PATCH 08/26] Button bordered

---
 src/inputs/Button/button.stories.tsx | 65 ++++++++++++++++++----------
 src/inputs/Button/index.tsx          | 61 +++++++++++++++++++-------
 2 files changed, 87 insertions(+), 39 deletions(-)

diff --git a/src/inputs/Button/button.stories.tsx b/src/inputs/Button/button.stories.tsx
index 1a157c83..e6052e43 100644
--- a/src/inputs/Button/button.stories.tsx
+++ b/src/inputs/Button/button.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import Button from './index';
 
@@ -10,42 +11,58 @@ export default {
   },
 };
 
+const Wrapper = styled.div`
+  > * {
+    margin-right: 5px;
+  }
+`;
+
 export const SimpleButton = (): React.ReactElement => (
   <>
-    <div>
-      <Button size="md" color="primary" variant="contained">
-        text
-      </Button>
-      <Button size="md" color="secondary" variant="contained">
-        text
-      </Button>
-      <Button size="md" color="error" variant="contained">
-        text
-      </Button>
-    </div>
-    <div>
-      <Button size="md" color="primary" variant="outlined">
-        text
-      </Button>
-      <Button size="md" color="secondary" variant="outlined">
-        text
-      </Button>
-      <Button size="md" color="error" variant="outlined">
-        text
-      </Button>
-    </div>
+    <Button size="md" color="primary" variant="contained">
+      text
+    </Button>
+
+    <Button size="md" color="primary" variant="outlined">
+      text
+    </Button>
+
+    <Button size="md" iconType="addressBook" color="primary" variant="bordered">
+      text
+    </Button>
   </>
 );
 
-export const Sizes = (): React.ReactElement => (
+export const DisabledButton = (): React.ReactElement => (
   <>
+    <Button size="md" color="primary" variant="contained" disabled>
+      text
+    </Button>
+
+    <Button size="md" color="primary" variant="outlined" disabled>
+      text
+    </Button>
+
+    <Button
+      size="md"
+      iconType="addressBook"
+      color="primary"
+      variant="bordered"
+      disabled>
+      text
+    </Button>
+  </>
+);
+
+export const Sizes = (): React.ReactElement => (
+  <Wrapper>
     <Button size="md" color="primary" variant="contained">
       text
     </Button>
     <Button size="lg" color="primary" variant="contained">
       some text
     </Button>
-  </>
+  </Wrapper>
 );
 
 export const withIcon = (): React.ReactElement => (
diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx
index 8a775963..334eafa4 100644
--- a/src/inputs/Button/index.tsx
+++ b/src/inputs/Button/index.tsx
@@ -6,12 +6,17 @@ import styled from 'styled-components';
 import theme, { ThemeButtonSize } from '../../theme';
 import { Icon, IconType } from '../../dataDisplay/Icon';
 
+enum Variant {
+  outlined = 'outlined',
+  bordered = 'bordered',
+  contained = 'contained',
+}
 export interface Props extends React.ComponentPropsWithoutRef<'button'> {
   children: React.ReactNode;
   iconType?: keyof IconType;
   size: ThemeButtonSize;
   color: 'primary' | 'secondary' | 'error';
-  variant?: 'outlined' | 'contained';
+  variant?: keyof typeof Variant;
 }
 
 type HoverColor = 'primaryHover' | 'secondaryHover' | 'errorHover';
@@ -28,29 +33,55 @@ const Button = ({
   variant,
   ...rest
 }: Props): React.ReactElement => {
+  const getColor = (isDisabled?: boolean) => {
+    switch (variant) {
+      case Variant.contained:
+        return theme.colors.white;
+      case Variant.outlined:
+      case Variant.bordered:
+        return isDisabled
+          ? theme.colors[`${color}Hover` as HoverColor]
+          : theme.colors[color];
+    }
+  };
+
+  const getBackgroundColor = (isHover?: boolean) => {
+    switch (variant) {
+      case Variant.contained:
+        return isHover
+          ? theme.colors[`${color}Hover` as HoverColor]
+          : theme.colors[color];
+      case Variant.outlined:
+      case Variant.bordered:
+        return theme.colors.white;
+    }
+  };
+
+  const getBorder = () => {
+    switch (variant) {
+      case Variant.contained:
+      case Variant.outlined:
+        return 'none';
+      case Variant.bordered:
+        return `1px solid ${theme.colors[color]}`;
+    }
+  };
+
   const BootstrapButton = withStyles({
     root: {
       height: theme.buttons.size[size].height,
       padding: theme.buttons.size[size].padding,
       fontFamily: theme.fonts.fontFamily,
-      color: variant === 'contained' ? theme.colors.white : theme.colors[color],
+      color: getColor(),
       'text-transform': 'capitalize',
-      'background-color':
-        variant === 'contained' ? theme.colors[color] : theme.colors.white,
-      'border-color': theme.colors[color],
-
+      'background-color': getBackgroundColor(),
+      border: getBorder(),
       '&:hover': {
-        'border-color': theme.colors[color],
-        'background-color':
-          variant === 'contained'
-            ? theme.colors[`${color}Hover` as HoverColor]
-            : theme.colors.white,
+        'background-color': getBackgroundColor(true),
       },
-
       '&:disabled': {
         opacity: theme.colors.disabled.opacity,
-        color:
-          variant === 'contained' ? theme.colors.white : theme.colors[color],
+        color: getColor(true),
       },
     },
   })(ButtonMUI);
@@ -60,7 +91,7 @@ const Button = ({
       {iconType && (
         <StyledIcon
           size="md"
-          color={variant === 'contained' ? 'white' : color}
+          color={variant === Variant.contained ? 'white' : color}
           type={iconType}
         />
       )}

From 978df21fbaa5fe375991c07126ba41722f8654cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 25 Nov 2020 20:31:49 -0300
Subject: [PATCH 09/26] add Text comp inside button to control text size

---
 src/dataDisplay/Dot/dot.stories.tsx  |  2 +-
 src/inputs/Button/button.stories.tsx | 45 +++++++++++++++++++++-------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/dataDisplay/Dot/dot.stories.tsx b/src/dataDisplay/Dot/dot.stories.tsx
index 0314227e..637dadd9 100644
--- a/src/dataDisplay/Dot/dot.stories.tsx
+++ b/src/dataDisplay/Dot/dot.stories.tsx
@@ -12,7 +12,7 @@ export default {
 
 export const DotWithText = (): React.ReactElement => (
   <Dot color="primary">
-    <Text size="sm" color="white">
+    <Text size="xl" color="white">
       1
     </Text>
   </Dot>
diff --git a/src/inputs/Button/button.stories.tsx b/src/inputs/Button/button.stories.tsx
index e6052e43..0ce7a83b 100644
--- a/src/inputs/Button/button.stories.tsx
+++ b/src/inputs/Button/button.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import Button from './index';
+import { Text } from '../../index';
 
 export default {
   title: 'Inputs/Button',
@@ -20,15 +21,21 @@ const Wrapper = styled.div`
 export const SimpleButton = (): React.ReactElement => (
   <>
     <Button size="md" color="primary" variant="contained">
-      text
+      <Text size="xl" color="white">
+        Text
+      </Text>
     </Button>
 
     <Button size="md" color="primary" variant="outlined">
-      text
+      <Text size="xl" color="primary">
+        Text
+      </Text>
     </Button>
 
     <Button size="md" iconType="addressBook" color="primary" variant="bordered">
-      text
+      <Text size="xl" color="primary">
+        Text
+      </Text>
     </Button>
   </>
 );
@@ -36,11 +43,15 @@ export const SimpleButton = (): React.ReactElement => (
 export const DisabledButton = (): React.ReactElement => (
   <>
     <Button size="md" color="primary" variant="contained" disabled>
-      text
+      <Text size="xl" color="white">
+        Text
+      </Text>
     </Button>
 
     <Button size="md" color="primary" variant="outlined" disabled>
-      text
+      <Text size="xl" color="primary">
+        Text
+      </Text>
     </Button>
 
     <Button
@@ -49,7 +60,9 @@ export const DisabledButton = (): React.ReactElement => (
       color="primary"
       variant="bordered"
       disabled>
-      text
+      <Text size="xl" color="primary">
+        Text
+      </Text>
     </Button>
   </>
 );
@@ -57,10 +70,14 @@ export const DisabledButton = (): React.ReactElement => (
 export const Sizes = (): React.ReactElement => (
   <Wrapper>
     <Button size="md" color="primary" variant="contained">
-      text
+      <Text size="xl" color="white">
+        Text
+      </Text>
     </Button>
     <Button size="lg" color="primary" variant="contained">
-      some text
+      <Text size="xl" color="white">
+        Text
+      </Text>
     </Button>
   </Wrapper>
 );
@@ -72,17 +89,23 @@ export const withIcon = (): React.ReactElement => (
       iconType="addressBook"
       color="primary"
       onClick={() => alert('click')}>
-      text
+      <Text size="xl" color="primary">
+        Text
+      </Text>
     </Button>
     <Button size="lg" iconType="addressBook" color="error" variant="outlined">
-      text
+      <Text size="xl" color="error">
+        Text
+      </Text>
     </Button>
     <Button
       size="lg"
       iconType="addressBook"
       color="primary"
       variant="contained">
-      text
+      <Text size="xl" color="white">
+        Text
+      </Text>
     </Button>
   </>
 );

From b75e5200b71f818662563de3ed140df38f7f6d88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 26 Nov 2020 13:59:26 -0300
Subject: [PATCH 10/26] fix button width, border-radius and padding

---
 src/inputs/Button/button.stories.tsx | 22 ++++++++++++++++++++--
 src/inputs/Button/index.tsx          |  3 +++
 src/theme.ts                         |  4 ++--
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/inputs/Button/button.stories.tsx b/src/inputs/Button/button.stories.tsx
index 0ce7a83b..ca1400da 100644
--- a/src/inputs/Button/button.stories.tsx
+++ b/src/inputs/Button/button.stories.tsx
@@ -32,8 +32,12 @@ export const SimpleButton = (): React.ReactElement => (
       </Text>
     </Button>
 
-    <Button size="md" iconType="addressBook" color="primary" variant="bordered">
-      <Text size="xl" color="primary">
+    <Button
+      size="md"
+      iconType="addressBook"
+      color="secondary"
+      variant="bordered">
+      <Text size="xl" color="secondary">
         Text
       </Text>
     </Button>
@@ -79,6 +83,11 @@ export const Sizes = (): React.ReactElement => (
         Text
       </Text>
     </Button>
+    <Button size="lg" color="secondary" variant="bordered">
+      <Text size="xl" color="secondary">
+        Text
+      </Text>
+    </Button>
   </Wrapper>
 );
 
@@ -107,5 +116,14 @@ export const withIcon = (): React.ReactElement => (
         Text
       </Text>
     </Button>
+    <Button
+      size="lg"
+      iconType="addressBook"
+      color="secondary"
+      variant="bordered">
+      <Text size="xl" color="secondary">
+        Text
+      </Text>
+    </Button>
   </>
 );
diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx
index 334eafa4..82b3f4ae 100644
--- a/src/inputs/Button/index.tsx
+++ b/src/inputs/Button/index.tsx
@@ -70,12 +70,14 @@ const Button = ({
   const BootstrapButton = withStyles({
     root: {
       height: theme.buttons.size[size].height,
+      minWidth: theme.buttons.size[size].minWidth,
       padding: theme.buttons.size[size].padding,
       fontFamily: theme.fonts.fontFamily,
       color: getColor(),
       'text-transform': 'capitalize',
       'background-color': getBackgroundColor(),
       border: getBorder(),
+      'border-radius': '8px',
       '&:hover': {
         'background-color': getBackgroundColor(true),
       },
@@ -91,6 +93,7 @@ const Button = ({
       {iconType && (
         <StyledIcon
           size="md"
+          /* size={iconSize} */
           color={variant === Variant.contained ? 'white' : color}
           type={iconType}
         />
diff --git a/src/theme.ts b/src/theme.ts
index ac1ecc5b..461c6b3d 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,8 +1,8 @@
 const theme = {
   buttons: {
     size: {
-      md: { height: '36px', padding: '0 16px' },
-      lg: { height: '52px', padding: '0 25px' },
+      md: { height: '36px', minWidth: '130px', padding: '0 24px' },
+      lg: { height: '52px', minWidth: '240px', padding: '0 48px' },
     },
   },
   colors: {

From c757fd25dcf098dd8225383cc4101e869992c118 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 26 Nov 2020 15:51:44 -0300
Subject: [PATCH 11/26] fix fonts not being recognized

---
 .storybook/webpack.config.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index cc490772..b104fee1 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -11,6 +11,16 @@ module.exports = ({ config }) => {
     ]
   });
 
+  config.module.rules = config.module.rules.map(rule => {
+    if (rule.test && rule.test.toString().includes('woff')) {
+      return {
+        ...rule,
+        test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/
+      }
+    }
+    return rule
+  })
+
   config.module.rules.push({
     test: /\.(woff|woff2|eot|ttf)$/,
     use: [

From 688cf9675e11bdd634ba711cc613d79599a1ed76 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 26 Nov 2020 15:51:49 -0300
Subject: [PATCH 12/26] misc fixes

---
 .storybook/gnosisTheme.js |  6 +-----
 .storybook/preview.js     | 12 ++++++------
 src/typings/index.d.ts    | 10 ++--------
 3 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/.storybook/gnosisTheme.js b/.storybook/gnosisTheme.js
index 9ffba40e..64b97a7c 100644
--- a/.storybook/gnosisTheme.js
+++ b/.storybook/gnosisTheme.js
@@ -10,11 +10,7 @@ export default create({
   appBg: 'white',
   appContentBg: 'white',
   appBorderColor: 'grey',
-  appBorderRadius: 4,
-
-  // Typography
-  fontBase: '"Roboto", sans-serif',
-  fontCode: 'monospace',
+  appBorderRadius: 4,  
 
   // Text colors
   textColor: '#333333',
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 221af33b..c4b605e4 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -6,15 +6,15 @@ import { ThemeProvider } from 'styled-components';
 import theme from '../src/theme';
 import GlobalStyles from '../src/global';
 
-addDecorator(storyFn => (
-  <ThemeProvider theme={theme}>
+addDecorator((storyFn) => (
+  <>
     <GlobalStyles />
-    {storyFn()}
-  </ThemeProvider>
+    <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
+  </>
 ));
 
 addParameters({
   options: {
-    showRoots: false
-  }
+    showRoots: false,
+  },
 });
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index 1f17fc28..241f358d 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -8,11 +8,5 @@ declare module '*.svg' {
   export default src;
 }
 
-declare module '*.woff2' {
-  import React = require('react');
-
-  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
-
-  const src: string;
-  export default src;
-}
+declare module '*.ttf';
+declare module '*.woff2';

From 0a7879854cf6cba09d2d8c3c107fde4b33c60245 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 26 Nov 2020 15:59:57 -0300
Subject: [PATCH 13/26] add iconSize prop in Button

---
 src/inputs/Button/button.stories.tsx | 26 ++++++++++++++++++++++++++
 src/inputs/Button/index.tsx          |  9 +++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/inputs/Button/button.stories.tsx b/src/inputs/Button/button.stories.tsx
index ca1400da..dd31a609 100644
--- a/src/inputs/Button/button.stories.tsx
+++ b/src/inputs/Button/button.stories.tsx
@@ -127,3 +127,29 @@ export const withIcon = (): React.ReactElement => (
     </Button>
   </>
 );
+
+export const withIconSize = (): React.ReactElement => (
+  <>
+    <Button
+      variant="bordered"
+      size="lg"
+      iconType="addressBook"
+      color="primary"
+      onClick={() => alert('click')}>
+      <Text size="xl" color="primary">
+        Text
+      </Text>
+    </Button>
+    <Button
+      variant="bordered"
+      iconType="addressBook"
+      iconSize="sm"
+      size="lg"
+      color="primary"
+      onClick={() => alert('click')}>
+      <Text size="xl" color="primary">
+        Text
+      </Text>
+    </Button>
+  </>
+);
diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx
index 82b3f4ae..b3879ec6 100644
--- a/src/inputs/Button/index.tsx
+++ b/src/inputs/Button/index.tsx
@@ -3,7 +3,7 @@ import ButtonMUI from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
 import styled from 'styled-components';
 
-import theme, { ThemeButtonSize } from '../../theme';
+import theme, { ThemeButtonSize, ThemeIconSize } from '../../theme';
 import { Icon, IconType } from '../../dataDisplay/Icon';
 
 enum Variant {
@@ -13,10 +13,11 @@ enum Variant {
 }
 export interface Props extends React.ComponentPropsWithoutRef<'button'> {
   children: React.ReactNode;
-  iconType?: keyof IconType;
   size: ThemeButtonSize;
   color: 'primary' | 'secondary' | 'error';
   variant?: keyof typeof Variant;
+  iconType?: keyof IconType;
+  iconSize?: ThemeIconSize;
 }
 
 type HoverColor = 'primaryHover' | 'secondaryHover' | 'errorHover';
@@ -29,6 +30,7 @@ const Button = ({
   children,
   iconType,
   size,
+  iconSize = 'md',
   color,
   variant,
   ...rest
@@ -92,8 +94,7 @@ const Button = ({
     <BootstrapButton {...rest}>
       {iconType && (
         <StyledIcon
-          size="md"
-          /* size={iconSize} */
+          size={iconSize}
           color={variant === Variant.contained ? 'white' : color}
           type={iconType}
         />

From 3e9b7d5237a334926126f95b8542f7f63cc52086 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 27 Nov 2020 10:05:06 -0300
Subject: [PATCH 14/26] add safe icon

---
 src/dataDisplay/Icon/icon.stories.tsx |  1 +
 src/dataDisplay/Icon/images/safe.tsx  | 47 +++++++++++++++++++++++++++
 src/dataDisplay/Icon/index.tsx        |  2 ++
 3 files changed, 50 insertions(+)
 create mode 100644 src/dataDisplay/Icon/images/safe.tsx

diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx
index 8fb4401d..1a068e54 100644
--- a/src/dataDisplay/Icon/icon.stories.tsx
+++ b/src/dataDisplay/Icon/icon.stories.tsx
@@ -88,6 +88,7 @@ export const Icons = (): React.ReactElement => {
     'resync',
     'rocket',
     'scan',
+    'safe',
     'search',
     'sendAgain',
     'sent',
diff --git a/src/dataDisplay/Icon/images/safe.tsx b/src/dataDisplay/Icon/images/safe.tsx
new file mode 100644
index 00000000..c4bea6eb
--- /dev/null
+++ b/src/dataDisplay/Icon/images/safe.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+export default {
+  sm: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16">
+      <g fill="none" fillRule="evenodd">
+        <path d="M0 0H16V16H0z" />
+        <path
+          fill="#B2B5B2"
+          d="M13 3c1.054 0 1.918.816 1.994 1.85l.005.15v6c0 1.054-.815 1.918-1.85 1.994l-.148.007c0 .512-.386.935-.884.993l-.117.007c-.552 0-1-.448-1-1H5c0 .512-.386.935-.883.993L4 14.001c-.553 0-1-.448-1-1-1.054-.001-1.919-.817-1.995-1.852L1 11V5c0-1.053.816-1.917 1.85-1.994L3 3h10zm0 2H3v6h10V5z"
+        />
+        <path
+          fill="#B2B5B2"
+          d="M10.49 6.5c-.827 0-1.5.672-1.5 1.5s.673 1.5 1.5 1.5c.83 0 1.5-.672 1.5-1.5s-.67-1.5-1.5-1.5"
+        />
+      </g>
+    </svg>
+  ),
+  md: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24">
+      <g fill="none" fillRule="evenodd">
+        <path d="M0 0H24V24H0z" />
+        <path
+          fill="#B2B5B2"
+          d="M20 4c1.054 0 1.918.816 1.995 1.85L22 6v12c0 1.054-.816 1.918-1.85 1.994l-.153.005c0 .518-.385.94-.883.998l-.117.007c-.512 0-.935-.386-.993-.884L17.997 20H5.998c0 .518-.386.94-.883.998l-.117.007c-.553 0-1-.447-1-1-1.053-.005-1.916-.821-1.992-1.855L2 17.999V6c0-1.053.817-1.917 1.851-1.994L4.001 4h16zm0 2H4v12h16V6z"
+        />
+        <path
+          fill="#B2B5B2"
+          d="M14.997 8c-2.209 0-4 1.792-4 4 0 2.21 1.791 4 4 4 2.21 0 4-1.79 4-4 0-2.208-1.79-4-4-4m0 2c1.103 0 2 .897 2 2 0 1.104-.897 2-2 2s-2-.896-2-2c0-1.103.897-2 2-2"
+        />
+        <path
+          fill="#B2B5B2"
+          fillRule="nonzero"
+          d="M6.998 8c.513 0 .936.386.994.883L7.998 9v6c0 .552-.447 1-1 1-.513 0-.935-.386-.993-.884L5.998 15V9c0-.552.448-1 1-1z"
+        />
+      </g>
+    </svg>
+  ),
+};
diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx
index 923eebbf..9d51ed0f 100644
--- a/src/dataDisplay/Icon/index.tsx
+++ b/src/dataDisplay/Icon/index.tsx
@@ -57,6 +57,7 @@ import requiredConfirmations from './images/requiredConfirmations';
 import restricted from './images/restricted';
 import resync from './images/resync';
 import rocket from './images/rocket';
+import safe from './images/safe';
 import scan from './images/scan';
 import search from './images/search';
 import sendAgain from './images/sendAgain';
@@ -151,6 +152,7 @@ const icons = {
   restricted,
   resync,
   rocket,
+  safe,
   scan,
   search,
   sendAgain,

From 04f7e8c798deaeabae26508a1887cfa7965cc46e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 27 Nov 2020 11:23:44 -0300
Subject: [PATCH 15/26] fix hover colors

---
 src/inputs/Button/button.stories.tsx | 12 ++++++------
 src/inputs/Button/index.tsx          | 11 +++++------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/inputs/Button/button.stories.tsx b/src/inputs/Button/button.stories.tsx
index dd31a609..2745c4e1 100644
--- a/src/inputs/Button/button.stories.tsx
+++ b/src/inputs/Button/button.stories.tsx
@@ -61,10 +61,10 @@ export const DisabledButton = (): React.ReactElement => (
     <Button
       size="md"
       iconType="addressBook"
-      color="primary"
+      color="secondary"
       variant="bordered"
       disabled>
-      <Text size="xl" color="primary">
+      <Text size="xl" color="secondary">
         Text
       </Text>
     </Button>
@@ -134,9 +134,9 @@ export const withIconSize = (): React.ReactElement => (
       variant="bordered"
       size="lg"
       iconType="addressBook"
-      color="primary"
+      color="secondary"
       onClick={() => alert('click')}>
-      <Text size="xl" color="primary">
+      <Text size="xl" color="secondary">
         Text
       </Text>
     </Button>
@@ -145,9 +145,9 @@ export const withIconSize = (): React.ReactElement => (
       iconType="addressBook"
       iconSize="sm"
       size="lg"
-      color="primary"
+      color="secondary"
       onClick={() => alert('click')}>
-      <Text size="xl" color="primary">
+      <Text size="xl" color="secondary">
         Text
       </Text>
     </Button>
diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx
index b3879ec6..94b6129f 100644
--- a/src/inputs/Button/index.tsx
+++ b/src/inputs/Button/index.tsx
@@ -20,7 +20,7 @@ export interface Props extends React.ComponentPropsWithoutRef<'button'> {
   iconSize?: ThemeIconSize;
 }
 
-type HoverColor = 'primaryHover' | 'secondaryHover' | 'errorHover';
+type HoverColor = 'secondary' | 'secondaryHover' | 'errorHover';
 
 const StyledIcon = styled(Icon)`
   margin-right: 5px;
@@ -50,12 +50,11 @@ const Button = ({
   const getBackgroundColor = (isHover?: boolean) => {
     switch (variant) {
       case Variant.contained:
-        return isHover
-          ? theme.colors[`${color}Hover` as HoverColor]
-          : theme.colors[color];
+        return isHover ? theme.colors.secondary : theme.colors.primary;
       case Variant.outlined:
+        return isHover ? theme.colors.background : theme.colors.white;
       case Variant.bordered:
-        return theme.colors.white;
+        return isHover ? theme.colors.background : theme.colors.white;
     }
   };
 
@@ -65,7 +64,7 @@ const Button = ({
       case Variant.outlined:
         return 'none';
       case Variant.bordered:
-        return `1px solid ${theme.colors[color]}`;
+        return `2px solid ${theme.colors[color]}`;
     }
   };
 

From b5f85ef56cda68280f23d4ff1476a795c3be0786 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 27 Nov 2020 13:17:50 -0300
Subject: [PATCH 16/26] simplify css rule

---
 src/inputs/Button/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx
index 94b6129f..a51968da 100644
--- a/src/inputs/Button/index.tsx
+++ b/src/inputs/Button/index.tsx
@@ -52,7 +52,6 @@ const Button = ({
       case Variant.contained:
         return isHover ? theme.colors.secondary : theme.colors.primary;
       case Variant.outlined:
-        return isHover ? theme.colors.background : theme.colors.white;
       case Variant.bordered:
         return isHover ? theme.colors.background : theme.colors.white;
     }

From d37443757922359bb63136fffa4c712189627fff Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 27 Nov 2020 13:20:57 -0300
Subject: [PATCH 17/26] add comment in storybook config

---
 .storybook/webpack.config.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index b104fee1..ebcefdd1 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -11,6 +11,8 @@ module.exports = ({ config }) => {
     ]
   });
 
+  // There was a problem with the fonts not being loaded
+  // I took the fix from here: https://github.com/storybookjs/storybook/issues/5936#issuecomment-532902187
   config.module.rules = config.module.rules.map(rule => {
     if (rule.test && rule.test.toString().includes('woff')) {
       return {

From 9f8bcf6599a0db10b15a769510ed86d8c49426f7 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 27 Nov 2020 13:24:38 -0300
Subject: [PATCH 18/26] remove font

---
 src/dataDisplay/Icon/icon.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx
index 1a068e54..4955b360 100644
--- a/src/dataDisplay/Icon/icon.stories.tsx
+++ b/src/dataDisplay/Icon/icon.stories.tsx
@@ -28,7 +28,7 @@ export const Icons = (): React.ReactElement => {
     width: 140px;
     height: 140px;
     border: 1px solid ${({ theme }) => theme.colors.background};
-    font-family: ${({ theme }) => theme.fonts.fontFamily}, sans-serif;
+    font-family: ${({ theme }) => theme.fonts.fontFamily};
     font-size: 14px;
   `;
 

From b6a6cf03f0b11ba9af979ba0325222eb46fa1d16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 2 Dec 2020 10:24:00 -0300
Subject: [PATCH 19/26] add disabled prop to Card

---
 src/dataDisplay/Card/card.stories.tsx | 39 ++++++++++++++++++++++++++-
 src/dataDisplay/Card/index.tsx        | 18 ++++++++++++-
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/dataDisplay/Card/card.stories.tsx b/src/dataDisplay/Card/card.stories.tsx
index 7fcb6c88..72b3ffec 100644
--- a/src/dataDisplay/Card/card.stories.tsx
+++ b/src/dataDisplay/Card/card.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Card from './index';
-import { Title } from '../../index';
+import { Button, Dot, Title, Text } from '../../index';
 
 export default {
   title: 'Data Display/Card',
@@ -13,6 +13,43 @@ export default {
 
 export const SimpleCard = (): React.ReactElement => (
   <Card>
+    <Dot color="primary">
+      <Text size="xl" color="white">
+        1
+      </Text>
+    </Dot>
     <Title size="xs">Some text</Title>
+    <Button
+      size="lg"
+      iconType="safe"
+      color="secondary"
+      variant="bordered"
+      iconSize="sm">
+      <Text size="xl" color="secondary">
+        Load Safe
+      </Text>
+    </Button>
+  </Card>
+);
+
+export const CardDisabled = (): React.ReactElement => (
+  <Card isDisabled>
+    <Dot color="primary">
+      <Text size="xl" color="white">
+        1
+      </Text>
+    </Dot>
+    <Title size="xs">Some text</Title>
+    <Button
+      size="lg"
+      iconType="safe"
+      color="secondary"
+      variant="bordered"
+      iconSize="sm"
+      disabled>
+      <Text size="xl" color="secondary">
+        Load Safe
+      </Text>
+    </Button>
   </Card>
 );
diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx
index 3c5cdf07..e6038412 100644
--- a/src/dataDisplay/Card/index.tsx
+++ b/src/dataDisplay/Card/index.tsx
@@ -4,22 +4,38 @@ import { rgba } from 'polished';
 
 const StyledCard = styled.div`
   box-shadow: 1px 2px 10px 0
-    ${({ theme }) => rgba(theme.colors.shadow.color, 0.08)};
+    ${({ theme }) => rgba(theme.colors.shadow.color, 0.18)};
   border-radius: 8px;
   padding: 24px;
   background-color: ${({ theme }) => theme.colors.white};
+  z-index: 1;
+`;
+
+const Disabled = styled.div`
+  opacity: 0.5;
+  pointer-events: none;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.white};
+  z-index: 999;
+  top: 0;
+  left: 0;
 `;
 
 type Props = {
   className?: string;
+  isDisabled?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 const Card: React.FC<Props> = ({
   className,
   children,
+  isDisabled,
   ...rest
 }): React.ReactElement => (
   <StyledCard className={className} {...rest}>
+    {isDisabled && <Disabled />}
     {children}
   </StyledCard>
 );

From 6bab1149e77d499191d5a1b7834f44cd1b7f6a97 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 2 Dec 2020 14:54:53 -0300
Subject: [PATCH 20/26] Card: replace isDisabled by disabled

---
 src/dataDisplay/Card/card.stories.tsx | 2 +-
 src/dataDisplay/Card/index.tsx        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/dataDisplay/Card/card.stories.tsx b/src/dataDisplay/Card/card.stories.tsx
index 72b3ffec..3b7fdc71 100644
--- a/src/dataDisplay/Card/card.stories.tsx
+++ b/src/dataDisplay/Card/card.stories.tsx
@@ -33,7 +33,7 @@ export const SimpleCard = (): React.ReactElement => (
 );
 
 export const CardDisabled = (): React.ReactElement => (
-  <Card isDisabled>
+  <Card disabled>
     <Dot color="primary">
       <Text size="xl" color="white">
         1
diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx
index e6038412..198f8765 100644
--- a/src/dataDisplay/Card/index.tsx
+++ b/src/dataDisplay/Card/index.tsx
@@ -25,17 +25,17 @@ const Disabled = styled.div`
 
 type Props = {
   className?: string;
-  isDisabled?: boolean;
+  disabled?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 const Card: React.FC<Props> = ({
   className,
   children,
-  isDisabled,
+  disabled,
   ...rest
 }): React.ReactElement => (
   <StyledCard className={className} {...rest}>
-    {isDisabled && <Disabled />}
+    {disabled && <Disabled />}
     {children}
   </StyledCard>
 );

From 7da8299b542b792cbeb1df3e96828b6d2498bb9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 2 Dec 2020 15:32:38 -0300
Subject: [PATCH 21/26] fix prop name

---
 src/dataDisplay/Card/card.stories.tsx | 2 +-
 src/dataDisplay/Card/index.tsx        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/dataDisplay/Card/card.stories.tsx b/src/dataDisplay/Card/card.stories.tsx
index 72b3ffec..3b7fdc71 100644
--- a/src/dataDisplay/Card/card.stories.tsx
+++ b/src/dataDisplay/Card/card.stories.tsx
@@ -33,7 +33,7 @@ export const SimpleCard = (): React.ReactElement => (
 );
 
 export const CardDisabled = (): React.ReactElement => (
-  <Card isDisabled>
+  <Card disabled>
     <Dot color="primary">
       <Text size="xl" color="white">
         1
diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx
index e6038412..198f8765 100644
--- a/src/dataDisplay/Card/index.tsx
+++ b/src/dataDisplay/Card/index.tsx
@@ -25,17 +25,17 @@ const Disabled = styled.div`
 
 type Props = {
   className?: string;
-  isDisabled?: boolean;
+  disabled?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 const Card: React.FC<Props> = ({
   className,
   children,
-  isDisabled,
+  disabled,
   ...rest
 }): React.ReactElement => (
   <StyledCard className={className} {...rest}>
-    {isDisabled && <Disabled />}
+    {disabled && <Disabled />}
     {children}
   </StyledCard>
 );

From 21d202a829149c2c571319c6137ef6e8c9c8bb84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 2 Dec 2020 15:50:17 -0300
Subject: [PATCH 22/26] add iconSize prop to ButtonLink

---
 src/inputs/ButtonLink/buttonLink.stories.tsx | 11 +++++++++++
 src/inputs/ButtonLink/index.tsx              | 14 ++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/inputs/ButtonLink/buttonLink.stories.tsx b/src/inputs/ButtonLink/buttonLink.stories.tsx
index bd65357a..0c75e6d7 100644
--- a/src/inputs/ButtonLink/buttonLink.stories.tsx
+++ b/src/inputs/ButtonLink/buttonLink.stories.tsx
@@ -15,3 +15,14 @@ export const SimpleButtonLink = (): React.ReactElement => (
     Some text
   </ButtonLink>
 );
+
+export const IconSize = (): React.ReactElement => (
+  <>
+    <ButtonLink color="primary" iconType="add" iconSize="sm">
+      Small Icon
+    </ButtonLink>
+    <ButtonLink color="primary" iconType="add" iconSize="md">
+      Big Icon
+    </ButtonLink>
+  </>
+);
diff --git a/src/inputs/ButtonLink/index.tsx b/src/inputs/ButtonLink/index.tsx
index a55848fc..aa973d1b 100644
--- a/src/inputs/ButtonLink/index.tsx
+++ b/src/inputs/ButtonLink/index.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { ThemeColors, ThemeTextSize } from '../../theme';
+import { ThemeColors, ThemeTextSize, ThemeIconSize } from '../../theme';
 import { Icon, IconType } from '../../dataDisplay/Icon';
 import { Text } from '../../index';
 
 export interface Props extends React.ComponentPropsWithoutRef<'button'> {
   iconType?: keyof IconType;
+  iconSize?: ThemeIconSize;
   textSize?: ThemeTextSize;
   color: ThemeColors;
   children: React.ReactNode;
@@ -27,18 +28,23 @@ const StyledButtonLink = styled.button<Props>`
   }
 `;
 
+const StyledText = styled(Text)`
+  margin: 0 4px;
+`;
+
 const ButtonLink = ({
   iconType,
+  iconSize = 'md',
   children,
   textSize = 'lg',
   ...rest
 }: Props): React.ReactElement => {
   return (
     <StyledButtonLink {...rest}>
-      {iconType && <Icon size="md" color={rest.color} type={iconType} />}
-      <Text size={textSize} color={rest.color}>
+      {iconType && <Icon size={iconSize} color={rest.color} type={iconType} />}
+      <StyledText size={textSize} color={rest.color}>
         {children}
-      </Text>
+      </StyledText>
     </StyledButtonLink>
   );
 };

From e60d17c3d64d9c6ac8c558bb29c9b649103546b3 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 2 Dec 2020 15:56:56 -0300
Subject: [PATCH 23/26] Button: add component prop

---
 src/inputs/Button/button.stories.tsx | 29 ++++++++++++++++++++++++++++
 src/inputs/Button/index.tsx          |  3 +++
 2 files changed, 32 insertions(+)

diff --git a/src/inputs/Button/button.stories.tsx b/src/inputs/Button/button.stories.tsx
index 2745c4e1..3d2dd7a9 100644
--- a/src/inputs/Button/button.stories.tsx
+++ b/src/inputs/Button/button.stories.tsx
@@ -153,3 +153,32 @@ export const withIconSize = (): React.ReactElement => (
     </Button>
   </>
 );
+
+export const withCustomComponent = (): React.ReactElement => {
+  /* eslint-disable react/display-name */
+  const Link = React.forwardRef<
+    HTMLAnchorElement,
+    { children: React.ReactNode }
+  >((props, ref) => {
+    return (
+      <a {...props} ref={ref}>
+        {props.children}
+      </a>
+    );
+  });
+
+  return (
+    <Button
+      variant="bordered"
+      iconType="addressBook"
+      iconSize="sm"
+      size="lg"
+      color="secondary"
+      component={Link}
+      to="some_url">
+      <Text size="xl" color="secondary">
+        Button as Link
+      </Text>
+    </Button>
+  );
+};
diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx
index a51968da..f8ccbeb5 100644
--- a/src/inputs/Button/index.tsx
+++ b/src/inputs/Button/index.tsx
@@ -18,6 +18,9 @@ export interface Props extends React.ComponentPropsWithoutRef<'button'> {
   variant?: keyof typeof Variant;
   iconType?: keyof IconType;
   iconSize?: ThemeIconSize;
+  component?: React.ReactNode;
+  // for compatibility with react-router-dom Link
+  to?: string;
 }
 
 type HoverColor = 'secondary' | 'secondaryHover' | 'errorHover';

From 94d5121f929509ccd5862b277853b214cfa9d077 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 2 Dec 2020 17:05:52 -0300
Subject: [PATCH 24/26] add postiton relative to Card

---
 src/dataDisplay/Card/card.stories.tsx | 3 +--
 src/dataDisplay/Card/index.tsx        | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/dataDisplay/Card/card.stories.tsx b/src/dataDisplay/Card/card.stories.tsx
index 3b7fdc71..a2a65a39 100644
--- a/src/dataDisplay/Card/card.stories.tsx
+++ b/src/dataDisplay/Card/card.stories.tsx
@@ -45,8 +45,7 @@ export const CardDisabled = (): React.ReactElement => (
       iconType="safe"
       color="secondary"
       variant="bordered"
-      iconSize="sm"
-      disabled>
+      iconSize="sm">
       <Text size="xl" color="secondary">
         Load Safe
       </Text>
diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx
index 198f8765..9078582b 100644
--- a/src/dataDisplay/Card/index.tsx
+++ b/src/dataDisplay/Card/index.tsx
@@ -9,6 +9,7 @@ const StyledCard = styled.div`
   padding: 24px;
   background-color: ${({ theme }) => theme.colors.white};
   z-index: 1;
+  position: relative;
 `;
 
 const Disabled = styled.div`

From 600b5b2984540e81e73645994033f1cf6b4a7a82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 3 Dec 2020 09:48:29 -0300
Subject: [PATCH 25/26] delete  pointer-events css

---
 src/dataDisplay/Card/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx
index 9078582b..4662877f 100644
--- a/src/dataDisplay/Card/index.tsx
+++ b/src/dataDisplay/Card/index.tsx
@@ -14,7 +14,6 @@ const StyledCard = styled.div`
 
 const Disabled = styled.div`
   opacity: 0.5;
-  pointer-events: none;
   position: absolute;
   height: 100%;
   width: 100%;

From 3afc7cbb6914081036b4cbf10bacfe6270a9e198 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 9 Dec 2020 12:09:28 -0300
Subject: [PATCH 26/26] fix z-index css

---
 src/dataDisplay/Card/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx
index 4662877f..2286a5b1 100644
--- a/src/dataDisplay/Card/index.tsx
+++ b/src/dataDisplay/Card/index.tsx
@@ -8,7 +8,6 @@ const StyledCard = styled.div`
   border-radius: 8px;
   padding: 24px;
   background-color: ${({ theme }) => theme.colors.white};
-  z-index: 1;
   position: relative;
 `;
 
@@ -18,7 +17,7 @@ const Disabled = styled.div`
   height: 100%;
   width: 100%;
   background-color: ${({ theme }) => theme.colors.white};
-  z-index: 999;
+  z-index: 1;
   top: 0;
   left: 0;
 `;