merge development

9 files changed, 40 insertions, 68 deletions

diff --git a/packages/dev-tools-pages/README.md b/packages/dev-tools-pages/README.md
index cbc459be7..47d7e5865 100644
--- a/packages/dev-tools-pages/README.md
+++ b/packages/dev-tools-pages/README.md
@@ -73,13 +73,13 @@ yarn prettier
 
 ##### Toolkit
 
-*   [Styled Components](https://www.styled-components.com/)
-*   [BassCSS](http://basscss.com/)
+-   [Styled Components](https://www.styled-components.com/)
+-   [BassCSS](http://basscss.com/)
 
 ##### Recommended Atom packages:
 
-*   [atom-typescript](https://atom.io/packages/atom-typescript)
-*   [linter-tslint](https://atom.io/packages/linter-tslint)
+-   [atom-typescript](https://atom.io/packages/atom-typescript)
+-   [linter-tslint](https://atom.io/packages/linter-tslint)
 
 ## Contributing
 
diff --git a/packages/dev-tools-pages/ts/components/animations/index.tsx b/packages/dev-tools-pages/ts/components/animations/index.tsx
index 8e5421f5c..106acf707 100644
--- a/packages/dev-tools-pages/ts/components/animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/animations/index.tsx
@@ -69,10 +69,7 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
     }
 }
 
-const Container =
-    styled.div <
-    AnimationProps >
-    `
+const Container = styled.div<AnimationProps>`
     width: 100%;
     height: ${props => props.height}px;
     position: absolute;
diff --git a/packages/dev-tools-pages/ts/components/button.tsx b/packages/dev-tools-pages/ts/components/button.tsx
index d3b36ebfd..ae032eb05 100644
--- a/packages/dev-tools-pages/ts/components/button.tsx
+++ b/packages/dev-tools-pages/ts/components/button.tsx
@@ -6,40 +6,37 @@ interface ButtonProps {
     large?: boolean;
 }
 
-const Button =
-    styled.button <
-    ButtonProps >
-    `
-  font-family: inherit;
-  line-height: 1;
-  font-weight: 500;
-  white-space: nowrap;
-  vertical-align: middle;
-  background-color: ${props => props.theme.colors.secondary};
-  color: ${colors.black};
-  border: 0;
-  border-radius: 5rem;
-  display: inline-flex;
-  justify-content: space-between;
-  align-items: center;
-
-  ${props =>
-      props.large
-          ? `
+const Button = styled.button<ButtonProps>`
+    font-family: inherit;
+    line-height: 1;
+    font-weight: 500;
+    white-space: nowrap;
+    vertical-align: middle;
+    background-color: ${props => props.theme.colors.secondary};
+    color: ${colors.black};
+    border: 0;
+    border-radius: 5rem;
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+
+    ${props =>
+        props.large
+            ? `
       font-size: 1rem;
       padding: 1.1875rem 2.375rem 1.0625rem;
   `
-          : `
+            : `
       font-size: .875rem;
       padding: .5625rem 1.25rem;
   `}
 
-  :hover, :focus {
-    background-color: ${props => props.theme.colors.secondary_alt};
-    outline: 0;
-  }
+    :hover, :focus {
+        background-color: ${props => props.theme.colors.secondary_alt};
+        outline: 0;
+    }
 
-  ${media.small`
+    ${media.small`
   font-size: .875rem;
   padding: .5625rem 1.25rem;
   `}
diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
index 71d7a7752..c4f9cee24 100644
--- a/packages/dev-tools-pages/ts/components/code.tsx
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -45,11 +45,8 @@ const Container = styled.div`
     }
 `;
 
-const Base =
-    styled.div <
-    CodeProps >
-    `
-    font-size: .875rem;
+const Base = styled.div<CodeProps>`
+    font-size: 0.875rem;
     color: ${props => (_.isUndefined(props.language) ? colors.white : 'inherit')};
     background-color: ${props =>
         props.isLight ? 'rgba(255,255,255,.15)' : _.isUndefined(props.language) ? colors.black : '#F1F4F5'};
@@ -110,10 +107,7 @@ const StyledCodeDiff = styled(CodeDiff)`
     }
 `;
 
-const StyledPre =
-    styled.pre <
-    CodeProps >
-    `
+const StyledPre = styled.pre<CodeProps>`
     margin: 0;
     ${props =>
         !props.isDiff
diff --git a/packages/dev-tools-pages/ts/components/container.tsx b/packages/dev-tools-pages/ts/components/container.tsx
index 1b9212ed2..192d82af8 100644
--- a/packages/dev-tools-pages/ts/components/container.tsx
+++ b/packages/dev-tools-pages/ts/components/container.tsx
@@ -4,10 +4,7 @@ interface ContainerProps {
     wide?: boolean;
 }
 
-const Container =
-    styled.div <
-    ContainerProps >
-    `
+const Container = styled.div<ContainerProps>`
     max-width: 77.5rem;
     margin: 0 auto;
     width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
diff --git a/packages/dev-tools-pages/ts/components/content.tsx b/packages/dev-tools-pages/ts/components/content.tsx
index f74e09af7..b3c353f8a 100644
--- a/packages/dev-tools-pages/ts/components/content.tsx
+++ b/packages/dev-tools-pages/ts/components/content.tsx
@@ -3,10 +3,7 @@ import styled from 'styled-components';
 
 import { Container } from './container';
 
-const StyledMain =
-    styled.div <
-    MainProps >
-    `
+const StyledMain = styled.div<MainProps>`
     padding-top: 6.25rem;
     padding-bottom: 6.25rem;
     ${props =>
diff --git a/packages/dev-tools-pages/ts/components/tabs.tsx b/packages/dev-tools-pages/ts/components/tabs.tsx
index 1d26f2777..fa2145208 100644
--- a/packages/dev-tools-pages/ts/components/tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/tabs.tsx
@@ -48,7 +48,9 @@ const Tabs: React.StatelessComponent<{}> = props => (
                 })}
             </StyledTabList>
 
-            {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+            {React.Children.map(props.children, child => (
+                <TabPanel>{child}</TabPanel>
+            ))}
         </ReactTabs>
     </Breakout>
 );
diff --git a/packages/dev-tools-pages/ts/components/trace.tsx b/packages/dev-tools-pages/ts/components/trace.tsx
index 96e75013d..81f6db0ab 100644
--- a/packages/dev-tools-pages/ts/components/trace.tsx
+++ b/packages/dev-tools-pages/ts/components/trace.tsx
@@ -107,10 +107,7 @@ interface TraceProps {
     background?: string;
 }
 
-const StyledSection =
-    styled.section <
-    TraceProps >
-    `
+const StyledSection = styled.section<TraceProps>`
     max-width: 90rem;
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
@@ -137,10 +134,7 @@ const Wrapper = styled(Container)`
     `};
 `;
 
-const Block =
-    styled.div <
-    TraceProps >
-    `
+const Block = styled.div<TraceProps>`
     width: 50%;
     background: ${props => (props.background ? props.background : colors.black)};
     color: ${props => (props.background ? 'inherit' : colors.white)};
@@ -199,10 +193,7 @@ const Item = styled.li`
     }
 `;
 
-const Copy =
-    styled.div <
-    { dark: boolean } >
-    `
+const Copy = styled.div<{ dark: boolean }>`
     margin-right: 5.875rem;
     ${props =>
         props.dark &&
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index a77fb4eef..507497dd4 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -5,10 +5,7 @@ import styledNormalize from 'styled-normalize';
 import { ContextInterface } from 'ts/context';
 import { media } from 'ts/variables';
 
-const GlobalStyles =
-    createGlobalStyle <
-    ContextInterface >
-    `
+const GlobalStyles = createGlobalStyle<ContextInterface>`
     ${styledNormalize}
     ${hljsStyles}