From 8bb4c31aba7b0ab923ebe487eebddbe735743bbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Moreira?= 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 ( + +
+ {selectedIndex > 0 ? ( + +  {' '} + {items[selectedIndex - 1]} + + ) : null} +
+
+ {selectedIndex < items.length ? ( + + {items[selectedIndex + 1]}  {' '} + + + ) : null} +
+
+ ); +}; 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 = ({ )} {children} +