From de20ef1a49966153f25236ee68b186cd49f8dc20 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 12 Oct 2018 15:54:44 +0200
Subject: Refactor Home so that Dev section chrome is reusable across pages

---
 .../src/components/nested_sidebar_menu.tsx         | 38 ----------------------
 1 file changed, 38 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 5b6076df6..f3ce5f5bf 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -12,7 +12,6 @@ import { VersionDropDown } from './version_drop_down';
 
 export interface NestedSidebarMenuProps {
     sectionNameToLinks: ObjectMap<ALink[]>;
-    subsectionNameToLinks?: ObjectMap<ALink[]>;
     sidebarHeader?: React.ReactNode;
     shouldDisplaySectionHeaders?: boolean;
     onMenuItemClick?: () => void;
@@ -44,7 +43,6 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
         shouldDisplaySectionHeaders: true,
         onMenuItemClick: _.noop.bind(_),
         shouldReformatMenuItemNames: true,
-        subsectionNameToLinks: {},
     };
     public render(): React.ReactNode {
         const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
@@ -108,47 +106,11 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                             </span>
                         </MenuItem>
                     </Link>
-                    {this._renderMenuItemSubsections(link.title)}
                 </div>
             );
         });
         return menuItems;
     }
-    private _renderMenuItemSubsections(menuItemName: string): React.ReactNode {
-        if (
-            _.isUndefined(this.props.subsectionNameToLinks) ||
-            _.isUndefined(this.props.subsectionNameToLinks[menuItemName])
-        ) {
-            return null;
-        }
-        return this._renderSubsectionLinks(menuItemName, this.props.subsectionNameToLinks[menuItemName]);
-    }
-    private _renderSubsectionLinks(menuItemName: string, links: ALink[]): React.ReactNode {
-        return (
-            <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}>
-                {_.map(links, link => {
-                    const name = `${menuItemName}-${link.title}`;
-                    return (
-                        <li key={`menuSubsectionItem-${name}`}>
-                            <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
-                                <MenuItem
-                                    style={{ minHeight: 35 }}
-                                    innerDivStyle={{
-                                        paddingLeft: 16,
-                                        fontSize: 14,
-                                        lineHeight: '35px',
-                                    }}
-                                    onClick={this._onMenuItemClick.bind(this)}
-                                >
-                                    {link.title}
-                                </MenuItem>
-                            </Link>
-                        </li>
-                    );
-                })}
-            </ul>
-        );
-    }
     private _onMenuItemClick(): void {
         if (!_.isUndefined(this.props.onMenuItemClick)) {
             this.props.onMenuItemClick();
-- 
cgit v1.2.3


From a5eb346dd18f81b171280291f3d01b900a4aff1d Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 12 Oct 2018 19:44:51 +0100
Subject: fix: Remove unnecessary onClick prop from NestedSidebar, since one
 can listen to container element onClick

---
 .../react-shared/src/components/nested_sidebar_menu.tsx     | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index f3ce5f5bf..85206569c 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -14,7 +14,6 @@ export interface NestedSidebarMenuProps {
     sectionNameToLinks: ObjectMap<ALink[]>;
     sidebarHeader?: React.ReactNode;
     shouldDisplaySectionHeaders?: boolean;
-    onMenuItemClick?: () => void;
     selectedVersion?: string;
     versions?: string[];
     onVersionSelected?: (semver: string) => void;
@@ -41,7 +40,6 @@ const styles: Styles = {
 export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
     public static defaultProps: Partial<NestedSidebarMenuProps> = {
         shouldDisplaySectionHeaders: true,
-        onMenuItemClick: _.noop.bind(_),
         shouldReformatMenuItemNames: true,
     };
     public render(): React.ReactNode {
@@ -92,11 +90,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
             return (
                 <div key={`menuItem-${finalMenuItemName}`}>
                     <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
-                        <MenuItem
-                            style={menuItemStyles}
-                            innerDivStyle={menuItemInnerDivStyles}
-                            onClick={this._onMenuItemClick.bind(this)}
-                        >
+                        <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}>
                             <span
                                 style={{
                                     textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',
@@ -111,9 +105,4 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
         });
         return menuItems;
     }
-    private _onMenuItemClick(): void {
-        if (!_.isUndefined(this.props.onMenuItemClick)) {
-            this.props.onMenuItemClick();
-        }
-    }
 }
-- 
cgit v1.2.3


From 6baadc746e35724ec4193e9afa01cd17e836372c Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sat, 13 Oct 2018 16:29:14 +0100
Subject: Implement new version dropdown and remove it from nestedTopBar

---
 .../src/components/nested_sidebar_menu.tsx         | 16 ----------
 .../src/components/version_drop_down.tsx           | 37 ----------------------
 2 files changed, 53 deletions(-)
 delete mode 100644 packages/react-shared/src/components/version_drop_down.tsx

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 85206569c..440db4b16 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -8,15 +8,11 @@ import { colors } from '../utils/colors';
 import { utils } from '../utils/utils';
 
 import { Link } from './link';
-import { VersionDropDown } from './version_drop_down';
 
 export interface NestedSidebarMenuProps {
     sectionNameToLinks: ObjectMap<ALink[]>;
     sidebarHeader?: React.ReactNode;
     shouldDisplaySectionHeaders?: boolean;
-    selectedVersion?: string;
-    versions?: string[];
-    onVersionSelected?: (semver: string) => void;
     shouldReformatMenuItemNames?: boolean;
 }
 
@@ -59,21 +55,9 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                 return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>;
             }
         });
