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

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

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { BoxProps } from '../Box';
 import { MediaQueries, Variants } from '../index';
 export declare type TextProps = {
+    /**
+     * Render custom component or HTML element tag. (Defaults to a `<div>` element).
+     */
+    as?: any;
     /**
      * Gain access to the internal ref
      */
@@ -38,6 +42,14 @@ export declare type TextProps = {
      * Sets `whiteSpace: nowrap` when `false`
      */
     wrap?: boolean;
+    /**
+     * 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;
 declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & TextProps & MediaQueries<TextProps> & Variants<TextProps>;
 export declare function Text({ as, innerRef, ...props }: Props): JSX.Element;

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

@@ -1,13 +1,21 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BoxProps } from '../Box';
+import { MediaQueries, Variants } from '../index';
 export declare type TileViewProps = {
+    children?: any;
+    /** Render custom component or HTML element tag. (Defaults to a `<div>` element).*/
+    as?: any;
     /** The minimum width a cell must be. */
     minCellWidth?: number;
     /** The amount of space between children. */
-    spacing?: number;
+    spacing?: number | string;
+    /** Gain access to the internal ref */
+    innerRef?: any;
+    /** 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;
-export declare function TileView({ as, innerRef, ...props }: {
-    [x: string]: any;
-    as: any;
-    innerRef: any;
-}): JSX.Element;
+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 {};

package/dist/types/WrapView/WrapView.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { BoxProps } from '../Box';
 export declare type WrapViewProps = {
+    children?: any;
     /** The amount of space between children. */
-    spacing?: number;
+    spacing?: number | string;
 } & BoxProps;
 declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & WrapViewProps;
 export declare function WrapView({ children, spacing, ...restProps }: Props): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "1.2.0",
+  "version": "2.0.0-rc.0",
   "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",
@@ -89,8 +89,9 @@
     "typescript": "^4.1.5"
   },
   "dependencies": {
+    "@planningcenter/icons": "^14.0.0",
     "@popmotion/popcorn": "^0.4.4",
-    "@popperjs/core": "^2.6.0",
+    "@popperjs/core": "~2.9.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/user-event": "^13.1.9",
     "camel-to-kebab": "^1.1.0",
@@ -111,7 +112,7 @@
     "react-sticky-box": "^0.9.3",
     "resize-observer-polyfill": "^1.5.1",
     "stylefire": "^7.0.3",
-    "tabbable": "^5.1.5",
+    "tabbable": "~5.2.1",
     "tiny-invariant": "^1.1.0",
     "tiny-spring": "^1.0.0",
     "type-fest": "^0.21.1",

package/src/ActionsDropdown/ActionsDropdown.tsx

@@ -83,7 +83,7 @@ export function ActionsDropdown({
         hasDuplicates || hasInactiveDate
           ? {
               color: hasDuplicates ? '#E6A714' : 'white',
-              name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
+              name: hasDuplicates ? 'general.exclamationTriangle' : 'general.inactive',
               size: 'md',
             }
           : undefined
@@ -107,7 +107,7 @@ export function ActionsDropdown({
             <Icon
               color="#E6A714"
               marginTop="3px"
-              name="exclamation-triangle-filled"
+              name="general.exclamationTriangle"
             />
             <Text size={4}>
               There {duplicates.amount > 1 ? 'are' : 'is'} {duplicates.amount}{' '}
@@ -130,7 +130,7 @@ export function ActionsDropdown({
       {hasInactiveDate ? (
         <>
           <StackView axis="horizontal" padding={2} spacing={1}>
-            <Icon name="inactive" color="grey-8" marginTop="3px" />
+            <Icon name="general.inactive" color="grey-8" marginTop="3px" />
             <Text size={4}>
               Set inactive on {format(inactive.date, 'MMM dd, yyyy')}
               {inactive.reason && ` (${inactive.reason})`}.{' '}

package/src/Alert/Alert.mdx

@@ -1,6 +1,7 @@
 ---
 title: Alert
 category: General
+propsSummary: Accepts all valid HTML attributes and [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Alert/Alert.tsx

@@ -4,8 +4,13 @@ import { MediaQueries } from '../index'
 import { StackView, StackViewProps } from '../StackView'
 
 export type AlertProps = {
+  children?: any
+
   /** Sets status theme colors. */
   type?: 'warning' | 'success' | 'error'
+
+  /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
+  mediaQueries?: object
 } & StackViewProps
 
 type Props = React.RefAttributes<any> &

package/src/Avatar/Avatar.mdx

@@ -2,6 +2,7 @@
 title: Avatar
 category: Images
 summary: Avatars are used to show a thumbnail representation of a person.
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/Badge/Badge.js

@@ -1,12 +1,14 @@
 import React, { cloneElement } from 'react'
 
 import Box from '../Box'
-import { getForegroundColor, useBoxSize } from '../system'
+import { getForegroundColor, useBoxSize, useThemeProps } from '../system'
 import StackView from '../StackView'
 import Text from '../Text'
 import { stopPropagationClick } from '../utils'
 
 export type BadgeProps = {
+  children?: any,
+
   /**
    * Background color of the badge, sets an accessible text color
    */
@@ -26,23 +28,62 @@ export type BadgeProps = {
    * The text to be rendered
    */
   title?: string,
+
+  /**
+   * Allows rendering any content inside the beginning of the badge.
+   */
+  renderLeft?: string | React.ReactNode,
+
+  /**
+   * Allows rendering any content inside the end of the badge.
+   */
+  renderRight?: string | React.ReactNode,
+
+  /**
+   * `onClick={stopPropagationClick(onClick)}`
+   *
+   * Callback passed to `stopPropagationClick` which
+   * adds event.stopPropagation() to a component's onClick event.
+   * Used to prevent element's onClick from bubbling up the tree.
+   */
+  onClick?: Function,
+
+  /**
+   * The size of the radius. (Default is 3px).
+   */
+  radius?: number | string,
 }
 
 function Badge({
   children,
-  color = {
-    foreground: 'foreground',
-    background: 'surfaceTertiary',
-  },
   renderLeft,
   renderRight,
   onClick,
-  radius = 3,
-  size = 'md',
-  square,
   title,
   ...restProps
 }: BadgeProps) {
+  const {
+    color = {
+      foreground: 'foreground',
+      background: 'surfaceTertiary',
+    },
+    radius = 3,
+    size = 'md',
+    square = false,
+    ...themeProps
+  } = useThemeProps('badge', restProps)
+
+  let badgeProps = {
+    color,
+    radius,
+    size,
+    square,
+    ...themeProps,
+  }
+
+  badgeProps.backgroundColor = color.background || color
+  badgeProps.color = color.foreground || getForegroundColor(color)
+
   const {
     boxSize,
     fontSize,
@@ -50,7 +91,8 @@ function Badge({
     paddingHorizontal,
     paddingHorizontalDense,
     paddingVertical,
-  } = useBoxSize(size)
+  } = useBoxSize(badgeProps.size)
+
   const textStyle = {
     as: 'span',
     fontWeight: 'inherit',
@@ -58,26 +100,26 @@ function Badge({
     color: 'inherit',
   }
 
-  if (square || radius === 'circle') {
-    restProps.width = boxSize
-    restProps.height = boxSize
+  if (badgeProps.square || badgeProps.radius === 'circle') {
+    badgeProps.width = boxSize
+    badgeProps.height = boxSize
   }
 
-  if (radius === 'circle') {
+  if (badgeProps.radius === 'circle') {
     textStyle.position = 'absolute'
     textStyle.top = '50%'
     textStyle.left = '50%'
     textStyle.transform = 'translate(-50%, -50%)'
   }
 
-  let spacingLeft = renderLeft
+  badgeProps.paddingLeft = renderLeft
     ? boxSize + 0.5
-    : radius === 'pill'
+    : badgeProps.radius === 'pill'
     ? paddingHorizontal
     : paddingHorizontalDense
-  let spacingRight = renderRight
+  badgeProps.paddingRight = renderRight
     ? boxSize + 0.5
-    : radius === 'pill'
+    : badgeProps.radius === 'pill'
     ? paddingHorizontal
     : paddingHorizontalDense
 
@@ -87,15 +129,10 @@ function Badge({
       axis="horizontal"
       alignment="center"
       distribution="center"
-      radius={radius}
       fontSize={fontSize}
       lineHeight={lineHeight}
       minHeight={boxSize}
-      paddingLeft={spacingLeft}
-      paddingRight={spacingRight}
       paddingVertical={paddingVertical}
-      backgroundColor={color.background || color}
-      color={color.foreground || getForegroundColor(color)}
       fill="currentColor"
       textAlign="center"
       position="relative"
@@ -103,7 +140,7 @@ function Badge({
       outline={0}
       focus={{ backgroundColor: 'highlightSecondary' }}
       onClick={stopPropagationClick(onClick)}
-      {...restProps}
+      {...badgeProps}
     >
       {renderLeft && (
         <Box
@@ -119,7 +156,9 @@ function Badge({
           {typeof renderLeft === 'string'
             ? renderLeft
             : cloneElement(renderLeft, {
-                size: (renderLeft.props && renderLeft.props.size) || size,
+                size:
+                  (renderLeft.props && renderLeft.props.size) ||
+                  badgeProps.size,
               })}
         </Box>
       )}
@@ -144,7 +183,9 @@ function Badge({
           {typeof renderRight === 'string'
             ? renderRight
             : cloneElement(renderRight, {
-                size: (renderRight.props && renderRight.props.size) || size,
+                size:
+                  (renderRight.props && renderRight.props.size) ||
+                  badgeProps.size,
               })}
         </Box>
       )}

package/src/Badge/Badge.mdx

@@ -2,6 +2,7 @@
 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.
 ---
 
 ```jsx live
@@ -50,7 +51,7 @@ render(() => (
     renderRight={
       <Button
         title="clear"
-        icon={{ name: 'close' }}
+        icon={{ name: 'general.x' }}
         radiusLeft={0}
         onClick={() => alert('clear badge')}
       />

package/src/Badge/Status.js

@@ -9,11 +9,11 @@ import Badge from './Badge'
 const statuses = {
   error: {
     color: 'error',
-    icon: 'close',
+    icon: 'general.x',
   },
   success: {
     color: 'success',
-    icon: 'checkmark',
+    icon: 'general.check',
   },
 }
 

package/src/Badge/Status.mdx

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

package/src/Box/Box.mdx

@@ -1,7 +1,8 @@
 ---
 title: Box
 category: Primitives
-summary: Box is the primitive component that other components build from. It is responsible for processing all [style props](/style-props).
+summary: Box is the primitive component that other components build from.
+propsSummary: Accepts all [style props](/style-props) and valid HTML attributes.
 order: 1
 ---
 

package/src/Box/Box.tsx

@@ -8,8 +8,9 @@ import splitStyles from '../system/split-styles'
 import { useVariant } from '../VariantProvider'
 
 export type BoxProps = {
+  children?: any
   /**
-   * Render custom component or HTML element tag.
+   * Render custom component or HTML element tag. (Defaults to a `<div>` element).
    */
   as?: any
 
@@ -19,7 +20,7 @@ export type BoxProps = {
   innerRef?: any
 
   /**
-   * If true, sets "display: inline-block", otherwise it defaults to "display: block"
+   * If true, sets `display: inline-block`, otherwise it defaults to `display: block`
    */
   inline?: boolean
 
@@ -27,6 +28,16 @@ export type BoxProps = {
    * Controls display property. If `false` sets `display: none`, otherwise defaults to initial display value.
    */
   visible?: boolean
+
+  /** 
+  * Describes styles at various points in time. [Read about variants](/variants). 
+  */
+   variants?: object
+
+   /** 
+   * Describes props at different breakpoints. [Read about mediaQueries](/responsive). 
+   */
+   mediaQueries?: object
 } & StyleProps
 
 type Props = React.RefAttributes<any> &

package/src/Button/Button.mdx

@@ -2,6 +2,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.
 ---
 
 ```jsx live
@@ -98,7 +99,7 @@ render(
           key={size}
           size={size}
           title="Button"
-          iconLeft={{ name: 'people' }}
+          iconLeft={{ name: 'general.twoPeople' }}
         />
       ))}
     </StackView>
@@ -109,7 +110,7 @@ render(
           key={size}
           size={size}
           title="Button"
-          iconRight={{ name: 'arrow-down' }}
+          iconRight={{ name: 'general.downCaret' }}
         />
       ))}
     </StackView>
@@ -119,7 +120,7 @@ render(
         <Button
           key={size}
           size={size}
-          icon={{ name: 'person' }}
+          icon={{ name: 'general.person' }}
           tooltip={{ title: 'person' }}
           radius="circle"
         />

package/src/Button/Button.tsx

@@ -13,6 +13,8 @@ import { useAccessibilityViolation } from '../hooks/use-accessibility-violation'
 import Input from './Input'
 
 type ButtonProps = {
+  children?: any
+
   /**
    * Disables button by removing click handlers and making the button transparent.
    */
@@ -78,6 +80,15 @@ type ButtonProps = {
    * Determines the modified style of the button.
    */
   variant?: 'fill' | 'outline' | 'naked'
+
+  onClick?: Function
+
+  onKeyDown?: Function
+
+  /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
+  mediaQueries?: object
+
+
 } & StackViewProps
 
 type Props = React.RefAttributes<any> &
@@ -116,6 +127,7 @@ export function Button({
 
   let buttonProps: any = {
     alignment: 'center',
+    as: (restProps as any).href || to ? 'a' : 'div',
     axis: 'horizontal',
     distribution: 'center',
     fontSize,
@@ -127,7 +139,6 @@ export function Button({
     role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
-    as: (restProps as any).href || to ? 'a' : 'div',
     userSelect: 'none',
     zIndex: 1,
   }
@@ -271,6 +282,11 @@ export function Button({
     }
   }
 
+  // pass to if as is defined
+  if ((restProps as any).as) {
+    buttonProps.to = to
+  }
+
   if (process.env.NODE_ENV !== 'production') {
     if (icon && !(title || (tooltip && (tooltip as any).title))) {
       const { tooltipProps, wrapperProps } = useAccessibilityViolation(

package/src/Button/Input.mdx

@@ -11,7 +11,7 @@ render(
       title="Add Person"
       theme="light"
       iconLeft={{
-        name: 'person',
+        name: 'general.person',
         color: 'light-6',
       }}
     >
@@ -109,7 +109,7 @@ render(() => {
         buttonProps={{
           innerRef: containerRef,
           title: 'search',
-          icon: { name: 'topbar-search', color: 'light-9' },
+          icon: { name: 'general.search', color: 'light-9' },
           theme: 'light',
           onClose: () => setValue(''),
         }}

package/src/Calendar/Calendar.js

@@ -68,6 +68,11 @@ const sizes = {
 }
 
 export type CalendarProps = {
+  /**
+   * Gain access to the outer wrapping `StackView` ref
+   */
+  calendarRef?: any,
+
   /**
    * Used to calculate the month and year.
    */
@@ -256,7 +261,7 @@ const Calendar = forwardRef(
           >
             <Button
               title="Previous month"
-              icon={{ name: 'caret-left' }}
+              icon={{ name: 'general.leftChevron', size: "xxs" }}
               disabled={
                 isYearsView
                   ? currentYear <= minYear
@@ -266,12 +271,12 @@ const Calendar = forwardRef(
             />
             <Button
               tooltip={{ title: 'Today' }}
-              icon={{ name: 'radio-1' }}
+              icon={{ name: 'tapestry.radio1' }}
               onClick={() => setDate(TODAY, true)}
             />
             <Button
               title="Next month"
-              icon={{ name: 'caret-right' }}
+              icon={{ name: 'general.rightChevron', size: "xxs"}}
               disabled={
                 isYearsView
                   ? currentYear >= maxYear

package/src/Calendar/Calendar.mdx

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

package/src/Card/Card.mdx

@@ -1,6 +1,7 @@
 ---
 title: Card
 category: General
+propsSummary: Accepts [StackView](/stackview) props and valid HTML attributes.
 ---
 
 ```jsx live

package/src/Card/Card.tsx

@@ -5,13 +5,18 @@ import { StackView, StackViewProps } from '../StackView'
 import { cloneChildren } from '../utils'
 
 export type CardProps = {
+  children?: React.ReactNode
+
   /** Adds a slightly higher contrast background. */
   subdued?: boolean
+
+  /** The size of the radius. (Default is 3px). */
+  radius?: number | string,
 } & StackViewProps
 
 type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & CardProps
 
-function Section({ subdued, ...restProps }: Props) {
+export function Section({ subdued, ...restProps }: Props) {
   return (
     <StackView
       width="100%"
@@ -60,4 +65,5 @@ export function Card({ children, subdued, radius = 3, ...restProps }: Props) {
   )
 }
 
+Section.displayName = 'Card.Section'
 Card.Section = Section

package/src/Checkbox/Checkbox.js

@@ -14,9 +14,9 @@ import { useAccessibilityViolation } from '../hooks/use-accessibility-violation'
 import { mergeProps } from '../utils'
 
 const iconPaths = {
-  fill: 'checkbox-0',
-  minus: 'checkbox-1',
-  checked: 'checkbox-2',
+  fill: 'tapestry.checkbox0',
+  minus: 'tapestry.checkbox1',
+  checked: 'tapestry.checkbox2',
 }
 
 export type Props = {
@@ -32,6 +32,11 @@ export type Props = {
    */
   label?: string | null,
 
+  /**
+   * Connects input to its corrospending label's `htmlFor`.
+   */
+  id?: string | number,
+
   /**
    * If `true`, puts the checkbox in an indeterminate state.
    */

package/src/Checkbox/Checkbox.mdx

@@ -2,6 +2,7 @@
 title: Checkbox
 category: Forms
 summary: Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have a user indicate that they agree to specific terms and conditions.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/CheckboxCard/CheckboxCard.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { useState } from 'react'
 
 import Box from '../Box'
@@ -5,7 +6,31 @@ import Card from '../Card'
 import Checkbox from '../Checkbox'
 import Text from '../Text'
 
-function CheckboxCard({ checked, onChange, subtitle, title, ...restProps }) {
+type Props = {
+  /**
+   * Checks the checkbox, will be overriden if indeterminate is `true`.
+   */
+  checked?: boolean,
+
+  /**
+   * Maps to the internal input's `onChange` prop.
+   */
+  onChange?: () => null,
+
+  /** First line of text in the card, in a darker color. */
+  title?: string,
+
+  /** Second line of text in the card, in a lighter color. */
+  subtitle?: string,
+}
+
+function CheckboxCard({
+  checked,
+  onChange,
+  subtitle,
+  title,
+  ...restProps
+}: Props) {
   const [localChecked, setLocalChecked] = useState(false)
   const isActive = checked === undefined ? localChecked : checked
   return (