Implement new version dropdown and remove it from nestedTopBar

2 files changed, 86 insertions, 1 deletions

diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx
new file mode 100644
index 000000000..c7b8667d7
--- /dev/null
+++ b/packages/website/ts/components/documentation/version_drop_down.tsx
@@ -0,0 +1,83 @@
+import { ALink, colors, Link } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
+import { Text } from 'ts/components/ui/text';
+import { styled } from 'ts/style/theme';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+interface ActiveNodeProps {
+    className?: string;
+    selectedVersion: string;
+}
+
+const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => (
+    <Container className={className} width="70px">
+        <Container className="flex justify-center">
+            <Text fontColor={colors.grey700} fontSize="12px">
+                v {selectedVersion}
+            </Text>
+            <Container paddingLeft="6px">
+                <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} />
+            </Container>
+        </Container>
+    </Container>
+);
+
+const ActiveNode = styled(PlainActiveNode)`
+    cursor: pointer;
+    border: 2px solid ${colors.beigeWhite};
+    border-radius: 4px;
+    padding: 4px 6px 4px 8px;
+`;
+
+interface VersionDropDownProps {
+    selectedVersion: string;
+    versions: string[];
+    onVersionSelected: (semver: string) => void;
+}
+
+interface VersionDropDownState {}
+
+export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
+    public render(): React.ReactNode {
+        const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />;
+        return (
+            <DropDown
+                activateEvent={DropdownMouseEvent.Click}
+                activeNode={activeNode}
+                popoverContent={this._renderDropdownMenu()}
+                anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+                targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+                popoverStyle={{ borderRadius: 4 }}
+            />
+        );
+    }
+    private _renderDropdownMenu(): React.ReactNode {
+        const items = _.map(this.props.versions, version => {
+            const isSelected = version === this.props.selectedVersion;
+            return (
+                <Container>
+                    <Button
+                        borderRadius="0px"
+                        padding="0.8em 0em"
+                        width="100%"
+                        isDisabled={isSelected}
+                        onClick={this._onClick.bind(this, version)}
+                    >
+                        v {version}
+                    </Button>
+                </Container>
+            );
+        });
+        const dropdownMenu = <Container width="88px">{items}</Container>;
+        return dropdownMenu;
+    }
+    private _onClick(selectedVersion: string): void {
+        this.props.onVersionSelected(selectedVersion);
+    }
+}
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 75ba7bcff..ccaadc800 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -10,6 +10,7 @@ export interface ButtonProps {
     fontFamily?: string;
     backgroundColor?: string;
     borderColor?: string;
+    borderRadius?: string;
     width?: string;
     padding?: string;
     type?: string;
@@ -29,7 +30,7 @@ export const Button = styled(PlainButton)`
     color: ${props => props.fontColor};
     transition: background-color, opacity 0.5s ease;
     padding: ${props => props.padding};
-    border-radius: 6px;
+    border-radius: ${props => props.borderRadius};
     font-weight: 500;
     outline: none;
     font-family: ${props => props.fontFamily};
@@ -52,6 +53,7 @@ export const Button = styled(PlainButton)`
 
 Button.defaultProps = {
     fontSize: '12px',
+    borderRadius: '6px',
     backgroundColor: colors.white,
     width: 'auto',
     fontFamily: 'Roboto',