@planningcenter/tapestry-react 2.10.0-rc.9 → 2.10.0

package/src/ActionsDropdown/ActionsDropdown.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react'
+import { format } from 'date-fns'
+
+import Box from '../Box'
+import defaultTheme from '../system/default-theme'
+import Divider from '../Divider'
+import Dropdown from '../Dropdown'
+import Icon from '../Icon'
+import Link from '../Link'
+import StackView from '../StackView'
+import Text from '../Text'
+import { cloneChildren } from '../utils'
+
+type ActionsDropdownProps = {
+  /** Accepts [Dropdown.Item](/dropdown) and [Dropdown.Link](/dropdown) elements. */
+  children?: React.ReactNode
+
+  /** Props for default button state. */
+  defaultButtonProps?: object
+
+  /** Provide amount of duplicates as well as a link to resolve them. */
+  duplicates?: {
+    /** Amount of duplicates. */
+    amount: number
+
+    /** [Link](/link) props. */
+    linkProps: object
+  }
+
+  /** Props for duplicates button state. Activated when `duplicates.amount` is greater than 0. */
+  duplicatesButtonProps?: object
+
+  /** Provide date and reason user became inactive as well as a link to reactivate them. */
+  inactive?: {
+    /** Valid JavaScript Date. */
+    date?: Date
+
+    /** Reason user was inactivated. */
+    reason: string
+
+    /** [Link](/link) props. */
+    linkProps: object
+  }
+
+  /** Props for inactive button state. Activated when `inactive.date` is present. */
+  inactiveButtonProps?: object
+
+  /** Determines logic for when user is below manager role. */
+  isBelowManager?: boolean
+
+  /** Determines logic for when used in People product. */
+  isPeopleProduct?: boolean
+
+  /** Callback when "Delete Profile" item is selected. */
+  onDeleteProfile?: boolean
+}
+
+export function ActionsDropdown({
+  children,
+  defaultButtonProps = defaultTheme.button.themes.primary.fill,
+  duplicates,
+  duplicatesButtonProps = {
+    backgroundColor: 'hsl(42deg 87% 94%)',
+    color: 'hsl(0deg 0% 24%)',
+    hover: { backgroundColor: 'hsl(42deg 87% 90%)' },
+    active: { backgroundColor: 'hsl(42deg 87% 87%)' },
+  },
+  inactive,
+  inactiveButtonProps = {
+    color: 'white',
+    backgroundColor: '#999B96',
+  },
+  isBelowManager,
+  isPeopleProduct,
+  onDeleteProfile,
+}: ActionsDropdownProps) {
+  const hasDuplicates = duplicates?.amount > 0
+  const hasInactiveDate = Boolean(inactive?.date)
+  return (
+    <Dropdown
+      title="Actions"
+      iconLeft={
+        hasDuplicates || hasInactiveDate
+          ? {
+              color: hasDuplicates ? '#E6A714' : 'white',
+              name: hasDuplicates ? 'general.exclamationTriangle' : 'general.inactive',
+              size: 'md',
+            }
+          : undefined
+      }
+      fontSize="14px"
+      fontWeight={400}
+      paddingLeft={hasDuplicates || hasInactiveDate ? 1 : undefined}
+      paddingVertical={0.25}
+      theme={false}
+      popoverProps={{ maxWidth: '280px' }}
+      placement="bottom-start"
+      {...(hasDuplicates
+        ? duplicatesButtonProps
+        : hasInactiveDate
+        ? inactiveButtonProps
+        : defaultButtonProps)}
+    >
+      {hasDuplicates ? (
+        <>
+          <StackView axis="horizontal" padding={2} spacing={1}>
+            <Icon
+              color="#E6A714"
+              marginTop="3px"
+              name="general.exclamationTriangle"
+            />
+            <Text size={4}>
+              There {duplicates.amount > 1 ? 'are' : 'is'} {duplicates.amount}{' '}
+              potential {duplicates.amount > 1 ? 'duplicates' : 'duplicate'} for
+              this profile.{' '}
+              {isBelowManager ? (
+                `An administrator can resolve ${
+                  duplicates.amount > 1 ? `them` : `it`
+                } in People.`
+              ) : (
+                <Link {...duplicates.linkProps}>
+                  {isPeopleProduct ? 'Review' : 'Review in People'}
+                </Link>
+              )}
+            </Text>
+          </StackView>
+          <Divider />
+        </>
+      ) : null}
+      {hasInactiveDate ? (
+        <>
+          <StackView axis="horizontal" padding={2} spacing={1}>
+            <Icon name="general.inactive" color="grey-8" marginTop="3px" />
+            <Text size={4}>
+              Set inactive on {format(inactive.date, 'MMM dd, yyyy')}
+              {inactive.reason && ` (${inactive.reason})`}.{' '}
+              {isBelowManager ? (
+                'An administrator can reactivate them in People.'
+              ) : (
+                <Link {...inactive.linkProps}>
+                  {isPeopleProduct ? 'Reactivate' : 'Reactivate in People'}
+                </Link>
+              )}
+            </Text>
+          </StackView>
+          <Divider />
+        </>
+      ) : null}
+      {(hasDuplicates || hasInactiveDate) && <Box height={1.5} />}
+      {cloneChildren(children, () => ({
+        paddingHorizontal: 2,
+      }))}
+      {onDeleteProfile ? (
+        <Dropdown.Item
+          disabled={isBelowManager}
+          paddingHorizontal={2}
+          onSelect={onDeleteProfile}
+        >
+          {isPeopleProduct ? 'Delete profile' : 'Delete profile…'}
+        </Dropdown.Item>
+      ) : null}
+      {onDeleteProfile && isBelowManager ? (
+        <Box
+          marginHorizontal={2}
+          padding={1}
+          backgroundColor="surfaceTertiary"
+          color="foregroundSecondary"
+        >
+          <Text size={5} lineHeight={2}>
+            To delete this profile, an administrator must remove them from
+            People.
+          </Text>
+        </Box>
+      ) : null}
+      {(hasDuplicates ||
+        hasInactiveDate ||
+        (onDeleteProfile && isBelowManager)) && <Box height={1} />}
+    </Dropdown>
+  )
+}

