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}