@primer/components 30.3.0-rc.2010c7d4 → 31.0.0-rc.15aa0a10

package/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js

@@ -1,84 +0,0 @@
-import {Box, Text} from '@primer/components'
-import ClipboardCopy from '@primer/gatsby-theme-doctocat/src/components/clipboard-copy'
-import LivePreviewWrapper from '@primer/gatsby-theme-doctocat/src/components/live-preview-wrapper'
-import githubTheme from '@primer/gatsby-theme-doctocat/src/github'
-import scope from '@primer/gatsby-theme-doctocat/src/live-code-scope'
-import htmlReactParser from 'html-react-parser'
-import React, {useState} from 'react'
-import reactElementToJsxString from 'react-element-to-jsx-string'
-import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live'
-import {ThemeContext} from 'styled-components'
-
-// Temporarily shadowing this file to update the border color of the live examples.
-// We can remove this file when Doctocat uses functional color variables.
-
-const languageTransformers = {
-  html: html => htmlToJsx(html),
-  jsx: jsx => wrapWithFragment(jsx)
-}
-
-function htmlToJsx(html) {
-  try {
-    const reactElement = htmlReactParser(removeNewlines(html))
-    // The output of htmlReactParser could be a single React element
-    // or an array of React elements. reactElementToJsxString does not accept arrays
-    // so we have to wrap the output in React fragment.
-    return reactElementToJsxString(<>{reactElement}</>)
-  } catch (error) {
-    return wrapWithFragment(html)
-  }
-}
-
-function removeNewlines(string) {
-  return string.replace(/(\r\n|\n|\r)/gm, '')
-}
-
-function wrapWithFragment(jsx) {
-  // eslint-disable-next-line github/unescaped-html-literal
-  return `<React.Fragment>${jsx}</React.Fragment>`
-}
-
-function LiveCode({code, language, noinline}) {
-  const theme = React.useContext(ThemeContext)
-  const [liveCode, setLiveCode] = useState(code)
-  const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
-
-  return (
-    <Box display="flex" flexDirection="column" mb={3}>
-      <LiveProvider scope={scope} code={liveCode} transformCode={languageTransformers[language]} noInline={noinline}>
-        <Box
-          sx={{
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderTopRightRadius: 2,
-            borderTopLeftRadius: 2
-          }}
-        >
-          <LivePreviewWrapper>
-            <LivePreview />
-          </LivePreviewWrapper>
-        </Box>
-        <Box position="relative">
-          <LiveEditor
-            onChange={handleChange}
-            theme={githubTheme}
-            ignoreTabKey={true}
-            padding={theme.space[3]}
-            style={{
-              fontFamily: theme.fonts.mono,
-              fontSize: '85%',
-              borderBottomLeftRadius: theme.radii[2],
-              borderBottomRightRadius: theme.radii[2]
-            }}
-          />
-          <Box position="absolute" top={0} right={0} p={2}>
-            <ClipboardCopy value={liveCode} />
-          </Box>
-        </Box>
-        <Text as={LiveError} m={0} p={3} fontFamily="mono" fontSize={1} color="white" bg="red.5" />
-      </LiveProvider>
-    </Box>
-  )
-}
-
-export default LiveCode

package/docs/src/@primer/gatsby-theme-doctocat/components/nav-dropdown.js

@@ -1,48 +0,0 @@
-import {Box, StyledOcticon, Details, useDetails, Text, themeGet} from '@primer/components'
-import {TriangleDownIcon} from '@primer/octicons-react'
-import React from 'react'
-import styled from 'styled-components'
-
-// Temporarily shadowing this component until Doctocat uses the
-// latest version of the Details or ActionMenu component
-
-function NavDropdown({title, children}) {
-  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
-  return (
-    <Details {...getDetailsProps()}>
-      <summary style={{cursor: 'pointer'}}>
-        <Text>{title}</Text>
-        <StyledOcticon icon={TriangleDownIcon} ml={1} />
-      </summary>
-      <Box position="absolute">
-        <Box
-          color="white"
-          bg="gray.8"
-          py={1}
-          mt={2}
-          boxShadow="medium"
-          borderWidth="1px"
-          borderStyle="solid"
-          borderColor="gray.7"
-          borderRadius={2}
-        >
-          {children}
-        </Box>
-      </Box>
-    </Details>
-  )
-}
-
-export const NavDropdownItem = styled.a`
-  display: block;
-  padding: ${themeGet('space.2')} ${themeGet('space.3')};
-  color: inherit;
-  text-decoration: none;
-  &:hover {
-    color: ${themeGet('colors.white')};
-    background-color: ${themeGet('colors.blue.5')};
-    text-decoration: none;
-  }
-`
-
-export default NavDropdown

package/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js

@@ -1,25 +0,0 @@
-import {BaseStyles, theme, ThemeProvider} from '@primer/components'
-import SkipLink from '@primer/gatsby-theme-doctocat/src/components/skip-link'
-import primitives from '@primer/primitives'
-import deepmerge from 'deepmerge'
-import React from 'react'
-
-// Temporarily shadowing this file to wrap the page in our custom ThemeProvider.
-// We can remove this file when Doctocat uses the custom ThemeProvider.
-
-// Doctocat still uses presentional color variables.
-// We can remove this customTheme when Doctocat uses functional color variables
-const customTheme = deepmerge(theme, {colors: primitives.colors.light.scale})
-
-function wrapPageElement({element}) {
-  return (
-    <ThemeProvider theme={customTheme}>
-      <BaseStyles>
-        <SkipLink />
-        {element}
-      </BaseStyles>
-    </ThemeProvider>
-  )
-}
-
-export default wrapPageElement