package/src/ActionsDropdown/index.ts

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

package/src/Alert/Alert.mdx

@@ -0,0 +1,15 @@
+---
+title: Alert
+category: General
+propsSummary: Accepts all valid HTML attributes and [StackView](/stackview) props.
+---
+
+```jsx live
+render(
+  <StackView spacing={2}>
+    <Alert type="warning">Are you sure you want to continue?</Alert>
+    <Alert type="success">Files were uploaded successfully!</Alert>
+    <Alert type="error">This action is not permitted.</Alert>
+  </StackView>
+)
+```

package/src/Alert/Alert.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Alert from './Alert'
+
+it('should render title and content', () => {
+  const content = 'Please fix your errors'
+  const { getByText } = render(<Alert type="error">{content}</Alert>)
+  getByText(content)
+})

package/src/Alert/Alert.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+
+import { MediaQueries } from '../index'
+import { StackView, StackViewProps } from '../StackView'
+
+export type AlertProps = {
+  children?: any
+
+  /** Sets status theme colors. */
+  type?: 'warning' | 'success' | 'error'
+
+  /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
+  mediaQueries?: object
+} & StackViewProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  AlertProps &
+  MediaQueries<AlertProps>
+
+export function Alert(props: Props) {
+  const { children, type, ...restProps } = props
+  return (
+    <StackView
+      padding={1}
+      radius={3}
+      // @ts-ignore
+      stroke={`${type}-dark`}
+      strokeAlign="inside"
+      strokeWeight={1}
+      color="dark-9"
+      // @ts-ignore
+      backgroundColor={`${type}-lighter`}
+      {...restProps}
+    >
+      {children}
+    </StackView>
+  )
+}
+
+export default Alert

package/src/Alert/index.ts

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

package/src/Avatar/Avatar.mdx

