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

package/src/Box/Box.tsx

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

package/src/Box/index.ts

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

package/src/Button/Button.mdx

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

@@ -1,101 +0,0 @@
-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' })
-})