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

package/src/Badge/Status.mdx

@@ -0,0 +1,34 @@
+---
+title: Badge.Status
+category: General
+propsSummary: Accepts [Badge](/badge) props.
+parent: Badge
+---
+
+```jsx live
+render(() => {
+  const [type, setType] = React.useState({})
+  return (
+    <StackView alignment="center" spacing={2}>
+      <StackView axis="horizontal" spacing={1}>
+        {[
+          { title: 'Failed', status: 'error' },
+          { title: 'Saved', status: 'success' },
+        ].map((type) => (
+          <Button
+            key={type.title}
+            title={type.title}
+            onClick={() => setType(type)}
+          />
+        ))}
+      </StackView>
+      <Badge.Status
+        size="xs"
+        status={type.status}
+        title={type.title}
+        onClearRequest={() => setType({})}
+      />
+    </StackView>
+  )
+})
+```

package/src/Badge/Status.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react'
+import { getColor } from '../system'
+import Icon from '../Icon'
+import { default as Badge, BadgeProps } from './Badge'
+
+const statuses = {
+  error: { color: 'error', icon: 'general.x' },
+  success: { color: 'success', icon: 'general.check' },
+}
+
+export type StatusProps = {
+  /**
+   * When `true`, Sets a light background to use against darker backgrounds.
+   */
+  light?: boolean
+
+  /**
+   * Called when the status should be set hidden
+   */
+  onClearRequest: () => void
+
+  /**
+   * The size of the badge
+   */
+  size?: BadgeProps['size']
+
+  /**
+   * The status of the badge, if nothing passed, nothing will be rendered.
+   */
+  status?: 'error' | 'success'
+
+  /**
+   * Title of badge
+   */
+  title: string
+}
+
+const Status = ({
+  light,
+  onClearRequest,
+  size = 'sm',
+  status,
+  title,
+  ...restProps
+}: StatusProps): JSX.Element => {
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    const requestClear = () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+      setTimeoutId(setTimeout(onClearRequest, 1800))
+    }
+
+    requestClear()
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+    }
+  }, [status]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!status) {
+    return null
+  } else {
+    const { color, icon } = statuses[status]
+    return (
+      <Badge
+        color={
+          light
+            ? { background: 'light', foreground: getColor(color) }
+            : getColor(color)
+        }
+        fontWeight={600}
+        paddingRight={1}
+        radius="pill"
+        renderLeft={<Icon name={icon} />}
+        {...{ size, title }}
+        {...restProps}
+      />
+    )
+  }
+}
+
+Status.displayName = 'Badge.Status'
+
+export default Status

package/src/Badge/index.js

@@ -0,0 +1,4 @@
+import Badge from './Badge'
+import Status from './Status'
+Badge.Status = Status
+export default Badge

package/src/Box/Box.mdx

@@ -0,0 +1,15 @@
+---
+title: Box
+category: Primitives
+summary: Box is the primitive component that other components build from.
+propsSummary: Accepts all [style props](/style-props) and valid HTML attributes.
+order: 1
+---
+
+```jsx live
+render(
+  <Box padding={2} backgroundColor="blue-5" color="white">
+    Box with padding and a background color.
+  </Box>
+)
+```

package/src/Box/Box.tsx

