refactor(www): Inherit guidelines layout from base layout (#21350)

* Inherit guidelines layout from base layout * fix titles * Update www/src/components/guidelines/nav-item.js Co-Authored-By: Florian Kissling <21834+fk@users.noreply.github.com> Co-authored-by: Florian Kissling <21834+fk@users.noreply.github.com>
gatsbyjs · Feb 12, 2020 · f4caca1 · f4caca1
1 parent 1e2813c
commit f4caca1
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 42 deletions.
diff --git a/www/src/components/guidelines/layout.js b/www/src/components/guidelines/layout.js
@@ -5,18 +5,14 @@ import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 import { Global } from "@emotion/core"
 
+import BaseLayout from "../layout"
 import { globalStyles } from "../../utils/styles/global"
 import { Box } from "./system"
 import Header from "./header"
-import AnotherHeader from "../navigation"
-import Banner from "../banner"
 import Footer from "../shared/footer-links"
 
-// Import Futura PT typeface
-import "../../assets/fonts/futura"
-
-const Layout = ({ children, background, pathname, pageTitle }) => (
-  <React.Fragment>
+const Layout = ({ children, background, location, pageTitle }) => (
+  <BaseLayout location={location}>
     <Global
       styles={{
         ".ReactModal__Overlay": {
@@ -36,35 +32,17 @@ const Layout = ({ children, background, pathname, pageTitle }) => (
     />
     <Global styles={globalStyles} />
     <Helmet>
-      <title>
-        {pageTitle ? `${pageTitle} | Guidelines | GatsbyJS` : `GatsbyJS`}
-      </title>
-      <meta name="twitter:site" content="@gatsbyjs" />
-      <meta name="og:type" content="website" />
-      <meta name="og:site_name" content="GatsbyJS" />
-      <link rel="canonical" href={`https://gatsbyjs.org${pathname}`} />
-      <html lang="en" />
+      <title>{pageTitle ? `${pageTitle} | Guidelines` : `Guidelines`}</title>
     </Helmet>
-    <Banner />
-    <AnotherHeader pathname={pathname} />
-    <Box
-      bg="background"
-      position="relative"
-      sx={{
-        pt: [
-          t => t.sizes.bannerHeight,
-          t => `calc(${t.sizes.headerHeight} + ${t.sizes.bannerHeight})`,
-        ],
-      }}
-    >
+    <Box bg="background" position="relative">
       {background && background}
       <Header />
       <Box as="main" className="main-body">
         {children}
         <Footer />
       </Box>
     </Box>
-  </React.Fragment>
+  </BaseLayout>
 )
 
 Layout.propTypes = {

diff --git a/www/src/components/guidelines/nav-item.js b/www/src/components/guidelines/nav-item.js
@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from "theme-ui"
 import React from "react"
 import { Link } from "gatsby"
 import styled from "@emotion/styled"
@@ -11,7 +13,7 @@ const ActiveLink = props => <Link {...props} activeClassName="active" />
 const NavLink = styled(ActiveLink, { shouldForwardProp })(
   props => {
     return {
-      "&.active": {
+      "&&.active": {
         color: themeGet(`colors.lilac`)(props),
       },
     }
@@ -21,20 +23,27 @@ const NavLink = styled(ActiveLink, { shouldForwardProp })(
   space
 )
 
-NavLink.defaultProps = {
-  color: `navigation.linkDefault`,
-  fontFamily: `heading`,
-  fontSize: 3,
-  fontWeight: `body`,
-  mr: 4,
-}
-
 NavLink.propTypes = {
   ...propTypes.color,
   ...propTypes.space,
   ...propTypes.typography,
 }
 
-const NavItem = props => <NavLink {...props} />
+const NavItem = props => (
+  <NavLink
+    sx={{
+      // override the default link styling
+      "&&": {
+        border: 0,
+        color: `navigation.linkDefault`,
+        fontFamily: `heading`,
+        fontSize: 3,
+        fontWeight: `body`,
+        mr: 4,
+      },
+    }}
+    {...props}
+  />
+)
 
 export default NavItem
diff --git a/www/src/pages/guidelines/color.js b/www/src/pages/guidelines/color.js
@@ -59,7 +59,7 @@ class Color extends React.Component {
 
   render() {
     return (
-      <Layout pathname={this.props.location.pathname} pageTitle="Color">
+      <Layout location={this.props.location} pageTitle="Color">
         <Container>
           <PageHeading>Color</PageHeading>
           <Intro>

diff --git a/www/src/pages/guidelines/design-tokens.js b/www/src/pages/guidelines/design-tokens.js
@@ -69,7 +69,7 @@ const ColorExample = ({ hex, token }) => (
 )
 
 const DesignTokens = ({ location }) => (
-  <Layout pathname={location.pathname} pageTitle="Design Tokens">
+  <Layout location={location} pageTitle="Design Tokens">
     <Container>
       <div css={{ position: `relative`, zIndex: 1 }}>
         <PageHeading>Design Tokens</PageHeading>

diff --git a/www/src/pages/guidelines/logo.js b/www/src/pages/guidelines/logo.js
@@ -168,7 +168,7 @@ const Logo = ({ data, location }) => {
   const isDark = colorMode === `dark`
 
   return (
-    <Layout pathname={location.pathname} pageTitle="Logo">
+    <Layout location={location} pageTitle="Logo">
       <Container>
         <PageHeading>Logo</PageHeading>
         <Intro>

diff --git a/www/src/pages/guidelines/typography.js b/www/src/pages/guidelines/typography.js
@@ -86,7 +86,7 @@ const Weight = ({ children, fontFamily, fontWeight }) => (
 )
 
 const Typography = ({ location }) => (
-  <Layout pathname={location.pathname} pageTitle="Typography">
+  <Layout location={location} pageTitle="Typography">
     <Container>
       <div css={{ position: `relative`, zIndex: 1 }}>
         <PageHeading>Typography</PageHeading>