Skip to content
Permalink
Browse files

feat(website): add the paste theme to the theme switcher

  • Loading branch information
SiTaggart committed Dec 19, 2019
1 parent 86931f1 commit 4d4919f595b19b13cad2792a2eae9656155f6611
@@ -72,13 +72,15 @@ module.exports = {
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1632,
linkImagesToOriginal: false,
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1632,
linkImagesToOriginal: false,
},
},
}, ],
],
},
},
{
@@ -90,21 +92,21 @@ module.exports = {
packages: require.resolve('./src/layouts/GenericLayout.tsx'),
websiteCore: require.resolve('./src/layouts/GenericLayout.tsx'),
},
gatsbyRemarkPlugins: [{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1632,
linkImagesToOriginal: false,
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1632,
linkImagesToOriginal: false,
},
},
}, ],
],
},
},
{
resolve: 'gatsby-transformer-json',
options: {
typeName: ({
node
}) => {
typeName: ({node}) => {
if (node.relativePath.startsWith('paste-core/components') && node.relativePath.endsWith('package.json')) {
return 'PasteComponent';
}
@@ -129,6 +131,10 @@ module.exports = {
return 'PasteTokenSendGrid';
}

if (node.relativePath.endsWith('dist/themes/console/tokens.gatsby.json')) {
return 'PasteTokenConsole';
}

return 'DefaultJson';
},
},
@@ -45,6 +45,7 @@ export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = () => {

const consoleID = useUID();
const sendGridID = useUID();
const pasteID = useUID();

return (
<Box
@@ -75,6 +76,15 @@ export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = () => {
value={ThemeVariants.SENDGRID}
/>
<StyledThemeSwitcherLabel htmlFor={sendGridID}>SendGrid</StyledThemeSwitcherLabel>
<StyledThemeSwitcherRadio
checked={theme === ThemeVariants.DEFAULT}
id={pasteID}
name="sitetheme"
onChange={handleChange}
type="radio"
value={ThemeVariants.DEFAULT}
/>
<StyledThemeSwitcherLabel htmlFor={pasteID}>Paste</StyledThemeSwitcherLabel>
</Box>
</Box>
);
@@ -1,10 +1,24 @@
import * as React from 'react';
import styled from '@emotion/styled';
import {Anchor} from '@twilio-paste/anchor';
import {Box} from '@twilio-paste/box';
import {Text} from '@twilio-paste/text';
import {SIDEBAR_WIDTH} from './constants';
import {Sidebar} from './sidebar';
import {SiteHeader} from './SiteHeader';
import {SiteMain, SiteMainInner} from './SiteMain';
import {SiteFooter} from './SiteFooter';
import {ScrollAnchorIntoView} from './ScrollAnchorIntoView';
import {useActiveSiteTheme} from '../../context/ActiveSiteThemeContext';

interface StyledSiteBodyProps {
activeTheme: string;
}

/* Wraps the entire doc site page */
export const SiteBody = styled.div`
const StyledSiteBody = styled.div<StyledSiteBodyProps>`
position: absolute; /* Absolute so we can only scroll the inner area */
top: 0;
top: ${props => (props.activeTheme === 'default' ? '32px' : '0')};
right: 0;
bottom: 0;
left: 0;
@@ -19,3 +33,40 @@ export const SiteBody = styled.div`
grid-template-columns: ${SIDEBAR_WIDTH} 1fr;
}
`;

export const SiteBody: React.FC = ({children}) => {
const {theme: activeTheme} = useActiveSiteTheme();
return (
<>
{activeTheme === 'default' && (
<Box
backgroundColor="colorBackgroundWarningLightest"
borderRadius="borderRadius20"
padding="space20"
paddingLeft="space40"
paddingRight="space40"
>
<Text as="p" textAlign="center">
<strong>WARNING:</strong> The Paste theme is an <em>extremely early</em> preview of future work!{' '}
<Anchor
href="https://docs.google.com/document/d/1H2Rj3NEmVSv0yxMBRjYOjruQllO__uj2-I_ibIoumZs/edit?usp=sharing"
target="_blank"
>
Read the FAQ
</Anchor>{' '}
for more information.
</Text>
</Box>
)}
<StyledSiteBody activeTheme={activeTheme}>
<Sidebar />
<SiteHeader />
<SiteMain id="site-main">
<ScrollAnchorIntoView />
<SiteMainInner>{children}</SiteMainInner>
<SiteFooter />
</SiteMain>
</StyledSiteBody>
</>
);
};
@@ -1,12 +1,7 @@
import * as React from 'react';
import {css, Global} from '@emotion/core';
import {SiteBody} from './SiteBody';
import {Sidebar} from './sidebar';
import {SiteHeader} from './SiteHeader';
import {ActiveSiteThemeProvider} from '../../context/ActiveSiteThemeContext';
import {SiteMain, SiteMainInner} from './SiteMain';
import {SiteFooter} from './SiteFooter';
import {ScrollAnchorIntoView} from './ScrollAnchorIntoView';
import {SiteThemeProvider} from './SiteThemeProvider';

const globalStyles = css`
@@ -110,15 +105,7 @@ const SiteWrapper: React.FC = ({children}) => {
<ActiveSiteThemeProvider>
<SiteThemeProvider>
<Global styles={globalStyles} />
<SiteBody>
<Sidebar />
<SiteHeader />
<SiteMain id="site-main">
<ScrollAnchorIntoView />
<SiteMainInner>{children}</SiteMainInner>
<SiteFooter />
</SiteMain>
</SiteBody>
<SiteBody>{children}</SiteBody>
</SiteThemeProvider>
</ActiveSiteThemeProvider>
);
@@ -43,6 +43,7 @@ interface TokensListProps {
children?: React.ReactElement;
consoleTokens: TokensShape[];
sendgridTokens: TokensShape[];
defaultTokens: TokensShape[];
}

const getTokensByTheme = (theme: ThemeVariants, props: TokensListProps): TokenCategory[] => {
@@ -59,6 +60,12 @@ const getTokensByTheme = (theme: ThemeVariants, props: TokensListProps): TokenCa
tokens = props.sendgridTokens[0].node.tokens;
}
}
if (theme === ThemeVariants.DEFAULT) {
if (props.defaultTokens != null) {
// eslint-disable-next-line prefer-destructuring
tokens = props.defaultTokens[0].node.tokens;
}
}
return tokens;
};

@@ -29,7 +29,8 @@ In Paste, **1 rem unit = 16 pixels**.
</Box>

<TokensList
consoleTokens={props.data.allPasteTokenDefault.edges}
defaultTokens={props.data.allPasteTokenDefault.edges}
consoleTokens={props.data.allPasteTokenConsole.edges}
sendgridTokens={props.data.allPasteTokenSendGrid.edges}
/>

@@ -71,5 +72,23 @@ export const pageQuery = graphql`
}
}
}
allPasteTokenConsole {
edges {
node {
id
tokens {
categoryName
tokens {
category
comment
name
originalValue
type
value
}
}
}
}
}
}
`;
@@ -70,7 +70,7 @@ You should place the `Theme.Provider` around the root of your React application.
```js
import {Theme} from '@twilio-paste/theme';
<Theme.Provider>
<Theme.Provider theme="console">
...
</Theme.Provider>
```

1 comment on commit 4d4919f

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.