Move over AnchorTitle and associated elements

18 files changed, 28 insertions, 125 deletions

diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx
index 5a3d34fe6..28305637d 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -1,10 +1,11 @@
 import { Order, ZeroEx } from '0x.js';
+import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import { Blockchain } from 'ts/blockchain';
 import { FakeTextField } from 'ts/components/ui/fake_text_field';
-import { HashData, Styles } from 'ts/types';
+import { HashData } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 
 const styles: Styles = {
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 894edf0a8..b569a9165 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -1,4 +1,5 @@
 import { ZeroEx } from '0x.js';
+import { styles } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import DharmaLoanFrame from 'dharma-loan-frame';
 import * as _ from 'lodash';
@@ -29,7 +30,6 @@ import {
     EtherscanLinkSuffixes,
     Networks,
     ScreenWidths,
-    Styles,
     Token,
     TokenByAddress,
     TokenVisibility,
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index b2b2d2ebd..829225440 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -1,3 +1,4 @@
+import { styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import Menu from 'material-ui/Menu';
@@ -14,7 +15,7 @@ import { Identicon } from 'ts/components/ui/identicon';
 import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, DocsMenu, Key, MenuSubsectionsBySection, ProviderType, Styles, WebsitePaths } from 'ts/types';
+import { Deco, DocsMenu, Key, MenuSubsectionsBySection, ProviderType, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 699bef7a8..ce5f7eb6c 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,3 +1,4 @@
+import { styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
@@ -23,7 +24,6 @@ import {
     Networks,
     Property,
     SolidityMethod,
-    Styles,
     SupportedDocJson,
     TypeDefinitionByName,
     TypescriptMethod,
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index e62c9ecbd..7ac17e608 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -1,9 +1,9 @@
+import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared/anchor_title';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { Type } from 'ts/pages/documentation/type';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { Event, EventArg, HeaderSizes } from 'ts/types';
+import { Event, EventArg } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 
 interface EventDefinitionProps {
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index d2c96bf8c..e1f09346b 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,11 +1,11 @@
+import { AnchorTitle, HeaderSizes, Styles } from '@0xproject/react-shared/anchor_title';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Comment } from 'ts/pages/documentation/comment';
 import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { MethodSignature } from 'ts/pages/documentation/method_signature';
 import { SourceLink } from 'ts/pages/documentation/source_link';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { HeaderSizes, Parameter, SolidityMethod, Styles, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
+import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { typeDocUtils } from 'ts/utils/typedoc_utils';
 
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index b306fa053..2fec4c95f 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,3 +1,4 @@
+import { constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
@@ -178,12 +179,12 @@ export function Type(props: TypeProps): any {
             <ScrollLink
                 to={typeDefinitionAnchorId}
                 offset={0}
-                duration={constants.DOCS_SCROLL_DURATION_MS}
-                containerId={constants.DOCS_CONTAINER_ID}
+                duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
+                containerId={sharedConstants.DOCS_CONTAINER_ID}
             >
                 {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? (
                     <span
-                        onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
+                        onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)}
                         style={{ color: colors.lightBlueA700, cursor: 'pointer' }}
                     >
                         {typeName}
@@ -192,7 +193,7 @@ export function Type(props: TypeProps): any {
                     <span
                         data-tip={true}
                         data-for={id}
-                        onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
+                        onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)}
                         style={{
                             color: colors.lightBlueA700,
                             cursor: 'pointer',
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index 02bf63258..32c388ace 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -1,3 +1,4 @@
+import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared/anchor_title';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Comment } from 'ts/pages/documentation/comment';
@@ -7,8 +8,7 @@ import { Enum } from 'ts/pages/documentation/enum';
 import { Interface } from 'ts/pages/documentation/interface';
 import { MethodSignature } from 'ts/pages/documentation/method_signature';
 import { Type } from 'ts/pages/documentation/type';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes } from 'ts/types';
+import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index 34175abdc..bcbc628f1 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,3 +1,4 @@
+import { styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
@@ -5,7 +6,7 @@ import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Question } from 'ts/pages/faq/question';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { FAQQuestion, FAQSection, Styles, WebsitePaths } from 'ts/types';
+import { FAQQuestion, FAQSection, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx
deleted file mode 100644
index 0270618a0..000000000
--- a/packages/website/ts/pages/shared/anchor_title.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { Link as ScrollLink } from 'react-scroll';
-import { HeaderSizes, Styles } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-const headerSizeToScrollOffset: { [headerSize: string]: number } = {
-    h2: -20,
-    h3: 0,
-};
-
-interface AnchorTitleProps {
-    title: string | React.ReactNode;
-    id: string;
-    headerSize: HeaderSizes;
-    shouldShowAnchor: boolean;
-}
-
-interface AnchorTitleState {
-    isHovering: boolean;
-}
-
-const styles: Styles = {
-    anchor: {
-        fontSize: 20,
-        transform: 'rotate(45deg)',
-        cursor: 'pointer',
-    },
-    headers: {
-        WebkitMarginStart: 0,
-        WebkitMarginEnd: 0,
-        fontWeight: 'bold',
-        display: 'block',
-    },
-    h1: {
-        fontSize: '1.8em',
-    },
-    h2: {
-        fontSize: '1.5em',
-        fontWeight: 400,
-    },
-    h3: {
-        fontSize: '1.17em',
-    },
-};
-
-export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> {
-    constructor(props: AnchorTitleProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
-    public render() {
-        let opacity = 0;
-        if (this.props.shouldShowAnchor) {
-            opacity = this.state.isHovering ? 0.6 : 1;
-        }
-        return (
-            <div className="relative flex" style={{ ...styles[this.props.headerSize], ...styles.headers }}>
-                <div className="inline-block" style={{ paddingRight: 4 }}>
-                    {this.props.title}
-                </div>
-                <ScrollLink
-                    to={this.props.id}
-                    offset={headerSizeToScrollOffset[this.props.headerSize]}
-                    duration={constants.DOCS_SCROLL_DURATION_MS}
-                    containerId={constants.DOCS_CONTAINER_ID}
-                >
-                    <i
-                        className="zmdi zmdi-link"
-                        onClick={utils.setUrlHash.bind(utils, this.props.id)}
-                        style={{ ...styles.anchor, opacity }}
-                        onMouseOver={this._setHoverState.bind(this, true)}
-                        onMouseOut={this._setHoverState.bind(this, false)}
-                    />
-                </ScrollLink>
-            </div>
-        );
-    }
-    private _setHoverState(isHovering: boolean) {
-        this.setState({
-            isHovering,
-        });
-    }
-}
diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
index e4553c87f..b1f68c915 100644
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_link_block.tsx
@@ -1,3 +1,4 @@
+import { utils as sharedUtils } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { configs } from 'ts/utils/configs';
@@ -41,6 +42,6 @@ export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, M
     private _onHashUrlClick(href: string) {
         const hash = href.split('#')[1];
         utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
-        utils.setUrlHash(hash);
+        sharedUtils.setUrlHash(hash);
     }
 }
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index 7253072d9..18cbf70c0 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -1,12 +1,11 @@
+import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared/anchor_title';
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
 import * as ReactMarkdown from 'react-markdown';
 import { Element as ScrollElement } from 'react-scroll';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
 import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
 import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block';
-import { HeaderSizes } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 82a40eb7e..abbd34c98 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -1,11 +1,11 @@
+import { constants, Styles, utils as sharedUtils } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
 import { VersionDropDown } from 'ts/pages/shared/version_drop_down';
-import { MenuSubsectionsBySection, Styles } from 'ts/types';
+import { MenuSubsectionsBySection } from 'ts/types';
 import { colors } from 'ts/utils/colors';
-import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
 interface NestedSidebarMenuProps {
@@ -171,7 +171,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     }
     private _onMenuItemClick(name: string): void {
         const id = utils.getIdFromName(name);
-        utils.setUrlHash(id);
+        sharedUtils.setUrlHash(id);
         this.props.onMenuItemClick();
     }
 }
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
index 52a1f30d9..758aec574 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/website/ts/pages/shared/section_header.tsx
@@ -1,7 +1,6 @@
+import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared/anchor_title';
 import * as React from 'react';
 import { Element as ScrollElement } from 'react-scroll';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { HeaderSizes } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 4bb6052a2..d65834a9a 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,3 +1,4 @@
+import { HeaderSizes, styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import RaisedButton from 'material-ui/RaisedButton';
@@ -9,7 +10,7 @@ import { MarkdownSection } from 'ts/pages/shared/markdown_section';
 import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
 import { SectionHeader } from 'ts/pages/shared/section_header';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths } from 'ts/types';
+import { Article, ArticlesBySection, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 28663270e..c1b23ce1e 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -156,10 +156,6 @@ export interface TrackedTokensByUserAddress {
     [userAddress: string]: TrackedTokensByNetworkId;
 }
 
-export interface Styles {
-    [name: string]: React.CSSProperties;
-}
-
 export interface ProfileInfo {
     name: string;
     title?: string;
@@ -535,12 +531,6 @@ export enum TokenVisibility {
     TRACKED = 'TRACKED',
 }
 
-export enum HeaderSizes {
-    H1 = 'h1',
-    H2 = 'h2',
-    H3 = 'h3',
-}
-
 export interface DoxityDocObj {
     [contractName: string]: DoxityContractObj;
 }
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 3476b7375..1f87fe189 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -4,8 +4,6 @@ import { Networks } from 'ts/types';
 export const constants = {
     DECIMAL_PLACES_ETH: 18,
     DECIMAL_PLACES_ZRX: 18,
-    DOCS_SCROLL_DURATION_MS: 0,
-    DOCS_CONTAINER_ID: 'documentation',
     GENESIS_ORDER_BLOCK_BY_NETWORK_ID: {
         1: 4145578,
         42: 3117574,
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index a1e045af7..a1e11c85a 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -152,9 +152,6 @@ export const utils = {
         const etherScanPrefix = networkName === Networks.Mainnet ? '' : `${networkName.toLowerCase()}.`;
         return `https://${etherScanPrefix}etherscan.io/${suffix}/${addressOrTxHash}`;
     },
-    setUrlHash(anchorId: string) {
-        window.location.hash = anchorId;
-    },
     async isU2FSupportedAsync(): Promise<boolean> {
         const w = window as any;
         return new Promise((resolve: (isSupported: boolean) => void) => {