chore: componentize the sidebar header

3 files changed, 70 insertions, 55 deletions

diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx
new file mode 100644
index 000000000..ec0ada8bd
--- /dev/null
+++ b/packages/website/ts/components/documentation/sidebar_header.tsx
@@ -0,0 +1,57 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { VersionDropDown } from 'ts/components/documentation/version_drop_down';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { ScreenWidths } from 'ts/types';
+
+export interface SidebarHeaderProps {
+    screenWidth: ScreenWidths;
+    title: string;
+    docsVersion?: string;
+    availableDocVersions?: string[];
+    onVersionSelected?: () => void;
+}
+
+export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
+    screenWidth,
+    title,
+    docsVersion,
+    availableDocVersions,
+    onVersionSelected,
+}) => {
+    return (
+        <Container>
+            <Container className="flex justify-bottom">
+                <Container className="left pl1" width="150px">
+                    <Text
+                        fontColor={colors.lightLinkBlue}
+                        fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
+                        fontWeight="bold"
+                    >
+                        {title}
+                    </Text>
+                </Container>
+                {!_.isUndefined(docsVersion) &&
+                    !_.isUndefined(availableDocVersions) &&
+                    !_.isUndefined(onVersionSelected) && (
+                        <div className="right" style={{ alignSelf: 'flex-end' }}>
+                            <VersionDropDown
+                                selectedVersion={docsVersion}
+                                versions={availableDocVersions}
+                                onVersionSelected={onVersionSelected}
+                            />
+                        </div>
+                    )}
+            </Container>
+            <Container
+                width={'100%'}
+                height={'1px'}
+                backgroundColor={colors.grey300}
+                marginTop="20px"
+                marginBottom="27px"
+            />
+        </Container>
+    );
+};
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 65d9b68a9..a2babeda2 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -6,15 +6,14 @@ import {
     SupportedDocJson,
     TypeDocUtils,
 } from '@0xproject/react-docs';
-import { colors, NestedSidebarMenu } from '@0xproject/react-shared';
+import { NestedSidebarMenu } from '@0xproject/react-shared';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import semverSort = require('semver-sort');
-import { VersionDropDown } from 'ts/components/documentation/version_drop_down';
+import { SidebarHeader } from 'ts/components/documentation/sidebar_header';
 import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
 import { DevelopersPage } from 'ts/pages/documentation/developers_page';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { DocPackages, ScreenWidths } from 'ts/types';
@@ -109,33 +108,13 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
     }
     private _renderSidebarHeader(): React.ReactNode {
         return (
-            <Container>
-                <Container className="flex justify-bottom">
-                    <Container className="left pl1" width="150px">
-                        <Text
-                            fontColor={colors.lightLinkBlue}
-                            fontSize={this.props.screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
-                            fontWeight="bold"
-                        >
-                            {this.props.docsInfo.displayName}
-                        </Text>
-                    </Container>
-                    <div className="right" style={{ alignSelf: 'flex-end' }}>
-                        <VersionDropDown
-                            selectedVersion={this.props.docsVersion}
-                            versions={this.props.availableDocVersions}
-                            onVersionSelected={this._onVersionSelected.bind(this)}
-                        />
-                    </div>
-                </Container>
-                <Container
-                    width={'100%'}
-                    height={'1px'}
-                    backgroundColor={colors.grey300}
-                    marginTop="20px"
-                    marginBottom="27px"
-                />
-            </Container>
+            <SidebarHeader
+                screenWidth={this.props.screenWidth}
+                title={this.props.docsInfo.displayName}
+                docsVersion={this.props.docsVersion}
+                availableDocVersions={this.props.availableDocVersions}
+                onVersionSelected={this._onVersionSelected.bind(this)}
+            />
         );
     }
     private _renderLoading(): React.ReactNode {
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 4b101e45d..e7754fd9d 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,6 +1,5 @@
 import {
     ALink,
-    colors,
     constants as sharedConstants,
     HeaderSizes,
     MarkdownSection,
@@ -11,11 +10,11 @@ import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
+import { SidebarHeader } from 'ts/components/documentation/sidebar_header';
 import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
 import { DevelopersPage } from 'ts/pages/documentation/developers_page';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Article, ArticlesBySection, ScreenWidths } from 'ts/types';
+import { Article, ArticlesBySection, Deco, Key, ScreenWidths } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -88,28 +87,8 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
         );
     }
     private _renderSidebarHeader(): React.ReactNode {
-        return (
-            <Container>
-                <Container className="flex justify-bottom">
-                    <Container className="left pl1" width="150px">
-                        <Text
-                            fontColor={colors.lightLinkBlue}
-                            fontSize={this.props.screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
-                            fontWeight="bold"
-                        >
-                            Wiki
-                        </Text>
-                    </Container>
-                </Container>
-                <Container
-                    width={'100%'}
-                    height={'1px'}
-                    backgroundColor={colors.grey300}
-                    marginTop="20px"
-                    marginBottom="27px"
-                />
-            </Container>
-        );
+        const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap);
+        return <SidebarHeader screenWidth={this.props.screenWidth} title={wikiTitle} />;
     }
     private _renderLoading(): React.ReactNode {
         return (