@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Badge/Status.js

@@ -0,0 +1,101 @@
+// @flow
+import React, { Component } from 'react'
+
+import { getColor } from '../system'
+import Icon from '../Icon'
+
+import Badge from './Badge'
+
+const statuses = {
+  error: {
+    color: 'error',
+    icon: 'close',
+  },
+  success: {
+    color: 'success',
+    icon: 'checkmark',
+  },
+}
+
+type StatusProps = {
+  /**
+   * Title of badge
+   */
+  title: string,
+
+  /**
+   * The size of the badge
+   */
+  size?: string,
+
+  /**
+   * The status of the badge, if nothing passed, nothing will be rendered.
+   */
+  status?: 'error' | 'success',
+
+  /**
+   * When `true`, Sets a light background to use against darker backgrounds.
+   */
+  light?: boolean,
+
+  /**
+   * Called when the status should be set hidden
+   */
+  onClearRequest: () => void,
+}
+
+/**
+ * Used to show a reaction to saving user data
+ */
+class Status extends Component<StatusProps> {
+  static defaultProps = {
+    title: '',
+    size: 'sm',
+  }
+
+  timeout = null
+
+  componentDidMount() {
+    this.requestClear()
+  }
+
+  componentDidUpdate(lastProps) {
+    if (lastProps.status !== this.props.status) {
+      this.requestClear()
+    }
+  }
+
+  requestClear() {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+    this.timeout = setTimeout(this.props.onClearRequest, 1800)
+  }
+
+  render() {
+    const { status, light, onClearRequest, ...props } = this.props
+    if (!status) {
+      return null
+    } else {
+      const { color, icon } = statuses[status]
+      return (
+        <Badge
+          paddingRight={1}
+          radius="pill"
+          renderLeft={<Icon name={icon} />}
+          color={
+            light
+              ? { background: 'light', foreground: getColor(color) }
+              : getColor(color)
+          }
+          fontWeight={600}
+          {...props}
+        />
+      )
+    }
+  }
+}
+
+Status.displayName = 'Badge.Status'
+
+export default Status

package/src/Badge/Status.mdx

@@ -0,0 +1,32 @@
+---
+title: Badge.Status
+category: General
+---
+
+```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/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,14 @@
+---
+title: Box
+category: Primitives
+summary: Box is the primitive component that other components build from. It is responsible for processing all [style props](/style-props).
+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,56 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import * as React from 'react'
+
+import { StyleProps, MediaQueries, Variants } from '../index'
+import splitStyles from '../system/split-styles'
+import { useVariant } from '../VariantProvider'
+
+export type BoxProps = {
+  /**
+   * Render custom component or HTML element tag.
+   */
+  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
+} & StyleProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<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

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

package/src/Button/Button.mdx

@@ -0,0 +1,130 @@
+---
+title: Button
+category: General
+summary: Used for any type of user action, including navigation.
+---
+
+```jsx live
+const themes = [
+  { title: 'Default' },
+  { title: 'Primary', theme: 'primary' },
+  { 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: 'people' }}
+        />
+      ))}
+    </StackView>
+
+    <StackView axis="horizontal" alignment="start" spacing={1}>
+      {['xs', 'sm', 'md', 'lg'].map((size) => (
+        <Button
+          key={size}
+          size={size}
+          title="Button"
+          iconRight={{ name: 'arrow-down' }}
+        />
+      ))}
+    </StackView>
+
+    <StackView axis="horizontal" alignment="start" spacing={1}>
+      {['xs', 'sm', 'md', 'lg'].map((size) => (
+        <Button
+          key={size}
+          size={size}
+          icon={{ name: 'person' }}
+          tooltip={{ title: 'person' }}
+          radius="circle"
+        />
+      ))}
+    </StackView>
+  </StackView>
+)
+```

package/src/Button/Button.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { Button } from './Button'
+
+it(`should render title`, () => {
+  const title = 'Hello'
+  const { getByText } = render(<Button title={title} />)
+  getByText(title)
+})
+
+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' })
+})