@primer/gatsby-theme-doctocat 4.2.0 → 4.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.2.2
+
+### Patch Changes
+
+- [`da5c046`](https://github.com/primer/doctocat/commit/da5c04600843876e6b905fa439d8cd8ee73bdf91) [#501](https://github.com/primer/doctocat/pull/501) Thanks [@josepmartins](https://github.com/josepmartins)! - Adjust accessibilty labels content
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -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/accessibility-label.js

@@ -0,0 +1,39 @@
+import {Label, StyledOcticon} from '@primer/react'
+import {AccessibilityInsetIcon} from '@primer/octicons-react'
+import React from 'react'
+
+function AccessibilityLabel({a11yReviewed, size, short}) {
+  return (
+    <>
+      {a11yReviewed ? (
+        <Label
+          size={size}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            backgroundColor: 'done.subtle',
+            fontWeight: 'normal',
+            borderColor: 'transparent'
+          }}
+        >
+          <StyledOcticon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
+          {short ? 'Reviewed' : 'Reviewed for accessibility'}
+        </Label>
+      ) : (
+        <Label
+          size={size}
+          sx={{
+            backgroundColor: 'neutral.subtle',
+            fontWeight: 'normal',
+            borderColor: 'transparent'
+          }}
+        >
+          {short ? 'Not reviewed' : 'Not reviewed for accessibility'}
+        </Label>
+      )}
+    </>
+  )
+}
+
+export default AccessibilityLabel

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/layout.js

@@ -1,6 +1,5 @@
 import componentMetadata from '@primer/component-metadata'
-import {Box, Heading, Text, Label, StyledOcticon} from '@primer/react'
-import {AccessibilityInsetIcon} from '@primer/octicons-react'
+import {Box, Heading, Text} from '@primer/react'
 import React from 'react'
 import Head from './head'
 import Header, {HEADER_HEIGHT} from './header'
@@ -10,6 +9,7 @@ import SourceLink from './source-link'
 import RailsLink from './rails-link'
 import ReactLink from './react-link'
 import StatusLabel from './status-label'
+import AccessibilityLabel from './accessibility-label'
 import LookbookLink from './lookbook-link'
 import StorybookLink from './storybook-link'
 import FigmaLink from './figma-link'
@@ -81,11 +81,9 @@ function Layout({children, pageContext}) {
             </Box>
           ) : null}
           <Box sx={{width: '100%', maxWidth: '960px'}}>
-            <Box sx={{mb: 7}}>
+            <Box sx={{mb: 4}}>
               <Box sx={{alignItems: 'center', display: 'flex'}}>
-                <Heading as="h1" sx={{mb: 2}}>
-                  {title}
-                </Heading>{' '}
+                <Heading as="h1">{title}</Heading>{' '}
               </Box>
               {description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
               <Box
@@ -93,43 +91,32 @@ function Layout({children, pageContext}) {
                   display: 'flex',
                   flexWrap: 'wrap',
                   columnGap: 3,
+                  mb: 7,
+                  mt: 2,
                   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
+                    as={'ul'}
+                    sx={{
+                      display: 'flex',
+                      gap: 1,
+                      alignItems: 'center',
+                      m: 0,
+                      p: 0,
+                      paddingInline: 0,
+                      listStyle: 'none'
+                    }}
+                  >
+                    <li>
+                      <StatusLabel size="large" status={status} />
+                    </li>
+                    <li>
+                      <AccessibilityLabel size="large" a11yReviewed={a11yReviewed} />
+                    </li>
                   </Box>
                 ) : null}
                 {source || storybook || lookbook || figma || rails || react ? (

package/src/components/status-label.js

@@ -28,7 +28,6 @@ function StatusLabel({status, size}) {
 
   return (
     <Label
-      as={'li'}
       size={size || 'small'}
       sx={{
         display: 'inline-flex',