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

package/src/Checkbox/Checkbox.js

@@ -0,0 +1,249 @@
+// @flow
+import React, { useContext, useRef, useLayoutEffect, useState } from 'react'
+
+import Box from '../Box'
+import CheckboxGroupContext from '../CheckboxGroup/CheckboxGroupContext'
+import Icon from '../Icon'
+import Link from '../Link'
+import StackView from '../StackView'
+import Text from '../Text'
+import VariantProvider from '../VariantProvider'
+import Tooltip from '../Tooltip'
+import { useThemeValue } from '../system'
+import { useAccessibilityViolation } from '../hooks/use-accessibility-violation'
+import { mergeProps } from '../utils'
+
+const iconPaths = {
+  fill: 'tapestry.checkbox0',
+  minus: 'tapestry.checkbox1',
+  checked: 'tapestry.checkbox2',
+}
+
+export type Props = {
+  /**
+   * Disables the checkbox component.
+   */
+  disabled?: boolean,
+
+  /**
+   * Used to label the checkbox. Checkbox must have parent label if left `undefined`.
+   * Pass `null` to use as a graphical element only, please note you need to provide
+   * additional aria attributes when doing so.
+   */
+  label?: string | null,
+
+  /**
+   * Connects input to its corrospending label's `htmlFor`.
+   */
+  id?: string | number,
+
+  /**
+   * If `true`, puts the checkbox in an indeterminate state.
+   */
+  indeterminate?: boolean,
+
+  /**
+   * Checks the checkbox, will be overriden if indeterminate is `true`.
+   */
+  checked?: boolean,
+
+  /**
+   * Maps to the internal input's name prop.
+   */
+  name?: string,
+
+  /**
+   * Maps to the internal input's value prop.
+   */
+  value?: mixed,
+
+  /**
+   * Determines the size of the checkbox based on a [scale](http://google.com).
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+
+  /**
+   * 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,
+}
+
+function Checkbox({
+  checked,
+  disabled,
+  id,
+  indeterminate,
+  label,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  size = 'sm',
+  value,
+  ...restProps
+}: Props) {
+  const checkboxTheme = useThemeValue('checkbox')
+  const checkboxGroup = useContext(CheckboxGroupContext)
+  const [localChecked, setLocalChecked] = useState(false)
+  const [focus, setFocus] = useState(false)
+  const isChecked = checkboxGroup
+    ? checkboxGroup.value.indexOf(value) > -1
+    : checked === undefined
+    ? localChecked
+    : checked
+  let tooltip = null
+  if (process.env.NODE_ENV !== 'production') {
+    const ref = useRef(null)
+    const [needsParentLabel, setNeedsParentLabel] = useState(false)
+    const { tooltipProps, wrapperProps } = useAccessibilityViolation(
+      <>
+        Checkbox must define a{' '}
+        <Link
+          external
+          to="https://planningcenter.github.io/tapestry-react/checkbox#label"
+          weight={700}
+        >
+          label
+        </Link>{' '}
+        through props or a parent element that is a label.
+      </>,
+      `Tapestry-React: <Checkbox/> must define a "label" prop or have a parent that renders a label for proper accessibility.`
+    )
+    useLayoutEffect(() => {
+      if (label === undefined) {
+        const labelParent = ref.current.closest('label') !== null
+
+        if (!labelParent) {
+          setNeedsParentLabel(true)
+        }
+      }
+    }, [])
+    restProps = mergeProps(restProps, { innerRef: ref })
+    if (needsParentLabel) {
+      tooltip = tooltipProps
+      restProps = mergeProps(restProps, wrapperProps)
+    }
+  }
+  return (
+    <VariantProvider
+      checked={isChecked}
+      indeterminate={indeterminate}
+      focus={focus}
+      disabled={disabled}
+    >
+      <Tooltip {...tooltip}>
+        <StackView
+          as={label ? 'label' : 'span'}
+          inline
+          axis="horizontal"
+          alignment="center"
+          shrink={0}
+          position="relative"
+          spacing={0.5}
+          variants={{
+            disabled: {
+              opacity: 0.5,
+              cursor: 'not-allowed',
+            },
+          }}
+          {...restProps}
+        >
+          <Box
+            as="input"
+            type="checkbox"
+            id={id}
+            name={checkboxGroup ? checkboxGroup.name : name}
+            checked={isChecked}
+            value={value}
+            disabled={disabled}
+            onChange={
+              checkboxGroup
+                ? checkboxGroup.onChange
+                : (event) => {
+                    setLocalChecked(event.target.checked)
+                    onChange && onChange(event)
+                  }
+            }
+            onFocus={(event) => {
+              setFocus(true)
+              onFocus && onFocus(event)
+            }}
+            onBlur={(event) => {
+              setFocus(false)
+              onBlur && onBlur(event)
+            }}
+            position="absolute"
+            top={0}
+            left={0}
+            zIndex={0}
+            opacity={0}
+          />
+          <Icon size={size} zIndex={1}>
+            <Icon.Path
+              name={iconPaths.fill}
+              fill={checkboxTheme.fill}
+              stroke={checkboxTheme.stroke}
+              transform="scale(1)"
+              transformOrigin="center center"
+              transition="all 180ms ease-out"
+              variants={{
+                focus: { stroke: checkboxTheme.focusStroke },
+                active: { transform: 'scale(1)' },
+                checked: {
+                  fill: checkboxTheme.checkedFill,
+                  stroke: checkboxTheme.checkedStroke,
+                },
+                indeterminate: { fill: 'primary-light', stroke: 'primary' },
+              }}
+            />
+            <Icon.Path
+              name={iconPaths.minus}
+              fill="#fff"
+              transform="scale(0)"
+              transformOrigin="center center"
+              transition="all 180ms ease-out"
+              variants={{
+                indeterminate: {
+                  visibility: 'visible',
+                  transform: 'scale(1)',
+                  transition: 'all 120ms ease-out',
+                },
+              }}
+            />
+            <Icon.Path
+              name={iconPaths.checked}
+              fill="#fff"
+              transform="scale(0)"
+              transformOrigin="center center"
+              transition="all 180ms ease-out"
+              variants={{
+                checked: {
+                  visibility: 'visible',
+                  transform: 'scale(1)',
+                  transition: 'all 120ms ease-out',
+                },
+              }}
+            />
+          </Icon>
+          {label && (
+            <Text fontSize={4} lineHeight={2.5}>
+              {label}
+            </Text>
+          )}
+        </StackView>
+      </Tooltip>
+    </VariantProvider>
+  )
+}
+
+export default Checkbox

package/src/Checkbox/Checkbox.mdx

@@ -0,0 +1,41 @@
+---
+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
+render(
+  <StackView axis="horizontal" spacing={2}>
+    <Checkbox name="checkbox" value="peach" label="Peach" />
+    <Checkbox name="checkbox" value="watermelon" label="Watermelon" />
+    <StackView as="label" axis="horizontal" spacing={0.5}>
+      <Checkbox name="checkbox" value="orange" />
+      <Text size={4}>Orange</Text>
+    </StackView>
+  </StackView>
+)
+```
+
+```jsx live
+render(
+  <ThemeProvider
+    theme={{
+      checkbox: {
+        fill: 'lightpink',
+        stroke: 'hotpink',
+        focusStroke: 'hotpink',
+        checkedFill: 'hotpink',
+        checkedStroke: 'hotpink',
+      },
+    }}
+  >
+    <StackView axis="horizontal" spacing={2}>
+      <Checkbox name="checkbox" value="apple" label="Apple" />
+      <Checkbox name="checkbox" value="banana" label="Banana" />
+      <Checkbox name="checkbox" value="kiwi" label="Kiwi" />
+    </StackView>
+  </ThemeProvider>
+)
+```

package/src/Checkbox/index.js

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

package/src/CheckboxCard/CheckboxCard.js

@@ -0,0 +1,77 @@
+// @flow
+import React, { useState } from 'react'
+
+import Box from '../Box'
+import Card from '../Card'
+import Checkbox from '../Checkbox'
+import Text from '../Text'
+
+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 (
+    <Card
+      as="label"
+      axis="horizontal"
+      alignment="center"
+      width="auto"
+      padding={1}
+      spacing={1}
+      cursor="pointer"
+      borderColor={isActive ? 'separatorFocus' : 'separatorSecondary'}
+      hover={{
+        borderColor: !isActive ? 'separator' : undefined,
+      }}
+      css={{
+        ':focus-within': {
+          stroke: 'separatorFocusSecondary',
+          strokeWeight: 2,
+        },
+      }}
+      {...restProps}
+    >
+      <Checkbox
+        size="sm"
+        checked={checked}
+        onChange={(event) => {
+          setLocalChecked(event.target.checked)
+          onChange && onChange(event)
+        }}
+      />
+      <Box shrink={1}>
+        <Text as="span" title={title} truncate>
+          {title}
+        </Text>
+        <Text as="span" title={subtitle} color="foregroundSecondary" truncate>
+          {subtitle}
+        </Text>
+      </Box>
+    </Card>
+  )
+}
+
+export default CheckboxCard

package/src/CheckboxCard/CheckboxCard.mdx

@@ -0,0 +1,28 @@
+---
+title: CheckboxCard
+category: Forms
+propsSummary: Accepts [Card](/card) props.
+---
+
+```jsx live
+render(
+  <StackView axis="horizontal" distribution="fill" spacing={2}>
+    {[
+      {
+        name: 'Band rehearsal',
+        date: 'Wednesday 10AM',
+      },
+      {
+        name: 'Drum practice',
+        date: 'Friday 3PM',
+      },
+      {
+        name: 'Choir rehearsal',
+        date: 'Tuesady 6AM',
+      },
+    ].map(({ name, date }) => (
+      <CheckboxCard key={name} title={name} subtitle={date} />
+    ))}
+  </StackView>
+)
+```

package/src/CheckboxCard/index.js

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

package/src/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,62 @@
+// @flow
+import React, { Component } from 'react'
+
+import { shallowEqual } from '../utils'
+
+import CheckboxGroupContext from './CheckboxGroupContext'
+
+type Props = {
+  children: any,
+  /**
+   * Accepts an array of strings that match the corresponding `Checkbox` values that should be checked.
+   */
+  value: Array<string>,
+
+  /**
+   * Maps to the corresponding `Checkbox` name prop.
+   */
+  name: string,
+
+  /**
+   * Callback when any child `Checkbox` fires its `onChange` callback. Receives new array of values.
+   */
+  onChange: (value: Array<string>) => null,
+}
+
+class CheckboxGroup extends Component<Props> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      name: props.name,
+      value: props.value,
+      onChange: this.handleChange,
+    }
+  }
+
+  componentDidUpdate(lastProps) {
+    if (!shallowEqual(lastProps.value, this.props.value)) {
+      this.setState({ value: this.props.value })
+    }
+  }
+
+  handleChange = (event) => {
+    const { checked, value } = event.target
+    const newValue = [...this.props.value]
+    if (checked) {
+      newValue.push(value)
+    } else {
+      newValue.splice(newValue.indexOf(value), 1)
+    }
+    this.props.onChange(newValue)
+  }
+
+  render() {
+    return (
+      <CheckboxGroupContext.Provider value={this.state}>
+        {this.props.children}
+      </CheckboxGroupContext.Provider>
+    )
+  }
+}
+
+export default CheckboxGroup

