Fixes all lint issues, cleanup

10 files changed, 49 insertions, 63 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 2569c39c5..92c2dac28 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -5,9 +5,9 @@ import { colors } from 'ts/style/colors';
 
 interface ButtonInterface {
     children: Node | string;
-    transparent?: any;
-    hasIcon?: any;
-    inline?: any;
+    isTransparent?: boolean;
+    hasIcon?: boolean | string;
+    isInline?: boolean;
     href?: string;
     onClick?: () => void;
 }
@@ -31,9 +31,9 @@ export const ButtonWrap = styled.div`
 const StyledButton = styled.button<ButtonInterface>`
     appearance: none;
     border: 1px solid transparent;
-    display: ${props => props.inline && 'inline-block'};
-    background-color: ${props => !props.transparent && colors.brandLight};
-    border-color: ${props => props.transparent && '#6a6a6a'};
+    display: ${props => props.isInline && 'inline-block'};
+    background-color: ${props => !props.isTransparent && colors.brandLight};
+    border-color: ${props => props.isTransparent && '#6a6a6a'};
     color: ${props => props.color || props.theme.textColor};
     text-align: center;
     padding: 14px 22px;
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 032d2e8a1..13b681572 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -1,11 +1,10 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import styled from 'styled-components';
 import { Link as ReactRouterLink } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Button } from 'ts/@next/components/button';
 import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
 import { NewsletterForm } from 'ts/@next/components/newsletterForm';
@@ -57,33 +56,28 @@ const linkRows: LinkRows[] = [
 ];
 
 export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
-  <FooterWrap
-    bgColor="#181818"
-    noMargin>
-    <Wrap>
-      <Column colWidth="1/2" isNoPadding={true}>
-        <Logo light />
-        <NewsletterForm />
-      </Column>
-
-      <Column colWidth="1/2" isNoPadding={true}>
+    <FooterWrap bgColor="#181818" isNoMargin={true}>
         <Wrap>
-          {_.map(linkRows, (row, index) => (
-            <Column
-              key={`fc-${index}`}
-              colWidth="1/3"
-              isNoPadding={true}>
-              <RowHeading>
-                { row.heading }
-              </RowHeading>
+            <Column colWidth="1/2" isNoPadding={true}>
+                <Logo isLight={true} />
+                <NewsletterForm />
+            </Column>
+
+            <Column colWidth="1/2" isNoPadding={true}>
+                <Wrap>
+                    {_.map(linkRows, (row, index) => (
+                        <Column key={`fc-${index}`} colWidth="1/3" isNoPadding={true}>
+                            <RowHeading>
+                                {row.heading}
+                            </RowHeading>
 
-              <LinkList links={row.links} />
+                            <LinkList links={row.links} />
+                        </Column>
+                    ))}
+                </Wrap>
             </Column>
-          ))}
         </Wrap>
