@t2ca/gatsby-theme-showcase 1.0.53 → 1.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -25,12 +25,11 @@
   "dependencies": {
     "@emotion/styled": "^10.0.17",
     "@mdx-js/mdx": "^1.4.0",
-    "@theme-ui/components": "^0.3.0",
-    "@theme-ui/preset-bootstrap": "^0.3.0",
-    "@theme-ui/preset-tailwind": "^0.3.0",
-    "@theme-ui/sidenav": "^0.3.0",
-    "@theme-ui/typography": "^0.3.0",
-    "deepmerge": "^4.0.0",
+    "@theme-ui/components": "^0.4.0-rc.1",
+    "@theme-ui/preset-bootstrap": "^0.4.0-rc.1",
+    "@theme-ui/preset-tailwind": "^0.4.0-rc.1",
+    "@theme-ui/sidenav": "^0.4.0-rc.1",
+    "@theme-ui/typography": "^0.4.0-rc.1",
     "framer-motion": "^1.10.3",
     "gatsby": "^2.13.3",
     "gatsby-image": "^2.2.7",
@@ -38,7 +37,7 @@
     "gatsby-plugin-mdx": "^1.0.33",
     "gatsby-plugin-react-helmet": "^3.1.21",
     "gatsby-plugin-sharp": "^2.2.9",
-    "gatsby-plugin-theme-ui": "^0.3.0",
+    "gatsby-plugin-theme-ui": "^0.4.0-rc.1",
     "gatsby-remark-images": "^3.1.7",
     "gatsby-source-filesystem": "^2.1.4",
     "gatsby-transformer-json": "^2.2.2",
@@ -48,8 +47,7 @@
     "react-helmet": "^6.0.0",
     "react-icons": "^3.7.0",
     "remark-slug": "^6.0.0",
-    "theme-ui": "^0.3.0",
-    "typeface-righteous": "^0.0.72",
+    "theme-ui": "^0.4.0-rc.1",
     "yup": "^0.29.0"
   },
   "scripts": {

package/src/components/accordion-nav.js

@@ -0,0 +1,335 @@
+/** @jsx jsx */
+import { jsx, css, ThemeProvider } from "theme-ui"
+import { MDXProvider } from "@mdx-js/react"
+import React, { useState } from "react"
+import { Global } from "@emotion/core"
+import merge from "deepmerge"
+
+const Overlay = ({ onClick }) => (
+  <React.Fragment>
+    <div
+      onClick={onClick}
+      sx={{
+        position: "fixed",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      }}
+    />
+    <Global
+      styles={css({
+        body: {
+          overflow: ["hidden", "auto"],
+        },
+      })}
+    />
+  </React.Fragment>
+)
+
+const createNestedLinks = (children, depth = 0) => {
+  const links = React.Children.toArray(children).reduce((acc, child) => {
+    const type = child.props && child.props.mdxType
+    if (!child.props || !child.props.children) return acc
+    if (type === "a") return [...acc, child]
+    if (depth > 0 && type === "ul") {
+      const last = acc[acc.length - 1]
+      acc[acc.length - 1] = React.cloneElement(last, {
+        links: createNestedLinks(child.props.children),
+      })
+      return acc
+    }
+    return [...acc, ...createNestedLinks(child.props.children, depth + 1)]
+  }, [])
+  return links
+}
+
+const flattenLinks = (children) =>
+  React.Children.toArray(children).reduce((acc, child) => {
+    if (child.props && child.props.mdxType === "a") {
+      return [...acc, child]
+    }
+    if (!child.props || !child.props.children) return acc
+    return React.Children.toArray([
+      ...acc,
+      ...flattenLinks(child.props.children),
+    ])
+  }, [])
+
+export const Sidenav = React.forwardRef(
+  ({ open, styles = {}, components, ...props }, ref) => {
+    return (
+      <ThemeProvider
+        theme={{
+          styles: merge(
+            {
+              ul: {
+                listStyle: "none",
+                p: 0,
+                m: 0,
+                ul: {
+                  a: {
+                    pl: 4,
+                  },
+                },
+              },
+              a: {
+                display: "block",
+                px: 2,
+                py: 2,
+                color: "inherit",
+                textDecoration: "none",
+                fontSize: 1,
+                fontWeight: "bold",
+              },
+            },
+            styles
+          ),
+        }}
+      >
+        {open && <Overlay {...props} />}
+        <MDXProvider components={components}>
+          <div
+            {...props}
+            ref={ref}
+            sx={{
+              position: ["fixed", "sticky"],
+              top: 0,
+              left: 0,
+              bottom: [0, "auto"],
+              zIndex: 1,
+              minWidth: 0,
+              width: 256,
+              maxHeight: ["100vh", "none"],
+              overflowX: "visible",
+              overflowY: "auto",
+              WebkitOverflowScrolling: "touch",
+              transition: "transform .2s ease-out",
+              transform: [open ? "translateX(0)" : "translate(-100%)", "none"],
+              bg: ["background", "transparent"],
+            }}
+          />
+        </MDXProvider>
+      </ThemeProvider>
+    )
+  }
+)
+
+export const AccordionButton = (props) => {
+  const transform = props.open ? "rotate(-180 8 8)" : "rotate(0 8 8)"
+  const disabled = props.pathname && props.pathname.includes(props.href)
+
+  return (
+    <button
+      title="Expand Section"
+      disabled={disabled}
+      {...props}
+      sx={{
+        appearance: "none",
+        display: "flex",
+        alignItems: "center",
+        p: 2,
+        m: 0,
+        border: 0,
+        borderRadius: 0,
+        color: "inherit",
+        bg: "transparent",
+        ":hover,:focus": {
+          color: "primary",
+        },
+        "&:disabled": {
+          opacity: 0.25,
+        },
+      }}
+    >
+      <svg viewBox="0 0 16 16" width="12" height="12">
+        <g
+          sx={{
+            transformOrigin: "8 8",
+            transition: "transform .1s ease-out",
+          }}
+          transform={transform}
+        >
+          <path
+            stroke="currentcolor"
+            strokeWidth="2"
+            fill="none"
+            d="M14 6 L8 12 L2 6"
+          />
+        </g>
+      </svg>
+    </button>
+  )
+}
+
+const NavLinks = ({ open, pathname = "", links, href, Link, ...props }) => {
+  if (!links) return false
+  if (!open && !pathname.includes(href)) return false
+
+  return (
+    <ul
+      sx={{
+        listStyle: "none",
+        m: 0,
+        p: 0,
+      }}
+    >
+      {links.map((link, j) => (
+        <li key={j}>
+          <Link
+            href={link.props.href}
+            children={link.props.children}
+            className={link.props.className}
+            sx={{
+              pl: 4,
+            }}
+          />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export const AccordionNav = React.forwardRef(
+  (
+    { open, children, components = {}, className, pathname = "", ...props },
+    ref
+  ) => {
+    const links = createNestedLinks(children)
+    const [expanded, setExpanded] = useState({})
+    const Link = components.a || "a"
+
+    const toggle = (i) => (e) => {
+      e.stopPropagation()
+      setExpanded({
+        ...expanded,
+        [i]: !expanded[i],
+      })
+    }
+
+    return (
+      <div>
+        {open && <Overlay {...props} />}
+        <div
+          ref={ref}
+          className={className}
+          sx={{
+            position: ["fixed", "sticky"],
+            top: 0,
+            left: 0,
+            bottom: [0, "auto"],
+            zIndex: 1,
+            minWidth: 0,
+            width: 256,
+            maxHeight: ["100vh", "none"],
+            overflowX: "visible",
+            overflowY: "auto",
+            WebkitOverflowScrolling: "touch",
+            transition: "transform .2s ease-out",
+            transform: [open ? "translateX(0)" : "translate(-100%)", "none"],
+            bg: ["background", "transparent"],
+          }}
+        >
+          <ul
+            sx={{
+              listStyle: "none",
+              p: 0,
+              m: 0,
+            }}
+          >
+            {links.map((link, i) => (
+              <li key={i}>
+                <div
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  <Link
+                    href={link.props.href}
+                    children={link.props.children}
+                    className={link.props.className}
+                  />
+                  {link.props.links && (
+                    <AccordionButton
+                      href={link.props.href}
+                      pathname={pathname}
+                      open={expanded[i]}
+                      sx={{
+                        ml: "auto",
+                      }}
+                      onClick={toggle(i)}
+                    />
+                  )}
+                </div>
+                <NavLinks
+                  {...link.props}
+                  open={expanded[i]}
+                  pathname={pathname}
+                  Link={Link}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+)
+
+const removeSlash = (str) => (str.length > 1 ? str.replace(/\/$/, "") : str)
+
+const PaginationLink = ({
+  label,
+  children,
+  mdxType,
+  originalType,
+  parentName,
+  ...props
+}) => (
+  <a
+    {...props}
+    sx={{
+      fontSize: 1,
+      color: "inherit",
+      textDecoration: "none",
+      fontWeight: "bold",
+    }}
+  >
+    <div>{label}</div>
+    <div
+      sx={{
+        fontSize: 3,
+      }}
+    >
+      {children}
+    </div>
+  </a>
+)
+
+export const Pagination = ({ pathname = "", children, ...props }) => {
+  const links = flattenLinks(children)
+  const index = links.findIndex(
+    (link) => link.props.href === removeSlash(pathname)
+  )
+  const hasPagination = index > -1
+  const previous = links[index - 1]
+  const next = links[index + 1]
+
+  return (
+    <div
+      {...props}
+      sx={{
+        display: "flex",
+      }}
+    >
+      {hasPagination && previous && (
+        <PaginationLink {...previous.props} label="Previous:" />
+      )}
+      <div sx={{ mx: "auto" }} />
+      {hasPagination && next && (
+        <PaginationLink {...next.props} label="Next:" />
+      )}
+    </div>
+  )
+}

package/src/components/header.js

@@ -64,7 +64,7 @@ export default ({
                 bg: "transparent",
                 border: 0,
                 color: "text",
-                display: ["initial", "none"],
+                display: ["initial", "initial", "none"],
                 fontFamily: "inherit",
                 fontSize: 24,
                 p: 0,
@@ -80,7 +80,7 @@ export default ({
             <Burger />
           )}
           <Link to="/" sx={{ color: "inherit", textDecoration: "none" }}>
-            <div sx={{ display: ["none", "inherit"], pt: "4px" }}>
+            <div sx={{ display: ["none", "none", "inherit"], pt: "4px" }}>
               <img
                 src={isDark ? desktopLogoWhite : desktopLogo}
                 height={35}
@@ -100,7 +100,7 @@ export default ({
                 loading="eager"
               />*/}
             </div>
-            <div sx={{ display: ["inherit", "none"] }}>
+            <div sx={{ display: ["inherit", "inherit", "none"] }}>
               <img
                 src={mobileLogo}
                 height={35}
@@ -131,7 +131,7 @@ export default ({
               height: 59,
             }}
           >
-            <div sx={{ display: ["none", "inherit"] }}>
+            <div sx={{ display: ["none", "none", "inherit"] }}>
               {menuList &&
                 menuList.map(({ node: { label, link, id } }) => (
                   <NavLink key={id} to={link}>

package/src/components/hero.js

@@ -62,7 +62,7 @@ export default ({
               <Flex
                 sx={{
                   // px: 6,
-                  display: [`none`, `initial`],
+                  display: [`none`, `none`, `initial`],
                   // alignItems: `center`,
                   // justifyContent: `center`,
                   flexDirection: `column`,

package/src/components/layout.js

@@ -48,12 +48,7 @@ const Layout = ({ header, main, children }) => {
           setMenuOpen(false)
         }}
       >
-        <Sidebar
-          open={menuOpen}
-          sx={{
-            display: [null, "none"],
-          }}
-        />
+        <Sidebar open={menuOpen} />
       </div>
 
       <div

package/src/components/sidebar.js

@@ -10,22 +10,24 @@ const components = {
   a: NavLink,
 }
 
-export default props => {
-  const Menu = props.menuList || MenuList
+export default ({ menuList, open }) => {
+  const Menu = menuList || MenuList
 
   return (
     <Menu
-      {...props}
       components={components}
       sx={{
-        width: 256,
-        flex: "none",
         px: 3,
         pt: 3,
         pb: 4,
-        mt: [60, 0],
+        mt: [60, 60, 0],
+        position: ["fixed", "fixed", "sticky"],
+        bottom: [0, 0, "auto"],
+        maxHeight: ["100vh", "100vh", "none"],
+        bg: ["Menu", "Menu", "transparent"],
+        display: [null, null, "none"],
+        transform: [open ? "translateX(0)" : "translate(-100%) !important"],
         zIndex: 10,
-        bg: "Menu",
       }}
     />
   )

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

@@ -1,173 +1,154 @@
-import merge from "deepmerge"
+import { merge } from "theme-ui"
 import tailwind from "@theme-ui/preset-tailwind"
 import styles from "./styles"
 import colors from "./colors"
 
-import "typeface-righteous/index.css"
-
-const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray
-
-export default merge(
-  tailwind,
-  {
-    // breakpoints: ["768px", "992px", "1200px"],
-    breakpoints: ["768px", "1024px", "1280px"],
-    // initialColorMode: `light`,
-    // useCustomProperties: true,
-    textStyles: {
-      heading: {
-        fontFamily: "heading",
-        fontWeight: "heading",
-        lineHeight: "heading",
-      },
+export default merge(tailwind, {
+  colors,
+  styles,
+  buttons: {
+    primary: {
+      ...tailwind.buttons.simple,
+      backgroundColor: `brand`,
+      outline: `none`,
+      "&:hover": { backgroundColor: `brandHover` },
     },
-    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` },
-      },
+    secondary: {
+      ...tailwind.buttons.elevated,
+      outline: `none`,
+      color: `gray.8`,
+    },
+    basic: {
+      ...tailwind.buttons.outline,
+      outline: `none`,
+      borderColor: `brand`,
+      color: `brand`,
+      "&:hover": { backgroundColor: `brand`, color: `white` },
+    },
+  },
+  inputs: {
+    primary: {
+      ...tailwind.inputs.inline,
+      width: `full`,
+      caretColor: tailwind.colors.pink[6],
     },
-    inputs: {
-      primary: {
-        ...tailwind.inputs.inline,
-        width: `full`,
-        caretColor: tailwind.colors.pink[6],
+    secondary: {
+      ...tailwind.inputs.shadow,
+      width: `full`,
+    },
+  },
+  links: {
+    primary: {
+      display: "inline-block",
+      px: 0,
+      py: 0,
+      color: "primary",
+      margin: 3,
+      textDecoration: "none",
+      lineHeight: 1.75,
+      position: `relative`,
+      "&.active": {
+        borderBottom: `1px solid transparent`,
+        borderColor: "secondary",
+        color: "secondary",
+        cursor: "default",
       },
-      secondary: {
-        ...tailwind.inputs.shadow,
-        width: `full`,
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        height: "1px",
+        width: 0,
+        bottom: 0,
+        left: 0,
+        bg: "primary",
+        transition: `all .25s ease-in-out 0s`,
+      },
+      "&:hover:not(.active)::after": {
+        width: `100%`,
       },
     },
-    links: {
-      primary: {
-        display: "inline-block",
-        px: 0,
-        py: 0,
-        color: "primary",
-        margin: 3,
-        textDecoration: "none",
-        lineHeight: 1.75,
-        position: `relative`,
-        "&.active": {
-          borderBottom: `1px solid transparent`,
-          borderColor: "secondary",
-          color: "secondary",
-          cursor: "default",
-        },
-        "&::after": {
-          content: '""',
-          position: "absolute",
-          height: "1px",
-          width: 0,
-          bottom: 0,
-          left: 0,
-          bg: "primary",
-          transition: `all .25s ease-in-out 0s`,
-        },
-        "&:hover:not(.active)::after": {
-          width: `100%`,
-        },
+    secondary: {
+      display: "inline-block",
+      px: 0,
+      py: 0,
+      color: "primary",
+      margin: 3,
+      textDecoration: "none",
+      lineHeight: 1.75,
+      position: `relative`,
+      "&.active": {
+        borderBottom: `1px solid transparent`,
+        borderColor: "secondary",
+        color: "secondary",
+        cursor: "default",
       },
-      secondary: {
-        display: "inline-block",
-        px: 0,
-        py: 0,
-        color: "primary",
-        margin: 3,
-        textDecoration: "none",
-        lineHeight: 1.75,
-        position: `relative`,
-        "&.active": {
-          borderBottom: `1px solid transparent`,
-          borderColor: "secondary",
-          color: "secondary",
-          cursor: "default",
-        },
-        "&::after": {
-          content: '""',
-          position: "absolute",
-          width: "100%",
-          height: "1px",
-          bottom: "0",
-          left: "0",
-          visibility: "hidden",
-          transform: "scaleX(0)",
-          transition: "all 0.25s ease-in-out 0s",
-          bg: "primary",
-        },
-        "&:hover:not(.active)::after": {
-          visibility: "visible",
-          transform: "scaleX(1)",
-        },
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "1px",
+        bottom: "0",
+        left: "0",
+        visibility: "hidden",
+        transform: "scaleX(0)",
+        transition: "all 0.25s ease-in-out 0s",
+        bg: "primary",
       },
-      basic: {
-        display: "inline-block",
-        px: 0,
-        py: 0,
-        color: "primary",
-        margin: 3,
-        textDecoration: "none",
-        borderBottom: `2px solid transparent`,
-        lineHeight: 2,
-        transition: `all .5s ease-in;`,
-        "&.active": {
-          borderBottom: `1px solid transparent`,
-          borderColor: "secondary",
-          color: "secondary",
-          cursor: "default",
-        },
-        "&:hover:not(.active)": {
-          borderColor: "primary",
-        },
+      "&:hover:not(.active)::after": {
+        visibility: "visible",
+        transform: "scaleX(1)",
       },
     },
-    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`,
-        p: 3,
-        my: 3,
-        fontWeight: `medium`,
-        display: `flex`,
-        width: `100%`,
-        alignItems: `center`,
+    basic: {
+      display: "inline-block",
+      px: 0,
+      py: 0,
+      color: "primary",
+      margin: 3,
+      textDecoration: "none",
+      borderBottom: `2px solid transparent`,
+      lineHeight: 2,
+      transition: `all .5s ease-in;`,
+      "&.active": {
+        borderBottom: `1px solid transparent`,
+        borderColor: "secondary",
+        color: "secondary",
+        cursor: "default",
       },
-      success: {
-        borderRadius: `sm`,
-        bg: `green.1`,
-        // border: `1px solid ${tailwind.colors.green[8]}`,
-        boxShadow: (t) =>
-          `inset 0 0 0 1px ${t.colors.green[8]}, 0 0 0 0 transparent`,
-        opacity: 0.7,
-        color: `green.8`,
-        p: 3,
-        my: 3,
-        fontWeight: `medium`,
-        display: `flex`,
-        width: `100%`,
-        alignItems: `center`,
+      "&:hover:not(.active)": {
+        borderColor: "primary",
       },
     },
   },
-  { arrayMerge: overwriteMerge }
-)
+  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`,
+      p: 3,
+      my: 3,
+      fontWeight: `medium`,
+      display: `flex`,
+      width: `100%`,
+      alignItems: `center`,
+    },
+    success: {
+      borderRadius: `sm`,
+      bg: `green.1`,
+      // border: `1px solid ${tailwind.colors.green[8]}`,
+      boxShadow: (t) =>
+        `inset 0 0 0 1px ${t.colors.green[8]}, 0 0 0 0 transparent`,
+      opacity: 0.7,
+      color: `green.8`,
+      p: 3,
+      my: 3,
+      fontWeight: `medium`,
+      display: `flex`,
+      width: `100%`,
+      alignItems: `center`,
+    },
+  },
+})