Consolidated step links in one file

packages/website/ts/components/docs/step_link.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Link } from '@0x/react-shared';
-
-import { colors } from 'ts/style/colors';
-
-export interface IStepLinkConfig {
-    title: string;
-    url: string;
-}
-
-export const StepLink: React.FC<IStepLinkConfig> = props => (
-    <StepLinkWrapper to={props.url}>
-        <StepLinkText>{props.title}</StepLinkText>
-        <svg height="14px" width="14px" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z"
-                fill="currentColor"
-            />
-        </svg>
-    </StepLinkWrapper>
-);
-
-const StepLinkWrapper = styled(Link)`
-    padding: 21px 25px 19px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &:hover {
-        background: ${colors.brandDark};
-
-        * {
-            color: ${colors.white};
-            fill: ${colors.white};
-        }
-    }
-
-    & + & {
-        border-top: 1px solid #dbdfdd;
-    }
-
-    @media (max-width: 500px) {
-        svg {
-            transform: scale(0.85);
-        }
-    }
-`;
-
-const StepLinkText = styled.span`
-    font-size: 1.25rem;
-
-    @media (max-width: 500px) {
-        font-size: 16px;
-    }
-`;

packages/website/ts/components/docs/step_links.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { IStepLinkConfig, StepLink } from 'ts/components/docs/step_link';
+import { Link } from '@0x/react-shared';
 
 import { colors } from 'ts/style/colors';
 
-export interface ILinkProps {
-    links: IStepLinkConfig[];
+export interface IStepLinkProps {
+    title: string;
+    url: string;
 }
 
-export const StepLinks: React.FC<ILinkProps> = ({ links }) => (
+interface IStepLinksProps {
+    links: IStepLinkProps[];
+}
+
+export const StepLinks: React.FC<IStepLinksProps> = ({ links }) => (
     <StepLinksWrapper>
         {links.map((link, index) => (
             <StepLink key={`step-${index}`} {...link} />
@@ -17,7 +22,55 @@ export const StepLinks: React.FC<ILinkProps> = ({ links }) => (
     </StepLinksWrapper>
 );
 
+export const StepLink: React.FC<IStepLinkProps> = props => (
+    <StepLinkWrapper to={props.url}>
+        <StepLinkText>{props.title}</StepLinkText>
+        <svg height="14px" width="14px" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z"
+                fill="currentColor"
+            />
+        </svg>
+    </StepLinkWrapper>
+);
+
 const StepLinksWrapper = styled.div`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
 `;
+
+const StepLinkWrapper = styled(Link)`
+    padding: 21px 25px 19px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &:hover {
+        background: ${colors.brandDark};
+
+        * {
+            color: ${colors.white};
+            fill: ${colors.white};
+        }
+    }
+
+    & + & {
+        border-top: 1px solid #dbdfdd;
+    }
+
+    @media (max-width: 500px) {
+        svg {
+            transform: scale(0.85);
+        }
+    }
+`;
+
+const StepLinkText = styled.span`
+    font-size: 1.25rem;
+
+    @media (max-width: 500px) {
+        font-size: 16px;
+    }
+`;

packages/website/ts/pages/docs/home.tsx

@@ -4,10 +4,9 @@ import styled from 'styled-components';
 import { CommunityLink, ICommunityLinkProps } from 'ts/components/docs/community_link';
 import { GetStartedLink, IGetStartedLinkProps } from 'ts/components/docs/get_started_link';
 import { IShortcutLinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
-import { IStepLinkConfig } from 'ts/components/docs/step_link';
+import { IStepLinkProps, StepLinks } from 'ts/components/docs/step_links';
 
 import { Separator } from 'ts/components/docs/separator';
-import { StepLinks } from 'ts/components/docs/step_links';
 import { Heading } from 'ts/components/text';
 
 import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
@@ -107,7 +106,7 @@ const shortcuts: IShortcutLinkProps[] = [
     },
 ];
 
-const usefulLinks: IStepLinkConfig[] = [
+const usefulLinks: IStepLinkProps[] = [
     {
         title: 'Core Concepts',
         url: '/docs/core-concepts',