Introduces a PropsTable docs component

docs/content/Link.mdx

@@ -0,0 +1,54 @@
+---
+title: Link
+status: Alpha
+---
+
+import {PropsTable} from '../src/props-table'
+import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
+import {Link} from '@primer/components'
+
+The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another.
+
+In special cases where you'd like a `<button>` styled like a `Link`, use `<Link as='button'>`. Make sure to provide a click handler with `onClick`.
+
+**Important:** When using the `as` prop, be sure to always render an accessible element type, like `a`, `button`, `input`, or `summary`.
+
+## Default example
+
+```jsx live
+<Link sx={{mb: 1}} href="https://github.com">
+  Link
+</Link>
+```
+
+## Component props
+
+<PropsTable>
+  <PropsTable.Row
+    name="href"
+    type="string"
+    description={
+      <>
+        URL to be used for the Link. (The <InlineCode>href</InlineCode> is passed to the underlying{' '}
+        <InlineCode>&lt;a&gt;</InlineCode> element. If <InlineCode>as</InlineCode> is specified, the link behavior may
+        need different props).
+      </>
+    }
+  />
+  <PropsTable.Row
+    name="muted"
+    type="boolean"
+    defaultValue="false"
+    description="Uses a less prominent shade for Link color, and the default link shade on hover"
+  />
+  <PropsTable.Row name="underline" type="boolean" defaultValue="false" description="Adds underline to the Link" />
+  <PropsTable.Row name="hoverColor" type="string" description="Color used when hovering over link" />
+  <PropsTable.BasePropRows
+    elementType="a"
+    refType="React.RefObject<HTMLAnchorElement>"
+    passthroughPropsLink={
+      <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes">MDN</Link>
+    }
+    isPolymorphic
+  />
+</PropsTable>

docs/content/TextInput.mdx

@@ -0,0 +1,72 @@
+---
+title: TextInput
+status: Alpha
+---
+
+import {PropsTable} from '../src/props-table'
+import {Link} from '@primer/components'
+
+TextInput is a form component to add default styling to the native text input.
+
+**Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users.
+
+## Default example
+
+```jsx live
+<>
+  <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
+
+  <TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
+
+  <TextInput
+    sx={{ml: 4}}
+    icon={SearchIcon}
+    aria-label="Zipcode"
+    name="zipcode"
+    placeholder="Find user"
+    autoComplete="postal-code"
+  />
+</>
+```
+
+## Component props
+
+Native `<input>` attributes are forwarded to the underlying React `input` component and are not listed below.
+
+<PropsTable>
+  <PropsTable.Row name="aria-label" required type="string" description="Allows input to be accessible." />
+  <PropsTable.Row name="block" type="boolean" description="Adds `display: block` to element" />
+  <PropsTable.Row name="contrast" type="boolean" description="Changes background color to a higher contrast color" />
+  <PropsTable.Row
+    name="variant"
+    type="string"
+    description="Can be either `small` or `large`. Creates a smaller or larger input than the default."
+  />
+  <PropsTable.Row name="width" type="string | number" description="Set the width of the input" />
+  <PropsTable.Row name="maxWidth" description="Set the maximum width of the input">
+    <PropsTable.Row.Type>
+      string | number | <Link href="https://styled-system.com/guides/array-props">Array</Link>
+    </PropsTable.Row.Type>
+  </PropsTable.Row>
+  <PropsTable.Row name="minWidth" description="Set the minimum width of the input">
+    <PropsTable.Row.Type>
+      string | number | <Link href="https://styled-system.com/guides/array-props">Array</Link>
+    </PropsTable.Row.Type>
+  </PropsTable.Row>
+  <PropsTable.Row
+    name="icon"
+    type="ReactNode"
+    description="An Octicon react component. To be used inside of input. Positioned on the left edge."
+  />
+  <PropsTable.SxRow />
+  <PropsTable.RefRow
+    elementType="input"
+    description="A ref to the input element rendered by this component. Note: this is not the outermost element rendered by TextInput. There is also a div wrapper for which a ref is not accepted."
+  />
+  <PropsTable.PassthroughPropsRow
+    elementName="input"
+    passthroughPropsLink={
+      <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes">MDN</Link>
+    }
+  />
+</PropsTable>