@@ -0,0 +1,77 @@
+/** @jsx jsx */
+import * as React from 'react'
+import { jsx } from '@emotion/react'
+
+import { StyleProps, MediaQueries, Variants } from '../index'
+import splitStyles from '../system/split-styles'
+import { useVariant } from '../VariantProvider'
+
+export type BoxProps<E extends React.ElementType = React.ElementType> = {
+  /**
+   * Render custom component or HTML element tag. (Defaults to a `<div>` element).
+   */
+  as?: E
+
+  /**
+   * The content of the box.
+   */
+  children?: React.ReactNode
+
+  /**
+   * If true, sets `display: inline-block`, otherwise it defaults to `display: block`
+   */
+  inline?: boolean
+
+  /**
+   * Gain access to the internal ref
+   */
+  innerRef?: React.Ref<any>
+
+  /**
+   * Describes styles for the box when hovered.
+   */
+  hover?: object
+
+  /**
+   * Describes props at different breakpoints. [Read about mediaQueries](/responsive).
+   */
+  mediaQueries?: object
+
+  /**
+   * Describes styles at various points in time. [Read about variants](/variants).
+   */
+  variants?: object
+
+  /**
+   * Controls display property. If `false` sets `display: none`, otherwise defaults to initial display value.
+   */
+  visible?: boolean
+} & StyleProps
+
+const defaultElement = 'div'
+
+/**
+ * Box is the base component that everything builds from. It is responsible for processing all style props.
+ */
+export const Box = <E extends React.ElementType = 'div'>({
+  as,
+  inline,
+  innerRef,
+  ...props
+}: BoxProps<E> &
+  Omit<React.ComponentPropsWithoutRef<E>, keyof BoxProps<E>>) => {
+  const variant = useVariant()
+
+  const Element: React.ElementType = as || defaultElement
+
+  return (
+    <Element
+      ref={innerRef}
+      {...splitStyles({
+        display: inline ? 'inline-block' : 'block',
+        variant,
+        ...props,
+      })}
+    />
+  )
+}

package/src/Box/index.ts

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

package/src/Button/Button.mdx

@@ -0,0 +1,133 @@
+---
+title: Button
+category: General
+summary: Used for any type of user action, including navigation.
+propsSummary: Accepts all valid HTML attributes and [StackView](/stackview) props.
+isParent: true
+---
+
+```jsx live
+const themes = [
+  { title: 'Default' },
+  { title: 'Primary', theme: 'primary' },
+  { title: 'Success', theme: 'success' },
+  { title: 'Warning', theme: 'warning' },
+  { title: 'Error', theme: 'error' },
+  { title: 'Info', theme: 'info' },
+]
+const variants = ['fill', 'outline', 'naked']
+render(
+  <StackView alignment="center" spacing={1}>
+    {variants.map((variant) => (
+      <StackView key={variant} axis="horizontal" spacing={1}>
+        {themes.map(({ title, theme }) => (
+          <Button key={title} title={title} theme={theme} variant={variant} />
+        ))}
+      </StackView>
+    ))}
+  </StackView>
+)
+```
+
+```jsx live
+render(
+  <StackView axis="horizontal">
+    <StackView
+      axis="horizontal"
+      padding={1}
+      spacing={1}
+      backgroundColor="grey-2"
+    >
+      <Button title="Dark" theme="dark" />
+      <Button title="Dark" theme="dark" variant="outline" />
+      <Button title="Dark" theme="dark" variant="naked" />
+    </StackView>
+    <StackView
+      axis="horizontal"
+      padding={1}
+      spacing={1}
+      backgroundColor="grey-8"
+    >
+      <Button title="Light" theme="light" />
+      <Button title="Light" theme="light" variant="outline" />
+      <Button title="Light" theme="light" variant="naked" />
+    </StackView>
+  </StackView>
+)
+```
+
+```jsx live
+render(
+  <StackView
+    axis="horizontal"
+    padding={1}
+    spacing={1}
+    backgroundColor="primary-light"
+  >
+    <Button title="White" theme="white" />
+    <Button title="White" theme="white" variant="outline" />
+    <Button title="White" theme="white" variant="naked" />
+    <Button title="Light" theme="light" />
+    <Button title="Light" theme="light" variant="outline" />
+    <Button title="Light" theme="light" variant="naked" />
+  </StackView>
+)
+```
+
+```jsx live
+render(
+  <StackView spacing={2}>
+    <StackView axis="horizontal" alignment="start" spacing={1}>
+      {['xs', 'sm', 'md', 'lg'].map((size) => (
+        <Button
+          key={size}
+          size={size}
+          title="person"
+          spinner={true}
+          variant="outline"
+        />
+      ))}
+    </StackView>
+
+    <StackView axis="horizontal" alignment="start" spacing={1}>
+      {['xs', 'sm', 'md', 'lg'].map((size) => (
+        <Button key={size} size={size} title="Button" />
+      ))}
+    </StackView>
+
+    <StackView axis="horizontal" alignment="start" spacing={1}>
+      {['xs', 'sm', 'md', 'lg'].map((size) => (
+        <Button
+          key={size}
+          size={size}
+          title="Button"
+          iconLeft={{ name: 'general.twoPeople' }}
+        />
+      ))}
+    </StackView>
+
+    <StackView axis="horizontal" alignment="start" spacing={1}>
+      {['xs', 'sm', 'md', 'lg'].map((size) => (
+        <Button
+          key={size}
+          size={size}
+          title="Button"
+          iconRight={{ name: 'general.downCaret' }}
+        />
+      ))}
+    </StackView>
+
+    <StackView axis="horizontal" alignment="start" spacing={1}>
+      {['xs', 'sm', 'md', 'lg'].map((size) => (
+        <Button
+          key={size}
+          size={size}
+          icon={{ name: 'general.person' }}
+          tooltip={{ title: 'person' }}
+          radius="circle"
+        />
+      ))}
+    </StackView>
+  </StackView>
+)
+```

