feat(website): site header (#33)

* feat: site header * fix: interim theme switcher * fix: support IE 11 * fix: eslint errors * fix: remove icon svg fill color * fix: merge conflicts from master * fix: type error on icon * fix: pr feedback
twilio-labs · Aug 16, 2019 · cb044c4 · cb044c4
1 parent 706643b
commit cb044c4
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 30 deletions.
diff --git a/packages/paste-core/utilities/absolute/src/index.tsx b/packages/paste-core/utilities/absolute/src/index.tsx
@@ -1,18 +1,7 @@
 import styled from '@emotion/styled';
-import {
-  top,
-  right,
-  bottom,
-  left,
-  zIndex,
-  TopProps,
-  BottomProps,
-  LeftProps,
-  RightProps,
-  ZIndexProps,
-  styleFn,
-} from 'styled-system';
+import {top, right, bottom, left, zIndex, TopProps, BottomProps, LeftProps, RightProps, styleFn} from 'styled-system';
 import {Box, BoxProps} from '@twilio-paste/box';
+import {ThemeShape} from '@twilio-paste/theme-tokens';
 
 const LEFT_OPTIONS = [
   'fill',
@@ -78,6 +67,10 @@ export type Presets =
   | 'right_bottom'
   | 'right_fill';
 
+export interface ZIndexProps {
+  zIndex?: keyof ThemeShape['zIndices'];
+}
+
 export interface AbsoluteProps extends TopProps, BottomProps, LeftProps, RightProps, ZIndexProps, BoxProps {
   preset?: Presets;
 }

diff --git a/packages/paste-website/src/components/SiteStickyHeader.tsx b/packages/paste-website/src/components/SiteStickyHeader.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {Box} from '@twilio-paste/box';
+import {Anchor} from '@twilio-paste/anchor';
+import {useTheme} from '@twilio-paste/theme';
+import {ThemeSwitcher} from './ThemeSwitcher';
+import GithubIcon from './icons/GithubIcon';
+
+interface StyledFlexProps {
+  justifyContent?: string;
+  alignItems?: string;
+}
+export const StyledFlex = styled.div<StyledFlexProps>(({justifyContent, alignItems = 'center'}) => ({
+  display: 'flex',
+  justifyContent,
+  alignItems,
+}));
+
+export const SiteStickyHeader: React.FC<{}> = () => {
+  const theme = useTheme();
+  return (
+    <Box
+      as="aside"
+      backgroundColor="colorBackgroundBody"
+      borderColor="colorBorderLight"
+      borderStyle="none none solid none"
+      borderBottomWidth="borderWidth10"
+      px="space80"
+      py="space60"
+      mb="space140"
+      css={{
+        '@supports (position: sticky)': {
+          marginLeft: `-${theme.space.space200}`,
+          marginRight: `-${theme.space.space200}`,
+          paddingLeft: `${theme.space.space200}`,
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+        },
+      }}
+    >
+      <StyledFlex justifyContent="space-between">
+        <ThemeSwitcher />
+        <StyledFlex>
+          <Box mr="space60">
+            <Anchor href="http://www.github.com/twilio-labs/paste/issues">Ask a question</Anchor>
+          </Box>
+          <Box mr="space60">
+            <Anchor href="http://www.github.com/twilio-labs/paste/issues">Report a bug</Anchor>
+          </Box>
+          <StyledFlex>
+            v0.1
+            <Box ml="space30">
+              <Anchor href="http://www.github.com/twilio-labs/paste">
+                <GithubIcon
+                  css={{height: theme.heights.sizeIcon30, width: theme.heights.sizeIcon30}}
+                  title="View this project on github"
+                  color={theme.textColors.colorTextWeak}
+                />
+              </Anchor>
+            </Box>
+          </StyledFlex>
+        </StyledFlex>
+      </StyledFlex>
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/components/ThemeSwitcher.tsx b/packages/paste-website/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
+
+interface ThemeSwitcherProps {
+  children?: React.ReactElement;
+}
+export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = () => {
+  return (
+    <div>
+      <ScreenReaderOnly>Theme Switcher Placeholder</ScreenReaderOnly>
+    </div>
+  );
+};
diff --git a/packages/paste-website/src/components/icons/GithubIcon.tsx b/packages/paste-website/src/components/icons/GithubIcon.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {useUID} from 'react-uid';
+
+export interface GithubIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  title?: string;
+  decorative?: boolean;
+}
+
+const GithubIcon = React.memo(({title = 'Github Icon', decorative = true, className, color, size}: GithubIconProps) => {
+  const uid = useUID();
+  return (
+    <div style={{color, width: size, height: size}} className={className}>
+      <svg role="img" aria-hidden={decorative} aria-labelledby={uid} viewBox="0 0 24 24" width="100%" height="100%">
+        <title id={uid}>{title}</title>
+        <path
+          fill="currentColor"
+          d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+        />
+      </svg>
+    </div>
+  );
+});
+
+export default GithubIcon;
diff --git a/packages/paste-website/src/components/icons/TwilioIcon.tsx b/packages/paste-website/src/components/icons/TwilioIcon.tsx
@@ -13,16 +13,7 @@ const TwilioIcon = React.memo(({title = 'Twilio Icon', decorative = true, classN
   const uid = useUID();
   return (
     <div style={{color, width: size, height: size}} className={className}>
-      <svg
-        role="img"
-        aria-hidden={decorative}
-        aria-labelledby={uid}
-        className="prefix__twilio-mark"
-        fill="#F22F46"
-        viewBox="0 0 30 30"
-        width="100%"
-        height="100%"
-      >
+      <svg role="img" aria-hidden={decorative} aria-labelledby={uid} viewBox="0 0 30 30" width="100%" height="100%">
         <title id={uid}>{title}</title>
         <path
           fill="currentColor"

diff --git a/packages/paste-website/src/components/sidebar/Header.tsx b/packages/paste-website/src/components/sidebar/Header.tsx
@@ -38,7 +38,6 @@ const StyledSpan = styled.span`
 interface HeaderProps {
   siteTitle?: string;
   siteSubTitle?: string;
-  siteVersion?: string;
 }
 
 const Header: React.FC<HeaderProps> = props => {
@@ -50,7 +49,6 @@ const Header: React.FC<HeaderProps> = props => {
       </Text>
       <StyledH3 as="h3" fontSize="fontSize10" textColor="colorTextPlaceholder">
         <StyledSpan>{props.siteSubTitle}</StyledSpan>
-        <StyledSpan>{props.siteVersion}</StyledSpan>
       </StyledH3>
     </StyledHeader>
   );

diff --git a/packages/paste-website/src/components/sidebar/index.tsx b/packages/paste-website/src/components/sidebar/index.tsx
@@ -19,7 +19,7 @@ const Sidebar: React.FC<{}> = () => {
       paddingBottom="space70"
       paddingLeft="space40"
     >
-      <Header siteTitle="Paste" siteSubTitle="Design System" siteVersion="v0.1" />
+      <Header siteTitle="Paste" siteSubTitle="Design System" />
       <Navigation />
     </StyledSidebar>
   );

diff --git a/packages/paste-website/src/components/site-wrapper/index.tsx b/packages/paste-website/src/components/site-wrapper/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {Global} from '@emotion/core';
 import {Theme} from '@twilio-paste/theme';
 import {Sidebar} from '../sidebar';
+import {SiteStickyHeader} from '../SiteStickyHeader';
 import {globalStyles, SiteBody, SiteMain, SiteMainInner} from './styles';
 
 interface SiteWrapperProps {
@@ -15,6 +16,7 @@ const SiteWrapper: React.FC<SiteWrapperProps> = props => {
       <SiteBody>
         <Sidebar />
         <SiteMain>
+          <SiteStickyHeader />
           <SiteMainInner>{props.children}</SiteMainInner>
         </SiteMain>
       </SiteBody>

diff --git a/packages/paste-website/src/components/site-wrapper/styles.ts b/packages/paste-website/src/components/site-wrapper/styles.ts
@@ -32,7 +32,8 @@ export const SiteBody = styled.div`
 `;
 
 export const SiteMain = styled.main`
-  padding: ${themeGet('space.space110')} ${themeGet('space.space200')};
+  padding: 0 ${themeGet('space.space200')};
+  position: relative;
   overflow: auto;
 
   @supports not (display: grid) {

diff --git a/yarn.lock b/yarn.lock
@@ -7712,9 +7712,9 @@ ejs@^2.6.1:
   integrity sha512-PcW2a0tyTuPHz3tWyYqtK6r1fZ3gp+3Sop8Ph+ZYN81Ob5rwmbHEzaqs10N3BEsaGTkh/ooniXK+WwszGlc2+Q==
 
 electron-to-chromium@^1.3.191, electron-to-chromium@^1.3.47:
-  version "1.3.229"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.229.tgz#accc9a08dd07d0a4d6c76937821bc94eb2e49eae"
-  integrity sha512-N6pUbSuKFBeUifxBZp9hODS1N9jFobJYW47QT2VvZIr+G5AWnHK/iG3ON9RPRGH7lHDQ6KUDVhzpNkj4ZiznoA==
+  version "1.3.225"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.225.tgz#c6786475b5eb5f491ade01a78b82ba2c5bfdf72b"
+  integrity sha512-7W/L3jw7HYE+tUPbcVOGBmnSrlUmyZ/Uyg24QS7Vx0a9KodtNrN0r0Q/LyGHrcYMtw2rv7E49F/vTXwlV/fuaA==
 
 elliptic@^6.0.0:
   version "6.5.0"