@@ -0,0 +1,96 @@
+---
+title: Avatar
+category: Images
+summary: Avatars are used to show a thumbnail representation of a person.
+propsSummary: Accepts [Box](/box) props.
+---
+
+```jsx live
+const statuses = {
+  default: 'grey-5',
+  success: 'green-5',
+  error: 'red-5',
+}
+function App() {
+  const [status, setStatus] = React.useState(null)
+  const users = useUsers(6)
+  return (
+    <StackView alignment="center" spacing={4}>
+      <StackView axis="horizontal" alignment="end" spacing={1}>
+        {['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size, index) => (
+          <StackView key={size} spacing={1} alignment="center">
+            <Avatar
+              size={size}
+              status={statuses[status]}
+              source={users[index] && users[index].picture.medium}
+            />
+            <Text fontSize={5} color="grey">
+              {size}
+            </Text>
+          </StackView>
+        ))}
+      </StackView>
+      <StackView
+        axis="horizontal"
+        alignment="center"
+        padding={1}
+        spacing={1}
+        radius={5}
+        backgroundColor="grey-0"
+      >
+        <Text weight={600}>Status:</Text>
+        <Radio
+          name="status"
+          label="None"
+          checked={status === null}
+          onChange={() => setStatus(null)}
+        />
+        <Radio
+          name="status"
+          label="Default"
+          checked={status === 'default'}
+          onChange={() => setStatus('default')}
+        />
+        <Radio
+          name="status"
+          label="Success"
+          checked={status === 'success'}
+          onChange={() => setStatus('success')}
+        />
+        <Radio
+          name="status"
+          label="Error"
+          checked={status === 'error'}
+          onChange={() => setStatus('error')}
+        />
+      </StackView>
+    </StackView>
+  )
+}
+render(App)
+```
+
+```jsx live
+function App() {
+  const users = useUsers(3)
+  const statuses = ['grey-5', 'success', 'error']
+  return (
+    <Card axis="horizontal" padding={1} spacing={1} maxWidth={40}>
+      {users.map((user, index) => (
+        <Avatar
+          key={user.name}
+          source={user.picture.thumbnail}
+          status={statuses[index]}
+        />
+      ))}
+      <Button
+        title="View household"
+        marginLeft="auto"
+        theme="primary"
+        variant="outline"
+      />
+    </Card>
+  )
+}
+render(App)
+```

package/src/Avatar/Avatar.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import Box from '../Box'
+
+const avatarSizes = {
+  xs: 2.5,
+  sm: 3,
+  md: 4.5,
+  lg: 6,
+  xl: 9,
+  xxl: 14,
+}
+
+const borderSizes = {
+  xs: 2,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 4,
+  xxl: 4,
+}
+
+type AvatarProps = {
+  /**
+   * Controls the size of the avatar.
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  /**
+   * The source of the image to display.
+   */
+  source?: string
+  /**
+   * Adds a colored ring with padding around the avatar. Accepts a valid color string.
+   */
+  status?: string
+}
+
+/**
+ * Displays a user's avatar in a circle.
+ */
+export function Avatar({
+  size = 'md',
+  source,
+  status,
+  ...restProps
+}: AvatarProps) {
+  return (
+    <Box
+      as="img"
+      src={source}
+      width={avatarSizes[size]}
+      height={avatarSizes[size]}
+      flexBasis={avatarSizes[size]}
+      flexShrink={0}
+      flexGrow={0}
+      objectFit="cover"
+      radius="circle"
+      borderColor={status}
+      borderWidth={status ? borderSizes[size] : 0}
+      {...restProps}
+    />
+  )
+}
+
+export default Avatar

package/src/Avatar/index.js

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

package/src/Badge/Badge.mdx

@@ -0,0 +1,63 @@
+---
+title: Badge
+category: General
+summary: Badges are used to inform users of the status of a piece of information or of an action that has been taken.
+propsSummary: Accepts [StackView](/stackview) props.
+isParent: true
+themeKey: badge
+---
+
+```jsx live
+render(() => <Badge title="Badge" color="primary" />)
+```
+
+```jsx live
+const { boxSizes } = designSystem
+render(
+  <StackView axis="horizontal" spacing={1}>
+    {Object.keys(boxSizes).map((size) => (
+      <Badge
+        key={size}
+        title={size}
+        size={size}
+        radius="circle"
+        color="warning"
+      />
+    ))}
+  </StackView>
+)
+```
+
+```jsx live
+render(() => (
+  <StackView axis="horizontal" spacing={1}>
+    <Badge
+      title="M"
+      size="sm"
+      color={{ foreground: 'primary', background: 'transparent' }}
+      stroke="primary"
+      strokeAlign="inside"
+      strokeWeight={1}
+      radius="circle"
+    />
+    <Badge title="Ab" size="sm" color="primary" radius="circle" />
+    <Badge title="A#-Ab" size="sm" color="primary" radius="pill" />
+  </StackView>
+))
+```
+
+```jsx live
+render(() => (
+  <Badge
+    title="Bass Guitar"
+    renderRight={
+      <Button
+        title="clear"
+        icon={{ name: 'general.x' }}
+        radiusLeft={0}
+        onClick={() => alert('clear badge')}
+      />
+    }
+  />
+))
+```

package/src/Badge/Badge.tsx

