@planningcenter/tapestry-react 2.10.0-rc.2 → 2.10.0-rc.4

package/src/ChurchCenterStatus/ChurchCenterStatus.tsx

@@ -0,0 +1,200 @@
+import React from 'react'
+
+import Button from '../Button'
+import Divider from '../Divider'
+import Dropdown from '../Dropdown'
+import Icon from '../Icon'
+import StackView from '../StackView'
+import Text from '../Text'
+
+type ChurchCenterStatusProps = {
+  /**
+   * Pass props to the Dropdown buttons.
+   */
+  buttonProps?: object
+
+  /**
+   * Determines status of Church Center App.
+   */
+  ccAppEnabled?: boolean
+
+  /**
+   * Determines status of publishing to Church Center.
+   */
+  ccPublishingEnabled?: boolean
+
+  /**
+   * Determines status of Church Center Web.
+   */
+  ccWebEnabled?: boolean
+
+  /**
+   * Renders a text description in popover when status is active.
+   */
+  description: string
+
+  /**
+   * Renders a text for Church Center destination button ("Visit {destinationLabel}").
+   */
+  destinationLabel: string
+
+  /**
+   * Renders a text description in popover when status is inactive.
+   */
+  disabledDescription?: string
+
+  /**
+   * Pass props to the Dropdown component.
+   */
+  dropdownProps?: object
+
+  /**
+   * Provide icon overrides for "check", "exclamationTriangle", "external", and "x" icons.
+   */
+  icons?: object
+
+  /**
+   * Where the browser should navigate when destination button is pressed.
+   */
+  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,
+  description,
+  destinationLabel,
+  disabledDescription = 'People cannot access this product on the web or mobile app.',
+  dropdownProps = {},
+  icons,
+  productUrl,
+  renderPopoverFooter = () => {},
+  settingsUrl,
+  showSettingsLink = true,
+  ...props
+}: ChurchCenterStatusProps) {
+  const buttonProps: any = {
+    distribution: 'start',
+    fontWeight: 400,
+    paddingHorizontal: 2,
+    radius: 0,
+    variant: 'naked',
+    ...passedButtonProps,
+  }
+
+  const ccEnabled = ccAppEnabled || ccWebEnabled
+  const hasLinks =
+    showSettingsLink ||
+    (ccEnabled && ccPublishingEnabled) ||
+    !!renderPopoverFooter()
+
+  const icon = {
+    check: 'general.check',
+    exclamationTriangle: 'general.exclamationTriangle',
+    external: 'general.newWindow',
+    x: 'general.x',
+    ...icons,
+  }
+
+  return (
+    <StackView axis="horizontal" spacing={1} {...props}>
+      <Dropdown
+        fontWeight={400}
+        placement="bottom-end"
+        popoverProps={{ width: '280px', ...dropdownProps['popoverProps'] }}
+        theme="dark"
+        title="Church Center"
+        variant="outline"
+        {...((!ccEnabled || !ccPublishingEnabled) && {
+          iconLeft: { name: icon.exclamationTriangle, size: 'sm' },
+        })}
+        {...dropdownProps}
+      >
+        <StackView padding={2} spacing={2}>
+          {!ccPublishingEnabled ? (
+            <Text size="14px">
+              <strong>This product is not published on Church Center.</strong>{' '}
+              {disabledDescription}
+            </Text>
+          ) : !ccEnabled ? (
+            <Text size="14px">
+              <strong>Church Center is disabled.</strong> {disabledDescription}
+            </Text>
+          ) : (
+            <Text size="14px">{description}</Text>
+          )}
+          {ccEnabled && ccPublishingEnabled && (
+            <StackView axis="horizontal" spacing={3}>
+              <StackView axis="horizontal" alignment="center" spacing={0.5}>
+                <Icon
+                  color={ccWebEnabled ? 'success' : 'error'}
+                  name={ccWebEnabled ? icon.check : icon.x}
+                  size="sm"
+                />
+                <Text size="14px" weight={700}>
+                  Web
+                </Text>
+              </StackView>
+              <StackView axis="horizontal" alignment="center" spacing={0.5}>
+                <Icon
+                  color={ccAppEnabled ? 'success' : 'error'}
+                  name={ccAppEnabled ? icon.check : icon.x}
+                  size="sm"
+                />
+                <Text size="14px" weight={700}>
+                  Mobile app
+                </Text>
+              </StackView>
+            </StackView>
+          )}
+        </StackView>
+        {hasLinks && <Divider margin={0.5} />}
+        <StackView>
+          {showSettingsLink && (
+            <Button
+              external
+              title="Update settings"
+              to={settingsUrl}
+              {...buttonProps}
+            />
+          )}
+          {ccEnabled && ccPublishingEnabled && (
+            <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/ChurchCenterStatus/index.tsx

@@ -0,0 +1,2 @@
+export * from './ChurchCenterStatus'
+export { ChurchCenterStatus as default } from './ChurchCenterStatus'

package/src/Collapse/Collapse.js

@@ -0,0 +1,123 @@
+// @flow
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import { useLayoutEffect, useRef, useState } from 'react'
+
+const transition = 'height 200ms ease-out'
+
+export type Props = {
+  children?: any,
+
+  /**
+   * Controls whether or not children are visible.
+   */
+  open?: boolean,
+  /**
+   * Determines if children should render `null` or not while closed.
+   */
+  lazy?: boolean,
+  /**
+   * Instantly expand and collapse children.
+   */
+  instant?: boolean,
+  /**
+   * Called when opening or closing.
+   */
+  onComplete?: Function,
+}
+
+function Collapse(props: Props) {
+  const { children, instant, lazy, onComplete, open, ...restProps } = props
+  const [renderChildren, setRenderChildren] = useState(lazy ? open : true)
+  const ref = useRef()
+  const firstRender = useRef(true)
+  const instantRender = instant || firstRender.current
+
+  function openCollapse() {
+    const node = ref.current
+    requestAnimationFrame(() => {
+      node.style.height = node.scrollHeight + 'px'
+    })
+  }
+
+  function closeCollapse() {
+    const node = ref.current
+    requestAnimationFrame(() => {
+      node.style.height = node.offsetHeight + 'px'
+      node.style.overflow = 'hidden'
+      requestAnimationFrame(() => {
+        node.style.height = 0
+      })
+    })
+  }
+
+  useLayoutEffect(() => {
+    if (lazy) {
+      if (open) {
+        if (renderChildren) {
+          openCollapse()
+        } else {
+          setRenderChildren(true)
+        }
+      } else {
+        closeCollapse()
+      }
+    } else {
+      if (open) {
+        openCollapse()
+      } else {
+        closeCollapse()
+      }
+    }
+  }, [open, renderChildren])
+
+  useLayoutEffect(() => {
+    const node = ref.current
+    function handleComplete() {
+      node.style.overflow = open ? 'initial' : 'hidden'
+      if (open) {
+        requestAnimationFrame(() => {
+          node.style.margin = null
+          node.style.height = 'auto'
+        })
+      }
+      if (!open && lazy) {
+        node.style.margin = '0'
+        setRenderChildren(false)
+      }
+      if (firstRender.current) {
+        firstRender.current = false
+      } else if (onComplete) {
+        onComplete()
+      }
+    }
+    function handleTransitionEnd(event) {
+      if (event.target === node && event.propertyName === 'height') {
+        handleComplete()
+      }
+    }
+    if (instantRender) {
+      requestAnimationFrame(() => handleComplete())
+    }
+    node.addEventListener('transitionend', handleTransitionEnd)
+    return () => {
+      node.removeEventListener('transitionend', handleTransitionEnd)
+    }
+  }, [open])
+
+  return (
+    <div
+      ref={ref}
+      css={{
+        transition: instantRender ? undefined : transition,
+        visibility: open ? 'visible' : 'hidden',
+      }}
+      {...restProps}
+    >
+      {renderChildren ? children : null}
+    </div>
+  )
+}
+
+export default Collapse

package/src/Collapse/Collapse.mdx

@@ -0,0 +1,26 @@
+---
+title: Collapse
+category: General
+summary: Simplifies information by expanding and collapsing content.
+---
+
+```jsx live
+render(() => {
+  const [open, setOpen] = React.useState(false)
+  return (
+    <StackView alignment="center" spacing={1}>
+      <Button
+        title="Toggle Collapse"
+        onClick={() => setOpen((open) => !open)}
+      />
+      <Collapse
+        lazy
+        open={open}
+        onComplete={() => console.log('collapse is ', open ? 'open' : 'closed')}
+      >
+        <Card padding={2}>Collapsed content 🎉</Card>
+      </Collapse>
+    </StackView>
+  )
+})
+```

package/src/Collapse/Collapse.test.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { render, screen } from '@testing-library/react'
+import { isInaccessible } from '@testing-library/dom'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/extend-expect'
+import { Box, Button, Collapse } from '..'
+
+describe('Collapse', () => {
+  describe('Render children', () => {
+    const Component = () => {
+      const [open, setOpen] = useState(false)
+      return (
+        <Box>
+          <Button data-testid="toggle" onClick={() => setOpen(!open)}>
+            Toggle
+          </Button>
+          <Collapse open={open}>
+            <Button data-testid="child" />
+          </Collapse>
+        </Box>
+      )
+    }
+
+    it('should render collapsed children', () => {
+      render(<Component />)
+      expect(screen.getByTestId('child')).toBeInTheDocument()
+    })
+
+    it('should hide children from accessibility tree when collapsed', () => {
+      render(<Component />)
+      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false)
+      expect(isInaccessible(screen.getByTestId('child'))).toBe(true)
+    })
+
+    it('should include children in accessibility tree when open', () => {
+      render(<Component />)
+      userEvent.click(screen.getByTestId('toggle'))
+      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false)
+      expect(isInaccessible(screen.getByTestId('child'))).toBe(false)
+    })
+  })
+})

package/src/Collapse/index.js

@@ -0,0 +1,2 @@
+import Collapse from './Collapse'
+export default Collapse

package/src/ColumnView/ColumnView.js

@@ -0,0 +1,65 @@
+// @flow
+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<
+    | {
+        basis?: string | number,
+        grow?: number,
+        shrink?: number,
+      }
+    | number
+    | string
+  >,
+  /** The amount of space between columns. */
+  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) => {
+      const columnIndex =
+        cell.props.index === undefined ? index : cell.props.index
+      if (!columns[columnIndex]) {
+        columns[columnIndex] = []
+      }
+      columns[columnIndex].push(cell)
+      return columns
+    }, [])
+  return (
+    <StackView axis="horizontal" grow={1} shrink={1} {...restProps}>
+      {sortedColumns.map((column, index) => {
+        const size = sizes ? sizes[index] || 'auto' : 'auto'
+        return (
+          <StackView
+            key={index}
+            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 : parsedSpacing}
+            spacing={parsedSpacing}
+          >
+            {column.map((cell) => cell.props.children)}
+          </StackView>
+        )
+      })}
+    </StackView>
+  )
+}
+
+ColumnView.Column = Column
+
+export default ColumnView

