@planningcenter/tapestry-react 1.2.0 → 2.0.0-rc.0

package/src/CheckboxCard/CheckboxCard.mdx

@@ -1,6 +1,7 @@
 ---
 title: CheckboxCard
 category: Forms
+propsSummary: Accepts [Card](/card) props.
 ---
 
 ```jsx live

package/src/CheckboxGroup/CheckboxGroup.js

@@ -6,11 +6,17 @@ import { shallowEqual } from '../utils'
 import CheckboxGroupContext from './CheckboxGroupContext'
 
 type Props = {
+  children: any,
   /**
    * Accepts an array of strings that match the corresponding `Checkbox` values that should be checked.
    */
   value: Array<string>,
 
+  /**
+   * Maps to the corresponding `Checkbox` name prop.
+   */
+  name: string,
+
   /**
    * Callback when any child `Checkbox` fires its `onChange` callback. Receives new array of values.
    */

package/src/CheckboxGroup/CheckboxGroup.mdx

@@ -2,6 +2,7 @@
 title: CheckboxGroup
 category: Forms
 summary: Manage a group of checkboxes with one value and one callback.
+propsSummary: Accepts [Card](/card) props.
 ---
 
 ```jsx live

package/src/ChurchCenterStatus/ChurchCenterStatus.mdx

@@ -1,6 +1,7 @@
 ---
 title: ChurchCenterStatus
 category: General
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live
@@ -59,6 +60,24 @@ render(
 )
 ```
 
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled
+    ccPublishingEnabled={false}
+    ccWebEnabled
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    renderPopoverFooter={(buttonProps) => (
+      <Button title="Another link!" {...buttonProps} />
+    )}
+    settingsUrl="#settings"
+    showSettingsLink={false}
+  />
+)
+```
+
 ## Custom icons
 
 To use the Planning Center General set of icons, import the general set to your theme and define the overrides with the `icons` prop.

package/src/ChurchCenterStatus/ChurchCenterStatus.tsx

