Skip to content

Commit 306586e

Browse files
richbachmanrichbachman
authored
feat(website): [DSYS-1046] website structure and navigation
* 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
1 parent 2fcdb23 commit 306586e

File tree

13 files changed

+590
-2957
lines changed

13 files changed

+590
-2957
lines changed

‎packages/paste-theme/src/themeProvider.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const pasteGlobalStyles = css`
1414
export const StyledBase = styled.div`
1515
font-family: ${themeGet('fonts.fontFamilyText')};
1616
line-height: 1.15;
17+
color: ${themeGet('textColors.colorText')};
1718
font-weight: ${themeGet('fontWeights.fontWeightNormal')};
1819
1920
*,

‎packages/paste-website/src/components/default-site-wrapper/index.tsx

Lines changed: 9 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,24 @@
11
import * as React from 'react';
2-
import {graphql, useStaticQuery, Link} from 'gatsby';
3-
import {Global, css} from '@emotion/core';
4-
import styled from '@emotion/styled';
5-
import {themeGet} from 'styled-system';
2+
import {Global} from '@emotion/core';
63
import {Theme} from '@twilio-paste/theme';
4+
import {Sidebar} from '../sidebar';
75
import {Header} from '../header';
6+
import {Navigation} from '../navigation';
7+
import {globalStyles, SiteBody, SiteMain} from './styles';
88

99
interface SiteWrapperProps {
1010
children: React.ReactNode;
1111
}
12-
interface SiteWrapperPageQuery {
13-
allPasteComponent: {
14-
edges: [
15-
{
16-
node: {
17-
name: string;
18-
};
19-
}
20-
];
21-
};
22-
allPasteUtility: {
23-
edges: [
24-
{
25-
node: {
26-
name: string;
27-
};
28-
}
29-
];
30-
};
31-
}
32-
33-
const pageQuery = graphql`
34-
{
35-
allSitePage(filter: {path: {ne: "/dev-404-page/"}}) {
36-
edges {
37-
node {
38-
path
39-
componentChunkName
40-
componentPath
41-
id
42-
component
43-
internalComponentName
44-
isCreatedByStatefulCreatePages
45-
pluginCreatorId
46-
}
47-
}
48-
}
49-
allPasteComponent(sort: {order: ASC, fields: name}) {
50-
edges {
51-
node {
52-
name
53-
version
54-
}
55-
}
56-
}
57-
allPasteUtility(sort: {order: ASC, fields: name}) {
58-
edges {
59-
node {
60-
version
61-
name
62-
}
63-
}
64-
}
65-
}
66-
`;
67-
68-
const globalStyles = css`
69-
body {
70-
margin: 0;
71-
}
72-
`;
73-
74-
const SiteBody = styled.div`
75-
display: flex;
76-
`;
77-
78-
const SiteHeader = styled.header`
79-
background-color: ${themeGet('backgroundColors.colorBackground')};
80-
${themeGet('borderTypes.Light')};
81-
border-width: 0 1px 0 0;
82-
display: flex;
83-
flex-direction: column;
84-
padding: ${themeGet('space.space40')};
85-
position: fixed;
86-
bottom: 0;
87-
top: 0;
88-
width: ${themeGet('maxWidths.size30')};
89-
`;
90-
91-
const SiteMain = styled.main`
92-
margin-left: ${themeGet('widths.size30')};
93-
padding: ${themeGet('space.space80')};
94-
`;
95-
96-
const SiteNav = styled.nav``;
97-
98-
const SiteNavList = styled.ul`
99-
list-style: none;
100-
padding: 0;
101-
margin: 0;
102-
`;
103-
104-
const SiteNavNestList = styled(SiteNavList)`
105-
margin-left: ${themeGet('space.space30')};
106-
`;
107-
108-
const SiteNavItem = styled.li``;
109-
110-
const SiteNavAnchor = styled(Link)`
111-
color: ${themeGet('textColors.colorText')};
112-
display: block;
113-
width: 100%;
114-
`;
11512

