@t2ca/gatsby-theme-showcase 1.0.0 → 1.0.2

package/src/components/layout.js

@@ -7,6 +7,7 @@ import {
   Main,
   Container,
   Styled,
+  useColorMode,
 } from "theme-ui"
 import { Global } from "@emotion/core"
 import Headroom from "react-headroom"
@@ -16,17 +17,27 @@ import {
   GoogleMap,
   Marker,
 } from "react-google-maps"
+
 import jsonMapStyles from "./map-styles"
+import jsonMapStylesDark from "./map-styles-dark"
 
+import MobileNavigation from "./navigation-mobile"
 import Header from "./header"
 import Footer from "./footer"
 // import MenuButton from "./menu-button"
 // import Button from "./button"
-// import Sidebar from "./sidebar"
+import Sidebar from "./sidebar"
+import Hero from "./hero"
 
 const Layout = props => {
-  // const [menuOpen, setMenuOpen] = useState(false)
-  // const nav = useRef(null)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const nav = useRef(null)
+
+  const [colorMode, setColorMode] = useColorMode()
+  const isDark = colorMode === `dark`
+  // const toggleColorMode = e => {
+  //   setColorMode(isDark ? `light` : `dark`)
+  // }
 
   const Map = () => {
     return (
@@ -34,7 +45,7 @@ const Layout = props => {
         defaultZoom={10}
         defaultCenter={{ lat: 51.0486, lng: -114.0708 }}
         defaultOptions={{
-          styles: jsonMapStyles,
+          styles: isDark ? jsonMapStylesDark : jsonMapStyles,
           disableDefaultUI: true,
           zoomControl: false,
           scaleControl: false,
@@ -55,75 +66,105 @@ const Layout = props => {
         <Global
           styles={{
             "*": {
-              boxSizing: "border-box",
-            },
-            body: {
-              margin: 0,
+              boxSizing: `inherit`,
+              "&:before": {
+                boxSizing: `inherit`,
+              },
+              "&:after": {
+                boxSizing: `inherit`,
+              },
             },
+            body: { margin: 0 },
             html: {
+              fontSize: `16px`,
+              boxSizing: `border-box`,
               WebkitFontSmoothing: `antialiased`,
               MozOsxFontSmoothing: `grayscale`,
             },
             ".mapElement > div": {
               backgroundColor: "transparent !important",
             },
-            ".headroom": {
-              top: 0,
-              left: 0,
-              right: 0,
-              zIndex: 1,
-            },
-            ".headroom--unfixed": {
-              position: `relative`,
-              transform: `translateY(0)`,
-            },
-            ".headroom--scrolled": {
-              transition: `transform 200ms ease-in-out`,
-            },
-            ".headroom--unpinned": {
-              position: `fixed`,
-              transform: `translateY(-100%)`,
-            },
-            ".headroom--pinned": {
-              position: `fixed`,
-              transform: `translateY(0%)`,
-              borderBottom: `1px solid transparent`,
-              ...props.headRoomStyles,
-            },
           }}
         />
 
-        <Headroom disableInlineStyles={true}>
-          <Header styles={props.headerStyles} />
-        </Headroom>
+        <Header
+          styles={props.header}
+          setColorMode={setColorMode}
+          isDark={isDark}
+          menuOpen={menuOpen}
+          setMenuOpen={setMenuOpen}
+          nav={nav}
+        />
 
         <Main>
+          <div
+            ref={nav}
+            onFocus={e => {
+              setMenuOpen(true)
+            }}
+            onBlur={e => {
+              setMenuOpen(false)
+            }}
+            onClick={e => {
+              setMenuOpen(false)
+            }}
+          >
+            <Sidebar
+              open={menuOpen}
+              sx={{
+                display: [null, "none"],
+              }}
+            />
+          </div>
+          {/*          <div
+            id="content"
+            sx={{
+              width: "100%",
+              minWidth: 0,
+            }}
+          >
+            {props.children}
+
+
+
+          </div>*/}
+
+          {props.location.pathname === "/" ? <Hero isDark={isDark} /> : null}
+
           <div
             sx={{
-              ...props.mainStyles,
+              ...props.main,
             }}
           >
-            <Container>{props.children}</Container>
+            {props.children}
           </div>
         </Main>
 
-        <WrapperMap
-          googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyBOY0sT1quks122bprrLM_0wrWLDWyVnMQ`}
-          loadingElement={<div sx={{ height: `350px` }} />}
-          containerElement={
-            <div sx={{ height: `350px`, backgroundColor: "#f8f9fa" }} />
-          }
-          mapElement={
-            <div
-              sx={{
-                height: `100%`,
-              }}
-              className="mapElement"
-            />
-          }
-        />
+        {/*        <div sx={{ display: ["none", "initial"] }}>
+          <WrapperMap
+            googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyBOY0sT1quks122bprrLM_0wrWLDWyVnMQ`}
+            loadingElement={<div sx={{ height: `350px` }} />}
+            containerElement={
+              <div
+                sx={{
+                  height: `350px`,
+                  backgroundColor: isDark ? "#333" : "#f8f9fa",
+                }}
+              />
+            }
+            mapElement={
+              <div
+                sx={{
+                  height: `100%`,
+                }}
+                className="mapElement"
+              />
+            }
+          />
+        </div>*/}
 
         <Footer />
+        <MobileNavigation isDark={isDark} />
       </DefaultLayout>
     </Styled.root>
   )

package/src/components/map-styles-dark.js

@@ -0,0 +1,32 @@
+const jsonMapStylesDark = [
+  {
+    stylers: [
+      {
+        hue: "#ff1a00",
+      },
+      {
+        invert_lightness: true,
+      },
+      {
+        saturation: -100,
+      },
+      {
+        lightness: 33,
+      },
+      {
+        gamma: 0.5,
+      },
+    ],
+  },
+  {
+    featureType: "water",
+    elementType: "geometry",
+    stylers: [
+      {
+        color: "#2D333C",
+      },
+    ],
+  },
+]
+
+export default jsonMapStylesDark

package/src/components/menu-button.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import React from 'react';
-import { jsx } from 'theme-ui';
+import React from "react"
+import { jsx } from "theme-ui"
 
-const Burger = ({ size = '1.5rem' }) => (
+const Burger = ({ size = "1.5rem" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -10,35 +10,37 @@ const Burger = ({ size = '1.5rem' }) => (
     fill="currentcolor"
     viewBox="0 0 24 24"
     sx={{
-      display: 'block',
-      margin: 0
+      display: "block",
+      margin: 0,
     }}
   >
     <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
   </svg>
-);
+)
 
-export default props => (
-  <button
-    title="Toggle Menu"
-    {...props}
-    sx={{
-      fontFamily: 'inherit',
-      fontSize: 24,
-      color: '#333',
-      bg: 'transparent',
-      p: 0,
-      m: 0,
-      border: 0,
-      appearance: 'none',
-      ':focus': {
-        outline: '0'
-      },
-      '@media screen and (min-width: 40em)': {
-        display: 'none'
-      }
-    }}
-  >
-    <Burger />
-  </button>
-);
+export default props => {
+  return (
+    <button
+      title="Toggle Menu"
+      {...props}
+      sx={{
+        fontFamily: "inherit",
+        fontSize: 24,
+        color: "text",
+        bg: "transparent",
+        p: 0,
+        m: 0,
+        border: 0,
+        appearance: "none",
+        ":focus": {
+          outline: "0",
+        },
+        "@media screen and (min-width: 768px)": {
+          display: "none",
+        },
+      }}
+    >
+      <Burger />
+    </button>
+  )
+}

package/src/components/nav-link.js

@@ -15,6 +15,8 @@ const styles = {
   lineHeight: "2rem",
   transition: `all .5s ease-in;`,
   "&.active": {
+    borderBottom: `1px solid transparent`,
+    borderColor: "secondary",
     color: "secondary",
     cursor: "default",
   },

package/src/components/navigation-mobile.js

@@ -0,0 +1,74 @@
+import React from "react"
+import { Link } from "gatsby"
+import { css } from "@emotion/core"
+
+import Icon from "./icon"
+
+const MobileNavItem = ({ linkTo, label, icon, isDark }) => {
+  const linkStyles = css`
+    borderradius: 2;
+    color: ${isDark ? "white" : "#333"};
+    font-size: 0.75rem;
+    flex-shrink: 0;
+    line-height: 1;
+    width: 64;
+    text-decoration: none;
+    text-align: center;
+    padding: 0.75rem;
+    &:hover {
+      text-decoration: none;
+    }
+  `
+
+  return (
+    <Link
+      to={linkTo}
+      css={linkStyles}
+      partiallyActive={linkTo === "/" ? false : true}
+      activeStyle={{ color: isDark ? "pink" : `#2b6cb0` }}
+    >
+      <span>{icon}</span>
+      <div>{label}</div>
+    </Link>
+  )
+}
+
+const MobileNavigation = ({ isDark, menuList }) => (
+  <React.Fragment>
+    <div
+      css={css`
+        position: fixed;
+        display: flex;
+        justify-content: space-around;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 50;
+        border-top: 1px solid ${isDark ? "#333" : "#d4d4d5"};
+        background: ${isDark ? "#1b1c1d" : "white"};
+        height: 3.75rem;
+        padding-bottom: env(safe-area-inset-bottom);
+        @media (min-width: 640px) {
+          display: none;
+        }
+      `}
+    >
+      {menuList &&
+        menuList
+          .filter(({ node }) => node.mobile === true)
+          .map(({ node: { label, link, id } }) => {
+            return (
+              <MobileNavItem
+                key={id}
+                isDark={isDark}
+                linkTo={link}
+                label={label}
+                icon={<Icon label={label} />}
+              />
+            )
+          })}
+    </div>
+  </React.Fragment>
+)
+
+export default MobileNavigation

package/src/components/project-list.js

@@ -1,21 +1,20 @@
 import React from "react"
 import { Link } from "gatsby"
-import { Styled } from "theme-ui"
+import { Styled, Container } from "theme-ui"
 
 const ProjectList = ({ projects }) => (
-  <React.Fragment>
-    <Styled.h1>City of Calgary Events</Styled.h1>
+  <Container>
+    <Styled.h1>Projects</Styled.h1>
     <Styled.ul>
       {projects.map(project => (
         <Styled.li key={project.id}>
           <Styled.a as={Link} to={project.slug}>
             {project.title}
           </Styled.a>
-          <p>{project.dateTime}</p>
         </Styled.li>
       ))}
     </Styled.ul>
-  </React.Fragment>
+  </Container>
 )
 
 export default ProjectList

package/src/components/project.js

@@ -1,25 +1,59 @@
 /** @jsx jsx */
 import React from "react"
-import { Styled, jsx } from "theme-ui"
+import { Styled, jsx, Container } from "theme-ui"
 import { Link } from "gatsby"
+import Img from "gatsby-image"
+import { useSpring, animated } from "react-spring"
 import { FaArrowLeft } from "react-icons/fa"
 
-const Project = ({ title, address, notes }) => (
-  <div>
-    <div
-      sx={{ py: "9rem", px: "3rem", marginTop: "12rem", marginBottom: "3rem" }}
-    >
-      <Styled.a as={Link} to="/projects/">
-        <FaArrowLeft size={12} sx={{ marginRight: ".25rem" }} />
-        Back to showcase
-      </Styled.a>
+const Project = data => {
+  const Image = animated(Img)
+  const titleProps = useSpring({
+    from: { opacity: 0, transform: "translate3d(0, -150px, 0)" },
+    to: { opacity: 1, transform: "translate3d(0, 0, 0)" },
+  })
 
-      <Styled.h1>
-        {title} - {address}
-      </Styled.h1>
-      <Styled.h6>{notes}</Styled.h6>
+  const imgProps = useSpring({
+    delay: 600,
+    from: { opacity: 0, transform: "translate3d(0, 0, 0)" },
+    to: { opacity: 1, transform: "translate3d(0, 0, 0)" },
+  })
+
+  return (
+    <div>
+      <Container sx={{ px: [0, 4], py: 0 }}>
+        <div
+          sx={{
+            py: "15rem",
+            px: ["1.5rem", "3rem"],
+            zIndex: "1",
+            position: "relative",
+          }}
+        >
+          <animated.div style={titleProps}>
+            <Styled.a as={Link} to="/projects/">
+              <FaArrowLeft size={12} sx={{ marginRight: ".25rem" }} />
+              Back to showcase
+            </Styled.a>
+            <Styled.h1>{data.title}</Styled.h1>
+          </animated.div>
+
+          <Image
+            fluid={data.hero.childImageSharp.fluid}
+            style={imgProps}
+            sx={{
+              position: "absolute !important",
+              top: "0",
+              left: "10vw",
+              right: "0",
+              bottom: "0",
+              zIndex: "-1",
+            }}
+          />
+        </div>
+      </Container>
     </div>
-  </div>
-)
+  )
+}
 
 export default Project

package/src/components/sidebar.js

@@ -1,41 +1,32 @@
 /** @jsx jsx */
-import React from 'react';
-import { jsx, Box } from 'theme-ui';
-
-import { MDXProvider } from '@mdx-js/react';
-import NavLink from './nav-link';
+import React from "react"
+import { jsx } from "theme-ui"
+import { AccordionNav } from "@theme-ui/sidenav"
+import NavLink from "./nav-link"
+import MenuList from "../menu.mdx"
 
 const components = {
-  a: NavLink
-};
+  wrapper: AccordionNav,
+  a: NavLink,
+}
 
-export default React.forwardRef(({ fullwidth, ...props }, ref) => (
-  <>
-    {props.open ? (
-      <Box
-        {...props}
-        ref={ref}
-        sx={{
-          display: 'block',
-          position: 'fixed',
-          top: 87,
-          left: 0,
-          bottom: 0,
-          width: 256,
-          px: 2,
-          bg: 'background',
-          transition: 'transform .2s ease-out',
-          transform: props.open ? 'translateX(0)' : 'translateX(-100%)',
+export default props => {
+  const Menu = props.menuList || MenuList
 
-          ul: {
-            listStyle: 'none',
-            m: 0,
-            p: 0
-          }
-        }}
-      >
-        <MDXProvider components={components}>Home</MDXProvider>
-      </Box>
-    ) : null}
-  </>
-));
+  return (
+    <Menu
+      {...props}
+      components={components}
+      sx={{
+        width: 256,
+        flex: "none",
+        px: 3,
+        pt: 3,
+        pb: 4,
+        mt: [60, 0],
+        zIndex: 10,
+        bg: "Menu",
+      }}
+    />
+  )
+}

package/src/gatsby-plugin-theme-ui/colors.js

@@ -0,0 +1,28 @@
+import theme from "@theme-ui/preset-tailwind"
+
+export default {
+  ...theme.colors,
+  // primary: theme.colors.blue[5],
+  // primaryHover: theme.colors.blue[6],
+  mBg: `#f8f9fa`,
+  cBg: `#ffffff`,
+  sBg: `#e2e8f0`,
+  Menu: `#ffffff`,
+  MenuBorder: `rgb(212, 212, 213)`,
+  MainHero: `white`,
+  toggleIcon: `#777777`,
+  modes: {
+    dark: {
+      background: `#333333`,
+      text: `#ffffff`,
+      mBg: `#333333`,
+      cBg: `#333333`,
+      sBg: `#333333`,
+      Menu: `#1b1c1d`,
+      MenuBorder: `#1b1c1d`,
+      primary: theme.colors.pink[3],
+      MainHero: `#1b1c1d`,
+      toggleIcon: theme.colors.white,
+    },
+  },
+}

package/src/gatsby-plugin-theme-ui/index.js

@@ -1,13 +1,15 @@
 import merge from "deepmerge"
-import { bootstrap } from "@theme-ui/presets"
+import tailwind from "@theme-ui/preset-tailwind"
 import styles from "./styles"
+import colors from "./colors"
 
 const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray
 
 export default merge(
-  bootstrap,
+  tailwind,
   {
-    breakpoints: ["768px", "992px", "1200px"],
+    // breakpoints: ["768px", "992px", "1200px"],
+    breakpoints: ["768px", "1024px", "1280px"],
     initialColorMode: `light`,
     useCustomProperties: true,
     textStyles: {
@@ -17,30 +19,56 @@ export default merge(
         lineHeight: "heading",
       },
     },
-    colors: {
-      mBg: `#f8f9fa`,
-      cBg: `#ffffff`,
-      sBg: `#e2e8f0`,
-      modes: {
-        dark: {
-          background: `#333333`,
-          text: `#ffffff`,
-          mBg: `#333333`,
-          cBg: `#333333`,
-          sBg: `#333333`,
-          primary: `pink`,
-        },
+    colors,
+    styles,
+    buttons: {
+      primary: {
+        ...tailwind.buttons.simple,
+        backgroundColor: `brand`,
+        outline: `none`,
+        "&:hover": { backgroundColor: `brandHover` },
+      },
+      secondary: {
+        ...tailwind.buttons.elevated,
+        outline: `none`,
+        color: `gray.8`,
+      },
+      basic: {
+        ...tailwind.buttons.outline,
+        outline: `none`,
+        borderColor: `brand`,
+        color: `brand`,
+        "&:hover": { backgroundColor: `brand`, color: `white` },
       },
     },
-    project: {
+    inputs: {
       primary: {
-        bg: "cBg",
+        ...tailwind.inputs.inline,
+        width: `full`,
+        caretColor: tailwind.colors.pink[6],
       },
       secondary: {
-        bg: "sBg",
+        ...tailwind.inputs.shadow,
+        width: `full`,
+      },
+    },
+    alerts: {
+      error: {
+        borderRadius: `sm`,
+        bg: `red.1`,
+        // border: `1px solid ${tailwind.colors.red[8]}`,
+        boxShadow: `inset 0 0 0 1px ${
+          tailwind.colors.red[8]
+        }, 0 0 0 0 transparent`,
+        opacity: 0.7,
+        color: `red.8`,
+        px: `1rem`,
+        fontWeight: `medium`,
+        display: `flex`,
+        width: `100%`,
+        alignItems: `center`,
       },
     },
-    styles,
   },
   { arrayMerge: overwriteMerge }
 )