feat(ui-toolkit): add bottom nav to jump to previous or next session

packages/ui-toolkit/src/styleguide/bottomNav.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import remcalc from 'remcalc';
+import styled from 'styled-components';
+import { Arrow } from 'joyent-icons';
+
+const BottomNav = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 36px 0;
+`;
+
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+  color: #3b46cc;
+  font-size: 15px;
+  line-height: 24px;
+  text-decoration: none;
+`;
+
+export default props => {
+  const items = props.items.map(item => item.name);
+  const selectedIndex =
+    items.indexOf(props.link) > -1 ? items.indexOf(props.link) : 0;
+
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <BottomNav>
+      <div>
+        {selectedIndex > 0 ? (
+          <Link href={`/#!/${items[selectedIndex - 1]}`}>
+            <Arrow direction="right" fill="#3B46CC" /> &nbsp;{' '}
+            {items[selectedIndex - 1]}
+          </Link>
+        ) : null}
+      </div>
+      <div>
+        {selectedIndex < items.length ? (
+          <Link href={`/#!/${items[selectedIndex + 1]}`}>
+            {items[selectedIndex + 1]} &nbsp;{' '}
+            <Arrow direction="left" fill="#3B46CC" />
+          </Link>
+        ) : null}
+      </div>
+    </BottomNav>
+  );
+};

packages/ui-toolkit/src/styleguide/renderer.js

@@ -7,6 +7,7 @@ import { ParallaxProvider } from 'react-scroll-parallax';
 import theme from '../theme';
 import Header from './header';
 import Parallax from './parallax';
+import BottomNav from './bottomNav';
 
 const Main = styled(Row)`
   padding-top: ${remcalc(24)};
@@ -71,6 +72,7 @@ const StyleGuideRenderer = ({
               )}
               <Col xs={hasSidebar ? 9 : 12} lg={hasSidebar ? 8 : 12}>
                 {children}
+                <BottomNav items={toc.props.sections} link={link} />
               </Col>
             </Main>
           </Grid>