@planningcenter/tapestry-react 1.4.0 → 2.0.0

package/src/HeadingUppercase/HeadingUppercase.js

@@ -1,10 +1,15 @@
+// @flow
 import React from 'react'
 
 import Text from '../Text'
-import { useThemeValue } from '../system'
+import { useThemeProps } from '../system'
 
-function HeadingUppercase({ children, ...restProps }) {
-  const themedProps = useThemeValue('HeadingUppercase')
+type Props = {
+  children?: any,
+}
+
+function HeadingUppercase({ children, ...restProps }: Props) {
+  const themeProps = useThemeProps('HeadingUppercase', restProps)
   return (
     <Text
       as="span"
@@ -15,8 +20,7 @@ function HeadingUppercase({ children, ...restProps }) {
       color="foregroundSecondary"
       shrink={0}
       margin={0}
-      {...themedProps}
-      {...restProps}
+      {...themeProps}
     >
       {children}
     </Text>

package/src/HeadingUppercase/HeadingUppercase.mdx

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

package/src/HelperDrawer/HelperDrawer.js

@@ -1,3 +1,4 @@
+// @flow
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
@@ -22,7 +23,7 @@ function Toggle({ drawerId, ...restProps }) {
   )
   return (
     <Button
-      icon={{ name: 'info' }}
+      icon={{ name: 'general.outlinedInfoCircle' }}
       tooltip={{ title: 'More info' }}
       size="xs"
       theme={false}
@@ -35,7 +36,14 @@ function Toggle({ drawerId, ...restProps }) {
   )
 }
 
-function HelperDrawer({ children, id, ...restProps }) {
+type Props = {
+  children?: any,
+
+  /** Used by the `HelperDrawer.Toggle` to connect to.  */
+  id?: string | number,
+}
+
+function HelperDrawer({ children, id, ...restProps }: Props) {
   const [open, setOpen] = useState(false)
   useEffect(() => {
     drawerToggles[id] = () => setOpen((open) => !open)

package/src/HelperDrawer/HelperDrawer.mdx

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

package/src/Highlight/Highlight.js

@@ -3,6 +3,7 @@ import React from 'react'
 
 import Text from '../Text'
 
+import { useThemeProps } from '../system'
 import { markFuzzyMatchSubstring, markStartsWithMatchSubstring } from './utils'
 
 type Props = {
@@ -31,14 +32,17 @@ type Props = {
  * Highlight or mark letters in a string using a provided query.
  */
 function Highlight({
-  color = 'primary',
   marker = markStartsWithMatchSubstring,
   query,
   text,
   ...restProps
 }: Props) {
+  const { color = 'primary', ...themeProps } = useThemeProps(
+    'highlight',
+    restProps
+  )
   return (
-    <Text as="span" {...restProps}>
+    <Text as="span" {...themeProps}>
       {marker(text, query).map((part, index) => (
         <Text
           key={index}

package/src/Highlight/Highlight.mdx

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

package/src/Icon/Icon.js

@@ -15,6 +15,12 @@ const sizes = {
 }
 
 type Props = {
+  /** Accepts the `Icon.Path` component if a `name` is not provided. */
+  children?: React.ReactNode,
+
+  /** Render custom component or HTML element tag. */
+  as?: any,
+
   /** The name of the icon to render. */
   name: string,
 

package/src/Icon/Icon.mdx

@@ -2,53 +2,58 @@
 title: Icon
 category: Primitives
 summary: Icons are used to help visually communicate actions and information to the end user.
+propsSummary: Accepts [Box](/box) props.
 order: 3
 ---
 
 ## Single icon sets
 
+By default, components have access to the `general` icon set. Additional icon groups can be imported through your app's ThemeProvider.
+
+Example usage: `general.iconNameCamelCase`
+
 ```jsx live
 render(() => {
   const [value, setValue] = React.useState('')
-  const [appName, setAppName] = React.useState(undefined)
-  const defaultIcons = designSystem.useThemeValue('icons')
-  const iconsToRender = appName ? icons[appName] : defaultIcons
+  const [appName, setAppName] = React.useState('general')
+
   return (
-    <StackView grow={1}>
-      <StackView axis="horizontal" spacing={2}>
-        <Select
-          basis={26}
-          emptyValue="Choose icon set"
-          onChange={(event) => setAppName(event.value)}
-        >
-          {appNames.map((appName) => (
-            <Select.Option key={appName} value={appName}>
-              {appName}
-            </Select.Option>
-          ))}
-        </Select>
-        <Input
-          grow={1}
-          autoFocus
-          renderLeft={<Icon name="search" />}
-          placeholder="Search by icon name"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-        />
-      </StackView>
-      <ThemeProvider theme={{ icons: iconsToRender }}>
-        <TileView minCellWidth={16} margin={4} spacing={4}>
-          {matchSorter(Object.keys(iconsToRender), value).map((iconName) => (
-            <StackView key={iconName} alignment="center" spacing={1}>
-              <Icon key={iconName} name={iconName} size="xl" />
-              <Text fontSize={5} color="foregroundSecondary">
-                {iconName}
-              </Text>
-            </StackView>
-          ))}
+    <ThemeProvider theme={{ icons }}>
+      <StackView grow={1}>
+        <StackView axis="horizontal" spacing={2}>
+          <Select
+            basis={26}
+            emptyValue="Choose icon set"
+            onChange={(event) => setAppName(event.value)}
+            defaultValue={appName}
+          >
+            {appNames.map((appName) => (
+              <Select.Option key={appName} value={appName}>
+                {appName}
+              </Select.Option>
+            ))}
+          </Select>
+          <Input
+            grow={1}
+            autoFocus
+            renderLeft={<Icon name="general.search" />}
+            placeholder="Search by icon name"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+        </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>
+        ))}
         </TileView>
-      </ThemeProvider>
-    </StackView>
+      </StackView>
+    </ThemeProvider>
   )
 })
 ```

package/src/Icon/Status.js

@@ -5,9 +5,9 @@ import Icon from './Icon'
 import Path from './Path'
 
 const STATUS_VARIANTS = {
-  confirmed: ['checkmark-circle', 'success'],
-  unconfirmed: ['question-circle', 'warning'],
-  declined: ['close-circle', 'error'],
+  confirmed: ['general.outlinedCircleCheck', 'success'],
+  unconfirmed: ['general.outlinedQuestionCircle', 'warning'],
+  declined: ['general.outlinedXCircle', 'error'],
 }
 
 export type Props = {
@@ -33,7 +33,7 @@ function Status(props: Props) {
   }
   return (
     <Icon name={variantName} color={color || variantColor} {...restProps}>
-      <Path name="radio-0" color={color} />
+      <Path name="tapestry.radio0" color={color} />
     </Icon>
   )
 }

package/src/Input/Inline.js

@@ -4,8 +4,18 @@ import React from 'react'
 import InputField from './InputField'
 
 type Props = {
-  /** Controls the color when hovered and focused. */
+  /** Controls the color when hovered and focused. (Defaults `light ? 'light-0' : 'highlight'`  */
   highlightColor: string,
+
+  /**
+   * Pass styles for when the input is focused.
+   */
+  focus?: boolean,
+
+  /**
+   * Sets `backgroundColor: highlightColor` if `readOnly` or `disabled` are  not set.
+   */
+  hover?: boolean,
 }
 
 function Inline({

package/src/Input/Inline.mdx

@@ -2,6 +2,7 @@
 title: Input.Inline
 category: Forms
 summary: Composes [Input.InputField](/input.inputfield) with minimal styling.
+propsSummary: Accepts props for [Input.InputField](/input.inputfield).
 ---
 
 ```jsx live
@@ -25,7 +26,7 @@ function App() {
         backgroundColor="surfaceTertiary"
         overflow="auto"
       >
-        <Icon name="person" size="xl" />
+        <Icon name="general.person" size="xl" />
         <Input.Inline
           highlightColor="dark-1"
           size="xl"

package/src/Input/Input.js

@@ -1,9 +1,127 @@
+// @flow
 import React, { Component } from 'react'
 
 import InputBox from './InputBox'
 import InputField from './InputField'
 
-class Input extends Component {
+type InputProps = {
+  /**
+   * Names the input and required to submit the input's `value`.
+   */
+  name: string,
+
+  /**
+   * Used to identify an input.
+   */
+  id?: string | number,
+
+  /** Specifies the type of form control to render. [Learn more on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) */
+  type?: string,
+
+  /** Provides an initial value to the input. */
+  defaultValue?: string,
+
+  /** User provided value that is passed to input. */
+  value?: string,
+
+  placeholder?: string,
+
+  /**
+   * Disables the input.
+   */
+  disabled?: boolean,
+
+  /**
+   * Prevents the user from editing the input, but still submits and receives focus.
+   */
+  readOnly: boolean,
+
+  /**
+   * Sets the input's width to the exact size of the text plus padding and cursor.
+   * Allows a string to be passed for measuring if input value is different from displayed value.
+   */
+  autoWidth?: boolean | number | string,
+
+  /**
+   * Accepts "on" or "off" values. [Learn more on MDN.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+   */
+  autoComplete?: string,
+
+  /**
+   * Input will receive focus on page load. (Limit to one per page.)
+   */
+  autoFocus?: boolean,
+
+  /**
+   * Pass styles for when the input is focused.
+   */
+  focus?: object,
+
+  /**
+   * Pass styles for when the input is hovered.
+   */
+  hover?: object,
+
+  /**
+   * Defines the minimum value that is acceptable and valid for the input. [Learn more on MDN.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min)
+   */
+  min?: string,
+
+  /**
+   * Defines the maximum value that is acceptable and valid for the input. [Learn more on MDN.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max)
+   */
+  max?: string,
+
+  /**
+   * defines the maximum number of characters the input will accept. [Learn more on MDN.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength)
+   */
+  minLength?: string,
+
+  /**
+   * defines the maximum number of characters the input will accept. [Learn more on MDN.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength)
+   */
+  maxLength?: string,
+
+  /**
+   * Maps to the internal input's `onChange` prop.
+   */
+  onChange?: () => null,
+
+  /**
+   * Maps to the internal input's `onFocus` prop.
+   */
+  onFocus?: () => null,
+
+  /**
+   * Maps to the internal input's `onBlur` prop.
+   */
+  onBlur?: () => null,
+
+  onKeyDown?: Funtion,
+  onKeyUp?: Funtion,
+
+  /**
+   * Forces the input text to stay fully selected while interacting with it.
+   */
+  highlightOnInteraction?: boolean,
+
+  /**
+   * Changes background color of the input. Both [theme colors](/colors) and html values are supported.
+   */
+  backgroundColor?: string,
+
+  /**
+   * Changes color of the input's value. Both [theme colors](/colors) and html values are supported.
+   */
+  color?: string,
+
+  /**
+   * Changes color of the input's placeholder text. Both [theme colors](/colors) and html values are supported.
+   */
+  placeholderColor?: string,
+}
+
+class Input extends Component<InputProps> {
   setInputNode = (node) => {
     this.inputNode = node
   }

package/src/Input/Input.mdx

@@ -2,6 +2,7 @@
 title: Input
 category: Forms
 summary: Composes [Input.InputBox](/input.inputbox) and [Input.InputField](/input.inputfield).
+propsSummary: Accepts props for [Input.InputBox](/input.inputbox) _and_ [Input.InputField](/input.inputfield), remaining props are forwarded to `Input.InputBox`.
 ---
 
 ```jsx live
@@ -25,9 +26,3 @@ render(() => (
   </GridView>
 ))
 ```
-
-## Props
-
----
-
-Accepts props for [Input.InputBox](/input.inputbox) _and_ [Input.InputField](/input.inputfield), remaining props are forwarded to `Input.InputBox`.

package/src/Input/InputBox.js

@@ -25,6 +25,21 @@ export type InputBoxProps = {
    */
   evenPadding?: boolean,
 
+  /**
+   * Gain access to the internal ref
+   */
+  innerRef?: any,
+
+  /**
+   * Used to identify an input.
+   */
+  id?: string | number,
+
+  /**
+   * Typically accepts a form control like `input` or [Input.InputField](/input.inputfield).
+   */
+  children?: any,
+
   /**
    * Which child index should be focused when the focus method is called.
    */
@@ -59,6 +74,16 @@ export type InputBoxProps = {
    */
   onClear?: () => void,
 
+  /**
+   * Maps to the internal input's `onFocus` prop.
+   */
+  onFocus?: () => null,
+
+  /**
+   * Maps to the internal input's `onBlur` prop.
+   */
+  onBlur?: () => null,
+
   /**
    * Allows rendering any content inside the beginning of the input box.
    */
@@ -80,10 +105,25 @@ export type InputBoxProps = {
    */
   state?: 'error' | 'success',
 
+  /**
+   * Determines where in the tab order the input should be placed for focused. (Defaults to `-1`).
+   */
+  tabIndex?: number,
+
   /**
    * Applies subdued styling when using `InputBox` as a secondary element.
    */
   subdued?: boolean,
+
+  /**
+   * Applies dropshadow while focusing on an input. (Defaults to `true`).
+   */
+  secondaryStroke?: boolean,
+
+  /**
+   * Changes background color of the input. Both [theme colors](/colors) and html values are supported.
+   */
+  backgroundColor?: string,
 }
 
 // temporary until InputBox is converted to a functional component
@@ -379,7 +419,7 @@ class InputBox extends Component<InputBoxProps> {
                 <Spinner size={size} />
               ) : onClear ? (
                 <Button
-                  icon={{ name: 'close' }}
+                  icon={{ name: 'general.x' }}
                   title="clear input value"
                   size={size}
                   theme={false}

package/src/Input/InputBox.mdx

@@ -2,6 +2,7 @@
 title: Input.InputBox
 category: Forms
 summary: A base component used in Input as well as [SegmentedControl](/segmentedcontrol), [Select](/select), and [TokenInput](/tokeninput).
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Input/InputField.js

@@ -32,6 +32,11 @@ const resetStyles = {
 }
 
 export type InputFieldProps = {
+  /**
+   * Gain access to the internal ref
+   */
+  innerRef?: any,
+
   /**
    * Sets the input's width to the exact size of the text plus padding and cursor.
    * Allows a string to be passed for measuring if input value is different from displayed value.
@@ -57,6 +62,33 @@ export type InputFieldProps = {
    * Size of the input font-size, and line-height. Based on [theming sizes](/theming#boxsizes).
    */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+
+  /**
+   * Pass styles to base Box component.
+   */
+  size?: object,
+
+  /**
+   * Disables the input.
+   */
+  disabled?: boolean,
+
+  /**
+   * Maps to the input's `onChange` prop.
+   */
+  onChange?: () => null,
+
+  /**
+   * Maps to the input's `onFocus` prop.
+   */
+  onFocus?: () => null,
+
+  /**
+   * Maps to the input's `onBlur` prop.
+   */
+  onBlur?: () => null,
+
+  onKeyDown?: Funtion,
 }
 
 class InputField extends Component<InputFieldProps> {

package/src/Input/InputField.mdx

@@ -2,6 +2,7 @@
 title: Input.InputField
 category: Forms
 summary: The base component used in Input as well as Input.Inline and Combobox.Input. Provides a clean input base to build on top of.
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

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