package/src/Button/Button.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { render, fireEvent, createEvent } from '@testing-library/react'
+import { Button } from './Button'
+
+it(`should render as <button> with type="button" by default`, () => {
+  const { container } = render(<Button />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute('type')).toEqual('button')
+})
+
+it(`should render as <button> with type="submit"`, () => {
+  const { container } = render(<Button type='submit' />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute('type')).toEqual('submit')
+})
+
+it(`if "disabled" prop is provided, set "aria-disabled" attribute`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  expect(button.getAttribute("aria-disabled")).toEqual("true")
+  expect(button.disabled).toBe(false)
+})
+
+it(`if "disabled" prop is provided, prevent "Click" event from firing`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  const clickEvent = createEvent.click(button)
+  fireEvent(button, clickEvent)
+
+  expect(clickEvent.defaultPrevented).toBe(true)
+})
+
+it(`if "disabled" prop is provided, prevent keyDown "Enter" event from firing`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  const keyDownEvent = createEvent.keyDown(button, { key: 'Enter' })
+  fireEvent(button, keyDownEvent)
+
+  expect(keyDownEvent.defaultPrevented).toBe(true)
+})
+
+it(`if "disabled" prop is provided, prevent keyDown "Space" event from firing`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  const keyDownEvent = createEvent.keyDown(button, { key: ' ' })
+  fireEvent(button, keyDownEvent)
+
+  expect(keyDownEvent.defaultPrevented).toBe(true)
+})
+
+it(`should render title`, () => {
+  const title = 'Hello'
+  const { getByText } = render(<Button title={title} />)
+  getByText(title)
+})
+
+it(`should render <a> without a type if "to" is provided`, () => {
+  const { container } = render(<Button to='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('type')).toBeNull()
+})
+
+it(`should render <a> without a type if "href" is provided`, () => {
+  const { container } = render(<Button href='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('type')).toBeNull()
+})
+
+it(`should render <a> with "href" if "to" is specifed`, () => {
+  const { container } = render(<Button to='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('href')).toEqual('#')
+})
+
+it(`should render href and external link values`, () => {
+  const title = 'Hello'
+  const { getByText } = render(
+    <Button external title={title} to="https://www.planningcenter.com" />
+  )
+  const button = getByText(title)
+  expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com')
+  expect(button.getAttribute('rel')).toEqual('noopener noreferrer')
+  expect(button.getAttribute('target')).toEqual('_blank')
+})
+
+it(`should call onClick when clicked or Enter or Space key is pressed`, () => {
+  const onClick = jest.fn()
+  const { container } = render(<Button onClick={onClick} />)
+  fireEvent.click(container.firstChild)
+  expect(onClick).toHaveBeenCalledTimes(1)
+})
+
+it(`should not call onClick when Enter or Space key is pressed and onClick isn't present`, () => {
+  const { container } = render(<Button />)
+  fireEvent.keyDown(container.firstChild, { key: 'Enter' })
+  fireEvent.keyDown(container.firstChild, { key: 'Space' })
+})