docs/src/@primer/gatsby-theme-doctocat/mdx-components.js

@@ -1,9 +1,11 @@
 import {Box} from '@primer/components'
 import {ComponentChecklist} from '../../component-checklist'
 import {Props} from '../../props'
+import {PropsTable} from '../../props-table'
 
 export default {
   Box,
   ComponentChecklist,
-  Props
+  Props,
+  PropsTable
 }

docs/src/props-table.js

@@ -0,0 +1,144 @@
+import React from 'react'
+import {Box, Link, Label} from '@primer/components'
+import Table from '@primer/gatsby-theme-doctocat/src/components/table'
+import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
+
+function PropsTable({children}) {
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <Box as="th" textAlign="left">
+            Name
+          </Box>
+          <Box as="th" textAlign="left">
+            Type
+          </Box>
+          <Box as="th" textAlign="left">
+            Default
+          </Box>
+          <Box as="th" textAlign="left">
+            Description
+          </Box>
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </Table>
+  )
+}
+
+function Row({name, type, defaultValue, description, required}) {
+  return (
+    <tr>
+      <Box as="td" fontFamily="mono" fontSize={1} sx={{whiteSpace: 'nowrap'}} verticalAlign="top">
+        {name}
+        {required ? (
+          <>
+            {` `}
+            <Label style={{verticalAlign: 'text-top'}}>Required</Label>
+          </>
+        ) : null}
+      </Box>
+      <Box as="td" fontFamily="mono" fontSize={1} verticalAlign="top">
+        {type}
+      </Box>
+      <Box as="td" fontFamily="mono" fontSize={1} verticalAlign="top">
+        {defaultValue}
+      </Box>
+      <Box as="td" verticalAlign="top">
+        {description}
+      </Box>
+    </tr>
+  )
+}
+
+function BasePropRows({passthroughPropsLink, elementType, isPolymorphic, refType}) {
+  return (
+    <>
+      <SxRow />
+      {isPolymorphic && <AsRow defaultElementType={elementType} />}
+      <RefRow refType={refType} isPolymorphic={isPolymorphic} />
+      <PassthroughPropsRow
+        passthroughPropsLink={passthroughPropsLink}
+        elementName={elementType}
+        isPolymorphic={isPolymorphic}
+      />
+    </>
+  )
+}
+
+function PassthroughPropsRow({elementName, isPolymorphic, passthroughPropsLink}) {
+  return (
+    <tr>
+      <Box as="td" colSpan={4} fontSize={1} verticalAlign="top" fontStyle="italic">
+        Additional props are passed through to the <InlineCode>&lt;{elementName}&gt;</InlineCode> element. See{' '}
+        {passthroughPropsLink} for a list of props accepted by the <InlineCode>&lt;{elementName}&gt;</InlineCode>{' '}
+        element.
+        {isPolymorphic && (
+          <>
+            {' '}
+            If an <InlineCode>as</InlineCode> prop is specified, the accepted props will change accordingly.
+          </>
+        )}
+      </Box>
+    </tr>
+  )
+}
+
+function AsRow({defaultElementType}) {
+  return (
+    <Row
+      name="as"
+      defaultValue={`"${defaultElementType}"`}
+      type={
+        <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L73">
+          React.ElementType
+        </Link>
+      }
+      description="The underlying element to render — either a HTML element name or a React component."
+    />
+  )
+}
+
+function RefRow({refType, isPolymorphic}) {
+  return (
+    <Row
+      name="ref"
+      type={refType}
+      description={
+        <>
+          A ref to the element rendered by this component.
+          {isPolymorphic && (
+            <>
+              {' '}
+              Because this component is polymorphic, the type will vary based on the value of the{' '}
+              <InlineCode>as</InlineCode> prop.
+            </>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+function SxRow() {
+  return (
+    <Row
+      name="sx"
+      type={
+        <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-system__css/index.d.ts#L407">
+          SystemStyleObject
+        </Link>
+      }
+      description={
+        <>
+          Style overrides to apply to the component. See also <Link href="/overriding-styles">overriding styles</Link>.
+        </>
+      }
+    />
+  )
+}
+
+Object.assign(PropsTable, {Row, BasePropRows, AsRow, RefRow, PassthroughPropsRow, SxRow})
+
+export {PropsTable}