@@ -8,6 +8,11 @@ import StackView from '../StackView'
 import Text from '../Text'
 
 type ChurchCenterStatusProps = {
+  /**
+   * Pass props to the Dropdown buttons.
+   */
+  buttonProps?: object
+
   /**
    * Determines status of Church Center App.
    */
@@ -53,13 +58,26 @@ type ChurchCenterStatusProps = {
    */
   productUrl: string
 
+  /**
+   * Render nodes at the end of the popover. `buttonProps` is passed as an argument
+   * and can be spread on any `<Button />` component to match the style of the other
+   * popover links.
+   */
+  renderPopoverFooter: Function
+
   /**
    * Where the browser should navigate when settings button is pressed.
    */
   settingsUrl: string
+
+  /**
+   * Toggle the settings link display.
+   */
+  showSettingsLink?: boolean
 }
 
 export function ChurchCenterStatus({
+  buttonProps: passedButtonProps = {},
   ccAppEnabled = false,
   ccPublishingEnabled = false,
   ccWebEnabled = false,
@@ -69,7 +87,9 @@ export function ChurchCenterStatus({
   dropdownProps = {},
   icons,
   productUrl,
+  renderPopoverFooter = () => {},
   settingsUrl,
+  showSettingsLink = true,
   ...props
 }: ChurchCenterStatusProps) {
   const buttonProps: any = {
@@ -78,15 +98,20 @@ export function ChurchCenterStatus({
     paddingHorizontal: 2,
     radius: 0,
     variant: 'naked',
+    ...passedButtonProps,
   }
 
   const ccEnabled = ccAppEnabled || ccWebEnabled
+  const hasLinks =
+    showSettingsLink ||
+    (ccEnabled && ccPublishingEnabled) ||
+    !!renderPopoverFooter()
 
   const icon = {
-    check: 'checkmark',
-    exclamationTriangle: 'exclamation-triangle-filled',
-    external: 'external',
-    x: 'close',
+    check: 'general.check',
+    exclamationTriangle: 'general.exclamationTriangle',
+    external: 'general.newWindow',
+    x: 'general.x',
     ...icons,
   }
 
@@ -142,25 +167,32 @@ export function ChurchCenterStatus({
             </StackView>
           )}
         </StackView>
-        <Divider margin={0.5} />
+        {hasLinks && <Divider margin={0.5} />}
         <StackView>
-          <Button
-            external
-            title="Update settings"
-            to={settingsUrl}
-            {...buttonProps}
-          />
+          {showSettingsLink && (
+            <Button
+              external
+              title="Update settings"
+              to={settingsUrl}
+              {...buttonProps}
+            />
+          )}
           {ccEnabled && ccPublishingEnabled && (
-            <Button external to={productUrl} {...buttonProps}>
-              Visit {destinationLabel}
-              <Icon
-                color="primary"
-                name={icon.external}
-                marginLeft={1}
-                size="sm"
-              />
-            </Button>
+            <Button
+              external
+              iconRight={{
+                color: 'primary',
+                name: icon.external,
+                marginLeft: 1,
+                size: 'xs',
+              }}
+              title={`Visit ${destinationLabel}`}
+              to={productUrl}
+              {...buttonProps}
+              as="a"
+            />
           )}
+          {renderPopoverFooter(buttonProps)}
         </StackView>
       </Dropdown>
     </StackView>

package/src/Collapse/Collapse.js

@@ -7,6 +7,8 @@ import { useLayoutEffect, useRef, useState } from 'react'
 const transition = 'height 200ms ease-out'
 
 export type Props = {
+  children?: any,
+
   /**
    * Controls whether or not children are visible.
    */

package/src/ColumnView/ColumnView.js

@@ -2,12 +2,15 @@
 import React, { Children } from 'react'
 
 import StackView from '../StackView'
+import { spacingValue } from '../system'
 
 function Column() {
   return null
 }
 
 export type Props = {
+  /** Often wraps the `ColumnView.Column` component. */
+  children?: any,
   /** The amount of columns to be rendered. */
   sizes?: Array<
     | {
@@ -19,11 +22,12 @@ export type Props = {
     | string
   >,
   /** The amount of space between columns. */
-  spacing?: number,
+  spacing?: number | string,
 }
 
 function ColumnView(props: Props) {
   const { children, sizes = [], spacing, ...restProps } = props
+  const parsedSpacing = spacingValue(spacing)
   const sortedColumns = Children.toArray(children)
     .sort((a, b) => (a.props.order || 0) - (b.props.order || 0))
     .reduce((columns, cell, index) => {
@@ -45,8 +49,8 @@ function ColumnView(props: Props) {
             basis={size === 'auto' ? '100%' : size.basis || size}
             shrink={size === 'auto' ? 1 : size.shrink || 0}
             grow={size === 'auto' ? 1 : size.grow || 0}
-            marginLeft={index === 0 ? null : spacing}
-            spacing={spacing}
+            marginLeft={index === 0 ? null : parsedSpacing}
+            spacing={parsedSpacing}
           >
             {column.map((cell) => cell.props.children)}
           </StackView>

package/src/ColumnView/ColumnView.mdx

@@ -2,6 +2,7 @@
 title: ColumnView
 category: Layout
 summary: Place children into different sized columns.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Combobox/Combobox.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { Component } from 'react'
 
 import Box from '../Box'
@@ -8,7 +9,16 @@ import ComboboxItem from './ComboboxItem'
 import ComboboxItems from './ComboboxItems'
 import ComboboxPopover from './ComboboxPopover'
 
-class Combobox extends Component {
+type ComboboxProps = {
+  /**
+   * Usually takes `Combobox.Input`, `Combobox.Items` and `Combobox.Item` components.
+   */
+  children: any,
+  onSelect: Function,
+  selectedValue: any,
+}
+
+class Combobox extends Component<ComboboxProps> {
   static Input = ComboboxInput
 
   static Item = ComboboxItem

package/src/Combobox/Combobox.mdx

@@ -2,6 +2,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).
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ### Combobox
@@ -57,7 +58,7 @@ function App() {
       >
         <Combobox.Input
           autoFocus
-          renderLeft={<Icon name="search" />}
+          renderLeft={<Icon name="general.search" />}
           placeholder="Search by name, email, or phone number"
           value={value}
           onClear={value.length > 0 ? () => setValue('') : null}

package/src/Combobox/ComboboxPopover.js

@@ -188,7 +188,7 @@ class ComboboxPopover extends Component<Props> {
                       closeButton ? (
                         <Button
                           disabled={disabled}
-                          icon={{ name: 'close' }}
+                          icon={{ name: 'general.x' }}
                           title="close options"
                           theme={false}
                           {...closeButton}
@@ -197,7 +197,7 @@ class ComboboxPopover extends Component<Props> {
                         <Button
                           disabled={disabled}
                           icon={{
-                            name: isPopoverOpen ? 'close' : 'arrow-down',
+                            name: isPopoverOpen ? 'general.x' : 'general.downCaret',
                           }}
                           title={
                             isPopoverOpen ? 'close options' : 'open options'

package/src/DataTable/DataTable.js

@@ -41,6 +41,11 @@ export type Props = {
    */
   innerBodyRef?: Function,
 
+  /**
+   * Ref that is passed to `useImperativeHandle` which in turn returns `useCollapsibleRows.
+   */
+  dataTableRef?: any,
+
   /**
    * Controls whether or not sub-rows can be collapsed.
    */
@@ -193,6 +198,32 @@ export type Props = {
    */
   keyboardShortcuts?: Object<Function>,
 
+  /**
+   * `onDragStart: (event) => void`
+   *
+   * Called at the start of a child `Draggable` drag.
+   */
+  onDragStart?: Function,
+
+  /**
+   * `onDragEnd: (event) => void`
+   *
+   * Called at the end of a child `Draggable` drag.
+   */
+  onDragEnd?: Function,
+
+  /**
+   * `onDrop: (event) => void`
+   *
+   * This function will be called when a `Draggable` has been dropped. Returns the `onDragEnd` event with any `Draggable` `data` attached.
+   */
+  onDrop?: Function,
+
+  /**
+   * This prop controls whether or not the droppable can receive and reorder draggables. If true, draggables may move outside the droppable, but not added.
+   */
+  sourceOnly?: boolean,
+
   /**
    * Puts the table in a loading state and shows a spinner in the middle of the table.
    */
@@ -261,6 +292,23 @@ export type Props = {
         bodySubCell?: Object | Function,
       }
     | Array<Object | boolean>,
+
+  /**
+   * Current visible page number for pagination
+   */
+  currentPage: number,
+
+  /**
+   * `(nextPage: number) => undefined`
+   *
+   * Callback when new page is requested for pagination.
+   */
+  onPageChange: Function,
+
+  /**
+   * Total available pages for pagination.
+   */
+  totalPages: number,
 }
 
 const defaultHiddenColumnIds = []

package/src/DataTable/DataTable.mdx

@@ -279,7 +279,7 @@ const columns = [
   {
     label: 'Age',
     id: 'age',
-    header: <Icon name="person" />,
+    header: <Icon name="general.person" />,
     cell: 'age',
     css: {
       justifyContent: 'center',
@@ -330,7 +330,7 @@ render(function () {
           />
           <Button
             title="Condensed"
-            iconRight={condensed ? { name: 'checkmark' } : undefined}
+            iconRight={condensed ? { name: 'general.check' } : undefined}
             variant="outline"
             onClick={() => setCondensed(!condensed)}
           />

package/src/DataTable/components/CheckboxCell.js

@@ -1,11 +1,12 @@
 import React, { useCallback } from 'react'
 
-import Icon from './Icon'
+import Icon from '../../Icon'
+
 
 const iconPaths = {
-  fill: 'checkbox-0',
-  minus: 'checkbox-1',
-  checked: 'checkbox-2',
+  fill: 'tapestry.checkbox0',
+  minus: 'tapestry.checkbox1',
+  checked: 'tapestry.checkbox2',
 }
 
 const scaleStyles = {

package/src/DataTable/components/ColumnPicker.js

@@ -1,10 +1,8 @@
 import React from 'react'
 
-// import Checkbox from '../../Checkbox'
 import Dropdown from '../../Dropdown'
 import Text from '../../Text'
-
-import Checkbox from './CheckboxCell'
+import Checkbox from '../../Checkbox'
 
 const noop = () => null
 
@@ -17,7 +15,7 @@ function ColumnPicker({
   return (
     <Dropdown
       variant="outline"
-      icon={{ name: 'columns' }}
+      icon={{ name: 'general.threeVerticalBars' }}
       tooltip={{ title: 'Filter Columns' }}
       placement="bottom-end"
       closeOnSelect={false}
@@ -40,6 +38,8 @@ function ColumnPicker({
             <Checkbox
               checked={hiddenColumnIds.indexOf(column.id) === -1}
               onChange={noop}
+              label={null}
+              size="md"
             />
             <Text marginLeft={1}>{column.label || column.header}</Text>
           </Dropdown.Item>

package/src/DataTable/hooks/useColumnSort.js

@@ -4,7 +4,7 @@ export const SORT_ASC = 'ASC'
 export const SORT_DESC = 'DESC'
 
 export function getIconDirection(direction) {
-  return direction === SORT_ASC ? 'arrow-up' : 'arrow-down'
+  return direction === SORT_ASC ? 'general.upCaret' : 'general.downCaret'
 }
 
 export function getOppositeSortDirection(direction) {

package/src/DataTable/utils/getParsedColumns.js

@@ -8,7 +8,7 @@ import {
   useAnySubRowsOpen,
 } from '../hooks/useCollapsibleRows'
 
-import Icon from '../components/Icon'
+import Icon from '../../Icon'
 
 const buttonStyles = {
   appearance: 'none',
@@ -50,7 +50,7 @@ function CollapseHeader({ accessibility }) {
         }}
       >
         <Icon
-          name="arrow-down"
+          name="general.downCaret"
           size="sm"
           style={{
             transform: anySubRowsOpen ? undefined : 'rotate(-90deg)',
@@ -75,7 +75,7 @@ function CollapseCell({ rowIndex }) {
       }}
     >
       <Icon
-        name="arrow-down"
+        name="general.downCaret"
         size="sm"
         style={{
           transform: isSubRowOpen ? undefined : 'rotate(-90deg)',
@@ -121,7 +121,7 @@ function getParsedColumns({
           {..._dragHandleProps}
         >
           <Icon
-            name="drag-handle"
+            name="general.dragHandle"
             size="sm"
             color="foregroundTertiary"
             style={{ cursor: 'grab' }}

package/src/DateField/DateField.js

@@ -46,6 +46,16 @@ export type DateFieldProps = {
    */
   value: Date,
 
+  /**
+   * Locks external scrollbars when open.
+   */
+  lockScrollWhileOpen?: boolean,
+
+  /**
+   * Attempts to keep popover in view clipping edges if too large.
+   */
+  keepInView?: boolean,
+
   /**
    * Accepts any valid [Popover](/popover) props.
    */
@@ -140,7 +150,7 @@ class DateField extends Component<DateFieldProps> {
                 readOnly
                 value={value ? format(value, formatValue) : ''}
                 renderRight={
-                  <Icon name="calendar" color="foregroundTertiary" />
+                  <Icon name="general.calendar" color="foregroundTertiary" />
                 }
                 onClick={this.togglePopover}
                 onBlur={requestBlur}

package/src/DateField/DateField.mdx

@@ -1,6 +1,7 @@
 ---
 title: DateField
 category: Forms
+propsSummary: Accepts [Input](/input) props.
 ---
 
 ```jsx live

package/src/Divider/Divider.mdx

@@ -1,6 +1,7 @@
 ---
 title: Divider
 category: General
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/DragDrop/DragDrop.mdx

@@ -6,12 +6,12 @@ summary: Custom components that wrap [react-beautiful-dnd](https://github.com/at
 
 ```jsx live
 const navigationItems = [
-  { icon: 'house', name: 'Home' },
-  { icon: 'person', name: 'Profile' },
-  { icon: 'checkmark-circle-filled', name: 'Check-In' },
-  { icon: 'people', name: 'Groups' },
-  { icon: 'calendar', name: 'Events' },
-  { icon: 'search', name: 'Search' },
+  { icon: 'general.outlinedLocationPin', name: 'Home' },
+  { icon: 'general.person', name: 'Profile' },
+  { icon: 'general.checkCircle', name: 'Check-In' },
+  { icon: 'general.twoPeople', name: 'Groups' },
+  { icon: 'general.calendar', name: 'Events' },
+  { icon: 'general.search', name: 'Search' },
 ]
 function Item({
   icon,
@@ -24,6 +24,20 @@ function Item({
   ...restProps
 }) {
   const { hover, hoverProps } = hooks.useHover()
+  
+  const actions = {
+    add: {
+      icon: "general.plusCircle",
+      color: "success",
+      label: "Add",
+    },
+    remove: {
+      icon: "general.minusCircle",
+      color: "error",
+      label: "Remove",
+    }
+  }
+
   return (
     <Card
       axis="horizontal"
@@ -40,10 +54,10 @@ function Item({
       <Icon name={icon} color="grey-7" />
       <Text grow={1}>{name}</Text>
       <Button
-        title={type === 'remove' ? 'Remove' : 'Add'}
+        title={actions.[type].label}
         icon={{
-          name: `${type}-circle-filled`,
-          color: type === 'remove' ? 'error' : 'success',
+          name: actions.[type].icon,
+          color: actions.[type].color,
         }}
         variant="naked"
         opacity={hover && hoverEnabled ? 1 : 0}

package/src/Drawer/Drawer.js

@@ -8,8 +8,10 @@ import React, {
 } from 'react'
 
 import StackView from '../StackView'
+import { useThemeValue } from '../system'
 
 function DrawerContents({ shouldClose, onClose, ...restProps }) {
+  const themeProps = useThemeValue('drawer')
   const ref = useRef(null)
   const [show, setShow] = useState(false)
 
@@ -51,6 +53,7 @@ function DrawerContents({ shouldClose, onClose, ...restProps }) {
       boxShadow="-6px 0px 6px -4px rgba(150,150,150,0.25)"
       backgroundColor="surfaceTertiary"
       transition="transform 240ms ease-out"
+      {...themeProps}
       {...restProps}
     />
   )

package/src/Drawer/Drawer.mdx

@@ -2,6 +2,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.
 ---
 
 ```jsx live
@@ -26,7 +27,7 @@ render(() => {
         >
           <Button
             title="close drawer"
-            icon={{ name: 'close', color: 'primary' }}
+            icon={{ name: 'general.x', color: 'primary' }}
             variant="naked"
             onClick={() => setOpen(false)}
           />