@primer/gatsby-theme-doctocat 4.1.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.2.1
+
+### Patch Changes
+
+- [`6c4da9e`](https://github.com/primer/doctocat/commit/6c4da9e5787862460972b2af75a27e5909093a05) [#498](https://github.com/primer/doctocat/pull/498) Thanks [@colebemis](https://github.com/colebemis)! - Fix live examples disappearing on hard reload
+
+## 4.2.0
+
+### Minor Changes
+
+- [`2aed832`](https://github.com/primer/doctocat/commit/2aed832beb012ec20767a9226c03aa1bcb12af5d) [#481](https://github.com/primer/doctocat/pull/481) Thanks [@josepmartins](https://github.com/josepmartins)! - - Add accessibility reviewed Label in the Layout
+  - Add Rails + React links to cover design guidelines needs
+
+### Patch Changes
+
+- [`9b62706`](https://github.com/primer/doctocat/commit/9b62706dddf3fea68a44f29d3763198ba3d57dd6) [#485](https://github.com/primer/doctocat/pull/485) Thanks [@josepmartins](https://github.com/josepmartins)! - - Ad superscript component
+  - Basic style for footnotes section
+  - Table styles
+  - Add sizes prop to StatusLabel component
+
+* [`61c5587`](https://github.com/primer/doctocat/commit/61c55874443fdb02873d6c47b1c931b4d3362231) [#460](https://github.com/primer/doctocat/pull/460) Thanks [@josepmartins](https://github.com/josepmartins)! - Adjust Sidebar to use fixed `width`
+
+- [`9d39774`](https://github.com/primer/doctocat/commit/9d397746fdeb3a6d3131304183400e1e1f4139c5) [#468](https://github.com/primer/doctocat/pull/468) Thanks [@josepmartins](https://github.com/josepmartins)! - - Add a11yReviewed frontmatter data to onPostBuild static files
+
 ## 4.1.0
 
 ### Minor Changes

package/gatsby-node.js

@@ -86,6 +86,7 @@ exports.onPostBuild = async ({graphql}) => {
               frontmatter {
                 componentId
                 status
+                a11yReviewed
               }
             }
           }
@@ -97,7 +98,8 @@ exports.onPostBuild = async ({graphql}) => {
       return {
         id: node.context.frontmatter.componentId,
         path: node.path,
-        status: node.context.frontmatter.status.toLowerCase()
+        status: node.context.frontmatter.status.toLowerCase(),
+        a11yReviewed: node.context.frontmatter.a11yReviewed || false
       }
     })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -33,7 +33,7 @@
     "@mdx-js/mdx": "^1.0.21",
     "@mdx-js/react": "^1.0.21",
     "@primer/component-metadata": "^0.4.0",
-    "@primer/octicons-react": "^16.3.1",
+    "@primer/octicons-react": "^17.5.0",
     "@primer/react": "^35.2.2",
     "@styled-system/theme-get": "^5.0.12",
     "@testing-library/jest-dom": "^5.16.2",
@@ -70,7 +70,6 @@
     "react-addons-text-content": "^0.0.4",
     "react-element-to-jsx-string": "^14.0.3",
     "react-focus-on": "^3.3.0",
-    "react-frame-component": "^5.2.1",
     "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
     "react-measure": "^2.3.0",

package/src/components/figma-link.js

@@ -1,30 +1,34 @@
-import {Link, Text} from '@primer/react'
+import {Link, Text, Box} from '@primer/react'
 import React from 'react'
 
 function SourceLink({href}) {
   return (
-    <Link href={href} target="_blank">
-      <FigmaLogo />
-      <Text sx={{ml: 2, display: 'inline-block'}}>View Figma</Text>
-    </Link>
+    <li>
+      <Link href={href} target="_blank">
+        <Box sx={{display: 'flex', gap: 1, alignItems: 'center'}}>
+          <FigmaLogo />
+          <Text>Figma</Text>
+        </Box>
+      </Link>
+    </li>
   )
 }
 
 function FigmaLogo() {
   return (
     <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
       width={16}
       height={16}
-      aria-hidden="true"
-      style={{verticalAlign: 'text-bottom'}}
-      fill="none"
+      fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 172 247"
     >
-      <g stroke="currentColor" strokeWidth="15.081">
-        <path d="M164 46.5c0 21.263-17.237 38.5-38.5 38.5H86V8h39.5C146.763 8 164 25.237 164 46.5ZM8 46.5C8 67.763 25.237 85 46.5 85H86V8H46.5C25.237 8 8 25.237 8 46.5ZM8 123.501c0 21.263 17.237 38.5 38.5 38.5H86v-77H46.5c-21.263 0-38.5 17.237-38.5 38.5Z" />
-        <path d="M8 200.5C8 221.763 25.485 239 46.748 239 68.288 239 86 221.539 86 200v-38H46.5C25.237 162 8 179.237 8 200.5ZM86 123.501c0 21.263 17.237 38.5 38.5 38.5h1c21.263 0 38.5-17.237 38.5-38.5s-17.237-38.5-38.5-38.5h-1c-21.263 0-38.5 17.237-38.5 38.5Z" />
-      </g>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.417 0A3.167 3.167 0 0 0 3.37 5.583 3.16 3.16 0 0 0 2.25 8a3.16 3.16 0 0 0 1.12 2.417 3.167 3.167 0 1 0 5.213 2.417V10.687a3.165 3.165 0 0 0 3.87-4.964A3.167 3.167 0 0 0 10.582 0H5.417Zm4.727 6.333h.21a1.665 1.665 0 1 1-.21 0Zm.25-1.5h.19a1.667 1.667 0 1 0 0-3.333H5.416a1.667 1.667 0 1 0 0 3.333h4.687a3.226 3.226 0 0 1 .29 0ZM3.75 8c0-.92.746-1.667 1.667-1.667h1.666v3.334H5.417C4.497 9.667 3.75 8.92 3.75 8Zm1.667 3.167a1.667 1.667 0 1 0 1.666 1.667v-1.667H5.417Z"
+      />
     </svg>
   )
 }

package/src/components/frame.js

@@ -1,20 +1,24 @@
 import React from 'react'
-import FrameComponent, {FrameContextConsumer} from 'react-frame-component'
+import ReactDOM from 'react-dom'
 import {StyleSheetManager} from 'styled-components'
 import Measure from 'react-measure'
 
 function Frame({children}) {
   const [height, setHeight] = React.useState('auto')
+  const [iframeRef, setIframeRef] = React.useState(null)
+  const contentDocument = iframeRef ? iframeRef.contentWindow.document : null
+
   return (
-    <FrameComponent style={{width: '100%', border: 0, borderRadius: 6, height}}>
-      <FrameContextConsumer>
-        {({document}) => {
-          // By default, styled-components injects styles in the head of the page.
-          // However, styles from the page's head don't apply inside iframes.
-          // We're using StyleSheetManager to make styled-components inject styles
-          // into the head of the iframe instead.
-          return (
-            <StyleSheetManager target={document.head}>
+    // eslint-disable-next-line jsx-a11y/iframe-has-title
+    <iframe ref={setIframeRef} style={{width: '100%', border: 0, borderRadius: 6, height}}>
+      {
+        // By default, styled-components injects styles in the head of the page.
+        // However, styles from the page's head don't apply inside iframes.
+        // We're using StyleSheetManager to make styled-components inject styles
+        // into the head of the iframe instead.
+        contentDocument !== null &&
+          ReactDOM.createPortal(
+            <StyleSheetManager target={contentDocument.head}>
               <Measure
                 // iframes don't adjust to the height of their content by default.
                 // We're using Measure to calculate the size of the content
@@ -24,11 +28,11 @@ function Frame({children}) {
               >
                 {({measureRef}) => <div ref={measureRef}>{children}</div>}
               </Measure>
-            </StyleSheetManager>
+            </StyleSheetManager>,
+            contentDocument.body
           )
-        }}
-      </FrameContextConsumer>
-    </FrameComponent>
+      }
+    </iframe>
   )
 }
 

package/src/components/horizontal-rule.js

@@ -2,10 +2,10 @@ import styled from 'styled-components'
 import themeGet from '@styled-system/theme-get'
 
 const HorizontalRule = styled.hr`
-  height: ${themeGet('space.1')};
+  height: ${themeGet('borderWidths.1')};
   padding: 0;
   margin: ${themeGet('space.4')} 0;
-  background-color: ${themeGet('colors.gray.2')};
+  background-color: ${themeGet('colors.border.default')};
   border: 0;
 `
 

package/src/components/layout.js

@@ -1,11 +1,14 @@
 import componentMetadata from '@primer/component-metadata'
-import {Box, Heading, Text} from '@primer/react'
+import {Box, Heading, Text, Label, StyledOcticon} from '@primer/react'
+import {AccessibilityInsetIcon} from '@primer/octicons-react'
 import React from 'react'
 import Head from './head'
 import Header, {HEADER_HEIGHT} from './header'
 import PageFooter from './page-footer'
 import Sidebar from './sidebar'
 import SourceLink from './source-link'
+import RailsLink from './rails-link'
+import ReactLink from './react-link'
 import StatusLabel from './status-label'
 import LookbookLink from './lookbook-link'
 import StorybookLink from './storybook-link'
@@ -13,8 +16,20 @@ import FigmaLink from './figma-link'
 import TableOfContents from './table-of-contents'
 
 function Layout({children, pageContext}) {
-  let {title, description, figma, status, source, storybook, lookbook, additionalContributors, componentId} =
-    pageContext.frontmatter
+  let {
+    title,
+    description,
+    figma,
+    react,
+    status,
+    a11yReviewed,
+    source,
+    rails,
+    storybook,
+    lookbook,
+    additionalContributors,
+    componentId
+  } = pageContext.frontmatter
 
   if (!additionalContributors) {
     additionalContributors = []
@@ -66,31 +81,80 @@ function Layout({children, pageContext}) {
             </Box>
           ) : null}
           <Box sx={{width: '100%', maxWidth: '960px'}}>
-            <Box sx={{mb: 4}}>
+            <Box sx={{mb: 7}}>
               <Box sx={{alignItems: 'center', display: 'flex'}}>
-                <Heading as="h1" sx={{mr: 2}}>
+                <Heading as="h1" sx={{mb: 2}}>
                   {title}
                 </Heading>{' '}
-                {status ? <StatusLabel status={status} /> : null}
               </Box>
-              {description ? <Box sx={{fontSize: 3, pb: 2}}>{description}</Box> : null}
-              {source || storybook || lookbook ? (
-                <Box
-                  sx={{
-                    py: 2,
-                    gridGap: [1, null, 3],
-                    gridAutoFlow: ['row', null, 'column'],
-                    gridAutoColumns: 'max-content',
-                    gridAutoRows: 'max-content',
-                    display: 'grid'
-                  }}
-                >
-                  {source ? <SourceLink href={source} /> : null}
-                  {lookbook ? <LookbookLink href={lookbook} /> : null}
-                  {storybook ? <StorybookLink href={storybook} /> : null}
-                  {figma ? <FigmaLink href={figma} /> : null}
-                </Box>
-              ) : null}
+              {description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  columnGap: 3,
+                  rowGap: 3,
+                  alignItems: 'center',
+                  fontSize: 1
+                }}
+              >
+                {status ? (
+                  <Box as={'ul'} sx={{display: 'flex', gap: 1, alignItems: 'center', m: 0, p: 0, paddingInline: 0}}>
+                    <StatusLabel size="large" status={status} />
+                    {a11yReviewed ? (
+                      <Label
+                        as={'li'}
+                        size="large"
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 1,
+                          backgroundColor: 'done.subtle',
+                          fontWeight: 'normal',
+                          borderColor: 'transparent'
+                        }}
+                      >
+                        <StyledOcticon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
+                        Reviewed by accessibility team
+                      </Label>
+                    ) : (
+                      <Label
+                        size="large"
+                        as={'li'}
+                        sx={{
+                          backgroundColor: 'neutral.subtle',
+                          fontWeight: 'normal',
+                          borderColor: 'transparent'
+                        }}
+                      >
+                        Review pending by accessibility team
+                      </Label>
+                    )}
+                  </Box>
+                ) : null}
+                {source || storybook || lookbook || figma || rails || react ? (
+                  <Box
+                    as={'ul'}
+                    sx={{
+                      display: 'flex',
+                      flexWrap: 'wrap',
+                      gap: 3,
+                      alignItems: 'center',
+                      m: 0,
+                      p: 0,
+                      paddingInline: 0,
+                      listStyle: 'none'
+                    }}
+                  >
+                    {source ? <SourceLink href={source} /> : null}
+                    {lookbook ? <LookbookLink href={lookbook} /> : null}
+                    {storybook ? <StorybookLink href={storybook} /> : null}
+                    {figma ? <FigmaLink href={figma} /> : null}
+                    {react ? <ReactLink href={react} /> : null}
+                    {rails ? <RailsLink href={rails} /> : null}
+                  </Box>
+                ) : null}
+              </Box>
             </Box>
             {pageContext.tableOfContents.items ? (
               <Box

package/src/components/lookbook-link.js

@@ -1,27 +1,17 @@
-import {Link, Text} from '@primer/react'
+import {Link, Text, Box} from '@primer/react'
+import {BookIcon} from '@primer/octicons-react'
 import React from 'react'
 
 function SourceLink({href}) {
   return (
-    <Link href={href} target="_blank">
-      <LookbookIcon />
-      <Text sx={{ml: 2, display: 'inline-block'}}>View Lookbook</Text>
-    </Link>
-  )
-}
-
-function LookbookIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      width={16}
-      height={16}
-      fill="currentColor"
-      style={{verticalAlign: 'text-bottom'}}
-    >
-      <path d="M12.3701 0C12.1793 0 12.0588 0.205201 12.1518 0.371843L17.7026 10.3173C17.766 10.4308 17.766 10.5692 17.7026 10.6827L12.1518 20.6282C12.0588 20.7948 12.1793 21 12.3701 21H17.974C18.1099 21 18.2352 20.9265 18.3014 20.8078L23.9524 10.6827C24.0158 10.5692 24.0158 10.4308 23.9524 10.3172L18.3014 0.192237C18.2352 0.07355 18.1099 0 17.974 0H12.3701ZM11.8433 10.3173C11.9067 10.4308 11.9067 10.5692 11.8433 10.6827L6.16371 20.8589C6.06834 21.0298 5.8225 21.0298 5.72712 20.8589L0.04755 10.6827C-0.0158499 10.5692 -0.01585 10.4308 0.0475497 10.3173L5.72712 0.141121C5.8225 -0.029757 6.06834 -0.0297573 6.16371 0.14112L11.8433 10.3173Z" />
-    </svg>
+    <li>
+      <Link href={href} target="_blank">
+        <Box sx={{display: 'flex', gap: 1, alignItems: 'center'}}>
+          <BookIcon />
+          <Text>Lookbook</Text>
+        </Box>
+      </Link>
+    </li>
   )
 }
 

package/src/components/rails-link.js

@@ -0,0 +1,36 @@
+import {Link, Text, Box} from '@primer/react'
+import React from 'react'
+
+function SourceLink({href}) {
+  return (
+    <li>
+      <Link href={href} target="_blank">
+        <Box sx={{display: 'flex', gap: 1, alignItems: 'center'}}>
+          <RailsLogo />
+          <Text>Rails</Text>
+        </Box>
+      </Link>
+    </li>
+  )
+}
+
+function RailsLogo() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      width={16}
+      height={16}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.92 1a1 1 0 0 0-.764.355L.236 4.812a1 1 0 0 0-.012 1.275l6.975 8.596a1 1 0 0 0 1.553 0l.972-1.197h.002l.002-.005 6-7.394a1 1 0 0 0-.013-1.275l-2.92-3.457A1 1 0 0 0 12.03 1H3.92Zm6.7 9 3.044-3.75h-2.082L10.62 10Zm.966-5.25h2.113l-1.9-2.25h-.776l.563 2.25ZM9.476 2.5l.563 2.25H5.961l.562-2.25h2.954Zm.557 3.75-1.677 6.54-.38.47-.31-.381-1.7-6.629h4.067Zm-7.781-1.5 1.9-2.25h.825l-.562 2.25H2.252Zm.035 1.5h2.131l.985 3.84-3.116-3.84Z"
+      />
+    </svg>
+  )
+}
+
+export default SourceLink

package/src/components/react-link.js

@@ -0,0 +1,36 @@
+import {Link, Text, Box} from '@primer/react'
+import React from 'react'
+
+function SourceLink({href}) {
+  return (
+    <li>
+      <Link href={href} target="_blank">
+        <Box sx={{display: 'flex', gap: 1, alignItems: 'center'}}>
+          <ReactLogo />
+          <Text>React</Text>
+        </Box>
+      </Link>
+    </li>
+  )
+}
+
+function ReactLogo() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      width={16}
+      height={16}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.129 2.533a13 13 0 0 0-1.84 1.035c.566.467 1.13.98 1.683 1.532a23.93 23.93 0 0 1 1.533 1.683 13 13 0 0 0 1.034-1.84c.335-.742.504-1.372.53-1.856.026-.485-.091-.735-.22-.864-.128-.128-.379-.246-.863-.22-.485.027-1.114.196-1.857.53Zm-.616-1.368c-.785.354-1.624.842-2.477 1.444A15.152 15.152 0 0 0 5.56 1.166C4.72.787 3.901.546 3.167.506c-.733-.04-1.47.12-2.006.657-.536.536-.696 1.273-.656 2.006.04.733.281 1.55.66 2.39.353.786.84 1.624 1.443 2.478a15.15 15.15 0 0 0-1.442 2.475c-.378.84-.62 1.657-.66 2.39-.04.734.12 1.47.657 2.007.536.536 1.273.696 2.006.656.733-.04 1.55-.281 2.39-.66a15.15 15.15 0 0 0 2.476-1.441c.853.601 1.69 1.089 2.476 1.442.84.378 1.657.62 2.39.66.734.04 1.47-.121 2.007-.657.536-.536.696-1.273.656-2.006-.04-.734-.281-1.551-.66-2.391a15.149 15.149 0 0 0-1.441-2.475 15.15 15.15 0 0 0 1.443-2.478c.378-.84.62-1.657.66-2.39.04-.734-.121-1.47-.657-2.007-.536-.536-1.273-.696-2.006-.656-.733.04-1.55.281-2.391.66Zm-7.98 3.78c.259.574.607 1.195 1.035 1.838.467-.566.98-1.131 1.533-1.684a23.915 23.915 0 0 1 1.682-1.531 12.995 12.995 0 0 0-1.84-1.035c-.742-.334-1.372-.503-1.856-.53-.485-.026-.735.092-.864.22-.128.129-.246.38-.22.864.027.484.196 1.114.53 1.857ZM6.161 6.16a22.144 22.144 0 0 0-1.678 1.877A22.14 22.14 0 0 0 6.16 9.91a22.155 22.155 0 0 0 1.876 1.678 22.137 22.137 0 0 0 1.877-1.678c.62-.62 1.181-1.251 1.676-1.874A22.137 22.137 0 0 0 9.911 6.16a22.142 22.142 0 0 0-1.875-1.677A22.144 22.144 0 0 0 6.161 6.16Zm-3.626 4.967c.258-.574.605-1.194 1.033-1.837.467.566.98 1.13 1.531 1.682a23.922 23.922 0 0 0 1.684 1.532c-.643.428-1.263.775-1.838 1.034-.743.334-1.373.503-1.857.53-.484.026-.735-.091-.864-.22-.128-.128-.245-.38-.22-.864.027-.484.196-1.114.53-1.857Zm8.592 2.411a13 13 0 0 1-1.837-1.034c.566-.467 1.13-.98 1.683-1.532a23.903 23.903 0 0 0 1.531-1.682c.428.643.775 1.263 1.034 1.837.334.743.503 1.373.53 1.857.026.485-.091.736-.22.864-.128.129-.38.246-.864.22-.484-.027-1.114-.195-1.857-.53ZM8.034 8.782a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+      />
+    </svg>
+  )
+}
+
+export default SourceLink

