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

package/src/Input/InputLabel.mdx

@@ -2,6 +2,7 @@
 title: Input.InputLabel
 category: Forms
 summary: Provides accessibility as well as usability improvements for mouse users by allowing the user to click the <InputLabel/> component to focus the respective control. This mimics the browsers native label tag, but allows use with custom components like <Select/>.
+propsSummary: Accepts [Text](/text) props.
 ---
 
 ```jsx live

package/src/Link/Link.js

@@ -23,6 +23,16 @@ type Props = {
    * Show an underline when hovering link. Defaults to `true`.
    */
   underline: boolean,
+
+  /**
+   * Accepts hover styles.
+   */
+  hover?: object,
+
+  /**
+   * Accepts hover styles.
+   */
+  focus?: object,
 }
 
 function Link({

package/src/Link/Link.mdx

@@ -1,6 +1,7 @@
 ---
 title: Link
 category: General
+propsSummary: Accepts [Text](/text) props.
 ---
 
 ```jsx live
@@ -18,7 +19,7 @@ render(
     alignment="center"
     padding={1}
     backgroundColor="primary"
-    spacing={<Icon name="caret-right" color="white" marginHorizontal={0.25} />}
+    spacing={<Icon name="general.rightChevron" size="xs" color="white" marginHorizontal={0.5} />}
   >
     <Link to="#" color="white">
       First Church Of Carlsbad

package/src/LinkList/LinkList.js

@@ -1,10 +1,16 @@
+// @flow
 import React from 'react'
 
 import Divider from '../Divider'
 import Link from '../Link'
 import StackView from '../StackView'
 
-function LinkList({ links, ...restProps }) {
+type Props = {
+  /** Accepts an array of objects that specify the `name` and `url` for each link.  */
+  links?: array,
+}
+
+function LinkList({ links, ...restProps }: Props) {
   return (
     <StackView
       axis="horizontal"

package/src/LinkList/LinkList.mdx

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

package/src/List/List.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react'
 
 import StackView from '../StackView'
@@ -5,6 +6,29 @@ import { cloneChildren } from '../utils'
 
 import ListItem from './ListItem'
 
+type Props = {
+  /** Can accept any HTML element or custom component, but most often takes the `List.Item` component. */
+  children?: React.ReactNode,
+
+  /** When set this will add a 1px border top and bottom, along with the `borderColor`.  */
+  border?: Boolean,
+
+  /** Defaults to "separatorTertiary".  */
+  borderColor?: string,
+
+  /** Adds a dividing line between the List's children. (Defaults to true).  */
+  divider?: Boolean,
+
+  /** Defaults to "separatorTertiary".  */
+  dividerColor?: string,
+
+  /**
+   * `(index) => {}`
+   *
+   * Passes a callback function to the list's children. If the child is `List.Item` it will display a remove button and execute the callback.  */
+  onItemRemoveRequest?: Function,
+}
+
 function List({
   border,
   borderColor = 'separatorTertiary',
@@ -13,7 +37,7 @@ function List({
   dividerColor = 'separatorTertiary',
   onItemRemoveRequest,
   ...restProps
-}) {
+}: Props) {
   if (border) {
     restProps.borderTopWidth = 1
     restProps.borderTopColor = borderColor

package/src/List/List.mdx

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

package/src/List/ListItem.js

@@ -24,7 +24,7 @@ function ListItem({
       {children}
       {onRemoveRequest && (
         <Button
-          icon={{ name: 'remove-circle-filled' }}
+          icon={{ name: 'general.minusCircle' }}
           title={removeTitle}
           size="sm"
           theme="error"

package/src/Logo/Logo.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react'
 
 import Box from '../Box'
@@ -79,7 +80,15 @@ const type = {
   },
 }
 
-const Logo = ({ name, markOnly, ...restProps }) => {
+type Props = {
+  /** Accepts `"services"` or `"music-stand"`. */
+  name?: string,
+
+  /** Only displays the "iconmark" portion of the logo and not the wordmark. */
+  markOnly?: Boolean,
+}
+
+const Logo = ({ name, markOnly, ...restProps }: Props) => {
   if (markOnly) {
     return (
       <Box

package/src/Logo/Logo.mdx

@@ -2,6 +2,7 @@
 title: Logo
 category: General
 summary: Generates an SVG for the respective app's logo which includes the mark and/or type.
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/Menu/Heading.js

@@ -15,4 +15,5 @@ function Heading({ children, ...restProps }) {
   )
 }
 
+Heading.displayName = 'Menu.Heading'
 export default Heading

package/src/Menu/Menu.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react'
 
 import Card from '../Card'
@@ -5,7 +6,12 @@ import Card from '../Card'
 import Heading from './Heading'
 import Item from './Item'
 
-function Menu(props) {
+export type Props = {
+  /** Often wraps `Menu.Item` and `Menu.Heading` components. */
+  children?: any,
+}
+
+function Menu(props: Props) {
   return (
     <Card
       paddingVertical={0.5}

package/src/Menu/Menu.mdx

@@ -1,6 +1,7 @@
 ---
 title: Menu
 category: General
+propsSummary: Accepts [Card](/card) props.
 ---
 
 ```jsx live
@@ -19,7 +20,7 @@ render(
     <Menu.Item isHighlighted>Can be highlighted</Menu.Item>
     <Menu.Item>Should be used as a child of Menu</Menu.Item>
     <Menu.Item>
-      <Icon name="person" marginRight={1} /> Add icons and other things
+      <Icon name="general.person" marginRight={1} /> Add icons and other things
     </Menu.Item>
   </Menu>
 )

package/src/Modal/Modal.js

@@ -7,6 +7,7 @@ import { useDocumentEvent } from '../hooks'
 import { trapFocus } from '../utils'
 
 export type ModalProps = {
+  children?: any,
   /**
    * Close the modal when clicking outside of it.
    */

package/src/Modal/Modal.mdx

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

package/src/NumberField/NumberField.js

@@ -5,6 +5,10 @@ import InputField from '../Input/InputField'
 import { padNumber, getTabbableSiblings } from '../utils'
 
 type Props = {
+  /**
+   * Render custom component or HTML element tag. (Defaults to a [InputField](/input.inputfield) component.). */
+  as?: any,
+
   /**
    * An array of keys to ignore when pushed.
    * ex: ["ArrowUp", "ArrowDown"].
@@ -29,11 +33,23 @@ type Props = {
    */
   onChange: (value: string) => null,
 
+  /**
+   * Maps to the input's `onBlur` prop.
+   */
+  onBlur?: () => null,
+
+  onKeyDown?: Function,
+
   /**
    * The amount of 0s to pad the value with.
    */
   pad: number,
 
+  /**
+   * Forces the input text to stay fully selected while interacting with it.
+   */
+  highlightOnInteraction: boolean,
+
   /**
    * String to display when value is empty.
    */
@@ -49,6 +65,9 @@ type Props = {
    * The value of the input.
    */
   value: number,
+
+  autoWidth: boolean,
+  moveFocusOnMax: boolean,
 }
 
 const MIN_VALUE = -Infinity

package/src/Page/Page.mdx

@@ -102,7 +102,7 @@ render(
       }
     >
       <StackView axis="horizontal" alignment="center" spacing={2}>
-        <Icon name="person" size="xxl" color="white" />
+        <Icon name="general.person" size="xxl" color="white" />
         <StackView>
           <Heading level={5} color="light-7">
             Steingard Tests > Sunday

package/src/PagerView/PagerView.js

@@ -48,6 +48,7 @@ function parseTrackValue(value) {
 const PageViewContext = createContext({})
 
 export type Props = {
+  children?: any,
   /**
    * Which axis the track moves on. Defaults to `horizontal`.
    */

package/src/PagerView/PagerView.mdx

@@ -1,7 +1,8 @@
 ---
 title: PagerView
 category: Layout
-summary: Allows paging between views. Use with the `useRovingIndex` hook to control the [activeViewIndex](#activeViewIndex).
+summary: Allows paging between views. Use with the [useRovingIndex](https://github.com/ministrycentered/tapestry-react/blob/next/packages/tapestry-react/src/hooks/use-roving-index.js) hook to control the [activeViewIndex](#activeViewIndex).
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live
@@ -45,14 +46,14 @@ render(() => {
       <StackView axis="horizontal" distribution="center" spacing={1}>
         <Button
           title="Prev"
-          icon={{ name: 'caret-left' }}
+          icon={{ name: 'general.leftChevron', size: 'sm' }}
           radius="circle"
           disabled={moveBackwardDisabled}
           onClick={() => moveActiveIndex(-1)}
         />
         <Button
           title="Next"
-          icon={{ name: 'caret-right' }}
+          icon={{ name: 'general.rightChevron', size: 'sm' }}
           radius="circle"
           disabled={moveForwardDisabled}
           onClick={() => moveActiveIndex(1)}
@@ -83,7 +84,7 @@ function Arrangement({ expanded, expandOrShrink }) {
         actions={
           <Button
             title={expanded ? 'show single-view' : 'show multi-view'}
-            icon={{ name: expanded ? 'caret-shrink' : 'caret-grow' }}
+            icon={{ name: expanded ? 'general.twoInwardChevrons' : 'general.twoOutwardChevrons' }}
             variant="naked"
             onClick={expandOrShrink}
           />
@@ -99,10 +100,10 @@ function Key({ name, expanded, expandOrShrink }) {
       <Toolbar
         title={name}
         actions={[
-          <Button title="edit" icon={{ name: 'pencil' }} variant="naked" />,
+          <Button title="edit" icon={{ name: 'general.pencil' }} variant="naked" />,
           <Button
             title={expanded ? 'show single-view' : 'show multi-view'}
-            icon={{ name: expanded ? 'caret-shrink' : 'caret-grow' }}
+            icon={{ name: expanded ? 'general.twoInwardChevrons' : 'general.twoOutwardChevrons' }}
             variant="naked"
             onClick={expandOrShrink}
           />,
@@ -157,7 +158,7 @@ render(() => {
       <GridView columns="auto 1fr auto" spacing={1}>
         <Button
           title="Prev"
-          icon={{ name: 'caret-left' }}
+          icon={{ name: 'general.leftChevron', size: 'sm' }}
           radius="circle"
           disabled={moveBackwardDisabled}
           onClick={() => moveActiveIndex(-1)}
@@ -187,7 +188,7 @@ render(() => {
         </StackView>
         <Button
           title="Next"
-          icon={{ name: 'caret-right' }}
+          icon={{ name: 'general.rightChevron', size: 'sm' }}
           radius="circle"
           disabled={moveForwardDisabled}
           onClick={() => moveActiveIndex(1)}

package/src/Pagination/Pagination.js

@@ -123,7 +123,7 @@ class Pagination extends Component<PaginationProps> {
         <Button
           onClick={onPageChange.bind(null, currentPage - 1)}
           disabled={currentPage === 1}
-          icon={{ name: 'caret-left' }}
+          icon={{ name: 'general.leftChevron', size: 'xs' }}
           tooltip={{ title: 'Previous Page' }}
           variant="naked"
           shrink={0}
@@ -132,7 +132,7 @@ class Pagination extends Component<PaginationProps> {
         <Button
           onClick={onPageChange.bind(null, currentPage + 1)}
           disabled={currentPage === totalPages}
-          icon={{ name: 'caret-right' }}
+          icon={{ name: 'general.rightChevron', size: 'xs' }}
           tooltip={{ title: 'Next Page' }}
           variant="naked"
           shrink={0}

package/src/Pagination/Pagination.mdx

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

package/src/Progress/Progress.js

@@ -2,6 +2,7 @@
 import React from 'react'
 
 import Box from '../Box'
+import { useThemeProps } from '../system'
 
 export type Props = {
   /**
@@ -14,8 +15,12 @@ export type Props = {
   activeColor?: string,
 }
 
-function Progress(props: Props) {
-  const { value, activeColor = 'primary', ...restProps } = props
+function Progress({ value, ...restProps }: Props) {
+  const { activeColor = 'primary', ...themeProps } = useThemeProps(
+    'progress',
+    restProps
+  )
+
   return (
     <Box
       role="progressbar"
@@ -26,7 +31,7 @@ function Progress(props: Props) {
       position="relative"
       overflow="hidden"
       backgroundColor="grey-3"
-      {...restProps}
+      {...themeProps}
     >
       <Box
         position="absolute"

package/src/Progress/Progress.mdx

@@ -2,6 +2,7 @@
 title: Progress
 category: Indicators
 summary: Display progress towards the completion of a task. Composes [Box](/box).
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/Radio/Radio.js

@@ -10,8 +10,8 @@ import VariantProvider from '../VariantProvider'
 import { useThemeValue } from '../system'
 
 const iconPaths = {
-  fill: 'radio-0',
-  checked: 'radio-1',
+  fill: 'tapestry.radio0',
+  checked: 'tapestry.radio1',
 }
 
 export type Props = {
@@ -25,6 +25,8 @@ export type Props = {
    */
   label?: string,
 
+  id?: string | number,
+
   /**
    * Checks the radio.
    */

package/src/Radio/Radio.mdx

@@ -2,6 +2,7 @@
 title: Radio
 category: Forms
 summary: Use radios to present a list of options where users can only make a single selection.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/RangeSlider/RangeSlider.js

@@ -4,6 +4,7 @@ import { clamp, snap } from '@popmotion/popcorn'
 
 import Box from '../Box'
 import { useMeasure } from '../hooks'
+import { useThemeProps } from '../system'
 
 export type Props = {
   /**
@@ -34,6 +35,10 @@ export type Props = {
     progress?: Object,
     thumb?: Object,
   },
+  /**
+   * Prevents the slider from being used and lowers its opacity.
+   */
+  disabled?: boolean,
 }
 
 function RangeSlider(props: Props) {
@@ -44,10 +49,14 @@ function RangeSlider(props: Props) {
     disabled,
     value,
     onChange,
-    variant = {},
     ...restProps
   } = props
 
+  const { variant = {}, ...themeProps } = useThemeProps(
+    'rangeSlider',
+    restProps
+  )
+
   const snapTo = snap(step)
   const sliderRef = useRef()
   const trackRef = useRef()
@@ -185,7 +194,7 @@ function RangeSlider(props: Props) {
       opacity={disabled ? 0.65 : undefined}
       onMouseDown={disabled ? undefined : handleTrackPointerDown}
       onTouchStart={disabled ? undefined : handleTrackPointerDown}
-      {...restProps}
+      {...themeProps}
     >
       <Box
         innerRef={trackRef}

package/src/RangeSlider/RangeSlider.mdx

@@ -2,6 +2,7 @@
 title: RangeSlider
 category: Forms
 summary: Allow the user to specify a numeric value which must be no less than a minimum value and no more than a maximum value. Composes [Box](/box).
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live
@@ -9,16 +10,18 @@ render(() => {
   const [volume, setVolume] = React.useState(50)
   const muted = volume === 0
   return (
-    <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
-      <Icon>
-        <Icon.Path name="volume-0" />
-        <Icon.Path name="volume-1" visible={muted} />
-        <Icon.Path name="volume-2" visible={!muted} />
-        <Icon.Path name="volume-3" visible={!muted && volume > 50} />
-      </Icon>
-      <RangeSlider value={volume} onChange={setVolume} />
-      <Text>{volume}</Text>
-    </StackView>
+    <ThemeProvider theme={{ icons }}>
+      <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
+        <Icon>
+          <Icon.Path name="services.volume0" />
+          <Icon.Path name="services.volume1" visible={muted} />
+          <Icon.Path name="services.volume2" visible={!muted} />
+          <Icon.Path name="services.volume3" visible={!muted && volume > 50} />
+        </Icon>
+        <RangeSlider value={volume} onChange={setVolume} />
+        <Text>{volume}</Text>
+      </StackView>
+    </ThemeProvider>
   )
 })
 ```

package/src/ScreenReader/ScreenReader.js

@@ -1,8 +1,13 @@
+// @flow
 import React from 'react'
 
 import Box from '../Box'
 
-function ScreenReader(props) {
+export type Props = {
+  children?: any,
+}
+
+function ScreenReader(props: Props) {
   return (
     <Box
       css={{

package/src/ScreenReader/ScreenReader.mdx

@@ -2,6 +2,7 @@
 title: ScreenReader
 category: General
 summary: Use to display screen reader only content.
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/Scrim/Scrim.mdx

@@ -2,6 +2,7 @@
 title: Scrim
 category: Overlays
 summary: Scrims are used to display focused content like alerts, modals, or media previews.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Scrim/Scrim.tsx

@@ -2,7 +2,13 @@ import * as React from 'react'
 
 import StackView from '../StackView'
 
-const Scrim = React.forwardRef(function (props, ref) {
+type ScrimProps = {
+  /** Gain access to the internal ref. */
+  ref?: any,
+  children?: any,
+}
+
+const Scrim = React.forwardRef(function (props: ScrimProps,) {
   React.useLayoutEffect(() => {
     document.body.style.overflow = 'hidden'
     return () => {
@@ -11,7 +17,7 @@ const Scrim = React.forwardRef(function (props, ref) {
   }, [])
   return (
     <StackView
-      innerRef={ref}
+      innerRef={props.ref}
       position="fixed"
       top={0}
       right={0}

package/src/Section/Section.js

@@ -5,6 +5,7 @@ import type { ChildrenArray } from 'react'
 import Heading from '../Heading'
 import Toolbar from '../Toolbar'
 import StackView from '../StackView'
+import { useThemeProps } from '../system'
 
 import type { ToolbarProps } from '../Toolbar'
 
@@ -16,17 +17,27 @@ function Section({
   actions = [],
   children,
   count,
-  countColor,
   helpContent,
   onStatusClearRequest,
   status,
   title,
   ...restProps
 }: SectionProps) {
+  const {
+    countColor,
+    headingProps,
+    toolbarProps,
+    ...themeProps
+  } = useThemeProps('section', restProps)
+
   return (
-    <StackView as="section" {...restProps}>
+    <StackView as="section" {...themeProps}>
       <Toolbar
-        title={<Heading level={3}>{title}</Heading>}
+        title={
+          <Heading level={3} {...headingProps}>
+            {title}
+          </Heading>
+        }
         helpContent={helpContent}
         actions={actions}
         count={count}
@@ -34,6 +45,7 @@ function Section({
         status={status}
         onStatusClearRequest={onStatusClearRequest}
         marginBottom={2}
+        {...toolbarProps}
       />
       {children}
     </StackView>

package/src/Section/Section.mdx

@@ -2,6 +2,7 @@
 title: Section
 category: General
 summary: Sections are used within `Page` components to break up content into sections that always display a `Toolbar` at the top.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live