Merge branch 'feature/website/0x-org' of https://github.com/0xProject/0x-monorepo into feature/website/0x-org-jank-links

5 files changed, 109 insertions, 88 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index ab804b758..b686b27a2 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -19,52 +19,55 @@ interface ButtonInterface {
     isInline?: boolean;
     href?: string;
     type?: string;
+    target?: string;
     to?: string;
     onClick?: () => any;
     theme?: ThemeInterface;
+    useAnchorTag?: boolean;
 }
 
 export const Button = (props: ButtonInterface) => {
-    const {
-        children,
-        href,
-        isWithArrow,
-        to,
-    } = props;
+    const { children, href, isWithArrow, to, useAnchorTag, target } = props;
     let linkElem;
 
-    if (href) { linkElem = 'a'; }
-    if (to) { linkElem = ReactRouterLink; }
+    if (href || useAnchorTag) {
+        linkElem = 'a';
+    }
+    if (to) {
+        linkElem = ReactRouterLink;
+    }
 
     const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase;
+    const targetProp = href && target ? { target } : {};
 
     return (
-        <Component {...props}>
+        <Component {...props} {...targetProp}>
             {children}
 
-            { isWithArrow &&
+            {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"
-                    />
+                    <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>
     );
 };
 
-const ButtonBase = styled.button<ButtonInterface>`
+const ButtonBase =
+    styled.button <
+    ButtonInterface >
+    `
     appearance: none;
     border: 1px solid transparent;
     display: inline-block;
     background-color: ${props => props.bgColor || colors.brandLight};
     background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'};
-    border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'};
-    color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
-    padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
+    border-color: ${props => props.isTransparent && !props.isWithArrow && 'rgba(255, 255, 255, .4)'};
+    color: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)};
+    padding: ${props => !props.isNoPadding && !props.isWithArrow && '18px 30px'};
     white-space: ${props => props.isWithArrow && 'nowrap'};
     text-align: center;
-    font-size: ${props => props.isWithArrow ? '20px' : '18px'};
+    font-size: ${props => (props.isWithArrow ? '20px' : '18px')};
     text-decoration: none;
     cursor: pointer;
     outline: none;
