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

package/src/Icon/Icon.js

@@ -1,64 +0,0 @@
-// @flow
-import React from 'react'
-
-import Box from '../Box'
-import { useThemeValue } from '../system'
-
-const sizes = {
-  xxs: '8px',
-  xs: '10px',
-  sm: '12px',
-  md: '14px',
-  lg: '18px',
-  xl: '32px',
-  xxl: '48px',
-}
-
-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,
-
-  /** Sizes the container proportionally. */
-  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string,
-
-  /** Pass any valid color from [colors](/colors). Defaults to `currentColor`. */
-  color?: string,
-}
-
-function Icon({
-  as,
-  name = '',
-  size = 'md',
-  color = 'currentColor',
-  children,
-  ...props
-}: Props) {
-  const themeProps = useThemeValue('icon')
-  const pathData = useThemeValue(['icons', ...name.split('.')])
-  const iconSize = sizes[size] || size
-  const childrenToRender = name ? <path d={pathData} /> : children
-  return (
-    <Box
-      as="svg"
-      viewBox="0 0 16 16"
-      width={iconSize}
-      height={iconSize}
-      basis={iconSize}
-      grow={0}
-      shrink={0}
-      fill={color}
-      fillRule="evenodd"
-      children={childrenToRender}
-      {...themeProps}
-      {...props}
-    />
-  )
-}
-
-export default Icon

package/src/Icon/Icon.mdx

@@ -1,112 +0,0 @@
----
-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
-isParent: true
----
-
-## Icon sets
-
-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.
-
-### 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 icon sets in local theme definition */}
-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 = {
-  ...themeOptions,
-  icons: {
-    calendar,
-    giving,
-    people,
-    ...designSystem.defaultTheme.icons
-  },
-}
-
-{/* prefix Icon instance in component */}
-<Icon name="calendar.reservationBlock" />
-<Icon name="giving.clockCircleO" />
-<Icon name="people.photoOutline" />
-```
-
-```jsx live
-render(() => {
-  return (
-    <StackView axis="horizontal" spacing={2}>
-      <Icon name="calendar.reservationBlock" size="xl" />
-      <Icon name="giving.clockCircleO" size="xl" />
-      <Icon name="people.photoOutline" size="xl" />
-    </StackView>
-  )
-})
-```
-
-## Preview icons
-
-Preview all of the available icon sets and their icon's names from `@planningcenter/icons`.
-
-```jsx live
-render(() => {
-  const iconSets = Object.keys(icons).filter(icons => icons !== "tapestry")
-  const [searchValue, setSearchValue] = React.useState('')
-  const [selectedIconSet, setSelectedIconSet] = React.useState('general')
-
-  return (
-    <StackView grow={1}>
-      <StackView axis="horizontal" spacing={2}>
-        <Select
-          basis={26}
-          emptyValue="Choose icon set"
-          onChange={(event) => setSelectedIconSet(event.value)}
-          defaultValue={selectedIconSet}
-        >
-          {iconSets.map((icons) => (
-            <Select.Option key={icons} value={icons}>
-              {icons}
-            </Select.Option>
-          ))}
-        </Select>
-        <Input
-          grow={1}
-          autoFocus
-          renderLeft={<Icon name="general.search" />}
-          placeholder="Search by icon name"
-          value={searchValue}
-          onChange={(e) => setSearchValue(e.target.value)}
-        />
-      </StackView>
-      <TileView minCellWidth={16} spacing={4} margin={4}>
-        {matchSorter(Object.keys(icons[selectedIconSet]), searchValue).map((iconName) => (
-          <StackView key={iconName} alignment="center" spacing={1}>
-            <Icon key={iconName} name={`${selectedIconSet}.${iconName}`} size="xl" />
-            <Text fontSize={5} color="foregroundSecondary">
-              {iconName}
-            </Text>
-          </StackView>
-        ))}
-      </TileView>
-    </StackView> 
-  )
-})
-```

package/src/Icon/Path.js

@@ -1,22 +0,0 @@
-// @flow
-import React from 'react'
-
-import Box from '../Box'
-import { useThemeValue } from '../system'
-
-type Props = {
-  /** The name of the icon to render. */
-  name: string,
-
-  /** Pass any valid color from [colors](/colors). */
-  color: string,
-}
-
-function Path({ name = '', color = 'currentColor', ...restProps }: Props) {
-  const pathData = useThemeValue(['icons', ...name.split('.')])
-  return <Box as="path" d={pathData} fill={color} {...restProps} />
-}
-
-Path.displayName = 'Icon.Path'
-
-export default Path

package/src/Icon/Path.mdx

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

@@ -1,50 +0,0 @@
-// @flow
-import React from 'react'
-
-import Icon from './Icon'
-import Path from './Path'
-
-const STATUS_VARIANTS = {
-  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',
-  /** Uses the filled version of the icon. */
-  variantFilled?: boolean,
-  /** Pass any valid color from [colors](/colors). Defaults to variant color. */
-  color?: string,
-}
-
-function Status(props: Props) {
-  const { color, variant, variantFilled, ...restProps } = props
-  const { iconOutlined, iconFilled, iconColor } = STATUS_VARIANTS[variant]
-
-  const variantColor = color || iconColor
-  const variantIcon = variantFilled ? iconFilled : iconOutlined
-
-  return (
-    <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

@@ -1,17 +0,0 @@
----
-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/Icon/index.js

@@ -1,6 +0,0 @@
-import Icon from './Icon'
-import Path from './Path'
-import Status from './Status'
-Icon.Path = Path
-Icon.Status = Status
-export default Icon

package/src/Input/Inline.js

@@ -1,63 +0,0 @@
-// @flow
-import React from 'react'
-
-import InputField from './InputField'
-
-type Props = {
-  /** 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({
-  light,
-  hover,
-  focus,
-  highlightColor = light ? 'light-0' : 'highlight',
-  ...restProps
-}: Props) {
-  const pseudoStyles =
-    restProps.readOnly || restProps.disabled
-      ? {}
-      : { backgroundColor: highlightColor }
-  if (restProps.disabled) {
-    restProps.cursor = 'not-allowed'
-    restProps.tabIndex = undefined
-    restProps.opacity = 0.64
-  } else if (hover || focus) {
-    restProps = {
-      ...restProps,
-      ...pseudoStyles,
-    }
-  }
-  return (
-    <InputField
-      autoWidth
-      backgroundColor="transparent"
-      color={light ? 'light-9' : 'foreground'}
-      focus={pseudoStyles}
-      grow={0}
-      hover={pseudoStyles}
-      marginHorizontal={-0.5}
-      paddingHorizontal={0.5}
-      paddingVertical={0}
-      placeholderColor={light ? 'light-5' : 'foregroundTertiary'}
-      radius={3}
-      stroke={undefined}
-      {...restProps}
-    />
-  )
-}
-
-Inline.displayName = 'Input.Inline'
-
-export default Inline

package/src/Input/Inline.mdx

@@ -1,45 +0,0 @@
----
-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
-render(() => (
-  <Box padding={2} backgroundColor="primary">
-    <Input.Inline light size="xl" placeholder="Inline Input" />
-  </Box>
-))
-```
-
-```jsx live
-function App() {
-  const [value, setValue] = React.useState('Editable Title')
-  return (
-    <Card width={48}>
-      <Card.Section
-        axis="horizontal"
-        alignment="center"
-        padding={2}
-        spacing={2}
-        backgroundColor="surfaceTertiary"
-        overflow="auto"
-      >
-        <Icon name="general.person" size="xl" />
-        <Input.Inline
-          highlightColor="dark-1"
-          size="xl"
-          fontSize={0}
-          placeholder="Placeholder"
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-        />
-      </Card.Section>
-      <Card.Section padding={2}>Content</Card.Section>
-    </Card>
-  )
-}
-render(<App />)
-```

