@planningcenter/tapestry-react 2.0.0 → 2.1.0

package/src/Avatar/{Avatar.js → Avatar.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import React from 'react'
 
 import Box from '../Box'
@@ -9,14 +8,15 @@ const borderSizes = {
   sm: 2,
   md: 3,
   lg: 4,
-  xl: 5,
+  xl: 4,
+  xxl: 4,
 }
 
-export type Props = {
+type AvatarProps = {
   /**
    * Controls the size of the avatar.
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
   /**
    * The source of the image to display.
    */
@@ -30,7 +30,12 @@ export type Props = {
 /**
  * Displays a user's avatar in a circle.
  */
-function Avatar({ size = 'md', source, status, ...restProps }: Props) {
+export function Avatar({
+  size = 'md',
+  source,
+  status,
+  ...restProps
+}: AvatarProps) {
   const { boxSize } = useBoxSize(size)
   return (
     <Box

package/src/Badge/Badge.mdx

@@ -3,6 +3,8 @@ title: Badge
 category: General
 summary: Badges are used to inform users of the status of a piece of information or of an action that has been taken.
 propsSummary: Accepts [StackView](/stackview) props.
+isParent: true
+themeKey: badge
 ---
 
 ```jsx live

package/src/Badge/Status.mdx

@@ -2,6 +2,7 @@
 title: Badge.Status
 category: General
 propsSummary: Accepts [Badge](/badge) props.
+parent: Badge
 ---
 
 ```jsx live

package/src/Box/Box.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import * as React from 'react'
 
 import { StyleProps, MediaQueries, Variants } from '../index'
@@ -42,6 +42,7 @@ export type BoxProps = {
 
 type Props = React.RefAttributes<any> &
   React.HTMLAttributes<any> &
+  React.ImgHTMLAttributes<any> &
   BoxProps &
   MediaQueries<BoxProps> &
   Variants<BoxProps>

package/src/Button/Button.mdx

@@ -3,6 +3,7 @@ title: Button
 category: General
 summary: Used for any type of user action, including navigation.
 propsSummary: Accepts all valid HTML attributes and [StackView](/stackview) props.
+isParent: true
 ---
 
 ```jsx live

package/src/Button/Button.tsx

@@ -25,6 +25,16 @@ type ButtonProps = {
    */
   external?: boolean
 
+  /**
+   * Pass styles for when the button is focused.
+   */
+  focus?: object
+
+  /**
+   * Pass styles for when the button is hovered.
+   */
+  hover?: object
+
   /**
    * Renders an [Icon](/icon) in the center of the button. Pass a string or any valid `Icon` props.
    * Must pass a [`title`](/button#title) or [`tooltip.title`](/tooltip#title) when using icon-only buttons.
@@ -67,7 +77,7 @@ type ButtonProps = {
   title?: string | number
 
   /**
-   * Where the browser should navigate to when pressed.
+   * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
    */
   to?: string
 
@@ -87,8 +97,6 @@ type ButtonProps = {
 
   /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
   mediaQueries?: object
-
-
 } & StackViewProps
 
 type Props = React.RefAttributes<any> &
@@ -294,7 +302,7 @@ export function Button({
           Icon only buttons must define either a{' '}
           <Link
             external
-            to="https://ministrycentered.github.io/tapestry-react/button#tooltip"
+            to="https://planningcenter.github.io/tapestry-react/button#tooltip"
             weight={700}
           >
             tooltip
@@ -302,7 +310,7 @@ export function Button({
           or{' '}
           <Link
             external
-            to="https://ministrycentered.github.io/tapestry-react/button#title"
+            to="https://planningcenter.github.io/tapestry-react/button#title"
             weight={700}
           >
             title

package/src/Button/Input.mdx

@@ -2,6 +2,7 @@
 title: Button.Input
 category: General
 summary: Transforms a button into an input. Composes and forwards props to [Button](/button).
+parent: Button
 ---
 
 ```jsx live

package/src/Calendar/Calendar.mdx

@@ -3,6 +3,7 @@ title: Calendar
 category: General
 summary: Render days in a calendar to allow users to pick dates easier.
 propsSummary: Accepts [StackView](/stackview) props.
+isParent: true
 ---
 
 ### Simple

package/src/Calendar/Day.js

@@ -8,6 +8,46 @@ const DayStatus = ({ color, ...restProps }) => (
   <Icon.Status size="5px" color={color} {...restProps} />
 )
 
+export type PublicProps = {
+  children?: any,
+  /**
+   * Background color of the container.
+   */
+  backgroundColor?: string,
+  /**
+   * Text color of the date.
+   */
+  color?: string,
+  /**
+   * Disables the `onClick` callback.
+   */
+  disabled?: boolean,
+  /**
+   * Sets the font size of the date.
+   */
+  fontSize?: number | string,
+  /**
+   * Sets the font weight of the date.
+   */
+  fontWeight?: number | string,
+  /**
+   * Circular background color of the selected date, default's to theme `primary`.
+   */
+  selectedColor?: string,
+  /**
+   * Circular background color, default's to `transparent`. Can be used to provide a visual queue for a given day.
+   */
+  statusColor?: string,
+  /**
+   * Specifies the `bottom` offset of the `DayStatus` icons, defaults to `15%`.
+   */
+  statusOffset: string | number,
+  /**
+   * Accepts an array of color names (theme token or valid html) which render as small `DayStatus` icons below the date.
+   */
+  statuses?: array,
+}
+
 const Day = ({
   backgroundColor,
   cellSize,
@@ -28,7 +68,7 @@ const Day = ({
   statuses,
   statusOffset = '15%',
   ...restProps
-}) => {
+}: PublicProps) => {
   const affordance =
     !disabled &&
     !isMinDate &&
@@ -104,5 +144,5 @@ const Day = ({
     </StackView>
   )
 }
-
+Day.displayName = 'Calendar.Day'
 export default Day

package/src/Calendar/Day.mdx

@@ -0,0 +1,6 @@
+---
+title: Calendar.Day
+category: General
+summary: Provides easier custom day rendering.
+parent: Calendar
+---

package/src/Card/Card.mdx

@@ -2,18 +2,9 @@
 title: Card
 category: General
 propsSummary: Accepts [StackView](/stackview) props and valid HTML attributes.
+isParent: true
 ---
 
-```jsx live
-render(
-  <Card spacing={<Divider />}>
-    {[1, 2, 3].map((index) => (
-      <Card.Section key={index}>Card {index}</Card.Section>
-    ))}
-  </Card>
-)
-```
-
 ```jsx live
 render(
   <StackView

package/src/Card/Card.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 
 import { useThemeValue } from '../system'
 import { StackView, StackViewProps } from '../StackView'
+import { Section } from './Section'
 import { cloneChildren } from '../utils'
 
 export type CardProps = {
@@ -11,23 +12,15 @@ export type CardProps = {
   subdued?: boolean
 
   /** The size of the radius. (Default is 3px). */
-  radius?: number | string,
+  radius?: number | string
 } & StackViewProps
 
-type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & CardProps
-
-export function Section({ subdued, ...restProps }: Props) {
-  return (
-    <StackView
-      width="100%"
-      padding={1}
-      backgroundColor={subdued ? 'surfaceSecondary' : undefined}
-      {...restProps}
-    />
-  )
-}
-
-export function Card({ children, subdued, radius = 3, ...restProps }: Props) {
+export function Card({
+  children,
+  subdued,
+  radius = 3,
+  ...restProps
+}: CardProps) {
   const cardTheme = useThemeValue('card')
   return (
     <StackView
@@ -65,5 +58,4 @@ export function Card({ children, subdued, radius = 3, ...restProps }: Props) {
   )
 }
 
-Section.displayName = 'Card.Section'
 Card.Section = Section

package/src/Card/Section.mdx

@@ -0,0 +1,19 @@
+---
+title: Card.Section
+category: General
+summary: Used to wrap discrete content within `Card`.
+propsSummary: Accepts all valid HTML attributes and [StackView](/stackview) props.
+parent: Card
+---
+
+```jsx live
+render(
+  <Card spacing={<Divider />}>
+    {[1, 2, 3, 4, 5].map((index) => (
+      <Card.Section key={index} subdued={index % 2 === 0}>
+        Section {index}
+      </Card.Section>
+    ))}
+  </Card>
+)
+```

package/src/Card/Section.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+import { StackView, StackViewProps } from '../StackView'
+
+export type SectionProps = {
+  children?: React.ReactNode
+
+  /** Adds a slightly higher contrast background. */
+  subdued?: boolean
+} & StackViewProps &
+  React.RefAttributes<any> &
+  React.HTMLAttributes<any>
+
+export function Section({ subdued, ...restProps }: SectionProps) {
+  return (
+    <StackView
+      width="100%"
+      padding={1}
+      backgroundColor={subdued ? 'surfaceSecondary' : undefined}
+      {...restProps}
+    />
+  )
+}
+
+Section.displayName = 'Card.Section'

package/src/Checkbox/Checkbox.js

@@ -110,7 +110,7 @@ function Checkbox({
         Checkbox must define a{' '}
         <Link
           external
-          to="https://ministrycentered.github.io/tapestry-react/checkbox#label"
+          to="https://planningcenter.github.io/tapestry-react/checkbox#label"
           weight={700}
         >
           label

package/src/Collapse/Collapse.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import { useLayoutEffect, useRef, useState } from 'react'
 
 const transition = 'height 200ms ease-out'
@@ -109,7 +109,10 @@ function Collapse(props: Props) {
   return (
     <div
       ref={ref}
-      css={{ transition: instantRender ? undefined : transition }}
+      css={{
+        transition: instantRender ? undefined : transition,
+        visibility: open ? 'visible' : 'hidden',
+      }}
       {...restProps}
     >
       {renderChildren ? children : null}

package/src/Collapse/Collapse.test.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { render, screen } from '@testing-library/react'
+import { isInaccessible } from '@testing-library/dom'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/extend-expect'
+import { Box, Button, Collapse } from '..'
+
+describe('Collapse', () => {
+  describe('Render children', () => {
+    const Component = () => {
+      const [open, setOpen] = useState(false)
+      return (
+        <Box>
+          <Button data-testid="toggle" onClick={() => setOpen(!open)}>
+            Toggle
+          </Button>
+          <Collapse open={open}>
+            <Button data-testid="child" />
+          </Collapse>
+        </Box>
+      )
+    }
+
+    it('should render collapsed children', () => {
+      render(<Component />)
+      expect(screen.getByTestId('child')).toBeInTheDocument()
+    })
+
+    it('should hide children from accessibility tree when collapsed', () => {
+      render(<Component />)
+      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false)
+      expect(isInaccessible(screen.getByTestId('child'))).toBe(true)
+    })
+
+    it('should include children in accessibility tree when open', () => {
+      render(<Component />)
+      userEvent.click(screen.getByTestId('toggle'))
+      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false)
+      expect(isInaccessible(screen.getByTestId('child'))).toBe(false)
+    })
+  })
+})

package/src/Combobox/Combobox.mdx

@@ -1,7 +1,7 @@
 ---
 title: Combobox
 category: Forms
-summary: Used for easily selecting a list of items that are paired with a text input. Composes [Combobox.Input](https://github.com/ministrycentered/tapestry-react/blob/master/packages/tapestry-react/src/Combobox/ComboboxInput.js) and [Popover](/popover).
+summary: Used for easily selecting a list of items that are paired with a text input. Composes [Combobox.Input](https://github.com/planningcenter/tapestry-react/blob/master/packages/tapestry-react/src/Combobox/ComboboxInput.js) and [Popover](/popover).
 propsSummary: Accepts [Box](/box) props.
 ---
 

package/src/DataTable/components/Icon.js

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 
 import { useThemeValue } from '../../system'
 

package/src/DragDrop/DragDrop.js

@@ -7,7 +7,7 @@ import React, {
   useEffect,
 } from 'react'
 import { createPortal } from 'react-dom'
-import * as RBDND from 'react-beautiful-dnd'
+import * as RBDND from '@planningcenter/react-beautiful-dnd'
 import mitt from 'mitt'
 
 import StackView from '../StackView'

package/src/Drawer/Drawer.mdx

@@ -3,6 +3,7 @@ title: Drawer
 category: General
 summary: Use to add collapsible navigation items or content anchored to the right side of the screen.
 propsSummary: Accepts [StackView](/stackview) props.
+themeKey: drawer
 ---
 
 ```jsx live

package/src/EditActions/EditActions.mdx

@@ -3,6 +3,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.
+themeKey: editActions
 ---
 
 ```jsx live

package/src/FieldSet/FieldSet.mdx

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

package/src/GridView/GridView.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import * as React from 'react'
 
 import { BoxProps } from '../Box'

package/src/HeadingUppercase/HeadingUppercase.mdx

@@ -2,6 +2,7 @@
 title: HeadingUppercase
 category: General
 propsSummary: Accepts [Text](/text) props.
+themeKey: HeadingUppercase
 ---
 
 ```jsx live

package/src/HelperDrawer/HelperDrawer.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import { useCallback, useEffect, useState } from 'react'
 
 import Button from '../Button'

package/src/Highlight/Highlight.mdx

@@ -2,6 +2,7 @@
 title: Highlight
 category: General
 propsSummary: Accepts [Text](/text) props.
+themeKey: highlight
 ---
 
 ```jsx live

package/src/Icon/Icon.mdx

@@ -4,13 +4,67 @@ category: Primitives
 summary: Icons are used to help visually communicate actions and information to the end user.
 propsSummary: Accepts [Box](/box) props.
 order: 3
+isParent: true
 ---
 
-## Single icon sets
+## Icon sets
 
-By default, components have access to the `general` icon set. Additional icon groups can be imported through your app's ThemeProvider.
+An "icon set" groups product-specific icon paths together. By default, `tapestry-react` components have access to the `general` icon set, which contains icon paths that multiple products share.
 
-Example usage: `general.iconNameCamelCase`
+### Formatting
+
+- Prefix the icon set's name
+- Use dot notation to specify your icon
+- Render the icon name in camelCase
+
+```jsx
+// expects: iconSetName.iconName
+
+<Icon name="general.outlinedInfoCircle" />
+<Button icon={{ name: "general.outlinedInfoCircle"}} />
+```
+
+## Importing additional icon sets
+
+Additional icon sets can be imported from [libraries like `@planningcenter/icons`](https://github.com/planningcenter/icons) and exported through your app's [ThemeProvider](/theming#themeprovider). (You can import all exports [by using an asterisk](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_modules_contents).)
+
+```jsx
+import * as calendar from '@planningcenter/icons/paths/calendar'
+import * as giving from '@planningcenter/icons/paths/giving'
+import * as people from '@planningcenter/icons/paths/people'
+
+const theme = {
+  icons: {
+    calendar,
+    giving,
+    people
+  },
+}
+
+<ThemeProvider theme={theme}>
+  <Icon name="calendar.reservationBlock" />
+  <Icon name="giving.clockCircleO" />
+  <Icon name="people.photoOutline" />
+</ThemeProvider>
+```
+
+```jsx live
+render(() => {
+  return (
+    <ThemeProvider theme={{ icons }}>
+      <StackView axis="horizontal" spacing={2}>
+        <Icon name="calendar.reservationBlock" size="xl" />
+        <Icon name="giving.clockCircleO" size="xl" />
+        <Icon name="people.photoOutline" size="xl" />
+      </StackView>
+    </ThemeProvider>
+  )
+})
+```
+
+## Preview icons
+
+Preview all of the available icon sets and their icon's names from `@planningcenter/icons`.
 
 ```jsx live
 render(() => {
@@ -43,41 +97,17 @@ render(() => {
           />
         </StackView>
         <TileView minCellWidth={16} spacing={4} margin={4}>
-        {matchSorter(Object.keys(icons[appName]), value).map((iconName) => (
-          <StackView key={iconName} alignment="center" spacing={1}>
-            <Icon key={iconName} name={`${appName}.${iconName}`} size="xl" />
-            <Text fontSize={5} color="foregroundSecondary">
-              {iconName}
-            </Text>
-          </StackView>
-        ))}
+          {matchSorter(Object.keys(icons[appName]), value).map((iconName) => (
+            <StackView key={iconName} alignment="center" spacing={1}>
+              <Icon key={iconName} name={`${appName}.${iconName}`} size="xl" />
+              <Text fontSize={5} color="foregroundSecondary">
+                {iconName}
+              </Text>
+            </StackView>
+          ))}
         </TileView>
       </StackView>
     </ThemeProvider>
   )
 })
 ```
-
-## Grouped icon sets
-
-When using grouped icon sets, you can access deeper path data using dot notation.
-
-To import multiple icons from a library like [@planningcenter/icons](https://github.com/planningcenter/icons) you can [import all exports by using an asterisk](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_modules_contents):
-
-`import * as calendar from '@planningcenter/icons/paths/calendar'`
-`import * as general from '@planningcenter/icons/paths/general'`
-
-```jsx live
-render(() => {
-  return (
-    <ThemeProvider theme={{ icons }}>
-      <StackView axis="horizontal" spacing={2}>
-        <Icon name="accounts.integrations" size="xl" />
-        <Icon name="calendar.kiosk" size="xl" />
-        <Icon name="general.heart" size="xl" />
-        <Icon name="registrations.bell" size="xl" />
-      </StackView>
-    </ThemeProvider>
-  )
-})
-```

package/src/Icon/Path.js

@@ -17,4 +17,6 @@ function Path({ name = '', color = 'currentColor', ...restProps }: Props) {
   return <Box as="path" d={pathData} fill={color} {...restProps} />
 }
 
+Path.displayName = 'Icon.Path'
+
 export default Path

package/src/Icon/Path.mdx

@@ -0,0 +1,34 @@
+---
+title: Icon.Path
+category: Primitives
+summary: Path(s) are wrapped by an [Icon](/icon) component allowing for more customization.
+propsSummary: Accepts [Box](/box) props.
+parent: Icon
+---
+
+```jsx live
+render(() => {
+  const [checked, setChecked] = React.useState(false)
+  return (
+    <StackView axis="horizontal" spacing={3}>
+      <Button
+        onClick={() => setChecked(!checked)}
+        title="Toggle path"
+        variant="outline"
+      />
+      <Icon size="xl">
+        <Icon.Path
+          name="general.checkCircle"
+          visible={checked}
+          color="success"
+        />
+        <Icon.Path
+          name="general.outlinedCircleCheck"
+          visible={!checked}
+          color="grey-5"
+        />
+      </Icon>
+    </StackView>
+  )
+})
+```