@planningcenter/tapestry-react 1.4.0 → 2.0.0

package/src/Dropdown/Dropdown.test.tsx

@@ -1,22 +1,133 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/extend-expect'
+import { noop } from 'lodash'
+import { Box, Button, Text, ThemeProvider } from '..'
 import Dropdown from './Dropdown'
-import ThemeProvider from '../ThemeProvider'
 
-it(`should render title`, () => {
-  render(<Dropdown title="A menu"></Dropdown>)
-  screen.getByText('A menu')
-})
+describe('Dropdown', () => {
+  describe('Text search', () => {
+    it(`should render title`, () => {
+      render(<Dropdown title="A menu"></Dropdown>)
+      screen.getByText('A menu')
+    })
+
+    it(`calls passed onSearch function when receiving keyboard input`, () => {
+      const customTextSearch = jest.fn()
+      render(
+        <ThemeProvider>
+          <Dropdown title="A menu" onSearch={customTextSearch}></Dropdown>
+        </ThemeProvider>
+      )
+      const dropdown = screen.getByText('A menu')
+
+      fireEvent.keyDown(dropdown, { key: 'A', code: 'KeyA' })
+      expect(customTextSearch).toHaveBeenCalled()
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    const StatefulDropdown = () => {
+      const [count, setCount] = useState(0)
+      return (
+        <ThemeProvider>
+          <Box>
+            <Dropdown>
+              <Dropdown.Item>
+                <Button title="One" onClick={() => noop()} />
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <Button title="Two" onClick={() => setCount((c) => c + 1)} />
+                <Text data-testid="count-text">{count}</Text>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <Button title="Three" onClick={() => noop()} />
+              </Dropdown.Item>
+            </Dropdown>
+          </Box>
+        </ThemeProvider>
+      )
+    }
+
+    it('should trap focus, tab forward through all elements', () => {
+      render(<StatefulDropdown />)
+      userEvent.tab()
+      userEvent.keyboard('{enter}')
+      const [
+        openPopover,
+        buttonOne,
+        buttonTwo,
+        buttonThree,
+      ] = screen.getAllByRole('button')
+
+      expect(openPopover).toHaveFocus()
+      userEvent.tab()
+      expect(buttonOne).toHaveFocus()
+      userEvent.tab()
+      expect(buttonTwo).toHaveFocus()
+      userEvent.tab()
+      expect(buttonThree).toHaveFocus()
+      userEvent.tab()
+      expect(buttonOne).toHaveFocus()
+    })
+
+    it('should trap focus, tab backwards from first element to last', () => {
+      render(<StatefulDropdown />)
+      userEvent.tab()
+      userEvent.keyboard('{enter}')
+      const [
+        openPopover,
+        buttonOne,
+        _buttonTwo,
+        buttonThree,
+      ] = screen.getAllByRole('button')
+
+      expect(openPopover).toHaveFocus()
+      userEvent.tab()
+      expect(buttonOne).toHaveFocus()
+      userEvent.tab({ shift: true })
+      expect(buttonThree).toHaveFocus()
+    })
+
+    it('should retain tab order after rerender', () => {
+      render(<StatefulDropdown />)
+      userEvent.tab()
+      userEvent.keyboard('{enter}')
+      const [, buttonOne, buttonTwo, buttonThree] = screen.getAllByRole(
+        'button'
+      )
+
+      userEvent.tab()
+      userEvent.tab()
+      expect(screen.getByTestId('count-text')).toHaveTextContent('0')
+      userEvent.keyboard('{enter}')
+      expect(screen.getByTestId('count-text')).toHaveTextContent('1')
+      expect(buttonTwo).toHaveFocus()
+      userEvent.tab()
+      expect(buttonThree).toHaveFocus()
+      userEvent.tab({ shift: true })
+      userEvent.tab({ shift: true })
+      expect(buttonOne).toHaveFocus()
+      userEvent.tab()
+      userEvent.tab()
+      userEvent.tab()
+      expect(buttonOne).toHaveFocus()
+      userEvent.tab({ shift: true })
+      userEvent.tab({ shift: true })
+      userEvent.tab({ shift: true })
+      expect(buttonOne).toHaveFocus()
+    })
 
-it(`calls passed onSearch function when receiving keyboard input`, () => {
-  const customTextSearch = jest.fn()
-  render(
-    <ThemeProvider>
-      <Dropdown title="A menu" onSearch={customTextSearch}></Dropdown>
-    </ThemeProvider>
-  )
-  const dropdown = screen.getByText('A menu')
-
-  fireEvent.keyDown(dropdown, { key: 'A', code: 'KeyA' })
-  expect(customTextSearch).toHaveBeenCalled()
+    it('should focus dropdown toggle when a user presses escape key', () => {
+      render(<StatefulDropdown />)
+      userEvent.tab()
+      userEvent.keyboard('{enter}')
+      const [openPopover, buttonOne] = screen.getAllByRole('button')
+      userEvent.tab()
+      expect(buttonOne).toHaveFocus()
+      userEvent.keyboard(`{esc}`)
+      expect(openPopover).toHaveFocus()
+    })
+  })
 })

package/src/Dropdown/Link.js

@@ -7,7 +7,9 @@ export const LINK_DISPLAY_NAME = 'Dropdown.Link'
 export const LINK_DATA = 'link'
 
 class Link extends Component {
-  static displayName = LINK_DISPLAY_NAME
+  // Graphql wasn't picking up the correct displayName when this was
+  // assigned to LINK_DISPLAY_NAME, but using a string works
+  static displayName = 'Dropdown.Link'
 
   render() {
     const { disabled, external, index, text, to, ...restProps } = this.props

package/src/EditActions/EditActions.js

@@ -1,15 +1,29 @@
+// @flow
 import React, { Children, useEffect, useState } from 'react'
 
 import Button from '../Button'
 import StackView from '../StackView'
 import { useDocumentEvent, useFocus, useHover } from '../hooks'
+import { useThemeProps } from '../system'
 
-function EditActions({ display, edit, loading, ...restProps }) {
+type Props = {
+  /** Renders any custom component or HTML element when not in the edit state.  */
+  display?: React.ReactNode,
+
+  /** Renders any custom component or HTML element, usually form elments to capture user values. */
+  edit?: React.ReactNode,
+
+  /** Shows a spinner if true and then optimistically shows a checkmark when false again. */
+  loading?: boolean,
+}
+
+function EditActions({ display, edit, loading, ...restProps }: Props) {
   const { focus, focusProps } = useFocus()
   const { hover, hoverProps } = useHover()
   const [on, setOn] = useState(false)
   const [showCheck, setShowCheck] = useState(false)
   const toggle = () => setOn((bool) => !bool)
+  const { buttonProps, ...themeProps } = useThemeProps('editActions', restProps)
 
   useEffect(() => {
     if (loading === false) {
@@ -35,14 +49,14 @@ function EditActions({ display, edit, loading, ...restProps }) {
       onClick={on ? undefined : () => setOn(true)}
       {...focusProps}
       {...hoverProps}
-      {...restProps}
+      {...themeProps}
     >
       {Children.toArray(on ? edit : display)}
       <Button
         grow={0}
         title={on ? 'Close' : 'Edit'}
         icon={{
-          name: showCheck ? 'checkmark' : on ? 'close' : 'pencil',
+          name: showCheck ? 'general.check' : on ? 'general.x' : 'general.pencil',
           color: showCheck ? 'green' : undefined,
         }}
         tooltip={{
@@ -53,6 +67,7 @@ function EditActions({ display, edit, loading, ...restProps }) {
         onClick={focus || on ? toggle : () => setOn(true)}
         opacity={focus || hover || on ? 1 : 0}
         spinner={on && loading ? { color: 'primary' } : undefined}
+        {...buttonProps}
       />
     </StackView>
   )

package/src/EditActions/EditActions.mdx

@@ -2,6 +2,7 @@
 title: EditActions
 category: General
 summary: Helper component that manages switching between initial and editing states of inline forms. It uses an optimisitic save that will render a checkmark after the loading prop has been set to `false`.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Field/Field.js

@@ -9,6 +9,12 @@ import StackView from '../StackView'
 import { cloneChildren, generateId } from '../utils'
 
 type Props = {
+  /** Usually accepts form fields, such as `input` or `select`. */
+  children?: any,
+
+  /** Gain access to the internal ref. */
+  innerRef?: any,
+
   /** Label that describes field[s]. */
   label?: string | React.ReactNode,
 
@@ -24,6 +30,9 @@ type Props = {
   /** Renders label and field[s] inline. */
   inline?: boolean,
 
+  /** Renders label and field[s] smaller. */
+  compact?: boolean,
+
   /** Renders content into a [HelperDrawer](/helperdrawer) next to label. */
   helpContent?: string | React.ReactNode,
 
@@ -33,8 +42,14 @@ type Props = {
   /** Controls spacing between fields. */
   spacing?: number,
 
+  /** Controls distribution between fields, by [passing this prop to StackView](/stackview#distribution). (Defaults to "fill".) */
+  distribution?: number,
+
   /** State of field[s]. */
   state?: 'success' | 'error',
+
+  /** Places an icon to the left of the label. */
+  icon?: any,
 }
 
 class Field extends Component<Props> {

package/src/Field/Field.mdx

@@ -2,6 +2,7 @@
 title: Field
 category: Forms
 summary: Composes [InputLabel](/inputlabel) and passes an `id` to the first child to pair labels and controls automatically.
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/FieldSet/FieldSet.js

@@ -5,8 +5,16 @@ import Heading from '../Heading'
 import StackView from '../StackView'
 import TileView from '../TileView'
 import Toolbar from '../Toolbar'
+import { useThemeProps } from '../system'
 
 type Props = {
+  children?: any,
+
+  /**
+   * Accepts any valid [Heading](/heading) props.
+   */
+  headingProps?: object,
+
   /**
    * Maps to internal `Toolbar` prop.
    */
@@ -26,28 +34,44 @@ type Props = {
    * Maps to internal `TileView` prop.
    */
   spacing: number,
+
+  /**
+   * Accepts any valid [TileView](/tileview) props.
+   */
+  tileViewProps?: object,
 }
 
-function FieldSet({
-  children,
-  minCellWidth = 16,
-  spacing = 1,
-  helpContent,
-  legend,
-  ...restProps
-}: Props) {
+function FieldSet({ children, helpContent, legend, ...restProps }: Props) {
+  const {
+    headingProps,
+    tileViewProps,
+    spacing = 1,
+    minCellWidth = 16,
+    ...themeProps
+  } = useThemeProps('fieldset', { ...restProps })
+
   return (
-    <StackView as="fieldset" padding={0} margin={2} {...restProps}>
+    <StackView
+      as="fieldset"
+      padding={0}
+      margin={2}
+      {...themeProps}
+      {...restProps}
+    >
       <Toolbar
         title={
-          <Heading as="legend" level={4}>
+          <Heading as="legend" level={4} {...headingProps}>
             {legend}
           </Heading>
         }
         helpContent={helpContent}
         marginBottom={1}
       />
-      <TileView minCellWidth={minCellWidth} spacing={spacing}>
+      <TileView
+        minCellWidth={minCellWidth}
+        spacing={spacing}
+        {...tileViewProps}
+      >
         {children}
       </TileView>
     </StackView>

package/src/FieldSet/FieldSet.mdx

@@ -2,6 +2,7 @@
 title: FieldSet
 category: Forms
 summary: Used to group several controls as well as labels within a web form.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/FilterLayout/FilterLayout.mdx

@@ -2,6 +2,7 @@
 title: FilterLayout
 category: General
 summary: Used to display a filterable content area. Use with [DataTable](/datatable).
+propsSummary: Accepts [Card](/card) props.
 ---
 
 ```jsx live

package/src/FilterLayout/FilterLayout.tsx

@@ -59,7 +59,10 @@ export function FilterLayout(props: Props) {
           radius={0}
           title="Filter"
           aria-label={sidebarOpen ? 'close filter' : 'open filter'}
-          iconRight={{ name: sidebarOpen ? 'caret-left' : 'filter' }}
+          iconRight={{ 
+            name: sidebarOpen ? 'general.leftChevron' : 'general.threeReducingHorizontalBars',
+            size: sidebarOpen ? 'xs' : 'md'
+          }}
           onClick={toggleSidebar}
         />
         <Box visible={!(sidebarOpen && fill)} grow={1} shrink={1}>

package/src/Form/Form.js

@@ -130,7 +130,7 @@ class Form extends React.Component<Props> {
       ...this.state,
       editButtonProps: {
         disabled: isSubmitting,
-        icon: isEditing ? undefined : { name: 'pencil' },
+        icon: isEditing ? undefined : { name: 'general.pencil' },
         onClick: () => {
           // bail out if we've already triggered a submit in onBlur
           if (this.submitTimeoutId === null) {

package/src/Form/Form.mdx

@@ -7,31 +7,33 @@ category: Forms
 render(() => {
   const [value, setValue] = React.useState({ name: "Dave's Band Tag Team" })
   return (
-    <Form
-      initialPayload={value}
-      onSubmit={(payload, complete) => {
-        setTimeout(() => {
-          setValue(payload)
-          complete()
-        }, 1600)
-      }}
-    >
-      {({ editButtonProps, getFieldProps }) => (
-        <StackView
-          minWidth={64}
-          padding={2}
-          spacing={1}
-          backgroundColor="primary-light"
-        >
-          <StackView axis="horizontal" alignment="center" spacing={1}>
-            <Input.Inline fontSize={0} light {...getFieldProps('name')} />
-            <Button size="xs" theme="light" {...editButtonProps} />
-            <Icon name="split" size="md" color="light-6" />
-            <Icon name="tag" size="md" color="light-6" />
+    <ThemeProvider theme={{ icons }}>
+      <Form
+        initialPayload={value}
+        onSubmit={(payload, complete) => {
+          setTimeout(() => {
+            setValue(payload)
+            complete()
+          }, 1600)
+        }}
+      >
+        {({ editButtonProps, getFieldProps }) => (
+          <StackView
+            minWidth={64}
+            padding={2}
+            spacing={1}
+            backgroundColor="primary-light"
+          >
+            <StackView axis="horizontal" alignment="center" spacing={1}>
+              <Input.Inline fontSize={0} light {...getFieldProps('name')} />
+              <Button size="xs" theme="light" {...editButtonProps} />
+              <Icon name="services.split" size="md" color="light-6" />
+              <Icon name="services.tag" size="md" color="light-6" />
+            </StackView>
           </StackView>
-        </StackView>
-      )}
-    </Form>
+        )}
+      </Form>
+    </ThemeProvider>
   )
 })
 ```

package/src/GridView/GridView.mdx

@@ -1,7 +1,8 @@
 ---
 title: GridView
 category: Layout
-summary: Lay out children in columns and rows. Wraps CSS grid styles in a simple API. Any direct children can use the `column|Start|End` or `row|Start|End` [shorthand properties](/system-props#css-grid) to place themselves on the grid. To learn more about how you can use CSS grid visit [learncssgrid.com](https://learncssgrid.com/).
+summary: Lay out children in columns and rows. Wraps CSS grid styles in a simple API. To learn more about how you can use CSS grid visit [learncssgrid.com](https://learncssgrid.com/).
+propsSummary: Accepts all valid HTML attributes.
 ---
 
 ```jsx live

package/src/GridView/GridView.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 
 import { BoxProps } from '../Box'
 import splitStyles from '../system/split-styles'
+import { spacingValue } from '../system'
 import { MediaQueries, Variants } from '../index'
 import { useVariant } from '../VariantProvider'
 
@@ -64,19 +65,25 @@ const gridViewPlugin = {
       styles.justifyItems = distribution
     }
     if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
-      styles.gridColumnGap = columnSpacing * 8
+      styles.gridColumnGap = spacingValue(columnSpacing)
     }
     if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
-      styles.gridRowGap = rowSpacing * 8
+      styles.gridRowGap = spacingValue(rowSpacing)
     }
-    if (spacing !== undefined && styles.gridGap === undefined) {
-      styles.gridGap = spacing * 8
+    if (spacing !== undefined && styles.gap === undefined) {
+      styles.gap = spacingValue(spacing)
     }
     return styles
   },
 }
 
 export type GridViewProps = {
+  /** Any direct children can use the `column|Start|End` or `row|Start|End` [shorthand properties](/style-props#grid) to place themselves on the grid. */
+  children?: any
+
+  /** Render custom component or HTML element tag. (Defaults to a `<div>` element). */
+  as?: any
+
   /** The algorithm used to implicitly place grid items. Maps to CSS [gridAutoFlow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) property. */
   autoFlow?: 'column' | 'row' | 'dense'
 
@@ -89,20 +96,32 @@ export type GridViewProps = {
   /** The columns of the grid. Maps to CSS [gridTemplateColumns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) property. */
   columns?: Array<any> | string
 
+  /**  If true, sets `display: inline-grid`, otherwise it defaults to `display: grid` */
+  inline?: boolean
+
+  /** Gain access to the internal ref */
+  innerRef?: any
+
   /** The rows of the grid. Maps to CSS [gridTemplateRows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) property. */
   rows?: Array<any> | string
 
   /** Aligns content in a grid item along the column axis. Maps to CSS [alignItems](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property. */
   alignment?: 'start' | 'end' | 'center' | 'stretch'
 
-  /** The amount of space between children. Maps to CSS [gridGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap) property. */
-  spacing?: number
+  /** The amount of space between children. Maps to CSS [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) property. */
+  spacing?: number | string
 
   /** The amount of space between columns. Maps to CSS [gridColumnGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap) property. */
-  columnSpacing?: number
+  columnSpacing?: number | string
 
   /** The amount of space between rows. Maps to CSS [gridRowGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap) property. */
-  rowSpacing?: number
+  rowSpacing?: number | string
+
+  /** Describes styles at various points in time. [Read about variants](/variants).*/
+  variants?: object
+
+  /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
+  mediaQueries?: object
 } & BoxProps
 
 type Props = React.RefAttributes<any> &

package/src/Group/Group.mdx

@@ -2,24 +2,25 @@
 title: Group
 category: General
 summary: Used to lay out groups of elements like cards, buttons, and/or inputs.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live
 render(
   <Group>
     <Button
-      icon={{ name: 'email' }}
+      icon={{ name: 'general.envelope' }}
       tooltip={{ title: 'Email' }}
       variant="outline"
     />
     <Button
-      icon={{ name: 'print' }}
+      icon={{ name: 'general.printer' }}
       tooltip={{ title: 'Print' }}
       variant="outline"
     />
     <Button
-      icon={{ name: 'csv-export' }}
-      tooltip={{ title: 'CSV Export' }}
+      icon={{ name: 'general.thickToBottomArrow' }}
+      tooltip={{ title: 'Download' }}
       variant="outline"
     />
   </Group>
@@ -40,7 +41,7 @@ render(
       color="grey-8"
       subdued
     >
-      <Icon name="info" size="sm" color="grey-6" marginRight={2} />
+      <Icon name="general.outlinedInfoCircle" size="sm" color="grey-6" marginRight={2} />
       <Text>
         David is an <Link to="#">Organization Administrator</Link> with full
         Administrator permission everywhere.
@@ -60,7 +61,7 @@ render(
     <Group size="md">
       <Button title="Email" variant="outline" />
       <Button
-        icon={{ name: 'print', color: 'foregroundSecondary' }}
+        icon={{ name: 'general.printer', color: 'foregroundSecondary' }}
         tooltip={{ title: 'Print' }}
       />
     </Group>
@@ -72,7 +73,7 @@ render(
 render(
   <Group radius={0} size="lg">
     <Input placeholder="Search things..." />
-    <Button icon={{ name: 'search' }} tooltip={{ title: 'Search' }} />
+    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'Search' }} />
   </Group>
 )
 ```

package/src/Group/Group.tsx

@@ -24,6 +24,11 @@ export type GroupProps = {
    * The size of the radius.
    */
   radius?: number | string
+
+  /**
+   * The amount of space or element that is inserted between each child.
+   */
+  spacing?: number | string | React.ReactNode
 }
 
 export function Group({
@@ -31,6 +36,7 @@ export function Group({
   childProps,
   children,
   radius,
+  spacing,
   ...restProps
 }: GroupProps) {
   const themeRadius = useThemeValue('group.radius')
@@ -40,12 +46,17 @@ export function Group({
   const startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop'
   const endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom'
 
+  const marginBottom = isHorizontalLayout ? 0 : '-1px'
+  const marginRight = isHorizontalLayout ? '-1px' : 0
+
   return (
-    <StackView axis={axis} spacing={-0.125} {...restProps}>
+    <StackView {...{ axis, spacing }} {...restProps}>
       {cloneChildren(children, (child, { firstChild, lastChild }) => ({
         ...childProps,
         [startRadius]: firstChild ? radiusValue : 0,
         [endRadius]: lastChild ? radiusValue : 0,
+        ...(!spacing && !lastChild && { marginBottom }),
+        ...(!spacing && !lastChild && { marginRight }),
       }))}
     </StackView>
   )

package/src/Heading/Heading.js

@@ -5,8 +5,12 @@ import Text from '../Text'
 import { useThemeValue } from '../system'
 
 type Props = {
-  /** Sets the heading tag (1-6) and the respective font size corresponding to the index position (level - 1) in theme `fontSizes` */
-  level?: 1 | 2 | 3 | 4 | 5 | 6,
+  children?: any,
+
+  /** Sets the heading tag (1-6) and the respective font size corresponding to the index position (level - 1) in theme `fontSizes`
+   * `1 | 2 | 3 | 4 | 5 | 6`
+   */
+  level?: number,
 }
 
 function Heading({ level = 1, ...restProps }: Props) {

package/src/Heading/Heading.mdx

@@ -2,6 +2,7 @@
 title: Heading
 category: General
 summary: Headings communicate the hierarchy of content to users and assistive technologies.
+propsSummary: Accepts [Text](/text) props.
 ---
 
 ```jsx live