-        const maxWidthWithScrollbar = 307;
         return (
             <div>
                 {this.props.sidebarHeader}
-                {!_.isUndefined(this.props.versions) &&
-                    !_.isUndefined(this.props.selectedVersion) &&
-                    !_.isUndefined(this.props.onVersionSelected) && (
-                        <div style={{ maxWidth: maxWidthWithScrollbar }}>
-                            <VersionDropDown
-                                selectedVersion={this.props.selectedVersion}
-                                versions={this.props.versions}
-                                onVersionSelected={this.props.onVersionSelected}
-                            />
-                        </div>
-                    )}
                 <div className="pl1">{navigation}</div>
             </div>
         );
diff --git a/packages/react-shared/src/components/version_drop_down.tsx b/packages/react-shared/src/components/version_drop_down.tsx
deleted file mode 100644
index 5ff4bed54..000000000
--- a/packages/react-shared/src/components/version_drop_down.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-export interface VersionDropDownProps {
-    selectedVersion: string;
-    versions: string[];
-    onVersionSelected: (semver: string) => void;
-}
-
-export interface VersionDropDownState {}
-
-export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
-    public render(): React.ReactNode {
-        return (
-            <div className="mx-auto" style={{ width: 120 }}>
-                <Select value={this.props.selectedVersion} onChange={this._updateSelectedVersion.bind(this)}>
-                    {this._renderDropDownItems()}
-                </Select>
-            </div>
-        );
-    }
-    private _renderDropDownItems(): React.ReactNode[] {
-        const items = _.map(this.props.versions, version => {
-            return (
-                <MenuItem key={version} value={version}>
-                    v{version}
-                </MenuItem>
-            );
-        });
-        return items;
-    }
-    private _updateSelectedVersion(event: React.ChangeEvent<HTMLSelectElement>): void {
-        this.props.onVersionSelected(event.target.value);
-    }
-}
-- 
cgit v1.2.3


From 4298da118f8cb7ca54b255576894bc98b7f7b374 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 11:23:02 +0100
Subject: chore: improve styling of sidebar

---
 packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 440db4b16..853b69976 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -45,7 +45,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                 // tslint:disable-next-line:no-unused-variable
                 return (
                     <div key={`section-${sectionName}`} className="py1" style={{ color: colors.linkSectionGrey }}>
-                        <div style={{ fontWeight: 'bold', fontSize: 15, letterSpacing: 0.5 }} className="py1">
+                        <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1">
                             {finalSectionName.toUpperCase()}
                         </div>
                         {this._renderMenuItems(links)}
-- 
cgit v1.2.3


From eee0640b07bcddccbddf68618f2772b1de92a18d Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 11:27:56 +0100
Subject: chore: many small stylistic changes

---
 .../react-shared/src/components/anchor_title.tsx   |  5 +-
 packages/react-shared/src/components/container.tsx | 55 ++++++++++++++++++++++
 .../src/components/markdown_paragraph_block.tsx    | 14 ++++++
 .../src/components/markdown_section.tsx            | 25 +++++++---
 packages/react-shared/src/index.ts                 |  1 +
 packages/react-shared/src/utils/colors.ts          |  1 +
 6 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 packages/react-shared/src/components/container.tsx
 create mode 100644 packages/react-shared/src/components/markdown_paragraph_block.tsx

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx
index a83881b67..dabdfff9b 100644
--- a/packages/react-shared/src/components/anchor_title.tsx
+++ b/packages/react-shared/src/components/anchor_title.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
 
 import { HeaderSizes, Styles } from '../types';
+import { colors } from '../utils/colors';
 import { constants } from '../utils/constants';
 
 const headerSizeToScrollOffset: { [headerSize: string]: number } = {
@@ -27,7 +28,7 @@ const styles: Styles = {
         cursor: 'pointer',
     },
     h1: {
-        fontSize: '1.8em',
+        fontSize: '30px',
     },
     h2: {
         fontSize: '1.5em',
@@ -63,7 +64,7 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
                     } as any
                 }
             >
-                <div className="inline-block" style={{ paddingRight: 4 }}>
+                <div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}>
                     {this.props.title}
                 </div>
                 <ScrollLink
