Skip to content

Commit

Permalink
feat(website): [DSYS-1046] website structure and navigation
Browse files Browse the repository at this point in the history 
* feat(website): main structure and side nav

* feat(website): nav toggle. start getting-started.

* fix(website): add site-wrapper flexbox fallback

* fix(website): adjust header styles, add constants

* fix(website): isOpen props for subnav, box tokens on sidebar

* fix(website): change constant to snake case
  • Loading branch information
@richbachman
richbachman committed Jul 31, 2019
1 parent 2fcdb23 commit 306586e
Show file tree
Hide file tree
Showing 13 changed files with 590 additions and 2,957 deletions.
1 change: 1 addition & 0 deletions packages/paste-theme/src/themeProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const pasteGlobalStyles = css`
export const StyledBase = styled.div`
font-family: ${themeGet('fonts.fontFamilyText')};
line-height: 1.15;
color: ${themeGet('textColors.colorText')};
font-weight: ${themeGet('fontWeights.fontWeightNormal')};
*,
Expand Down
160 changes: 9 additions & 151 deletions packages/paste-website/src/components/default-site-wrapper/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,166 +1,24 @@
import * as React from 'react';
import {graphql, useStaticQuery, Link} from 'gatsby';
import {Global, css} from '@emotion/core';
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {Global} from '@emotion/core';
import {Theme} from '@twilio-paste/theme';
import {Sidebar} from '../sidebar';
import {Header} from '../header';
import {Navigation} from '../navigation';
import {globalStyles, SiteBody, SiteMain} from './styles';

interface SiteWrapperProps {
children: React.ReactNode;
}
interface SiteWrapperPageQuery {
allPasteComponent: {
edges: [
{
node: {
name: string;
};
}
];
};
allPasteUtility: {
edges: [
{
node: {
name: string;
};
}
];
};
}

const pageQuery = graphql`
{
allSitePage(filter: {path: {ne: "/dev-404-page/"}}) {
edges {
node {
path
componentChunkName
componentPath
id
component
internalComponentName
isCreatedByStatefulCreatePages
pluginCreatorId
}
}
}
allPasteComponent(sort: {order: ASC, fields: name}) {
edges {
node {
name
version
}
}
}
allPasteUtility(sort: {order: ASC, fields: name}) {
edges {
node {
version
name
}
}
}
}
`;

const globalStyles = css`
body {
margin: 0;
}
`;

const SiteBody = styled.div`
display: flex;
`;

const SiteHeader = styled.header`
background-color: ${themeGet('backgroundColors.colorBackground')};
${themeGet('borderTypes.Light')};
border-width: 0 1px 0 0;
display: flex;
flex-direction: column;
padding: ${themeGet('space.space40')};
position: fixed;
bottom: 0;
top: 0;
width: ${themeGet('maxWidths.size30')};
`;

const SiteMain = styled.main`
margin-left: ${themeGet('widths.size30')};
padding: ${themeGet('space.space80')};
`;

const SiteNav = styled.nav``;

const SiteNavList = styled.ul`
list-style: none;
padding: 0;
margin: 0;
`;

const SiteNavNestList = styled(SiteNavList)`
margin-left: ${themeGet('space.space30')};
`;

const SiteNavItem = styled.li``;

const SiteNavAnchor = styled(Link)`
color: ${themeGet('textColors.colorText')};
display: block;
width: 100%;
`;