@@ -0,0 +1,197 @@
+import React, { cloneElement } from 'react'
+
+import Box from '../Box'
+import { getForegroundColor, useBoxSize, useThemeProps } from '../system'
+import { StackView, StackViewProps } from '../StackView'
+import Text, { TextProps } from '../Text'
+import { stopPropagationClick } from '../utils'
+
+export type BadgeProps = {
+  children?: any
+
+  /**
+   * Background color of the badge, sets an accessible text color
+   */
+  color?: string
+
+  /**
+   * Size of badge
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+  /**
+   * Uses a 1:1 padding ratio, useful for icon only badges.
+   */
+  square?: boolean
+
+  /**
+   * The text to be rendered
+   */
+  title?: string
+
+  /**
+   * Allows rendering any content inside the beginning of the badge.
+   */
+  renderLeft?: React.ReactNode
+
+  /**
+   * Allows rendering any content inside the end of the badge.
+   */
+  renderRight?: React.ReactNode
+
+  /**
+   * `onClick={stopPropagationClick(onClick)}`
+   *
+   * Callback passed to `stopPropagationClick` which
+   * adds event.stopPropagation() to a component's onClick event.
+   * Used to prevent element's onClick from bubbling up the tree.
+   */
+  onClick?: Function
+
+  /**
+   * The size of the radius. (Default is 3px).
+   */
+  radius?: number | string
+} & StackViewProps
+
+const Badge = ({
+  children,
+  renderLeft,
+  renderRight,
+  onClick,
+  title,
+  ...restProps
+}: BadgeProps) => {
+  const {
+    color = {
+      foreground: 'foreground',
+      background: 'surfaceTertiary',
+    },
+    radius = 3,
+    size = 'md',
+    square = false,
+    ...themeProps
+  } = useThemeProps('badge', restProps)
+
+  let badgeProps = {
+    color,
+    radius,
+    size,
+    square,
+    ...themeProps,
+  }
+
+  badgeProps.backgroundColor = color.background || color
+  badgeProps.color = color.foreground || getForegroundColor(color)
+
+  const {
+    boxSize,
+    fontSize,
+    lineHeight,
+    paddingHorizontal,
+    paddingHorizontalDense,
+    paddingVertical,
+  } = useBoxSize(badgeProps.size)
+
+  const textStyle = {
+    as: 'span',
+    fontWeight: 'inherit',
+    lineHeight: 'inherit',
+    color: 'inherit',
+  } as TextProps
+
+  if (badgeProps.square || badgeProps.radius === 'circle') {
+    badgeProps.width = boxSize
+    badgeProps.height = boxSize
+  }
+
+  if (badgeProps.radius === 'circle') {
+    textStyle.position = 'absolute'
+    textStyle.top = '50%'
+    textStyle.left = '50%'
+    textStyle.transform = 'translate(-50%, -50%)'
+  }
+
+  badgeProps.paddingLeft = renderLeft
+    ? boxSize + 0.5
+    : badgeProps.radius === 'pill'
+    ? paddingHorizontal
+    : paddingHorizontalDense
+  badgeProps.paddingRight = renderRight
+    ? boxSize + 0.5
+    : badgeProps.radius === 'pill'
+    ? paddingHorizontal
+    : paddingHorizontalDense
+
+  // The `square` prop is no longer needed and should not get
+  // passed to `<StackView>` since it's not one of its props
+  // or a standard HTML attribute.
+  delete badgeProps.square
+
+  return (
+    <StackView
+      inline
+      axis="horizontal"
+      alignment="center"
+      distribution="center"
+      fontSize={fontSize}
+      lineHeight={lineHeight}
+      minHeight={boxSize}
+      paddingVertical={paddingVertical}
+      fill="currentColor"
+      textAlign="center"
+      position="relative"
+      cursor="default"
+      outline={0}
+      focus={{ backgroundColor: 'highlightSecondary' }}
+      onClick={stopPropagationClick(onClick)}
+      {...badgeProps}
+    >
+      {renderLeft && (
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          width={boxSize}
+          height={boxSize}
+          position="absolute"
+          top={0}
+          left={0}
+        >
+          {React.isValidElement(renderLeft)
+            ? cloneElement(renderLeft as React.ReactElement, {
+                size: renderLeft?.props?.size || badgeProps.size,
+              })
+            : renderLeft}
+        </Box>
+      )}
+
+      {typeof title === 'undefined' ? (
+        children
+      ) : (
+        <Text {...textStyle}>{title}</Text>
+      )}
+
+      {renderRight && (
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          width={boxSize}
+          height={boxSize}
+          position="absolute"
+          top={0}
+          right={0}
+        >
+          {React.isValidElement(renderRight)
+            ? cloneElement(renderRight as React.ReactElement, {
+                size: renderRight?.props?.size || badgeProps.size,
+              })
+            : renderRight}
+        </Box>
+      )}
+    </StackView>
+  )
+}
+
+export default Badge