From 8bb4c31aba7b0ab923ebe487eebddbe735743bbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabiommmoreira@Fabios-MBP.lan>
Date: Tue, 8 May 2018 20:22:35 +0100
Subject: [PATCH] feat(ui-toolkit): add bottom nav to jump to previous or next
 session

---
 .../ui-toolkit/src/styleguide/bottomNav.js    | 50 +++++++++++++++++++
 .../ui-toolkit/src/styleguide/renderer.js     |  2 +
 2 files changed, 52 insertions(+)
 create mode 100644 packages/ui-toolkit/src/styleguide/bottomNav.js

diff --git a/packages/ui-toolkit/src/styleguide/bottomNav.js b/packages/ui-toolkit/src/styleguide/bottomNav.js
new file mode 100644
index 00000000..9b359ac9
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/ui-toolkit/src/styleguide/renderer.js b/packages/ui-toolkit/src/styleguide/renderer.js
index ebebb0d5..e8246f60 100644
--- a/packages/ui-toolkit/src/styleguide/renderer.js
+++ b/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>