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

package/src/Checkbox/Checkbox.js

@@ -1,249 +0,0 @@
-// @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

@@ -1,41 +0,0 @@
----
-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

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

package/src/CheckboxCard/CheckboxCard.js

@@ -1,77 +0,0 @@
-// @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

@@ -1,28 +0,0 @@
----
-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

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

package/src/CheckboxGroup/CheckboxGroup.js

@@ -1,62 +0,0 @@
-// @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

@@ -1,28 +0,0 @@
----
-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

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

package/src/CheckboxGroup/index.js

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

package/src/ChurchCenterStatus/ChurchCenterStatus.mdx

@@ -1,124 +0,0 @@
----
-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>
-)
-```