11613
const SiteWrapper: React.FC<SiteWrapperProps> = props => {
117-
const data: SiteWrapperPageQuery = useStaticQuery(pageQuery);
118-
console.log('SiteWrapper Query', data);
11914
return (
120-
<Theme.Provider>
15+
<Theme.Provider theme="sendgrid">
12116
<Global styles={globalStyles} />
12217
<SiteBody>
123-
<SiteHeader>
124-
<Header siteTitle="DSYS Docs" />
125-
<SiteNav>
126-
<SiteNavList>
127-
<SiteNavItem>
128-
<SiteNavAnchor to="/getting-started">Getting Started</SiteNavAnchor>
129-
</SiteNavItem>
130-
<SiteNavItem>
131-
<SiteNavAnchor to="/tokens">Tokens</SiteNavAnchor>
132-
</SiteNavItem>
133-
<SiteNavItem>
134-
<SiteNavAnchor to="/components">Components</SiteNavAnchor>
135-
<SiteNavNestList>
136-
{data.allPasteComponent.edges.map(({node}) => {
137-
return (
138-
<SiteNavItem key={node.name}>
139-
<SiteNavAnchor to={`/components/${node.name.replace('@twilio-paste/', '')}`}>
140-
{node.name.replace('@twilio-paste/', '')}
141-
</SiteNavAnchor>
142-
</SiteNavItem>
143-
);
144-
})}
145-
</SiteNavNestList>
146-
</SiteNavItem>
147-
<SiteNavItem>
148-
<SiteNavAnchor to="/components">Utilities</SiteNavAnchor>
149-
<SiteNavNestList>
150-
{data.allPasteUtility.edges.map(({node}) => {
151-
return (
152-
<SiteNavItem key={node.name}>
153-
<SiteNavAnchor to={`/components/${node.name.replace('@twilio-paste/', '')}`}>
154-
{node.name.replace('@twilio-paste/', '')}
155-
</SiteNavAnchor>
156-
</SiteNavItem>
157-
);
158-
})}
159-
</SiteNavNestList>
160-
</SiteNavItem>
161-
</SiteNavList>
162-
</SiteNav>
163-
</SiteHeader>
18+
<Sidebar>
19+
<Header siteTitle="Paste" siteSubTitle="Design System" siteVersion="v0.1" />
20+
<Navigation />
21+
</Sidebar>
16422
<SiteMain>{props.children}</SiteMain>
16523
</SiteBody>
16624
</Theme.Provider>

‎packages/paste-website/src/components/default-site-wrapper/styles.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {css} from '@emotion/core';
2+
import styled from '@emotion/styled';
3+
import {themeGet} from 'styled-system';
4+
5+
export const globalStyles = css`
6+
body {
7+
margin: 0;
8+
}
9+
`;
10+
11+
export const SiteBody = styled.div`
12+
display: flex;
13+
min-height: 100vh;
14+
min-width: 240px;
15+
height: 100vh;
16+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
17+
'Segoe UI Emoji', 'Segoe UI Symbol';
18+
19+
@supports (display: grid) {
20+
display: grid;
21+
grid-template-columns: 240px 1fr;
22+
}
23+
`;
24+
25+
export const SiteMain = styled.main`
26+
padding: ${themeGet('space.space110')} ${themeGet('space.space200')};
27+
overflow: auto;
28+
29+
@supports not (display: grid) {
30+
flex: 1;
31+
}
32+
`;

‎packages/paste-website/src/components/header/index.tsx

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
import * as React from 'react';
2-
import {Link} from 'gatsby';
3-
import styled from '@emotion/styled';
4-
import {themeGet} from 'styled-system';
5-
import {StyledHeader} from './styled-header';
2+
import {Text} from '@twilio-paste/text';
3+
import {StyledHeader, StyledH3, StyledSpan, StyledLink} from './styles';
4+
import {TWILIO_RED} from '../../constants';
5+
import TwilioIcon from '../svg/twilio-icon';
66

77
interface HeaderProps {
88
siteTitle?: string;
9+
siteSubTitle?: string;
10+
siteVersion?: string;
911
}
1012

11-
const StyledHeaderLink = styled(Link)`
12-
color: ${themeGet('textColors.colorText')};
13-
14-
&:visited {
15-
color: ${themeGet('textColors.colorText')};
16-
}
17-
`;
18-
1913
const Header: React.FC<HeaderProps> = props => {
2014
return (
2115
<StyledHeader>
22-
<h1>
23-
<StyledHeaderLink to="/">{props.siteTitle}</StyledHeaderLink>
24-
</h1>
16+
<TwilioIcon color={TWILIO_RED} size={30} />
17+
<Text as="h2" fontSize="fontSize50" marginTop="space40" marginBottom="space20">
18+
<StyledLink to="/">{props.siteTitle}</StyledLink>
19+
</Text>
20+
<StyledH3 as="h3" fontSize="fontSize10" textColor="colorTextPlaceholder" margin={0}>
21+
<StyledSpan>{props.siteSubTitle}</StyledSpan>
22+
<StyledSpan>{props.siteVersion}</StyledSpan>
23+
</StyledH3>
2524
</StyledHeader>
2625
);
2726
};

‎packages/paste-website/src/components/header/styled-header.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎packages/paste-website/src/components/header/styles.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import {Link} from 'gatsby';
2+
import styled from '@emotion/styled';
3+
import {themeGet} from 'styled-system';
4+
import {Text} from '@twilio-paste/text';
5+
6+
export const StyledHeader = styled.header`
7+
padding: 0 ${themeGet('space.space40')} ${themeGet('space.space40')};
8+
margin-bottom: ${themeGet('space.space40')};
9+
border-bottom: ${themeGet('borderWidths.borderWidth20')} solid ${themeGet('colors.colorGray30')};
10+
`;
11+
12+
export const StyledLink = styled(Link)`
13+
text-decoration: none;
14+
color: inherit;
15+
16+
&:visited {
17+
color: inherit;
18+
}
19+
`;
20+
21+
export const StyledH3 = styled(Text)`
22+
display: flex;
23+
`;
24+
25+
export const StyledSpan = styled.span`
26+
flex: 1;
27+
28+
&:nth-of-type(2) {
29+
flex: 0;
30+
justify-self: flex-end;
31+
font-weight: ${themeGet('fontWeights.fontWeightNormal')};
32+
}
33+
`;

0 commit comments

Comments
 (0)