package/src/components/sidebar.js

@@ -37,7 +37,7 @@ function Sidebar() {
         position: 'sticky',
         top: HEADER_HEIGHT,
         height: `calc(100vh - ${HEADER_HEIGHT}px)`,
-        minWidth: 260
+        width: 260
       }}
     >
       <Box

package/src/components/source-link.js

@@ -1,13 +1,17 @@
-import {Link, Text} from '@primer/react'
+import {Link, Text, Box} from '@primer/react'
 import {MarkGithubIcon} from '@primer/octicons-react'
 import React from 'react'
 
 function SourceLink({href}) {
   return (
-    <Link href={href} target="_blank">
-      <MarkGithubIcon />
-      <Text sx={{ml: 2, display: 'inline-block'}}>View source</Text>
-    </Link>
+    <li>
+      <Link href={href} target="_blank">
+        <Box sx={{display: 'flex', gap: 1, alignItems: 'center'}}>
+          <MarkGithubIcon />
+          <Text>Source</Text>
+        </Box>
+      </Link>
+    </li>
   )
 }
 

package/src/components/status-label.js

@@ -1,4 +1,4 @@
-import {Label} from '@primer/react'
+import {Label, Box} from '@primer/react'
 import React from 'react'
 
 const STATUS_COLORS = {
@@ -8,13 +8,41 @@ const STATUS_COLORS = {
   deprecated: 'danger.fg'
 }
 
+const STATUS_BACKGROUND = {
+  alpha: 'severe.subtle',
+  beta: 'attention.subtle',
+  stable: 'success.subtle',
+  deprecated: 'danger.subtle'
+}
+
 function getStatusColor(status) {
   return STATUS_COLORS[status.toLowerCase()] || 'fg.muted'
 }
 
-function StatusLabel({status}) {
+function getStatusBackgroundColor(status) {
+  return STATUS_BACKGROUND[status.toLowerCase()] || 'neutral.subtle'
+}
+
+function StatusLabel({status, size}) {
+  const circleSize = size === 'large' ? 8 : 6
+
   return (
-    <Label outline sx={{color: getStatusColor(status), borderColor: getStatusColor(status)}}>
+    <Label
+      as={'li'}
+      size={size || 'small'}
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 1,
+        backgroundColor: getStatusBackgroundColor(status),
+        borderColor: 'transparent',
+        fontWeight: 'normal'
+      }}
+    >
+      <Box
+        aria-hidden="true"
+        sx={{height: circleSize, width: circleSize, backgroundColor: getStatusColor(status), borderRadius: 99}}
+      />
       {status}
     </Label>
   )

package/src/components/storybook-link.js

@@ -1,27 +1,17 @@
-import {Link, Text} from '@primer/react'
+import {Link, Text, Box} from '@primer/react'
+import {BookIcon} from '@primer/octicons-react'
 import React from 'react'
 
 function SourceLink({href}) {
   return (
-    <Link href={href} target="_blank">
-      <StorybookIcon />
-      <Text sx={{ml: 2, display: 'inline-block'}}>View Storybook</Text>
-    </Link>
-  )
-}
-
-function StorybookIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      width={16}
-      height={16}
-      fill="currentColor"
-      style={{verticalAlign: 'text-bottom'}}
-    >
-      <path d="M16.71.243l-.12 2.71a.18.18 0 00.29.15l1.06-.8.9.7a.18.18 0 00.28-.14l-.1-2.76 1.33-.1a1.2 1.2 0 011.279 1.2v21.596a1.2 1.2 0 01-1.26 1.2l-16.096-.72a1.2 1.2 0 01-1.15-1.16l-.75-19.797a1.2 1.2 0 011.13-1.27L16.7.222zM13.64 9.3c0 .47 3.16.24 3.59-.08 0-3.2-1.72-4.89-4.859-4.89-3.15 0-4.899 1.72-4.899 4.29 0 4.45 5.999 4.53 5.999 6.959 0 .7-.32 1.1-1.05 1.1-.96 0-1.35-.49-1.3-2.16 0-.36-3.649-.48-3.769 0-.27 4.03 2.23 5.2 5.099 5.2 2.79 0 4.969-1.49 4.969-4.18 0-4.77-6.099-4.64-6.099-6.999 0-.97.72-1.1 1.13-1.1.45 0 1.25.07 1.19 1.87z" />
-    </svg>
+    <li>
+      <Link href={href} target="_blank">
+        <Box sx={{display: 'flex', gap: 1, alignItems: 'center'}}>
+          <BookIcon />
+          <Text>Storybook</Text>
+        </Box>
+      </Link>
+    </li>
   )
 }
 