-      </Column>
-    </Wrap>
-  </FooterWrap>
+    </FooterWrap>
 );
 
 const LinkList = (props: LinkListProps) => (
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index c934b29ac..dfe9028c3 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,12 +1,12 @@
-import * as _ from 'lodash';
+import _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
 import { Link as ReactRouterLink } from 'react-router-dom';
 
-import { Section, Wrap } from './layout';
-import { Button } from './button';
-import { Logo } from './logo';
+import { Button } from 'ts/@next/components/button';
+import { Section, Wrap } from 'ts/@next/components/layout';
+import { Logo } from 'ts/@next/components/logo';
 
 interface HeaderProps {
 }
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 112d4ed68..28a8b3c60 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -7,8 +7,6 @@ interface Props {
 }
 
 export const IconClass: React.FunctionComponent<Props> = (props: Props) => {
-    const { icon, size } = props;
-
     return (
         <div />
     );
diff --git a/packages/website/ts/@next/components/image.tsx b/packages/website/ts/@next/components/image.tsx
index f49c8c059..34520b619 100644
--- a/packages/website/ts/@next/components/image.tsx
+++ b/packages/website/ts/@next/components/image.tsx
@@ -3,19 +3,17 @@ import styled from 'styled-components';
 
 interface Props {
     alt?: string;
-    src: any;
-    srcset: any;
-    center: any;
+    src?: any;
+    srcset?: any;
+    isCentered?: boolean;
 }
 
 const ImageClass: React.FunctionComponent<Props> = (props: Props) => {
-    const { src, srcset, alt } = props;
-
     return (
-        <img src={src} {...props} />
+        <img {...props} />
     );
 };
 
-export const Image = styled(ImageClass)`
-    margin: ${(props: Props) => props.center && `0 auto`};
+export const Image = styled(ImageClass)<Props>`
+    margin: ${props => props.isCentered && `0 auto`};
 `;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 2067b67b0..5c5d1bbda 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -29,7 +29,7 @@ interface WrapProps {
     bgColor?: string;
     isWrapped?: boolean;
     isCentered?: boolean;
-    padding?: number | ('large' | 'default' | number)[];
+    padding?: number | Array<'large' | 'default' | number>;
 }
 
 interface ColumnProps {
@@ -52,7 +52,7 @@ const _getColumnWidth = (args: GetColWidthArgs): string => {
     return `calc(${percentWidth}% - ${gutterDiff}px)`;
 };
 
-const _getPadding = (value: number | (string | number)[]): string => {
+const _getPadding = (value: number | Array<string | number>): string => {
     if (Array.isArray(value)) {
         return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
     } else {
@@ -99,7 +99,7 @@ export const Section = styled.section<SectionProps>`
     margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
     margin-left: ${props => props.isFullWidth && `-${GUTTER}px`};
     background-color: ${props => props.bgColor};
-    border: 1px dotted rgba(0, 255, 0, 0.3);
+    border: 1px dotted rgba(0, 255, 0, 0.15);
 
     @media (min-width: 1560px) {
         width: ${props => props.isFullWidth && '100vw'};
@@ -141,7 +141,7 @@ export const WrapGrid = styled(WrapBase)`
 
 export const Column = styled.div<ColumnProps>`
     padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
-    border: 1px dotted rgba(255, 0, 0, 0.3);
+    border: 1px dotted rgba(255, 0, 0, 0.15);
     background-color: ${props => props.bgColor};
     border-color: ${props => props.borderColor && `${props.borderColor}`};
 
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 5d6258f37..9f147e3fb 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -2,14 +2,13 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { ThemeInterface } from 'ts/@next/components/siteWrap';
-import LogoIcon from '../icons/logo-with-type.svg';
+import LogoIcon from 'ts/@next/icons/logo-with-type.svg';
 
 interface LogoInterface {
-    light?: any;
+    isLight?: boolean;
     theme?: ThemeInterface;
 }
 
-
 // Note let's refactor this
 // is it absolutely necessary to have a stateless component
 // to pass props down into the styled icon?
@@ -21,11 +20,11 @@ const Icon = styled(LogoIcon)`
     flex-shrink: 0;
 
     path {
-        fill: ${(props: LogoInterface) => props.light ? '#fff' : props.theme.textColor};
+        fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor};
     }
 `;
 
-export const Logo: React.StatelessComponent<LogoInterface> = (props) => (
+export const Logo: React.StatelessComponent<LogoInterface> = (props: LogoInterface) => (
     <StyledLogo>
         <Icon {...props} />
     </StyledLogo>
diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx
index 422d25bec..4ff9663ba 100644
--- a/packages/website/ts/@next/components/newsletterForm.tsx
+++ b/packages/website/ts/@next/components/newsletterForm.tsx
@@ -5,8 +5,6 @@ import { colors } from 'ts/style/colors';
 
 import {Button} from 'ts/@next/components/button';
 
-import ArrowIcon from 'ts/@next/icons/form-arrow.svg';
-
 interface InputProps {
     name: string;
     label: string;
@@ -15,9 +13,9 @@ interface InputProps {
 interface Props {
 }
 
-const Input = ({ ...props }) => {
+const Input = (props: InputProps) => {
     const { name, label } = props;
-    const id = 'input-' + name;
+    const id = `input-${name}`;
 
     return (
         <>
@@ -31,7 +29,7 @@ export const NewsletterForm: React.StatelessComponent = (props: Props) => (
     <StyledForm>
         <InputWrapper>
             <Input name="email" type="email" label="Email Address" />
-            <SubmitButton hasIcon>
+            <SubmitButton hasIcon={true}>
                 Submit
             </SubmitButton>
         </InputWrapper>
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index cd99ce5a0..f7b2c4df2 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from 'styled-components';
 
 import { Footer } from 'ts/@next/components/footer';
 import { Header } from 'ts/@next/components/header';
@@ -18,7 +18,7 @@ export interface ThemeInterface {
     [key: string]: {
         bgColor: string;
         textColor: string;
-    }
+    };
 }
 
 const GLOBAL_THEMES: ThemeInterface = {
@@ -34,7 +34,7 @@ const GLOBAL_THEMES: ThemeInterface = {
         bgColor: '#e0e0e0',
         textColor: '#000000',
     },
-}
+};
 
 export const SiteWrap: React.StatelessComponent<Props> = props => {
     const {
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 22026d810..a746cb3b9 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-
 interface HeadingProps {
     asElement?: 'h1'| 'h2'| 'h3'| 'h4';
     size?: 'default' | 'medium' | 'large' | 'small';