Added constants for new docs

packages/website/ts/components/docs/mdx/code.tsx

@@ -6,6 +6,7 @@ import { Button } from 'ts/components/button';
 import { CodeRun } from 'ts/components/docs/mdx/code_run';
 
 import { colors } from 'ts/style/colors';
+import { docs} from 'ts/style/docs';
 import { styled } from 'ts/style/theme';
 
 interface ICodeProps {
@@ -63,7 +64,7 @@ const BORDER_RADIUS = '4px';
 const CodeWrapper = styled.div`
     clear: both;
     max-width: 100%;
-    margin-bottom: 1.875rem;
+    margin-bottom: ${docs.marginBottom};
     padding: ${GUTTER};
     background-color: ${colors.backgroundLight};
     border-radius: 0 ${BORDER_RADIUS} ${BORDER_RADIUS};

packages/website/ts/components/docs/mdx/code_tabs.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react-tabs';
 
 import { colors } from 'ts/style/colors';
+import { docs } from 'ts/style/docs';
 
 interface ITabProps {
     children: React.ReactNode;
@@ -38,7 +39,7 @@ export const CodeTabs: React.FC<ICodeTabsProps> = ({ children, tabs }) => {
 export const Tabs = styled(OriginalTabs).attrs({
     selectedTabClassName: 'is-active',
 })<ITabProps>`
-    margin-bottom: 1.875rem;
+    margin-bottom: ${docs.marginBottom};
     position: relative;
 `;
 

packages/website/ts/components/docs/mdx/headings.tsx

@@ -1,9 +1,11 @@
 import styled from 'styled-components';
 import { Heading } from 'ts/components/text';
 
+import { docs} from 'ts/style/docs';
+
 const H1 = styled(Heading).attrs({
     size: 'large',
-    marginBottom: '1.875rem',
+    marginBottom: docs.marginBottom,
 })``;
 
 const H2 = styled(Heading).attrs({

packages/website/ts/components/docs/mdx/help_callout.tsx

@@ -6,6 +6,7 @@ import { Link } from '@0x/react-shared';
 import { Icon } from 'ts/components/icon';
 import { Heading, Paragraph } from 'ts/components/text';
 import { colors } from 'ts/style/colors';
+import { docs} from 'ts/style/docs';
 
 export interface IHelpCalloutProps {
     heading?: string;
@@ -40,6 +41,6 @@ const HelpCalloutWrapper = styled.div`
     display: flex;
     align-items: center;
     padding: 25px 30px;
-    margin-bottom: 1.875rem;
+    margin-bottom: ${docs.marginBottom};
     background-color: ${colors.backgroundLight};
 `;

packages/website/ts/components/docs/mdx/helpful_cta.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
+import styled from 'styled-components';
 
 import { analytics } from 'ts/utils/analytics';
 
@@ -7,6 +7,7 @@ import { Button } from 'ts/components/button';
 import { Paragraph } from 'ts/components/text';
 
 import { colors } from 'ts/style/colors';
+import { docs} from 'ts/style/docs';
 import { fadeIn } from 'ts/style/keyframes';
 
 interface IHelpfulCtaProps {
@@ -61,7 +62,7 @@ HelpfulCta.defaultProps = {
 const HelpfulCtaWrapper = styled.div`
     display: flex;
     align-items: center;
-    margin-bottom: 1.875rem;
+    margin-bottom:  ${docs.marginBottom};
 
     @media (max-width: 500px) {
         flex-direction: column;

packages/website/ts/components/docs/mdx/newsletter_widget.tsx

@@ -5,6 +5,7 @@ import { NewsletterForm } from 'ts/components/newsletter_form';
 import { Heading, Paragraph } from 'ts/components/text';
 
 import { colors } from 'ts/style/colors';
+import { docs} from 'ts/style/docs';
 
 export interface INewsletterWidgetProps {
     heading?: string;
@@ -34,7 +35,7 @@ const NewsletterSignupWrapper = styled.a`
     justify-content: center;
     flex-direction: column;
     text-align: center;
-    margin-bottom: 1.875rem;
+    margin-bottom:  ${docs.marginBottom};
 
     @media (max-width: 768px) {
         padding: 40px 80px 50px;

packages/website/ts/components/docs/mdx/notification.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
+import { docs} from 'ts/style/docs';
 
 interface INotificationWrapperProps {
     type?: 'standard' | 'alert' | 'success';
@@ -22,7 +23,7 @@ const NotificationWrapper = styled.div<INotificationWrapperProps>`
     display: flex;
     align-items: center;
     padding: 1rem;
-    margin-bottom: 1.875rem;
+    margin-bottom:  ${docs.marginBottom};
     color: ${colors.textDarkPrimary};
     background-color: ${({ type }) => themeSettings[type].bgColor};
 

packages/website/ts/components/docs/mdx/ordered_list.tsx

@@ -1,9 +1,11 @@
 import styled from 'styled-components';
 
+import { docs} from 'ts/style/docs';
+
 export const OrderedList = styled.ol`
     list-style-type: none;
     counter-reset: tutorialSteps;
-    margin-bottom: 1.875rem;
+    margin-bottom:  ${docs.marginBottom};
 
     li {
         display: flex;

packages/website/ts/components/docs/mdx/table.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
+import { docs} from 'ts/style/docs';
 
 export const Table = styled.table`
     border: 1px solid #cfcfcf;
-    margin-bottom: 1.875rem;
+    margin-bottom:  ${docs.marginBottom};
     width: 100%;
 
     th {

packages/website/ts/components/docs/mdx/unordered_list.tsx

@@ -1,8 +1,10 @@
 import styled from 'styled-components';
 
+import { docs } from 'ts/style/docs';
+
 export const UnorderedList = styled.ul`
     list-style-type: disc;
-    margin-bottom: 1.875rem;
+    margin-bottom: ${docs.marginBottom};
     padding-left: 1rem;
 
     li {

packages/website/ts/components/docs/sidebar/sidebar_wrapper.tsx

@@ -4,6 +4,8 @@ import styled from 'styled-components';
 
 import { Collapse } from 'ts/components/docs/sidebar/collapse';
 
+import { docs } from 'ts/style/docs';
+
 interface ISidebarWrapperProps {
     children: React.ReactNode;
 }
@@ -28,5 +30,5 @@ const SidebarAside = styled.aside`
 
 const SidebarContent = styled.div`
     position: sticky;
-    top: 116px; /* To make space for the header (react-headroom) when clicking on links */
+    top: ${docs.headerOffset}px; /* To make space for the header (react-headroom) when clicking on links */
 `;

packages/website/ts/components/docs/sidebar/table_of_contents.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Link } from '@0x/react-shared';
 
 import { colors } from 'ts/style/colors';
+import { docs } from 'ts/style/docs';
 
 import { SidebarWrapper } from 'ts/components/docs/sidebar/sidebar_wrapper';
 
@@ -34,7 +35,13 @@ const Contents: React.FC<ITableOfContentsProps> = ({ contents }) => {
                 return (
                     <li key={id}>
                         {/* containerId is set to an empty string to make body element the scroll container */}
-                        <ContentLink containerId="" offset={-116} level={level} to={id}>
+                        <ContentLink
+                            containerId=""
+                            duration={docs.scrollDuration}
+                            offset={-docs.headerOffset}
+                            level={level}
+                            to={id}
+                        >
                             {title}
                         </ContentLink>
                         {children.length > 0 && <Contents contents={children} />}

packages/website/ts/components/documentation/shared/link.tsx

@@ -20,6 +20,7 @@ export interface BaseLinkProps {
 
 export interface ScrollLinkProps extends BaseLinkProps {
     containerId?: string;
+    duration: number;
     offset?: number;
     onActivityChanged?: (isActive: boolean) => void;
 }
@@ -48,6 +49,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
         textDecoration: 'none',
         fontColor: 'inherit',
         containerId: constants.SCROLL_CONTAINER_ID,
+        duration: constants.DOCS_SCROLL_DURATION_MS,
     };
     private _outerReactScrollSpan: HTMLSpanElement | null;
     constructor(props: LinkProps) {
@@ -119,8 +121,8 @@ export class Link extends React.Component<LinkProps, LinkState> {
                             offset={this.props.offset}
                             spy={true}
                             hashSpy={true}
-                            duration={constants.DOCS_SCROLL_DURATION_MS}
+                            duration={this.props.duration}
-                            smooth={constants.DOCS_SCROLL_DURATION_MS > 0}
+                            smooth={this.props.duration > 0}
                             containerId={this.props.containerId}
                             className={this.props.className}
                             style={styleWithDefault}

packages/website/ts/style/docs.ts

@@ -0,0 +1,5 @@
+export const docs = {
+    scrollDuration: 500,
+    headerOffset: 116,
+    marginBottom: '1.875rem',
+};