Improve compatibility of docs, theme

Test docs against Lynx, also make docs print-friendly.

package.json

@@ -1,7 +1,8 @@
 {
   "name": "@tesseract-design/react-common",
   "title": "React Common",
-  "version": "0.2.3",
+  "org": "Tesseract Design",
+  "version": "0.2.4",
   "description": "Common front-end components for Web using the Tesseract design system, written in React.",
   "directories": {
     "lib": "dist"

packages/react-common-docs/brand.tsx

@@ -22,6 +22,7 @@ const Org = styled('small')({
   top: '-0.25em',
   right: 0,
   fontWeight: 600,
+  textTransform: 'lowercase',
 })
 
 const Subtitle = styled('small')({
@@ -32,18 +33,22 @@ const Subtitle = styled('small')({
 })
 
 const Brand = () => {
-  const org = pkg.name.includes('@') ? pkg.name.split('/')[0].slice(1) : null
-  const name = pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name
+  const org = pkg['org'] || (pkg.name.includes('@') ? pkg.name.split('/')[0].slice(1) : null)
+  const name = pkg['title'] || (pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name)
   return (
     <Base>
       {org && (
-        <Org>
-          {org}
-        </Org>
+        <React.Fragment>
+          <Org>
+            {org}
+          </Org>
+          {' '}
+        </React.Fragment>
       )}
       <Title>
         {name}
       </Title>
+      {' '}
       <Subtitle>
         v.{pkg.version}
       </Subtitle>

packages/react-common-docs/public/global.css

@@ -60,4 +60,9 @@ pre {
   img {
     filter: grayscale(100%);
   }
+
+  :root {
+    --color-accent: black !important;
+    --color-active: black !important;
+  }
 }

packages/react-common-docs/public/theme.css

@@ -61,6 +61,8 @@
 :root {
   --color-bg: var(--color-negative, white);
   --color-fg: var(--color-positive, black);
+  --color-accent: var(--color-primary, blue);
+  --color-active: var(--color-secondary, red);
 }
 
 @media (prefers-color-scheme: dark) {

packages/react-common-docs/public/theme/dark.css

@@ -2,8 +2,8 @@
   --color-shade: #000;
   --color-negative: #222;
   --color-positive: #eee;
-  --color-accent: #C78AB3;
-  --color-active: #f90;
+  --color-primary: #C78AB3;
+  --color-secondary: #f90;
   --color-code-number: #74f95e;
   --color-code-keyword: #ff4389;
   --color-code-type: #5097D2;

packages/react-common-docs/public/theme/light.css

@@ -2,8 +2,8 @@
   --color-shade: #fff;
   --color-negative: #f8f8f8;
   --color-positive: #333;
-  --color-accent: #ba6a9c;
-  --color-active: #f90;
+  --color-primary: #ba6a9c;
+  --color-secondary: #f90;
   --color-code-number: #72b507;
   --color-code-keyword: #ee5189;
   --color-code-type: #427fb1;

packages/react-common-docs/src/components/CodeBlock/CodeBlock.tsx

@@ -58,15 +58,22 @@ const CodeBlock = ({ children }) => {
         code={(code as string).trim()}
         theme={PrismTheme}
       >
-        {({ style, tokens, getLineProps, getTokenProps }) => (
-          <pre style={style}>
-            {tokens.map((line, i) => (
-              <div {...getLineProps({ line, key: i })}>
-                {line.map((token, key) => (
-                  <span {...getTokenProps({ token, key })} />
-                ))}
-              </div>
-            ))}
+        {({ tokens, getLineProps, getTokenProps }) => (
+          <pre>
+            <code>
+              {tokens.map((line, i) => (
+                <React.Fragment>
+                  {
+                    i > 0 && <br />
+                  }
+                  <span {...getLineProps({ line, key: i })}>
+                    {line.map((token, key) => (
+                      <span {...getTokenProps({ token, key })} />
+                    ))}
+                  </span>
+                </React.Fragment>
+              ))}
+            </code>
           </pre>
         )}
       </Highlight>

packages/react-common-docs/src/components/Nav/Nav.tsx

@@ -71,35 +71,39 @@ const Nav: React.FC<Props> = ({
       )
     }
     return (
+      <div>
+        <Link
+          href={value as string}
+          passHref
+        >
+          {
+            // @ts-ignore
+            <NavLink
+              href={value as string}
+              title={key}
+              enclosingComponent={Container}
+            />
+          }
+        </Link>
+      </div>
+    )
+  }
+  return (
+    <div>
       <Link
-        href={value as string}
+        href={data as string}
         passHref
       >
         {
           // @ts-ignore
           <NavLink
-            href={value as string}
-            title={key}
+            href={data as string}
+            title={data as string}
             enclosingComponent={Container}
           />
         }
       </Link>
-    )
-  }
-  return (
-    <Link
-      href={data as string}
-      passHref
-    >
-      {
-        // @ts-ignore
-        <NavLink
-          href={data as string}
-          title={data as string}
-          enclosingComponent={Container}
-        />
-      }
-    </Link>
+    </div>
   )
 }
 

packages/react-common-docs/src/components/Playground/Playground.tsx

@@ -9,13 +9,12 @@ import {
 import styled from 'styled-components'
 
 const Figure = styled('figure')({
-  display: 'none',
+  display: 'block',
+  margin: '0 -1rem',
+  padding: '1rem',
+  boxSizing: 'border-box',
+  position: 'relative',
   '@media only screen': {
-    display: 'block',
-    margin: '0 -1rem',
-    padding: '1rem',
-    boxSizing: 'border-box',
-    position: 'relative',
     '::before': {
       position: 'absolute',
       content: "''",
@@ -26,7 +25,14 @@ const Figure = styled('figure')({
       left: 0,
       width: '100%',
       height: '100%',
-    },
+    }
+  },
+})
+
+const PlaygroundCaption = styled('span')({
+  display: 'none',
+  '@media only screen': {
+    display: 'inline',
   },
 })
 
@@ -38,6 +44,13 @@ const Caption = styled('figcaption')({
   marginTop: '-0.5rem',
 })
 
+const CaptionPrint = styled(Caption)({
+  display: 'none',
+  '@media only screen': {
+    display: 'block',
+  },
+})
+
 const StyledLiveEditor = styled(LiveEditor)({
   lineHeight: 1.125,
   fontFamily: 'var(--font-family-monospace), monospace !important',
@@ -64,6 +77,7 @@ const Playground: React.FC<Props> = ({
   code,
   label,
 }) => {
+  const [enabled, setEnabled, ] = React.useState(false)
   const indentLevel = code.indexOf('<') - 1
   const normalizedCode = code
     .split('\n')
@@ -71,32 +85,48 @@ const Playground: React.FC<Props> = ({
     .filter((s: string) => s.trim().length > 0)
     .join('\n')
 
+  React.useEffect(() => {
+    setEnabled(true)
+  }, [])
+
   return (
     <Figure>
       {
         label as string
         && (
           <Caption>
-            Playground - {label}
+            <PlaygroundCaption>
+              {'Playground - '}
+            </PlaygroundCaption>
+            {label}
           </Caption>
         )
       }
       {
         !label
+        && enabled
         && (
-          <Caption>
+          <CaptionPrint>
             Playground
-          </Caption>
+          </CaptionPrint>
         )
       }
       <div>
-        <LiveProvider code={normalizedCode} scope={{
-          ...components,
-        }}>
+        <LiveProvider
+          code={normalizedCode}
+          scope={{
+            ...components,
+          }}
+        >
           <LivePreview />
-          <StyledLiveEditor
-            theme={PrismTheme}
-          />
+          {
+            enabled
+            && (
+              <StyledLiveEditor
+                theme={PrismTheme}
+              />
+            )
+          }
         </LiveProvider>
       </div>
     </Figure>

packages/react-common-docs/src/components/Props/Props.tsx

@@ -360,7 +360,7 @@ const Props: React.FC<Props> = ({ of: ofAttr }) => {
                 (unified()
                   .use(parse)
                   .use(remark2react)
-                  .processSync(prop.description).result as any)
+                  .processSync(prop.description).result.props.children[0] as any)
               )
               : undefined
             return (

packages/react-common-docs/src/components/Sidebar/Sidebar.tsx

@@ -118,6 +118,7 @@ const Sidebar: React.FC<Props> = ({
   brand: BrandRaw,
   initialTheme,
 }) => {
+  const [enabled, setEnabled, ] = React.useState(false)
   const [sidebar, setSidebar] = React.useState(false)
   const navRef = React.useRef<HTMLDivElement>(null)
   const Brand = BrandRaw!
@@ -149,26 +150,35 @@ const Sidebar: React.FC<Props> = ({
     }
   }, [])
 
+  React.useEffect(() => {
+    setEnabled(true)
+  }, [])
+
   return (
     <React.Fragment>
-      <SidebarToggle
-        onClick={toggleSidebar(!sidebar)}
-      >
-        {
-          !sidebar && (
-            <Icon
-              name="menu"
-            />
-          )
-        }
-        {
-          sidebar && (
-            <Icon
-              name="x"
-            />
-          )
-        }
-      </SidebarToggle>
+      {
+        enabled
+        && (
+          <SidebarToggle
+            onClick={toggleSidebar(!sidebar)}
+          >
+            {
+              !sidebar && (
+                <Icon
+                  name="menu"
+                />
+              )
+            }
+            {
+              sidebar && (
+                <Icon
+                  name="x"
+                />
+              )
+            }
+          </SidebarToggle>
+        )
+      }
       <Base
         ref={navRef}
         style={{

packages/react-common-docs/src/components/ThemeToggle/ThemeToggle.tsx

@@ -38,6 +38,7 @@ const applyStyles = (theme) => {
 const ThemeToggle = ({
   initialTheme,
 }) => {
+  const [enabled, setEnabled, ] = React.useState(false)
   const [theme, setTheme] = React.useState(null)
 
   const handleSetTheme = (e) => {
@@ -60,21 +61,29 @@ const ThemeToggle = ({
     }
   }, [theme])
 
-  return (
-    <ToggleWrapper>
-      <ToggleInput
-        type="checkbox"
-        checked={theme === 'Light'}
-        onChange={handleSetTheme}
-      />
-      <span>
-        <Icon
-          label="Toggle Theme"
-          name={theme === 'Dark' ? 'moon' : 'sun'}
+  React.useEffect(() => {
+    setEnabled(true)
+  }, [])
+
+  if (enabled) {
+    return (
+      <ToggleWrapper>
+        <ToggleInput
+          type="checkbox"
+          checked={theme === 'Light'}
+          onChange={handleSetTheme}
         />
-      </span>
-    </ToggleWrapper>
-  )
+        <span>
+          <Icon
+            label="Toggle Theme"
+            name={theme === 'Dark' ? 'moon' : 'sun'}
+          />
+        </span>
+      </ToggleWrapper>
+    )
+  }
+
+  return null
 }
 
 export default ThemeToggle

packages/react-common-docs/src/pages/components/Button.mdx

@@ -11,7 +11,9 @@ import Header from '../../components/Header/Header'
 
 <Playground
   code={`
-    <Button>
+    <Button
+      border
+    >
       Perform Action
     </Button>
   `}

packages/react-common-docs/src/pages/index.md

@@ -5,7 +5,7 @@ Common front-end components for Web using the [Tesseract design system](https://
 Package:
 
 [![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=name)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common)
-[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)
+[![Version List](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)
 
 Dependencies:
 

packages/react-common/src/components/Select/Select.tsx

@@ -77,8 +77,6 @@ LabelWrapper.displayName = 'span'
 
 const Input = styled('select')({
   display: 'block',
-  backgroundColor: 'var(--color-bg, white)',
-  color: 'var(--color-fg, black)',
   appearance: 'none',
   boxSizing: 'border-box',
   position: 'relative',
@@ -103,6 +101,10 @@ const Input = styled('select')({
     outline: 0,
     border: 0,
   },
+  '@media only screen': {
+    backgroundColor: 'var(--color-bg, white)',
+    color: 'var(--color-fg, black)',
+  },
 })
 
 Input.displayName = 'select'

packages/react-common/src/components/TextInput/TextInput.tsx

@@ -110,8 +110,6 @@ const Border = styled('span')({
 
 const Input = styled('input')({
   display: 'block',
-  backgroundColor: 'var(--color-bg, white)',
-  color: 'var(--color-fg, black)',
   verticalAlign: 'top',
   paddingTop: 0,
   paddingBottom: 0,
@@ -134,14 +132,16 @@ const Input = styled('input')({
   ':disabled': {
     cursor: 'not-allowed',
   },
+  '@media only screen': {
+    backgroundColor: 'var(--color-bg, white)',
+    color: 'var(--color-fg, black)',
+  },
 })
 
 Input.displayName = 'input'
 
 const TextArea = styled('textarea')({
   display: 'block',
-  backgroundColor: 'var(--color-bg, white)',
-  color: 'var(--color-fg, black)',
   verticalAlign: 'top',
   width: '100%',
   boxSizing: 'border-box',
@@ -158,6 +158,10 @@ const TextArea = styled('textarea')({
   ':focus': {
     outline: 0,
   },
+  '@media only screen': {
+    backgroundColor: 'var(--color-bg, white)',
+    color: 'var(--color-fg, black)',
+  },
 })
 
 TextArea.displayName = 'textarea'