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

86 lines
2.0 KiB
JavaScript

import React, { Fragment } from 'react';
import { Grid, Row, Col } from 'joyent-react-styled-flexboxgrid';
import styled, { ThemeProvider } from 'styled-components';
import remcalc from 'remcalc';
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)};
width: 100%;
`;
const Sidebar = styled.div`
position: sticky;
top: 0;
z-index: 9;
top: ${remcalc(0)};
margin-top: ${remcalc(-24)};
padding: ${remcalc(24)} 0;
margin-left: ${remcalc(10)};
max-height: 100vh;
overflow: auto;
background: white;
width: ${remcalc(234)};
border-right: ${remcalc(1)} solid ${props => props.theme.grey};
box-sizing: border-box;
`;
const fullTheme = {
...theme,
flexboxgrid: {
...theme.flexboxgrid,
breakpoints: {
xs: 0, // em
sm: 48, // em
md: 68, // em
lg: 70 // em
},
container: {
sm: remcalc(1115), // rem
md: remcalc(1115), // rem
lg: remcalc(1115) // rem
}
}
};
const StyleGuideRenderer = ({
title,
homepageUrl,
children,
toc,
hasSidebar
}) => {
const link = decodeURIComponent(window.location.href).split('/#!/')[1] || '/';
return (
<ThemeProvider theme={fullTheme}>
<ParallaxProvider>
<Fragment>
{link === '/' ? <Parallax /> : null}
<Header />
<Grid style={{ marginLeft: 0, zIndex: 2, position: 'relative' }}>
<Main>
{hasSidebar && (
<Col xs={3}>
<Sidebar>{toc}</Sidebar>
</Col>
)}
<Col xs={hasSidebar ? 9 : 12} lg={hasSidebar ? 8 : 12}>
{children}
<BottomNav items={toc.props.sections} link={link} />
</Col>
</Main>
</Grid>
</Fragment>
</ParallaxProvider>
</ThemeProvider>
);
};
export default StyleGuideRenderer;