package/src/Input/Input.js

@@ -1,222 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import InputBox from './InputBox'
-import InputField from './InputField'
-
-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,
-
-  /**
-   * Sets the input's required attribute.
-   */
-  required?: boolean,
-}
-
-class Input extends Component<InputProps> {
-  setInputNode = (node) => {
-    this.inputNode = node
-  }
-
-  focus() {
-    this.inputNode.focus()
-  }
-
-  blur() {
-    this.inputNode.blur()
-  }
-
-  render() {
-    const {
-      backgroundColor,
-      color,
-      autoComplete,
-      autoFocus,
-      autoWidth,
-      defaultValue,
-      disabled,
-      focus,
-      hover,
-      id,
-      min,
-      minLength,
-      max,
-      maxLength,
-      name,
-      onBlur,
-      onChange,
-      onFocus,
-      onKeyDown,
-      onKeyUp,
-      placeholder,
-      placeholderColor,
-      readOnly,
-      highlightOnInteraction,
-      type,
-      value,
-      required,
-      ...restProps
-    } = this.props
-    const ariaLabel = restProps['aria-label']
-    if (ariaLabel) {
-      delete restProps['aria-label']
-    }
-    return (
-      <InputBox
-        disabled={disabled}
-        backgroundColor={backgroundColor}
-        color={color}
-        focus={focus}
-        hover={hover}
-        {...restProps}
-      >
-        <InputField
-          aria-label={ariaLabel}
-          width="100%"
-          textOverflow="ellipsis"
-          innerRef={this.setInputNode}
-          backgroundColor="transparent"
-          color="inherit"
-          id={id}
-          autoComplete={autoComplete}
-          autoFocus={autoFocus}
-          autoWidth={autoWidth}
-          type={type}
-          name={name}
-          disabled={disabled}
-          readOnly={readOnly}
-          highlightOnInteraction={highlightOnInteraction}
-          placeholder={placeholder}
-          placeholderColor={placeholderColor}
-          defaultValue={defaultValue}
-          min={min}
-          minLength={minLength}
-          max={max}
-          maxLength={maxLength}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onKeyDown={onKeyDown}
-          onKeyUp={onKeyUp}
-          required={required}
-        />
-      </InputBox>
-    )
-  }
-}
-
-export default Input

package/src/Input/Input.mdx

@@ -1,29 +0,0 @@
----
-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
-const sizes = ['xs', 'sm', 'md', 'lg']
-render(() => (
-  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
-    {sizes.map((size, index) => (
-      <Input key={size} size={size} defaultValue={`Input ${size}`} />
-    ))}
-  </GridView>
-))
-```
-
-```jsx live
-const sizes = ['xs', 'sm', 'md', 'lg']
-render(() => (
-  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
-    {sizes.map((size, index) => (
-      <Input key={size} size={size} defaultValue={`Input ${size}`} subdued />
-    ))}
-  </GridView>
-))
-```