package/src/ColumnView/ColumnView.mdx

@@ -0,0 +1,40 @@
+---
+title: ColumnView
+category: Layout
+summary: Place children into different sized columns.
+propsSummary: Accepts [StackView](/stackview) props.
+---
+
+```jsx live
+const Cell = (props) => (
+  <Box
+    padding={2}
+    radius={3}
+    backgroundColor="blue-5"
+    color="white"
+    {...props}
+  />
+)
+render(
+  <ColumnView
+    sizes={[{ basis: '280px', grow: 0 }, null, { basis: '100px' }]}
+    spacing={2}
+  >
+    <ColumnView.Column index={0}>
+      <Cell minHeight={20}>1</Cell>
+    </ColumnView.Column>
+    <ColumnView.Column index={0}>
+      <Cell minHeight={8}>2</Cell>
+    </ColumnView.Column>
+    <ColumnView.Column index={1}>
+      <Cell minHeight={5}>3</Cell>
+    </ColumnView.Column>
+    <ColumnView.Column index={1}>
+      <Cell minHeight={10}>4</Cell>
+    </ColumnView.Column>
+    <ColumnView.Column index={2}>
+      <Cell minHeight={24}>5</Cell>
+    </ColumnView.Column>
+  </ColumnView>
+)
+```

package/src/ColumnView/index.js

@@ -0,0 +1,2 @@
+import ColumnView from './ColumnView'
+export default ColumnView

package/src/Combobox/Combobox.js

@@ -0,0 +1,35 @@
+// @flow
+import React from 'react'
+
+import Box from '../Box'
+import { ItemList } from '../ItemList'
+import { useThemeProps } from '../system'
+
+type ComboboxProps = {
+  /**
+   * Usually takes `Combobox.Input`, `Combobox.Items` and `Combobox.Item` components.
+   */
+  children: any,
+  onSelect: Function,
+  selectedValue: any,
+}
+
+function Combobox(props: ComboboxProps) {
+  const {
+    children,
+    multiple,
+    onSelect,
+    selectedValue,
+    ...restProps
+  } = useThemeProps('combobox', props)
+  return (
+    <ItemList
+      selected={(item) => item.value === selectedValue}
+      onSelect={onSelect}
+    >
+      <Box {...restProps}>{children}</Box>
+    </ItemList>
+  )
+}
+
+export default Combobox