package/src/CheckboxGroup/CheckboxGroup.mdx

@@ -0,0 +1,28 @@
+---
+title: CheckboxGroup
+category: Forms
+summary: Manage a group of checkboxes with one value and one callback.
+propsSummary: Accepts [Card](/card) props.
+---
+
+```jsx live
+render(() => {
+  const [value, setValue] = React.useState(['One', 'Three'])
+  return (
+    <CheckboxGroup
+      name="checkbox-group"
+      value={value}
+      onChange={(value) => {
+        console.log(value)
+        setValue(value)
+      }}
+    >
+      <StackView axis="horizontal" spacing={2}>
+        {['One', 'Two', 'Three', 'Four'].map((value) => (
+          <Checkbox key={value} value={value} label={value} />
+        ))}
+      </StackView>
+    </CheckboxGroup>
+  )
+})
+```

package/src/CheckboxGroup/CheckboxGroupContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+const CheckboxGroupContext = createContext()
+export default CheckboxGroupContext

package/src/CheckboxGroup/index.js

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

package/src/ChurchCenterStatus/ChurchCenterStatus.mdx

@@ -0,0 +1,124 @@
+---
+title: ChurchCenterStatus
+category: General
+propsSummary: Accepts [StackView](/stackview) props.
+---
+
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled
+    ccPublishingEnabled
+    ccWebEnabled
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    settingsUrl="#settings"
+  />
+)
+```
+
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled={false}
+    ccPublishingEnabled
+    ccWebEnabled
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    settingsUrl="#settings"
+  />
+)
+```
+
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled={false}
+    ccPublishingEnabled
+    ccWebEnabled={false}
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    settingsUrl="#settings"
+  />
+)
+```
+
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled
+    ccPublishingEnabled={false}
+    ccWebEnabled
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    settingsUrl="#settings"
+  />
+)
+```
+
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled
+    ccPublishingEnabled={false}
+    ccWebEnabled
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    renderPopoverFooter={(buttonProps) => (
+      <Button title="Another link!" {...buttonProps} />
+    )}
+    settingsUrl="#settings"
+    showSettingsLink={false}
+  />
+)
+```
+
+## Custom icons
+
+To use the Planning Center General set of icons, import the general set to your theme and define the overrides with the `icons` prop.
+
+To learn how to import the general set to your theme, see [Grouped Icon Sets](/icon#grouped-icon-sets).
+
+```jsx live
+render(
+  <ThemeProvider theme={{ icons }}>
+    <StackView axis="horizontal" spacing={2}>
+      <ChurchCenterStatus
+        ccAppEnabled
+        ccPublishingEnabled
+        ccWebEnabled={false}
+        description="On Church Center, people can browse and register for events."
+        destinationLabel="event list"
+        icons={{
+          check: 'general.check',
+          exclamationTriangle: 'general.exclamationTriangle',
+          external: 'general.newWindow',
+          x: 'general.x',
+        }}
+        productUrl="#product"
+        settingsUrl="#settings"
+      />
+      <ChurchCenterStatus
+        ccAppEnabled
+        ccPublishingEnabled={false}
+        ccWebEnabled
+        description="On Church Center, people can browse and register for events."
+        destinationLabel="event list"
+        icons={{
+          check: 'general.check',
+          exclamationTriangle: 'general.exclamationTriangle',
+          external: 'general.newWindow',
+          x: 'general.x',
+        }}
+        productUrl="#product"
+        settingsUrl="#settings"
+      />
+    </StackView>
+  </ThemeProvider>
+)
+```