Adds withArrow button

5 files changed, 48 insertions, 14 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index fa830f42c..c532b0720 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -10,6 +10,7 @@ interface ButtonInterface {
     isTransparent?: boolean;
     isNoBorder?: boolean;
     isNoPadding?: boolean;
+    isWithArrow?: boolean;
     hasIcon?: boolean | string;
     isInline?: boolean;
     href?: string;
@@ -24,13 +25,21 @@ export const Button = styled.button<ButtonInterface>`
     border: 1px solid transparent;
     display: ${props => props.isInline && 'inline-block'};
     background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
-    border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'};
+    border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'};
     color: ${props => props.color || props.theme.textColor};
     padding: ${props => !props.isNoPadding && '18px 30px'};
     text-align: center;
-    font-size: 18px;
+    font-size: ${props => props.isWithArrow ? '20px' : '18px'};
     text-decoration: none;
 
+    svg {
+        margin-left: 12px;
+    }
+
+    path {
+        fill: ${props => props.color || props.theme.textColor};
+    }
+
     @media (max-width: 768px) {
         padding: ${props => !props.isNoPadding && '6% 10%'};
     }
@@ -40,12 +49,21 @@ export const Link = (props: ButtonInterface) => {
     const {
         children,
         href,
+        isWithArrow,
     } = props;
     const Component = Button.withComponent(ReactRouterLink);
 
     return (
         <Component to={href} {...props}>
             {children}
+
+            { isWithArrow &&
+                <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
+                    />
+                </svg>
+            }
         </Component>
     );
 };
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 60e27f07e..1199efe3f 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import Loadable from 'react-loadable';
 import styled from 'styled-components';
-import {getCSSPadding} from 'ts/@next/constants/utilities';
+import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
 
-interface IconProps {
+interface IconProps extends PaddingInterface {
     name: string;
-    margin?: Array<'small' | 'default' | 'large' | number> | number;
     size?: 'small' | 'medium' | 'large' | number;
 }
 
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index de31679b2..9058fc7c9 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
+import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
 
 interface BaseTextInterface extends PaddingInterface {
     size?: 'default' | 'medium' | 'large' | 'small';
@@ -41,11 +41,19 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
     const {
         asElement = 'h1',
         children,
-        ...style
+        ...style,
     } = props;
     const Component = StyledHeading.withComponent(asElement);
-    return <Component style={{...style}} {...props}>{children}</Component>;
-};
+
+    return (
+        <Component
+            style={{...style}}
+            {...props}
+        >
+            {children}
+        </Component>;
+    )
+}
 
 // No need to declare it twice as Styled then rewrap as a stateless comp
 // Note: this would be useful to be implemented the same way was "Heading"
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx
index 74f121e49..b6b31e141 100644
--- a/packages/website/ts/@next/constants/utilities.tsx
+++ b/packages/website/ts/@next/constants/utilities.tsx
@@ -1,5 +1,6 @@
 export interface PaddingInterface {
     padding?: number | Array<'large' | 'default', 'small' | number>;
+    margin?: number | Array<'large' | 'default', 'small' | number>;
 }
 
 interface PaddingSizes {
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index b884c3545..42834e528 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import {colors} from 'ts/style/colors';
 
-import {Button, ButtonWrap} from 'ts/@next/components/button';
+import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
 import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
 import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
@@ -206,9 +206,13 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
                             Ready to build on 0x?
                         </Paragraph>
 
-                        <Button isTransparent={true}>
+                        <Link
+                            href="#"
+                            isTransparent={true}
+                            isWithArrow={true}
+                        >
                             Get Started
-                        </Button>
+                        </Link>
                     </WrapCentered>
                 </Column>
 
@@ -224,9 +228,13 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
                             Want help from the 0x team?
                         </Paragraph>
 
-                        <Button isTransparent={true}>
+                        <Link
+                            href="#"
+                            isTransparent={true}
+                            isWithArrow={true}
+                        >
                             Get in Touch
-                        </Button>
+                        </Link>
                     </WrapCentered>
                 </Column>
             </Wrap>