package/src/components/superscript.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+import {HEADER_HEIGHT} from './header'
+
+const Superscript = styled.sup`
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+  top: -0.5em;
+  scroll-margin-top: ${HEADER_HEIGHT + 24}px;
+
+  a {
+    text-decoration: none;
+
+    ::before {
+      content: '[';
+    }
+
+    ::after {
+      content: ']';
+    }
+  }
+`
+
+export default Superscript

package/src/components/table.js

@@ -2,28 +2,50 @@ import styled from 'styled-components'
 import themeGet from '@styled-system/theme-get'
 
 const Table = styled.table`
-  display: block;
   width: 100%;
   margin: 0 0 ${themeGet('space.3')};
   overflow: auto;
+  border-collapse: separate;
+  border-spacing: 0px;
 
   th {
     font-weight: ${themeGet('fontWeights.bold')};
+    background-color: ${themeGet('colors.neutral.subtle')};
   }
 
   th,
   td {
     padding: ${themeGet('space.2')} ${themeGet('space.3')};
-    border: 1px solid ${themeGet('colors.border.muted')};
+    border-color: ${themeGet('colors.border.muted')};
+    border-style: solid;
+    border-width: 0;
+    border-left-width: ${themeGet('borderWidths.1')};
+    border-top-width: ${themeGet('borderWidths.1')};
   }
 
-  tr {
-    background-color: ${themeGet('colors.white')};
-    border-top: 1px solid ${themeGet('colors.border.muted')};
+  tr:last-child td {
+    border-bottom-width: ${themeGet('borderWidths.1')};
+  }
+
+  tr td:last-child,
+  tr th:last-child {
+    border-right-width: ${themeGet('borderWidths.1')};
+  }
+
+  thead th:first-child {
+    border-top-left-radius: ${themeGet('radii.2')};
+  }
+
+  thead th:last-child {
+    border-top-right-radius: ${themeGet('radii.2')};
+  }
+
+  tbody tr:last-child td:last-child {
+    border-bottom-right-radius: ${themeGet('radii.2')};
+  }
 
-    &:nth-child(2n) {
-      background-color: ${themeGet('colors.neutral.subtle')};
-    }
+  tbody tr:last-child td:first-child {
+    border-bottom-left-radius: ${themeGet('radii.2')};
   }
 
   img {

package/src/components/wrap-page-element.js

@@ -8,6 +8,21 @@ const GlobalStyles = createGlobalStyle`
     color: ${themeGet('colors.fg.default')};
     background-color: ${themeGet('colors.canvas.default')};
   }
+
+  .footnotes {
+    font-size: ${themeGet('fontSizes.1')};
+    color: ${themeGet('colors.fg.subtle')};
+
+    ol {
+      padding-left: ${themeGet('space.3')};
+    }
+
+  .footnote-backref {
+      font-family: ${themeGet('fonts.mono')};
+      margin-left: 2px;
+      text-decoration: none;
+    }
+  }
 `
 
 function wrapPageElement({element}) {

package/src/components/wrap-root-element.js

@@ -16,6 +16,7 @@ import InlineCode from './inline-code'
 import List from './list'
 import Note from './note'
 import Paragraph from './paragraph'
+import Superscript from './superscript'
 import Table from './table'
 
 const components = {
@@ -28,6 +29,7 @@ const components = {
   p: Paragraph,
   hr: HorizontalRule,
   blockquote: Blockquote,
+  sup: Superscript,
   h1: H1,
   h2: H2,
   h3: H3,