Cleanup for table of contents. Added containerId default prop to link in react-shared

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

@@ -17,36 +17,43 @@ export interface IContents {
 }
 
 export const TableOfContents: React.FC<ITableOfContentsProps> = ({ contents }) => {
-    console.log('contents', contents);
     return (
-        <ContentListWrapper>
-            <Contents contents={contents} />
-        </ContentListWrapper>
+        <ContentsAside>
+            <ContentsWrapper>
+                <Contents contents={contents} />
+            </ContentsWrapper>
+        </ContentsAside>
     );
 };
 
 const Contents: React.FC<ITableOfContentsProps> = ({ contents }) => {
     return (
-        <ContentList>
+        <ContentsList>
             {contents.map(content => {
                 const { children, id, title } = content;
                 return (
                     <li key={id}>
-                        <ContentLink to={id}>{title}</ContentLink>
+                        <ContentLink containerId="" to={id}>
+                            {title}
+                        </ContentLink>
                         {children.length > 0 && <Contents contents={children} />}
                     </li>
                 );
             })}
-        </ContentList>
+        </ContentsList>
     );
 };
 
-const ContentListWrapper = styled.aside`
+const ContentsAside = styled.aside`
+    position: relative;
+`;
+
+const ContentsWrapper = styled.div`
     position: sticky;
     top: 154px; /* To make space for the header when clicking on links */
 `;
 
-const ContentList = styled.ul`
+const ContentsList = styled.ul`
     ul {
         border-left: 1px solid #e3e3e3;
         padding-left: 0.7rem;

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

@@ -19,6 +19,7 @@ export interface BaseLinkProps {
 }
 
 export interface ScrollLinkProps extends BaseLinkProps {
+    containerId?: string;
     onActivityChanged?: (isActive: boolean) => void;
 }
 
@@ -45,6 +46,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
         onMouseEnter: _.noop.bind(_),
         textDecoration: 'none',
         fontColor: 'inherit',
+        containerId: constants.SCROLL_CONTAINER_ID,
     };
     private _outerReactScrollSpan: HTMLSpanElement | null;
     constructor(props: LinkProps) {
@@ -117,7 +119,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
                             spy={true}
                             hashSpy={true}
                             duration={constants.DOCS_SCROLL_DURATION_MS}
-                            containerId={constants.SCROLL_CONTAINER_ID}
+                            containerId={this.props.containerId}
                             className={this.props.className}
                             style={styleWithDefault}
                             onSetActive={this._onActivityChanged.bind(this, true)}

packages/website/ts/pages/docs/view.tsx

@@ -76,9 +76,7 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
             <Hero title={title} />
             {Component ? (
                 <Columns>
-                    <DocsViewWrapper>
-                        <TableOfContents contents={contents} />
-                    </DocsViewWrapper>
+                    <TableOfContents contents={contents} />
                     <ContentWrapper>
                         <MDXProvider components={mdxComponents}>
                             {/*
@@ -98,10 +96,6 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
     );
 };
 
-const DocsViewWrapper = styled.div`
-    position: relative;
-`;
-
 const LoaderWrapper = styled.div`
     display: flex;
     align-items: center;