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

package/src/Highlight/Highlight.mdx

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

package/src/Icon/Icon.mdx

@@ -4,13 +4,67 @@ category: Primitives
 summary: Icons are used to help visually communicate actions and information to the end user.
 propsSummary: Accepts [Box](/box) props.
 order: 3
+isParent: true
 ---
 
-## Single icon sets
+## Icon sets
 
-By default, components have access to the `general` icon set. Additional icon groups can be imported through your app's ThemeProvider.
+An "icon set" groups product-specific icon paths together. By default, `tapestry-react` components have access to the `general` icon set, which contains icon paths that multiple products share.
 
-Example usage: `general.iconNameCamelCase`
+### Formatting
+
+- Prefix the icon set's name
+- Use dot notation to specify your icon
+- Render the icon name in camelCase
+
+```jsx
+// expects: iconSetName.iconName
+
+<Icon name="general.outlinedInfoCircle" />
+<Button icon={{ name: "general.outlinedInfoCircle"}} />
+```
+
+## Importing additional icon sets
+
+Additional icon sets can be imported from [libraries like `@planningcenter/icons`](https://github.com/planningcenter/icons) and exported through your app's [ThemeProvider](/theming#themeprovider). (You can import all exports [by using an asterisk](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_modules_contents).)
+
+```jsx
+import * as calendar from '@planningcenter/icons/paths/calendar'
+import * as giving from '@planningcenter/icons/paths/giving'
+import * as people from '@planningcenter/icons/paths/people'
+
+const theme = {
+  icons: {
+    calendar,
+    giving,
+    people
+  },
+}
+
+<ThemeProvider theme={theme}>
+  <Icon name="calendar.reservationBlock" />
+  <Icon name="giving.clockCircleO" />
+  <Icon name="people.photoOutline" />
+</ThemeProvider>
+```
+
+```jsx live
+render(() => {
+  return (
+    <ThemeProvider theme={{ icons }}>
+      <StackView axis="horizontal" spacing={2}>
+        <Icon name="calendar.reservationBlock" size="xl" />
+        <Icon name="giving.clockCircleO" size="xl" />
+        <Icon name="people.photoOutline" size="xl" />
+      </StackView>
+    </ThemeProvider>
+  )
+})
+```
+
+## Preview icons
+
+Preview all of the available icon sets and their icon's names from `@planningcenter/icons`.
 
 ```jsx live
 render(() => {
@@ -43,41 +97,17 @@ render(() => {
           />
         </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>
-        ))}
+          {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>
       </StackView>
     </ThemeProvider>
   )
 })
 ```
-
-## Grouped icon sets
-
-When using grouped icon sets, you can access deeper path data using dot notation.
-
-To import multiple icons from a library like [@planningcenter/icons](https://github.com/planningcenter/icons) you can [import all exports by using an asterisk](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_modules_contents):
-
-`import * as calendar from '@planningcenter/icons/paths/calendar'`
-`import * as general from '@planningcenter/icons/paths/general'`
-
-```jsx live
-render(() => {
-  return (
-    <ThemeProvider theme={{ icons }}>
-      <StackView axis="horizontal" spacing={2}>
-        <Icon name="accounts.integrations" size="xl" />
-        <Icon name="calendar.kiosk" size="xl" />
-        <Icon name="general.heart" size="xl" />
-        <Icon name="registrations.bell" size="xl" />
-      </StackView>
-    </ThemeProvider>
-  )
-})
-```

package/src/Icon/Path.js

@@ -17,4 +17,6 @@ function Path({ name = '', color = 'currentColor', ...restProps }: Props) {
   return <Box as="path" d={pathData} fill={color} {...restProps} />
 }
 
+Path.displayName = 'Icon.Path'
+
 export default Path

package/src/Icon/Path.mdx

@@ -0,0 +1,34 @@
+---
+title: Icon.Path
+category: Primitives
+summary: Path(s) are wrapped by an [Icon](/icon) component allowing for more customization.
+propsSummary: Accepts [Box](/box) props.
+parent: Icon
+---
+
+```jsx live
+render(() => {
+  const [checked, setChecked] = React.useState(false)
+  return (
+    <StackView axis="horizontal" spacing={3}>
+      <Button
+        onClick={() => setChecked(!checked)}
+        title="Toggle path"
+        variant="outline"
+      />
+      <Icon size="xl">
+        <Icon.Path
+          name="general.checkCircle"
+          visible={checked}
+          color="success"
+        />
+        <Icon.Path
+          name="general.outlinedCircleCheck"
+          visible={!checked}
+          color="grey-5"
+        />
+      </Icon>
+    </StackView>
+  )
+})
+```

package/src/Icon/Status.js

@@ -5,14 +5,26 @@ import Icon from './Icon'
 import Path from './Path'
 
 const STATUS_VARIANTS = {
-  confirmed: ['general.outlinedCircleCheck', 'success'],
-  unconfirmed: ['general.outlinedQuestionCircle', 'warning'],
-  declined: ['general.outlinedXCircle', 'error'],
+  confirmed: {
+    iconColor: 'success',
+    iconFilled: 'general.checkCircle',
+    iconOutlined: 'general.outlinedCircleCheck',
+  },
+  unconfirmed: {
+    iconColor: 'warning',
+    iconFilled: 'general.questionCircle',
+    iconOutlined: 'general.outlinedQuestionCircle',
+  },
+  declined: {
+    iconColor: 'error',
+    iconFilled: 'general.xCircle',
+    iconOutlined: 'general.outlinedXCircle',
+  },
 }
 
 export type Props = {
   /** The name of the status icon to render. */
-  variant?: 'confirmed' | 'unconfirmed' | 'declined',
+  variant: 'confirmed' | 'unconfirmed' | 'declined',
   /** Uses the filled version of the icon. */
   variantFilled?: boolean,
   /** Pass any valid color from [colors](/colors). Defaults to variant color. */
@@ -21,21 +33,18 @@ export type Props = {
 
 function Status(props: Props) {
   const { color, variant, variantFilled, ...restProps } = props
-  let variantName
-  let variantColor
-  Object.keys(STATUS_VARIANTS).some((key) => {
-    return variant === key
-      ? ([variantName, variantColor] = STATUS_VARIANTS[key])
-      : false
-  })
-  if (variantName && variantFilled) {
-    variantName += '-filled'
-  }
+  const { iconOutlined, iconFilled, iconColor } = STATUS_VARIANTS[variant]
+
+  const variantColor = color || iconColor
+  const variantIcon = variantFilled ? iconFilled : iconOutlined
+
   return (
-    <Icon name={variantName} color={color || variantColor} {...restProps}>
+    <Icon name={variantIcon} color={variantColor} {...restProps}>
       <Path name="tapestry.radio0" color={color} />
     </Icon>
   )
 }
 
+Status.displayName = 'Icon.Status'
+
 export default Status

package/src/Icon/Status.mdx

@@ -0,0 +1,17 @@
+---
+title: Icon.Status
+category: Primitives
+summary: This wraps the [Icon](/icon) component and can render 3 different statuses.
+propsSummary: Accepts [Icon](/icon) props.
+parent: Icon
+---
+
+```jsx live
+render(
+  <StackView axis="horizontal" spacing={3}>
+    <Icon.Status variant="confirmed" size="xl" />
+    <Icon.Status variant="unconfirmed" size="xl" />
+    <Icon.Status variant="declined" size="xl" />
+  </StackView>
+)
+```

package/src/Input/Inline.mdx

@@ -3,6 +3,7 @@ title: Input.Inline
 category: Forms
 summary: Composes [Input.InputField](/input.inputfield) with minimal styling.
 propsSummary: Accepts props for [Input.InputField](/input.inputfield).
+parent: Input
 ---
 
 ```jsx live

package/src/Input/Input.mdx

@@ -3,6 +3,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`.
+isParent: true
 ---
 
 ```jsx live

package/src/Input/InputBox.mdx

@@ -3,6 +3,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.
+parent: Input
 ---
 
 ```jsx live

package/src/Input/InputField.mdx

@@ -3,6 +3,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.
+parent: Input
 ---
 
 ```jsx live

package/src/Input/InputLabel.mdx

@@ -3,6 +3,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.
+parent: Input
 ---
 
 ```jsx live

package/src/PagerView/PagerView.mdx

@@ -1,7 +1,7 @@
 ---
 title: PagerView
 category: Layout
-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).
+summary: Allows paging between views. Use with the [useRovingIndex](https://github.com/planningcenter/tapestry-react/blob/next/packages/tapestry-react/src/hooks/use-roving-index.js) hook to control the [activeViewIndex](#activeViewIndex).
 propsSummary: Accepts [StackView](/stackview) props.
 ---
 

package/src/Pagination/Pagination.mdx

@@ -12,7 +12,6 @@ render(() => {
       currentPage={value}
       onPageChange={(value) => setValue(value)}
       totalPages={100}
-      visiblePages={10}
     />
   )
 })

package/src/Pagination/Pagination.tsx

@@ -0,0 +1,163 @@
+import React from 'react'
+
+import Box from '../Box'
+import Button from '../Button'
+import Group from '../Group'
+import StackView from '../StackView'
+import { range } from '../utils'
+import { useWindowWidth } from '@react-hook/window-size'
+import { useThemeValue } from '../system'
+
+function getVisiblePages(currentPage, totalPages, visiblePages) {
+  const start = Math.max(
+    1,
+    Math.min(
+      totalPages - visiblePages + 1,
+      Math.floor(currentPage - visiblePages / 2 + 1)
+    )
+  )
+  const stop = Math.min(totalPages, start + visiblePages - 1)
+  const primaryWindow = range(start, stop + 1)
+  const showFirstPage = start > 1
+  const showLastPage = stop < totalPages
+
+  if (showFirstPage) {
+    primaryWindow.shift()
+    primaryWindow.shift()
+  }
+  if (showLastPage) {
+    primaryWindow.pop()
+    primaryWindow.pop()
+  }
+
+  const first = showFirstPage ? [1, '...'] : []
+  const last = showLastPage ? ['...', totalPages] : []
+  return first.concat(primaryWindow).concat(last)
+}
+
+export type PaginationProps = {
+  /**
+   * Change the color of the active page
+   */
+  activeColor: string,
+
+  /**
+   * Current visible page number
+   */
+  currentPage: number,
+
+  /**
+   * Callback when new page is requested
+   */
+  onPageChange: (nextPage: number) => undefined,
+
+  /**
+   * Total available pages
+   */
+  totalPages: number,
+
+  /**
+   * Amount of visible pages
+   */
+  visiblePages?: number,
+}
+
+const NavButton = ({ disabled, iconName, ...props }) => {
+  return (
+    <Button
+      backgroundColor={disabled ? '#f7f7f7' : '#f2f2f2'}
+      disabled={disabled}
+      icon={{
+        color: disabled ? '#cfcfcf' : undefined,
+        name: iconName,
+        size: 'xs',
+      }}
+      opacity={1}
+      shrink={0}
+      square
+      variant="fill"
+      {...props}
+    />
+  )
+}
+
+export default function Pagination({
+  activeColor = '#5b8bf7',
+  currentPage,
+  onPageChange = () => null,
+  visiblePages,
+  totalPages = 0,
+  ...restProps
+}: PaginationProps) {
+  const { xs: xsBreakpoint } = useThemeValue('breakpoints')
+
+  const currentWidth = useWindowWidth()
+
+  function renderGap(key) {
+    return <Box key={key} userSelect="none" cursor="default" children="…" />
+  }
+
+  function renderPageLink(number) {
+    const isActive = currentPage === number
+
+    const outlineStyle = { border: '1px solid #5b8bf7', color: '#5b8bf7' }
+
+    return (
+      <Button
+        key={number}
+        focus={{ backgroundColor: '#f4f8fd', ...outlineStyle }}
+        fontWeight={500}
+        hover={{ backgroundColor: '#ffffff', ...outlineStyle }}
+        onClick={onPageChange.bind(null, number)}
+        shrink={0}
+        square
+        title={number}
+        variant={isActive ? 'fill' : 'naked'}
+        {...(isActive && { backgroundColor: '#5b8bf7', color: 'white' })}
+      />
+    )
+  }
+
+  function renderPageLinks() {
+    const visiblePagesToShow =
+      currentWidth <= xsBreakpoint ? visiblePages || 5 : visiblePages || 7
+    const pages = getVisiblePages(currentPage, totalPages, visiblePagesToShow)
+    return pages.map((page, index) =>
+      page === '...' ? renderGap(page + index) : renderPageLink(page)
+    )
+  }
+
+  if (totalPages <= 1) {
+    return null
+  } else {
+    return (
+      <StackView
+        alignment="center"
+        axis="horizontal"
+        distribution="center"
+        overflow="auto"
+        paddingVertical={1}
+        shrink={0}
+        spacing={0.5}
+        width="100%"
+        {...restProps}
+      >
+        <Group spacing={0.5}>
+          <NavButton
+            disabled={currentPage === 1}
+            iconName="general.leftChevron"
+            onClick={onPageChange.bind(null, currentPage - 1)}
+            tooltip={{ title: 'Previous Page' }}
+          />
+          <NavButton
+            disabled={currentPage === totalPages}
+            iconName="general.rightChevron"
+            onClick={onPageChange.bind(null, currentPage + 1)}
+            tooltip={{ title: 'Next Page' }}
+          />
+        </Group>
+        {renderPageLinks()}
+      </StackView>
+    )
+  }
+}

package/src/Popover/Popover.tsx

@@ -17,7 +17,7 @@ export type PopoverProps = {
   /**
    * Controls the default component or tag being rendered.
    */
-  as?: React.ReactNode
+  as?: any
 
   /**
    * The element to attach the popover to. Clones the element's ref to calculate

package/src/Portal/Portal.tsx

@@ -2,6 +2,8 @@ import * as React from 'react'
 import { createPortal } from 'react-dom'
 
 export type PortalProps = {
+  children: any
+
   /** Styles to apply to the portal root element. */
   style?: React.CSSProperties
 

package/src/Progress/Progress.mdx

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

package/src/RangeSlider/RangeSlider.mdx

@@ -3,6 +3,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.
+themeKey: rangeSlider
 ---
 
 ```jsx live

package/src/Scrim/Scrim.tsx

@@ -4,8 +4,8 @@ import StackView from '../StackView'
 
 type ScrimProps = {
   /** Gain access to the internal ref. */
-  ref?: any
-  children?: any
+  ref?: any,
+  children?: any,
 }
 
 const Scrim = React.forwardRef(function (props: ScrimProps, _ref: any) {

package/src/Section/Section.mdx

@@ -3,6 +3,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.
+themeKey: section
 ---
 
 ```jsx live

package/src/Select/Inline.js

@@ -1,8 +1,26 @@
+// @flow
 import React from 'react'
 
 import Select from './Select'
 
-function Inline({ light, hover, focus, readOnly, ...restProps }) {
+type Props = {
+  /**
+   * Changes the background and text color values
+   */
+  light?: boolean,
+  /**
+   * Accepts hover styles.
+   */
+  hover?: object,
+
+  /**
+   * Accepts focus styles.
+   */
+  focus?: object,
+  readOnly?: boolean,
+}
+
+function Inline({ light, hover, focus, readOnly, ...restProps }: Props) {
   const pseudoStyles = readOnly
     ? {}
     : { backgroundColor: light ? 'light-0' : 'highlight' }
@@ -29,4 +47,6 @@ function Inline({ light, hover, focus, readOnly, ...restProps }) {
   )
 }
 
+Inline.displayName = 'Select.Inline'
+
 export default Inline

package/src/Select/Inline.mdx

@@ -0,0 +1,27 @@
+---
+title: Select.Inline
+category: Forms
+summary: A base component that composes [Select](/select) and provides transparent styles.
+propsSummary: Accepts [Select](/select) props.
+parent: Select
+---
+
+```jsx live
+render(
+  <Box padding={2} backgroundColor="primary">
+    <Select.Inline light>
+      {generateRange(100).map((number) => (
+        <Select.Option key={number} value={number}>
+          {number}
+        </Select.Option>
+      ))}
+    </Select.Inline>
+    <Input.Inline
+      size="xl"
+      fontSize={0}
+      light
+      defaultValue="Editable Heading"
+    />
+  </Box>
+)
+```

package/src/Select/Option.js

@@ -20,7 +20,7 @@ type Props = {
 }
 
 class Option extends Component<Props> {
-  static displayName = OPTION_DISPLAY_NAME
+  static displayName = 'Select.Option'
 
   render() {
     const { children, disabled, index, text, value, ...restProps } = this.props

package/src/Select/Option.mdx

@@ -0,0 +1,30 @@
+---
+title: Select.Option
+category: Forms
+summary: Holds values that will interact with [Select](/select) and can be wrapped by [Select.OptionGroup](/select.optiongroup)
+parent: Select
+---
+
+```jsx live
+render(
+  <Select
+    emptyValue="Select a fruit"
+    tooltip={{ title: 'Select a fruit' }}
+    onChange={(e) => console.log(e)}
+  >
+    <Select.Option value="apple">Apple</Select.Option>
+    <Select.Option value="orange">Orange</Select.Option>
+    <Select.Option value="banana">Banana</Select.Option>
+    <Select.Option value="mango">Mango</Select.Option>
+    <Select.Option value="kiwi" disabled>
+      Kiwi (Out of stock)
+    </Select.Option>
+    <Select.Option value="strawberry">Strawberry</Select.Option>
+    <Divider margin={0.5} />
+    <Menu.Item distribution="fill" spacing={1}>
+      <Button title="Action 1" size="sm" />
+      <Button title="Action 2" size="sm" />
+    </Menu.Item>
+  </Select>
+)
+```

package/src/Select/OptionGroup.js

@@ -1,9 +1,15 @@
+// @flow
 import { Component } from 'react'
 
-import { OPTIONGROUP_DISPLAY_NAME } from './constants'
+type Props = {
+  /**
+   * Provide a title to a grouping of options.
+   */
+  title?: string,
+}
 
-class OptionGroup extends Component {
-  static displayName = OPTIONGROUP_DISPLAY_NAME
+class OptionGroup extends Component<Props> {
+  static displayName = 'Select.OptionGroup'
 
   render() {
     return null