diff --git a/packages/react-shared/src/components/container.tsx b/packages/react-shared/src/components/container.tsx
new file mode 100644
index 000000000..f2ae68b70
--- /dev/null
+++ b/packages/react-shared/src/components/container.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+type StringOrNum = string | number;
+
+export type ContainerTag = 'div' | 'span';
+
+export interface ContainerProps {
+    marginTop?: StringOrNum;
+    marginBottom?: StringOrNum;
+    marginRight?: StringOrNum;
+    marginLeft?: StringOrNum;
+    padding?: StringOrNum;
+    paddingTop?: StringOrNum;
+    paddingBottom?: StringOrNum;
+    paddingRight?: StringOrNum;
+    paddingLeft?: StringOrNum;
+    backgroundColor?: string;
+    borderRadius?: StringOrNum;
+    maxWidth?: StringOrNum;
+    maxHeight?: StringOrNum;
+    width?: StringOrNum;
+    height?: StringOrNum;
+    minWidth?: StringOrNum;
+    minHeight?: StringOrNum;
+    isHidden?: boolean;
+    className?: string;
+    position?: 'absolute' | 'fixed' | 'relative' | 'unset';
+    display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
+    zIndex?: number;
+    Tag?: ContainerTag;
+    cursor?: string;
+    id?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
+}
+
+export const Container: React.StatelessComponent<ContainerProps> = props => {
+    const { children, className, Tag, isHidden, id, onClick, ...style } = props;
+    const visibility = isHidden ? 'hidden' : undefined;
+    return (
+        <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
+            {children}
+        </Tag>
+    );
+};
+
+Container.defaultProps = {
+    Tag: 'div',
+};
+
+Container.displayName = 'Container';
diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx
new file mode 100644
index 000000000..519638446
--- /dev/null
+++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx
@@ -0,0 +1,14 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { colors } from '../utils/colors';
+
+export interface MarkdownParagraphBlockProps {}
+
+export interface MarkdownParagraphBlockState {}
+
+export class MarkdownParagraphBlock extends React.Component<MarkdownParagraphBlockProps, MarkdownParagraphBlockState> {
+    public render(): React.ReactNode {
+        return <span style={{ color: colors.greyTheme, lineHeight: '26px' }}>{this.props.children}</span>;
+    }
+}
diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index e84d2b078..3dc3efe12 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -8,15 +8,18 @@ import { colors } from '../utils/colors';
 import { utils } from '../utils/utils';
 
 import { AnchorTitle } from './anchor_title';
+import { Container } from './container';
 import { Link } from './link';
 import { MarkdownCodeBlock } from './markdown_code_block';
 import { MarkdownLinkBlock } from './markdown_link_block';
