@planningcenter/tapestry-react 2.0.1-rc.0 → 2.1.1

package/dist/types/Text/Text.d.ts

@@ -1,3 +1,6 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import * as React from 'react';
 import { BoxProps } from '../Box';
 import { MediaQueries, Variants } from '../index';
@@ -52,5 +55,5 @@ export declare type TextProps = {
     mediaQueries?: object;
 } & BoxProps;
 declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & TextProps & MediaQueries<TextProps> & Variants<TextProps>;
-export declare function Text({ as, innerRef, ...props }: Props): JSX.Element;
+export declare function Text({ as, innerRef, ...props }: Props): jsx.JSX.Element;
 export {};

package/dist/types/TileView/TileView.d.ts

@@ -1,3 +1,6 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import * as React from 'react';
 import { BoxProps } from '../Box';
 import { MediaQueries, Variants } from '../index';
@@ -17,5 +20,5 @@ export declare type TileViewProps = {
     mediaQueries?: object;
 } & BoxProps;
 declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & TileViewProps & MediaQueries<TileViewProps> & Variants<TileViewProps>;
-export declare function TileView({ as, innerRef, ...props }: Props): JSX.Element;
+export declare function TileView({ as, innerRef, ...props }: Props): jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.0.1-rc.0",
+  "version": "2.1.1",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",
@@ -13,7 +13,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/ministrycentered/tapestry-react.git"
+    "url": "https://github.com/planningcenter/tapestry-react.git"
   },
   "license": "UNLICENSED",
   "publishConfig": {
@@ -24,7 +24,6 @@
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
     "test:debug": "node --inspect-brk ./node_modules/bin/jest --runInBand --watch",
-    "icons": "node scripts/generate-icons.js",
     "prebuild": "rimraf dist",
     "build": "yarn build:cjs && yarn build:esm && yarn build:types",
     "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel src -d dist/cjs --extensions '.js,.ts,.tsx' --ignore '**/__tests__/**/*.js','**/*.test.js'",
@@ -34,13 +33,11 @@
     "develop": "yarn prebuild && yarn build:esm --watch",
     "develop:yalc": "yalc publish && chokidar src -c 'yalc publish --push --changed'",
     "lint": "eslint src",
-    "validate": "yarn lint && yarn prettier --list-different",
-    "semantic-release": "semantic-release"
+    "validate": "yarn lint && yarn prettier --list-different"
   },
   "peerDependencies": {
     "@emotion/cache": "10.x",
-    "@emotion/core": "10.x",
-    "emotion-theming": "10.x",
+    "@emotion/react": "^11.10.5",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
@@ -55,19 +52,19 @@
     "@babel/preset-flow": "7.12.13",
     "@babel/preset-react": "7.12.13",
     "@babel/preset-typescript": "^7.12.17",
-    "@emotion/cache": "10.0.29",
-    "@emotion/core": "10.0.35",
+    "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.10.5",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "5.0.3",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.20",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
     "babel-eslint": "10.1.0",
     "chokidar-cli": "^2.1.0",
-    "commitizen": "^4.2.3",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv": "^8.2.0",
-    "emotion-theming": "10.0.27",
     "eslint": "7.20.0",
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "5.2.1",
@@ -85,7 +82,6 @@
     "react-dom": "^17.0.1",
     "react-test-renderer": "17.0.1",
     "rimraf": "3.0.2",
-    "semantic-release": "19.0.3",
     "svgo": "^2.1.0",
     "svgson": "4.1.0",
     "type-fest": "^0.21.1",
@@ -93,8 +89,10 @@
   },
   "dependencies": {
     "@planningcenter/icons": "^14.0.0",
+    "@planningcenter/react-beautiful-dnd": "^13.2.1",
     "@popmotion/popcorn": "^0.4.4",
     "@popperjs/core": "^2.11.6",
+    "@react-hook/window-size": "^3.1.1",
     "date-fns": "^2.29.2",
     "focus-options-polyfill": "^1.6.0",
     "focus-visible": "^5.2.0",
@@ -104,7 +102,6 @@
     "mousetrap": "^1.6.5",
     "polished": "^4.2.2",
     "popper-max-size-modifier": "^0.2.0",
-    "react-beautiful-dnd": "^13.1.0",
     "react-sticky-box": "^1.0.2",
     "stylefire": "^7.0.3",
     "tabbable": "^6.0.0",

package/src/Avatar/Avatar.mdx

@@ -13,11 +13,11 @@ const statuses = {
 }
 function App() {
   const [status, setStatus] = React.useState(null)
-  const users = useUsers()
+  const users = useUsers(6)
   return (
     <StackView alignment="center" spacing={4}>
       <StackView axis="horizontal" alignment="end" spacing={1}>
-        {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
+        {['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size, index) => (
           <StackView key={size} spacing={1} alignment="center">
             <Avatar
               size={size}

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

@@ -4,9 +4,45 @@ import Icon from '../Icon'
 import StackView from '../StackView'
 import Text from '../Text'
 
-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 status dots, defaults to `15%`.
+   */
+  statusOffset: string | number,
+  /**
+   * Accepts an array of color names (theme token or valid html) which render as small colorized dots below the date.
+   */
+  statuses?: array,
+}
 
 const Day = ({
   backgroundColor,
@@ -28,7 +64,7 @@ const Day = ({
   statuses,
   statusOffset = '15%',
   ...restProps
-}) => {
+}: PublicProps) => {
   const affordance =
     !disabled &&
     !isMinDate &&
@@ -61,8 +97,7 @@ const Day = ({
         {...restProps}
       >
         {(isSelected || isToday || statusColor) && (
-          <Icon.Status
-            size={cellSize}
+          <Icon
             color={
               isSelected
                 ? selectedColor
@@ -70,10 +105,12 @@ const Day = ({
                 ? 'surfaceTertiary'
                 : statusColor
             }
+            left="50%"
             position="absolute"
             top="50%"
-            left="50%"
             transform="translate(-50%, -50%)"
+            name="tapestry.radio0"
+            size={cellSize}
           />
         )}
         <Text
@@ -96,7 +133,12 @@ const Day = ({
             spacing={0.25}
           >
             {statuses.map((color, index) => (
-              <DayStatus key={index} color={isSelected ? 'white' : color} />
+              <Icon
+                color={isSelected ? 'white' : color}
+                key={index}
+                name="tapestry.radio0"
+                size="5px"
+              />
             ))}
           </StackView>
         )}
@@ -105,4 +147,5 @@ const Day = ({
   )
 }
 
+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'