const SiteWrapper: React.FC<SiteWrapperProps> = props => {
const data: SiteWrapperPageQuery = useStaticQuery(pageQuery);
console.log('SiteWrapper Query', data);
return (
<Theme.Provider>
<Theme.Provider theme="sendgrid">
<Global styles={globalStyles} />
<SiteBody>
<SiteHeader>
<Header siteTitle="DSYS Docs" />
<SiteNav>
<SiteNavList>
<SiteNavItem>
<SiteNavAnchor to="/getting-started">Getting Started</SiteNavAnchor>
</SiteNavItem>
<SiteNavItem>
<SiteNavAnchor to="/tokens">Tokens</SiteNavAnchor>
</SiteNavItem>
<SiteNavItem>
<SiteNavAnchor to="/components">Components</SiteNavAnchor>
<SiteNavNestList>
{data.allPasteComponent.edges.map(({node}) => {
return (
<SiteNavItem key={node.name}>
<SiteNavAnchor to={`/components/${node.name.replace('@twilio-paste/', '')}`}>
{node.name.replace('@twilio-paste/', '')}
</SiteNavAnchor>
</SiteNavItem>
);
})}
</SiteNavNestList>
</SiteNavItem>
<SiteNavItem>
<SiteNavAnchor to="/components">Utilities</SiteNavAnchor>
<SiteNavNestList>
{data.allPasteUtility.edges.map(({node}) => {
return (
<SiteNavItem key={node.name}>
<SiteNavAnchor to={`/components/${node.name.replace('@twilio-paste/', '')}`}>
{node.name.replace('@twilio-paste/', '')}
</SiteNavAnchor>
</SiteNavItem>
);
})}
</SiteNavNestList>
</SiteNavItem>
</SiteNavList>
</SiteNav>
</SiteHeader>
<Sidebar>
<Header siteTitle="Paste" siteSubTitle="Design System" siteVersion="v0.1" />
<Navigation />
</Sidebar>
<SiteMain>{props.children}</SiteMain>
</SiteBody>
</Theme.Provider>
Expand Down
32 changes: 32 additions & 0 deletions packages/paste-website/src/components/default-site-wrapper/styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import {css} from '@emotion/core';
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';

export const globalStyles = css`
body {
margin: 0;
}
`;

export const SiteBody = styled.div`
display: flex;
min-height: 100vh;
min-width: 240px;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
@supports (display: grid) {
display: grid;
grid-template-columns: 240px 1fr;
}
`;

export const SiteMain = styled.main`
padding: ${themeGet('space.space110')} ${themeGet('space.space200')};
overflow: auto;
@supports not (display: grid) {
flex: 1;
}
`;
29 changes: 14 additions & 15 deletions packages/paste-website/src/components/header/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
import * as React from 'react';
import {Link} from 'gatsby';
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {StyledHeader} from './styled-header';
import {Text} from '@twilio-paste/text';
import {StyledHeader, StyledH3, StyledSpan, StyledLink} from './styles';
import {TWILIO_RED} from '../../constants';
import TwilioIcon from '../svg/twilio-icon';

interface HeaderProps {
siteTitle?: string;
siteSubTitle?: string;
siteVersion?: string;
}

const StyledHeaderLink = styled(Link)`
color: ${themeGet('textColors.colorText')};
&:visited {
color: ${themeGet('textColors.colorText')};
}
`;

const Header: React.FC<HeaderProps> = props => {
return (
<StyledHeader>
<h1>
<StyledHeaderLink to="/">{props.siteTitle}</StyledHeaderLink>
</h1>
<TwilioIcon color={TWILIO_RED} size={30} />
<Text as="h2" fontSize="fontSize50" marginTop="space40" marginBottom="space20">
<StyledLink to="/">{props.siteTitle}</StyledLink>
</Text>
<StyledH3 as="h3" fontSize="fontSize10" textColor="colorTextPlaceholder" margin={0}>
<StyledSpan>{props.siteSubTitle}</StyledSpan>
<StyledSpan>{props.siteVersion}</StyledSpan>
</StyledH3>
</StyledHeader>
);
};
Expand Down
7 changes: 0 additions & 7 deletions packages/paste-website/src/components/header/styled-header.ts
View file

This file was deleted.

33 changes: 33 additions & 0 deletions packages/paste-website/src/components/header/styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import {Link} from 'gatsby';
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {Text} from '@twilio-paste/text';

export const StyledHeader = styled.header`
padding: 0 ${themeGet('space.space40')} ${themeGet('space.space40')};
margin-bottom: ${themeGet('space.space40')};
border-bottom: ${themeGet('borderWidths.borderWidth20')} solid ${themeGet('colors.colorGray30')};
`;

export const StyledLink = styled(Link)`
text-decoration: none;
color: inherit;
&:visited {
color: inherit;
}
`;

export const StyledH3 = styled(Text)`
display: flex;
`;

export const StyledSpan = styled.span`
flex: 1;
&:nth-of-type(2) {
flex: 0;
justify-self: flex-end;
font-weight: ${themeGet('fontWeights.fontWeightNormal')};
}
`;
Loading

1 comment on commit 306586e

@vercel
Copy link

@vercel vercel bot commented on 306586e Jul 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully aliased the URL https://paste-8j367474y.now.sh to the following aliases:

Please sign in to comment.