@@ -77,12 +80,12 @@ const ButtonBase = styled.button<ButtonInterface>`
     }
 
     path {
-        fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
+        fill: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)};
     }
 
     &:hover {
-        background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'};
-        border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'};
+        background-color: ${props => !props.isTransparent && !props.isWithArrow && '#04BEA8'};
+        border-color: ${props => props.isTransparent && !props.isNoBorder && !props.isWithArrow && '#00AE99'};
 
         svg {
             transform: translate3d(2px, -2px, 0);
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index 77f837294..d203151b9 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -7,7 +7,9 @@ import { Heading, Paragraph } from 'ts/@next/components/text';
 
 interface Action {
     label: string;
-    url: string;
+    url?: string;
+    onClick?: () => void;
+    useAnchorTag?: boolean;
 }
 
 interface Props {
@@ -25,11 +27,7 @@ interface Props {
 
 export const Definition = (props: Props) => (
     <Wrap {...props}>
-        <Icon
-            name={props.icon}
-            size={props.iconSize || 'medium'}
-            margin={[0, 0, 'default', 0]}
-        />
+        <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} />
 
         <TextWrap {...props}>
             <Heading
@@ -42,34 +40,36 @@ export const Definition = (props: Props) => (
             </Heading>
 
             {typeof props.description === 'string' ? (
-                <Paragraph isMuted={true}>
-                    {props.description}
-                </Paragraph>
+                <Paragraph isMuted={true}>{props.description}</Paragraph>
             ) : (
-                <>
-                    {props.description}
-                </>
+                <>{props.description}</>
             )}
 
-            {props.actions &&
+            {props.actions && (
                 <LinkWrap>
                     {props.actions.map((item, index) => (
                         <Button
                             key={`dlink-${index}`}
                             href={item.url}
+                            onClick={item.onClick}
                             isWithArrow={true}
                             isAccentColor={true}
+                            useAnchorTag={item.useAnchorTag}
+                            target="_blank"
                         >
                             {item.label}
                         </Button>
                     ))}
                 </LinkWrap>
-            }
+            )}
         </TextWrap>
     </Wrap>
 );
 
-const Wrap = styled.div<Props>`
+const Wrap =
+    styled.div <
+    Props >
+    `
     max-width: ${props => props.isInline && '354px'};
 
     & + & {
@@ -78,7 +78,7 @@ const Wrap = styled.div<Props>`
     }
 
     @media (min-width: 768px) {
-        width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'};
+        width: ${props => (props.isInline ? 'calc(33.3333% - 30px)' : '100%')};
         display: ${props => props.isInlineIcon && 'flex'};
         justify-content: ${props => props.isInlineIcon && 'space-between'};
         align-items: ${props => props.isInlineIcon && 'center'};
@@ -94,7 +94,10 @@ const Wrap = styled.div<Props>`
     }
 `;
 
-const TextWrap = styled.div<Props>`
+const TextWrap =
+    styled.div <
+    Props >
+    `
     width: 100%;
     max-width: 560px;
 
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx
index 6ca1e44c1..a7711451b 100644
--- a/packages/website/ts/@next/components/link.tsx
+++ b/packages/website/ts/@next/components/link.tsx
@@ -13,6 +13,7 @@ interface LinkInterface {
     theme?: {
         textColor: string;
     };
+    shouldOpenInNewTab?: boolean;
 }
 
 export const Link = (props: LinkInterface) => {
diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx
index 6dc4bf678..eef496982 100644
--- a/packages/website/ts/@next/components/newsletter_form.tsx
+++ b/packages/website/ts/@next/components/newsletter_form.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styled, { withTheme } from 'styled-components';
 
+import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
 import { colors } from 'ts/style/colors';
-
-import {ThemeValuesInterface} from 'ts/@next/components/siteWrap';
+import { errorReporter } from 'ts/utils/error_reporter';
 
 interface FormProps {
     theme: ThemeValuesInterface;
@@ -27,7 +27,9 @@ const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputEleme
 
     return (
         <InnerInputWrapper {...props}>
-            <label className="visuallyHidden" htmlFor={id}>{label}</label>
+            <label className="visuallyHidden" htmlFor={id}>
+                {label}
+            </label>
             <StyledInput ref={ref} id={id} placeholder={label} type={type || 'text'} {...props} />
         </InnerInputWrapper>
     );
@@ -39,17 +41,34 @@ class Form extends React.Component<FormProps> {
         isSubmitted: false,
     };
     public render(): React.ReactNode {
-        const {isSubmitted} = this.state;
-        const {theme} = this.props;
+        const { isSubmitted } = this.state;
+        const { theme } = this.props;
 
         return (
             <StyledForm onSubmit={this._onSubmitAsync.bind(this)}>
                 <InputWrapper>
-                    <Input isSubmitted={isSubmitted} name="email" type="email" label="Email Address" ref={this.emailInput} required={true} textColor={theme.textColor} />
+                    <Input
+                        isSubmitted={isSubmitted}
+                        name="email"
+                        type="email"
+                        label="Email Address"
+                        ref={this.emailInput}
+                        required={true}
+                        textColor={theme.textColor}
+                    />
 
                     <SubmitButton>
-                        <Arrow isSubmitted={isSubmitted} width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/>
+                        <Arrow
+                            isSubmitted={isSubmitted}
+                            width="22"
+                            height="17"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z"
+                                fill="#CBCBCB"
+                            />
                         </Arrow>
                     </SubmitButton>
                     <SuccessText isSubmitted={isSubmitted}>🎉 Thank you for signing up!</SuccessText>
@@ -67,6 +86,10 @@ class Form extends React.Component<FormProps> {
 
         this.setState({ isSubmitted: true });
 
+        if (email === 'triggererror@0xproject.org') {
+            throw new Error('Manually triggered error');
+        }
+
         try {
             const response = await fetch('https://website-api.0x.org/newsletter_subscriber/substack', {
                 method: 'post',
@@ -77,7 +100,7 @@ class Form extends React.Component<FormProps> {
                 body: JSON.stringify({ email, referrer }),
             });
         } catch (e) {
-           // dosomething
+            errorReporter.report(e);
         }
     }
 }
@@ -92,7 +115,10 @@ const StyledForm = styled.form`
     margin-top: 27px;
 `;
 
-const StyledInput = styled.input<InputProps>`
+const StyledInput =
+    styled.input <
+    InputProps >
+    `
     appearance: none;
     background-color: transparent;
     border: 0;
@@ -112,7 +138,10 @@ const InputWrapper = styled.div`
     position: relative;
 `;
 
-const InnerInputWrapper = styled.div<ArrowProps>`
+const InnerInputWrapper =
+    styled.div <
+    ArrowProps >
+    `
     opacity: ${props => props.isSubmitted && 0};
     visibility: ${props => props.isSubmitted && 'hidden'};
     transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
@@ -143,7 +172,10 @@ const Text = styled.p`
     margin-top: 15px;
 `;
 
-const SuccessText = styled.p<ArrowProps>`
+const SuccessText =
+    styled.p <
+    ArrowProps >
+    `
     color: #B1B1B1;
     font-size: 1rem;
     font-weight: 300;
@@ -154,13 +186,16 @@ const SuccessText = styled.p<ArrowProps>`
     top: 0;
     text-align: left;
     right: 50px;
-    opacity: ${props => props.isSubmitted ? 1 : 0};
-    visibility: ${props => props.isSubmitted ? 'visible' : 'hidden'};
+    opacity: ${props => (props.isSubmitted ? 1 : 0)};
+    visibility: ${props => (props.isSubmitted ? 'visible' : 'hidden')};
     transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
     transition-delay: 0.55s;
 `;
 
-const Arrow = styled.svg<ArrowProps>`
+const Arrow =
+    styled.svg <
+    ArrowProps >
+    `
     transform: ${props => props.isSubmitted && `translateX(44px)`};
     transition: transform 0.25s ease-in-out;
 `;
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index ee1cfb434..9c2c29446 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import {Button} from 'ts/@next/components/button';
-import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
-import {Column, FlexWrap, Section} from 'ts/@next/components/newLayout';
-import {Paragraph} from 'ts/@next/components/text';
+import { Button } from 'ts/@next/components/button';
+import { Icon, InlineIconWrap } from 'ts/@next/components/icon';
+import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
+import { Paragraph } from 'ts/@next/components/text';
 
 interface FigureProps {
     value: string;
@@ -20,20 +20,12 @@ export const SectionLandingAbout = () => (
             <Icon name="descriptionBolt" size="small" />
         </InlineIconWrap>
 
-        <Paragraph
-            size="large"
-            isCentered={true}
-            isMuted={1}
-            padding={['large', 0, 'default', 0]}
-        >
-            Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have never existed before.
+        <Paragraph size="large" isCentered={true} isMuted={1} padding={['large', 0, 'default', 0]}>
+            Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial
+            instruments to assets that could have never existed before.
         </Paragraph>
 
-        <Button
-            href="#"
-            isWithArrow={true}
-            isAccentColor={true}
-        >
+        <Button href="#" isWithArrow={true} isAccentColor={true}>
             Discover how developers use 0x
         </Button>
 
@@ -46,32 +38,19 @@ export const SectionLandingAbout = () => (
         />
 
         <FlexWrap as="dl">
-            <Figure
-                value="873,435"
-                description="Number of Transactions"
-            />
+            <Figure value="166,976" description="Total Transactions" />
 
-            <Figure
-                value="$203M"
-                description="Total Volume"
-            />
+            <Figure value="$216M" description="Total Volume" />
 
-            <Figure
-                value="227,372"
-                description="Number of Relayers"
-            />
+            <Figure value="30+" description="Total Projects" />
         </FlexWrap>
     </Section>
 );
 
 const Figure = (props: FigureProps) => (
     <Column padding="0 30px">
-        <FigureValue>
-            {props.value}
-        </FigureValue>
-        <FigureDescription>
-            {props.description}
-        </FigureDescription>
+        <FigureValue>{props.value}</FigureValue>
+        <FigureDescription>{props.description}</FigureDescription>
     </Column>
 );