+import { MarkdownParagraphBlock } from './markdown_paragraph_block';
 
 export interface MarkdownSectionProps {
     sectionName: string;
     markdownContent: string;
     headerSize?: HeaderSizes;
     githubLink?: string;
+    shouldReformatTitle?: boolean;
 }
 
 interface DefaultMarkdownSectionProps {
@@ -32,6 +35,7 @@ export interface MarkdownSectionState {
 export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
     public static defaultProps: Partial<MarkdownSectionProps> = {
         headerSize: HeaderSizes.H3,
+        shouldReformatTitle: true,
     };
     constructor(props: MarkdownSectionProps) {
         super(props);
@@ -43,7 +47,9 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
 
         const id = utils.getIdFromName(sectionName);
-        const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
+        const finalSectionName = this.props.shouldReformatTitle
+            ? utils.convertCamelCaseToSpaces(sectionName)
+            : sectionName;
         return (
             <div
                 className="md-px1 sm-px2 overflow-hidden"
@@ -51,12 +57,12 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
                 <ScrollElement name={id}>
-                    <div className="clearfix pt3">
+                    <Container className="clearfix" marginBottom="20px">
                         <div className="col lg-col-8 md-col-8 sm-col-12">
-                            <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
+                            <span style={{ color: colors.grey700 }}>
                                 <AnchorTitle
                                     headerSize={headerSize}
-                                    title={finalSectionName}
+                                    title={_.capitalize(finalSectionName)}
                                     id={id}
                                     shouldShowAnchor={this.state.shouldShowAnchor}
                                 />
@@ -71,16 +77,23 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                                 </div>
                             )}
                         </div>
-                    </div>
-                    <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
+                    </Container>
                     <ReactMarkdown
                         source={markdownContent}
                         escapeHtml={false}
                         renderers={{
                             code: MarkdownCodeBlock,
                             link: MarkdownLinkBlock,
+                            paragraph: MarkdownParagraphBlock,
                         }}
                     />
+                    <Container
+                        width={'100%'}
+                        height={'1px'}
+                        backgroundColor={colors.grey300}
+                        marginTop={'32px'}
+                        marginBottom={'32px'}
+                    />
                 </ScrollElement>
             </div>
         );
diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts
index e33b09f19..2ab9b393e 100644
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -5,6 +5,7 @@ export { MarkdownSection } from './components/markdown_section';
 export { NestedSidebarMenu } from './components/nested_sidebar_menu';
 export { SectionHeader } from './components/section_header';
 export { Link } from './components/link';
+export { Container } from './components/container';
 
 export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';
 
diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts
index 596c17e83..a4dd7fefa 100644
--- a/packages/react-shared/src/utils/colors.ts
+++ b/packages/react-shared/src/utils/colors.ts
@@ -18,6 +18,7 @@ const baseColors = {
     darkGrey: '#818181',
     landingLinkGrey: '#919191',
     linkSectionGrey: '#999999',
+    greyTheme: '#666666',
     grey700: '#616161',
     grey750: '#515151',
     grey800: '#424242',
-- 
cgit v1.2.3


From bf9af95654503df94b5b32af74a4cbc8bee7f2ec Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 11:57:16 +0100
Subject: chore: improve colors

---
 packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 853b69976..71b9b4d32 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -44,7 +44,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
             if (this.props.shouldDisplaySectionHeaders) {
                 // tslint:disable-next-line:no-unused-variable
                 return (
-                    <div key={`section-${sectionName}`} className="py1" style={{ color: colors.linkSectionGrey }}>
+                    <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
                         <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1">
                             {finalSectionName.toUpperCase()}
                         </div>
-- 
cgit v1.2.3


From b3a323efa1fc5d942c2f7052f585acc248394f44 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 12:20:30 +0100
Subject: fix: Nested a tag warning in console by not rendering a tags within
 type definition popovers

---
 .../react-shared/src/components/anchor_title.tsx   | 34 +++++++++++++---------
 1 file changed, 20 insertions(+), 14 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx
index dabdfff9b..0bdf61d44 100644
--- a/packages/react-shared/src/components/anchor_title.tsx
+++ b/packages/react-shared/src/components/anchor_title.tsx
@@ -15,6 +15,7 @@ export interface AnchorTitleProps {
     id: string;
     headerSize: HeaderSizes;
     shouldShowAnchor: boolean;
+    isDisabled?: boolean;
 }
 
 export interface AnchorTitleState {
@@ -40,6 +41,9 @@ const styles: Styles = {
 };
 
 export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> {
+    public static defaultProps: Partial<AnchorTitleProps> = {
+        isDisabled: false,
+    };
     constructor(props: AnchorTitleProps) {
         super(props);
         this.state = {
@@ -67,20 +71,22 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
                 <div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}>
                     {this.props.title}
                 </div>
-                <ScrollLink
-                    to={this.props.id}
-                    hashSpy={true}
-                    offset={headerSizeToScrollOffset[this.props.headerSize]}
-                    duration={constants.DOCS_SCROLL_DURATION_MS}
-                    containerId={constants.SCROLL_CONTAINER_ID}
-                >
-                    <i
-                        className="zmdi zmdi-link"
-                        style={{ ...styles.anchor, opacity }}
-                        onMouseOver={this._setHoverState.bind(this, true)}
-                        onMouseOut={this._setHoverState.bind(this, false)}
-                    />
-                </ScrollLink>
+                {!this.props.isDisabled && (
+                    <ScrollLink
+                        to={this.props.id}
+                        hashSpy={true}
+                        offset={headerSizeToScrollOffset[this.props.headerSize]}
+                        duration={constants.DOCS_SCROLL_DURATION_MS}
+                        containerId={constants.SCROLL_CONTAINER_ID}
+                    >
+                        <i
+                            className="zmdi zmdi-link"
+                            style={{ ...styles.anchor, opacity }}
+                            onMouseOver={this._setHoverState.bind(this, true)}
+                            onMouseOut={this._setHoverState.bind(this, false)}
+                        />
+                    </ScrollLink>
+                )}
             </div>
         );
     }
-- 
cgit v1.2.3


From a5e435d8317c7532caa4eb0fcf5bb49cf42c87c7 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 12:58:09 +0100
Subject: fix: menu item overflow issue

---
 packages/react-shared/src/components/nested_sidebar_menu.tsx | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 71b9b4d32..1ad61fcca 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -30,6 +30,9 @@ const styles: Styles = {
         fontSize: 14,
         lineHeight: 2,
         padding: 0,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
     },
 };
 
-- 
cgit v1.2.3


From ce151f630d10664353ff1c9172a7495557792abe Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 17:35:40 +0100
Subject: feat: highlighted sidebar as you scroll on doc reference pages

---
 .../src/components/markdown_section.tsx            | 20 +++++-----
 .../src/components/nested_sidebar_menu.tsx         | 46 ++++++++++++++++++++--
 2 files changed, 51 insertions(+), 15 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index 3dc3efe12..9f5855d16 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -20,6 +20,7 @@ export interface MarkdownSectionProps {
     headerSize?: HeaderSizes;
     githubLink?: string;
     shouldReformatTitle?: boolean;
+    alternativeSectionTitle?: string;
 }
 
 interface DefaultMarkdownSectionProps {
@@ -47,22 +48,25 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
 
         const id = utils.getIdFromName(sectionName);
-        const finalSectionName = this.props.shouldReformatTitle
+        const formattedSectionName = this.props.shouldReformatTitle
             ? utils.convertCamelCaseToSpaces(sectionName)
             : sectionName;
+        const title = !_.isUndefined(this.props.alternativeSectionTitle)
+            ? this.props.alternativeSectionTitle
+            : formattedSectionName;
         return (
             <div
                 className="md-px1 sm-px2 overflow-hidden"
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
-                <ScrollElement name={id}>
-                    <Container className="clearfix" marginBottom="20px">
+                <ScrollElement name={id} style={{ paddingBottom: 20 }}>
+                    <Container className="clearfix" paddingTop="30px" paddingBottom="20px">
                         <div className="col lg-col-8 md-col-8 sm-col-12">
                             <span style={{ color: colors.grey700 }}>
                                 <AnchorTitle
                                     headerSize={headerSize}
-                                    title={_.capitalize(finalSectionName)}
+                                    title={_.capitalize(title)}
                                     id={id}
                                     shouldShowAnchor={this.state.shouldShowAnchor}
                                 />
@@ -87,13 +91,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                             paragraph: MarkdownParagraphBlock,
                         }}
                     />
-                    <Container
-                        width={'100%'}
-                        height={'1px'}
-                        backgroundColor={colors.grey300}
-                        marginTop={'32px'}
-                        marginBottom={'32px'}
-                    />
+                    <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'32px'} />
                 </ScrollElement>
             </div>
         );
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 1ad61fcca..87622310a 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -14,9 +14,12 @@ export interface NestedSidebarMenuProps {
     sidebarHeader?: React.ReactNode;
     shouldDisplaySectionHeaders?: boolean;
     shouldReformatMenuItemNames?: boolean;
+    parentName?: string;
 }
 
-export interface NestedSidebarMenuState {}
+export interface NestedSidebarMenuState {
+    scrolledToId: string;
+}
 
 const styles: Styles = {
     menuItemWithHeaders: {
@@ -40,7 +43,28 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     public static defaultProps: Partial<NestedSidebarMenuProps> = {
         shouldDisplaySectionHeaders: true,
         shouldReformatMenuItemNames: true,
+        parentName: 'default',
     };
+    private _urlIntervalCheckId: number;
+    constructor(props: NestedSidebarMenuProps) {
+        super(props);
+        this.state = {
+            scrolledToId: '',
+        };
+    }
+    public componentDidMount(): void {
+        this._urlIntervalCheckId = window.setInterval(() => {
+            const scrollId = location.hash.slice(1);
+            if (scrollId !== this.state.scrolledToId) {
+                this.setState({
+                    scrolledToId: scrollId,
+                });
+            }
+        }, 200);
+    }
+    public componentWillUnmount(): void {
+        window.clearInterval(this._urlIntervalCheckId);
+    }
     public render(): React.ReactNode {
         const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
             const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
@@ -48,7 +72,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                 // tslint:disable-next-line:no-unused-variable
                 return (
                     <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
-                        <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1">
+                        <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
                             {finalSectionName.toUpperCase()}
                         </div>
                         {this._renderMenuItems(links)}
@@ -61,23 +85,37 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
         return (
             <div>
                 {this.props.sidebarHeader}
-                <div className="pl1">{navigation}</div>
+                <div>{navigation}</div>
             </div>
         );
     }
     private _renderMenuItems(links: ALink[]): React.ReactNode[] {
+        const scrolledToId = this.state.scrolledToId;
         const menuItemStyles = this.props.shouldDisplaySectionHeaders
             ? styles.menuItemWithHeaders
             : styles.menuItemWithoutHeaders;
         const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
         const menuItems = _.map(links, link => {
+            const isScrolledTo = link.to === scrolledToId;
             const finalMenuItemName = this.props.shouldReformatMenuItemNames
                 ? utils.convertDashesToSpaces(link.title)
                 : link.title;
             return (
                 <div key={`menuItem-${finalMenuItemName}`}>
                     <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
-                        <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}>
+                        <MenuItem
+                            style={{
+                                ...menuItemStyles,
+                                paddingLeft: 8,
+                                borderRadius: 6,
+                                backgroundColor: isScrolledTo ? colors.lightLinkBlue : 'inherit',
+                            }}
+                            innerDivStyle={{
+                                ...menuItemInnerDivStyles,
+                                color: isScrolledTo ? colors.white : 'inherit',
+                                fontWeight: isScrolledTo ? 'bold' : 'inherit',
+                            }}
+                        >
                             <span
                                 style={{
                                     textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',
-- 
cgit v1.2.3


From f35156517d8fe63935f34cec880b144aae3f55aa Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 15:35:56 +0100
Subject: chore: get menu onHover darken back

---
 .../src/components/nested_sidebar_menu.tsx         | 64 +++++++++-------------
 1 file changed, 27 insertions(+), 37 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 87622310a..70062182b 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -12,7 +12,6 @@ import { Link } from './link';
 export interface NestedSidebarMenuProps {
     sectionNameToLinks: ObjectMap<ALink[]>;
     sidebarHeader?: React.ReactNode;
-    shouldDisplaySectionHeaders?: boolean;
     shouldReformatMenuItemNames?: boolean;
     parentName?: string;
 }
@@ -22,13 +21,12 @@ export interface NestedSidebarMenuState {
 }
 
 const styles: Styles = {
-    menuItemWithHeaders: {
+    menuItem: {
         minHeight: 0,
+        paddingLeft: 8,
+        borderRadius: 6,
     },
-    menuItemWithoutHeaders: {
-        minHeight: 48,
-    },
-    menuItemInnerDivWithHeaders: {
+    menuItemInnerDiv: {
         color: colors.grey800,
         fontSize: 14,
         lineHeight: 2,
@@ -41,7 +39,6 @@ const styles: Styles = {
 
 export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
     public static defaultProps: Partial<NestedSidebarMenuProps> = {
-        shouldDisplaySectionHeaders: true,
         shouldReformatMenuItemNames: true,
         parentName: 'default',
     };
@@ -68,19 +65,15 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     public render(): React.ReactNode {
         const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
             const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
-            if (this.props.shouldDisplaySectionHeaders) {
-                // tslint:disable-next-line:no-unused-variable
-                return (
-                    <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
-                        <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
-                            {finalSectionName.toUpperCase()}
-                        </div>
-                        {this._renderMenuItems(links)}
+            // tslint:disable-next-line:no-unused-variable
+            return (
+                <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
+                    <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
+                        {finalSectionName.toUpperCase()}
                     </div>
-                );
-            } else {
-                return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>;
-            }
+                    {this._renderMenuItems(links)}
+                </div>
+            );
         });
         return (
             <div>
@@ -91,31 +84,28 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     }
     private _renderMenuItems(links: ALink[]): React.ReactNode[] {
         const scrolledToId = this.state.scrolledToId;
-        const menuItemStyles = this.props.shouldDisplaySectionHeaders
-            ? styles.menuItemWithHeaders
-            : styles.menuItemWithoutHeaders;
-        const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
         const menuItems = _.map(links, link => {
-            const isScrolledTo = link.to === scrolledToId;
             const finalMenuItemName = this.props.shouldReformatMenuItemNames
                 ? utils.convertDashesToSpaces(link.title)
                 : link.title;
+            let menuItemStyle = styles.menuItem;
+            let menuItemInnerDivStyle = styles.menuItemInnerDiv;
+            const isScrolledTo = link.to === scrolledToId;
+            if (isScrolledTo) {
+                menuItemStyle = {
+                    ...menuItemStyle,
+                    backgroundColor: colors.lightLinkBlue,
+                };
+                menuItemInnerDivStyle = {
+                    ...menuItemInnerDivStyle,
+                    color: colors.white,
+                    fontWeight: 'bold',
+                };
+            }
             return (
                 <div key={`menuItem-${finalMenuItemName}`}>
                     <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
-                        <MenuItem
-                            style={{
-                                ...menuItemStyles,
-                                paddingLeft: 8,
-                                borderRadius: 6,
-                                backgroundColor: isScrolledTo ? colors.lightLinkBlue : 'inherit',
-                            }}
-                            innerDivStyle={{
-                                ...menuItemInnerDivStyles,
-                                color: isScrolledTo ? colors.white : 'inherit',
-                                fontWeight: isScrolledTo ? 'bold' : 'inherit',
-                            }}
-                        >
+                        <MenuItem style={menuItemStyle} innerDivStyle={menuItemInnerDivStyle}>
                             <span
                                 style={{
                                     textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',
-- 
cgit v1.2.3


From 05f7b733076b566e17883695e85874db040f5a54 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 16:36:06 +0100
Subject: chore: convert to stateless component

---
 .../react-shared/src/components/markdown_paragraph_block.tsx   | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx
index 519638446..eeaef8571 100644
--- a/packages/react-shared/src/components/markdown_paragraph_block.tsx
+++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx
@@ -5,10 +5,6 @@ import { colors } from '../utils/colors';
 
 export interface MarkdownParagraphBlockProps {}
 
-export interface MarkdownParagraphBlockState {}
-
-export class MarkdownParagraphBlock extends React.Component<MarkdownParagraphBlockProps, MarkdownParagraphBlockState> {
-    public render(): React.ReactNode {
-        return <span style={{ color: colors.greyTheme, lineHeight: '26px' }}>{this.props.children}</span>;
-    }
-}
+export const MarkdownParagraphBlock: React.StatelessComponent<MarkdownParagraphBlockProps> = ({ children }) => {
+    return <span style={{ color: colors.greyTheme, lineHeight: '26px' }}>{children}</span>;
+};
-- 
cgit v1.2.3


From 17fb4d5b5703df2a86be0c2f1210c1327debc033 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 16:38:05 +0100
Subject: chore: Remove unused prop

---
 packages/react-shared/src/components/markdown_section.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index 9f5855d16..d5de324c3 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -19,7 +19,6 @@ export interface MarkdownSectionProps {
     markdownContent: string;
     headerSize?: HeaderSizes;
     githubLink?: string;
-    shouldReformatTitle?: boolean;
     alternativeSectionTitle?: string;
 }
 
@@ -36,7 +35,6 @@ export interface MarkdownSectionState {
 export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
     public static defaultProps: Partial<MarkdownSectionProps> = {
         headerSize: HeaderSizes.H3,
-        shouldReformatTitle: true,
     };
     constructor(props: MarkdownSectionProps) {
         super(props);
@@ -48,9 +46,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
 
         const id = utils.getIdFromName(sectionName);
-        const formattedSectionName = this.props.shouldReformatTitle
-            ? utils.convertCamelCaseToSpaces(sectionName)
-            : sectionName;
+        const formattedSectionName = utils.convertCamelCaseToSpaces(sectionName);
         const title = !_.isUndefined(this.props.alternativeSectionTitle)
             ? this.props.alternativeSectionTitle
             : formattedSectionName;
-- 
cgit v1.2.3


From e6e883e05a6e9518bb769db555f0c3e3324d24d3 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 16:38:59 +0100
Subject: chore: remove unused prop

---
 packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 70062182b..34f3eb276 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -13,7 +13,6 @@ export interface NestedSidebarMenuProps {
     sectionNameToLinks: ObjectMap<ALink[]>;
     sidebarHeader?: React.ReactNode;
     shouldReformatMenuItemNames?: boolean;
-    parentName?: string;
 }
 
 export interface NestedSidebarMenuState {
@@ -40,7 +39,6 @@ const styles: Styles = {
 export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
     public static defaultProps: Partial<NestedSidebarMenuProps> = {
         shouldReformatMenuItemNames: true,
-        parentName: 'default',
     };
     private _urlIntervalCheckId: number;
     constructor(props: NestedSidebarMenuProps) {
-- 
cgit v1.2.3


From 55a3bc8cb6772802672f60f22c5ed5c7e1b2dfdd Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 16:43:43 +0100
Subject: chore: don't use Container in react-shared, react-docs yet

---
 packages/react-shared/src/components/container.tsx | 55 ----------------------
 .../src/components/markdown_section.tsx            | 14 ++++--
 packages/react-shared/src/index.ts                 |  1 -
 3 files changed, 10 insertions(+), 60 deletions(-)
 delete mode 100644 packages/react-shared/src/components/container.tsx

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/container.tsx b/packages/react-shared/src/components/container.tsx
deleted file mode 100644
index f2ae68b70..000000000
--- a/packages/react-shared/src/components/container.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-type StringOrNum = string | number;
-
-export type ContainerTag = 'div' | 'span';
-
-export interface ContainerProps {
-    marginTop?: StringOrNum;
-    marginBottom?: StringOrNum;
-    marginRight?: StringOrNum;
-    marginLeft?: StringOrNum;
-    padding?: StringOrNum;
-    paddingTop?: StringOrNum;
-    paddingBottom?: StringOrNum;
-    paddingRight?: StringOrNum;
-    paddingLeft?: StringOrNum;
-    backgroundColor?: string;
-    borderRadius?: StringOrNum;
-    maxWidth?: StringOrNum;
-    maxHeight?: StringOrNum;
-    width?: StringOrNum;
-    height?: StringOrNum;
-    minWidth?: StringOrNum;
-    minHeight?: StringOrNum;
-    isHidden?: boolean;
-    className?: string;
-    position?: 'absolute' | 'fixed' | 'relative' | 'unset';
-    display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
-    top?: string;
-    left?: string;
-    right?: string;
-    bottom?: string;
-    zIndex?: number;
-    Tag?: ContainerTag;
-    cursor?: string;
-    id?: string;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
-}
-
-export const Container: React.StatelessComponent<ContainerProps> = props => {
-    const { children, className, Tag, isHidden, id, onClick, ...style } = props;
-    const visibility = isHidden ? 'hidden' : undefined;
-    return (
-        <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
-            {children}
-        </Tag>
-    );
-};
-
-Container.defaultProps = {
-    Tag: 'div',
-};
-
-Container.displayName = 'Container';
diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index d5de324c3..e6a7d80d5 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -8,7 +8,6 @@ import { colors } from '../utils/colors';
 import { utils } from '../utils/utils';
 
 import { AnchorTitle } from './anchor_title';
-import { Container } from './container';
 import { Link } from './link';
 import { MarkdownCodeBlock } from './markdown_code_block';
 import { MarkdownLinkBlock } from './markdown_link_block';
@@ -57,7 +56,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
                 <ScrollElement name={id} style={{ paddingBottom: 20 }}>
-                    <Container className="clearfix" paddingTop="30px" paddingBottom="20px">
+                    <div className="clearfix" style={{ paddingTop: 30, paddingBottom: 20 }}>
                         <div className="col lg-col-8 md-col-8 sm-col-12">
                             <span style={{ color: colors.grey700 }}>
                                 <AnchorTitle
@@ -77,7 +76,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                                 </div>
                             )}
                         </div>
-                    </Container>
+                    </div>
                     <ReactMarkdown
                         source={markdownContent}
                         escapeHtml={false}
@@ -87,7 +86,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                             paragraph: MarkdownParagraphBlock,
                         }}
                     />
-                    <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'32px'} />
+                    <div
+                        style={{
+                            width: '100%',
+                            height: 1,
+                            backgroundColor: colors.grey300,
+                            marginTop: 32,
+                        }}
+                    />
                 </ScrollElement>
             </div>
         );
diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts
index 2ab9b393e..e33b09f19 100644
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -5,7 +5,6 @@ export { MarkdownSection } from './components/markdown_section';
 export { NestedSidebarMenu } from './components/nested_sidebar_menu';
 export { SectionHeader } from './components/section_header';
 export { Link } from './components/link';
-export { Container } from './components/container';
 
 export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';
 
-- 
cgit v1.2.3


From 9bae3e51d96ee3fc2c9652a373df155421228609 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 17:09:17 +0100
Subject: chore: initalize _urlIntervalCheckId

---
 packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 34f3eb276..fc5ab95fa 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -40,7 +40,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     public static defaultProps: Partial<NestedSidebarMenuProps> = {
         shouldReformatMenuItemNames: true,
     };
-    private _urlIntervalCheckId: number;
+    private _urlIntervalCheckId: number | undefined = undefined;
     constructor(props: NestedSidebarMenuProps) {
         super(props);
         this.state = {
-- 
cgit v1.2.3


From e18f66e5b7a099101c8d9273391744eacd705f59 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 17 Oct 2018 15:53:28 +0100
Subject: nit: use styled-component instead of react-state for onHover

---
 .../react-shared/src/components/anchor_title.tsx   | 37 +++++++---------------
 1 file changed, 11 insertions(+), 26 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx
index 0bdf61d44..0164a8c4a 100644
--- a/packages/react-shared/src/components/anchor_title.tsx
+++ b/packages/react-shared/src/components/anchor_title.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
+import styled from 'styled-components';
 
 import { HeaderSizes, Styles } from '../types';
 import { colors } from '../utils/colors';
@@ -15,12 +16,10 @@ export interface AnchorTitleProps {
     id: string;
     headerSize: HeaderSizes;
     shouldShowAnchor: boolean;
-    isDisabled?: boolean;
+    isDisabled: boolean;
 }
 
-export interface AnchorTitleState {
-    isHovering: boolean;
-}
+export interface AnchorTitleState {}
 
 const styles: Styles = {
     anchor: {
@@ -29,7 +28,7 @@ const styles: Styles = {
         cursor: 'pointer',
     },
     h1: {
-        fontSize: '30px',
+        fontSize: '1.875em',
     },
     h2: {
         fontSize: '1.5em',
@@ -44,17 +43,13 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
     public static defaultProps: Partial<AnchorTitleProps> = {
         isDisabled: false,
     };
-    constructor(props: AnchorTitleProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
     public render(): React.ReactNode {
-        let opacity = 0;
-        if (this.props.shouldShowAnchor) {
-            opacity = this.state.isHovering ? 0.6 : 1;
-        }
+        const AnchorIcon = styled.i`
+            opacity: ${this.props.shouldShowAnchor ? 1 : 0};
+            &:hover {
+                opacity: ${this.props.shouldShowAnchor ? 0.6 : 0};
+            }
+        `;
         return (
             <div
                 className="relative flex"
@@ -79,20 +74,10 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
                         duration={constants.DOCS_SCROLL_DURATION_MS}
                         containerId={constants.SCROLL_CONTAINER_ID}
                     >
-                        <i
-                            className="zmdi zmdi-link"
-                            style={{ ...styles.anchor, opacity }}
-                            onMouseOver={this._setHoverState.bind(this, true)}
-                            onMouseOut={this._setHoverState.bind(this, false)}
-                        />
+                        <AnchorIcon className="zmdi zmdi-link" style={{ ...styles.anchor }} />
                     </ScrollLink>
                 )}
             </div>
         );
     }
-    private _setHoverState(isHovering: boolean): void {
-        this.setState({
-            isHovering,
-        });
-    }
 }
-- 
cgit v1.2.3


From 4d275cc5916c2802bd1d0b64766409daff5006db Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 17 Oct 2018 15:55:05 +0100
Subject: nit: don't init scrolledToId

---
 packages/react-shared/src/components/nested_sidebar_menu.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index fc5ab95fa..f734dc654 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -16,7 +16,7 @@ export interface NestedSidebarMenuProps {
 }
 
 export interface NestedSidebarMenuState {
-    scrolledToId: string;
+    scrolledToId?: string;
 }
 
 const styles: Styles = {
@@ -43,9 +43,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     private _urlIntervalCheckId: number | undefined = undefined;
     constructor(props: NestedSidebarMenuProps) {
         super(props);
-        this.state = {
-            scrolledToId: '',
-        };
+        this.state = {};
     }
     public componentDidMount(): void {
         this._urlIntervalCheckId = window.setInterval(() => {
-- 
cgit v1.2.3


From ac68f8db4459b09f7fd0a0191e068eee2da9f76f Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 17 Oct 2018 20:18:28 +0100
Subject: refactor: fix anchor so it doesn't keep re-rendering the anchor icon

---
 .../react-shared/src/components/anchor_title.tsx   | 30 +++++++++++++---------
 1 file changed, 18 insertions(+), 12 deletions(-)

(limited to 'packages/react-shared/src')

diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx
index 0164a8c4a..bd99edcab 100644
--- a/packages/react-shared/src/components/anchor_title.tsx
+++ b/packages/react-shared/src/components/anchor_title.tsx
@@ -22,11 +22,6 @@ export interface AnchorTitleProps {
 export interface AnchorTitleState {}
 
 const styles: Styles = {
-    anchor: {
-        fontSize: 20,
-        transform: 'rotate(45deg)',
-        cursor: 'pointer',
-    },
     h1: {
         fontSize: '1.875em',
     },
@@ -39,17 +34,28 @@ const styles: Styles = {
     },
 };
 
+interface AnchorIconProps {
+    shouldShowAnchor: boolean;
+}
+
+const AnchorIcon =
+    styled.i <
+    AnchorIconProps >
+    `
+            opacity: ${props => (props.shouldShowAnchor ? 1 : 0)};
+            &:hover {
+                opacity: ${props => (props.shouldShowAnchor ? 0.6 : 0)};
+            }
+            font-size: 20px;
+            transform: rotate(45deg);
+            cursor: pointer;
+        `;
+
 export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> {
     public static defaultProps: Partial<AnchorTitleProps> = {
         isDisabled: false,
     };
     public render(): React.ReactNode {
-        const AnchorIcon = styled.i`
-            opacity: ${this.props.shouldShowAnchor ? 1 : 0};
-            &:hover {
-                opacity: ${this.props.shouldShowAnchor ? 0.6 : 0};
-            }
-        `;
         return (
             <div
                 className="relative flex"
@@ -74,7 +80,7 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
                         duration={constants.DOCS_SCROLL_DURATION_MS}
                         containerId={constants.SCROLL_CONTAINER_ID}
                     >
-                        <AnchorIcon className="zmdi zmdi-link" style={{ ...styles.anchor }} />
+                        <AnchorIcon className="zmdi zmdi-link" shouldShowAnchor={this.props.shouldShowAnchor} />
                     </ScrollLink>
                 )}
             </div>
-- 
cgit v1.2.3