@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/StepperField/StepperField.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+
+import Button, { ButtonProps } from '../Button'
+import { useBoxSize, useThemeProps } from '../system'
+import NumberField from '../NumberField'
+import StackView from '../StackView'
+
+type StepperFieldProps = {
+  /**
+   * Maximum number that can be selected.
+   */
+  max?: number
+  /**
+   * Minimum number that can be selected.
+   */
+  min?: number
+  /**
+   * Called when incrementing/decrementing the value.
+   */
+  onChange?: (newValue: number) => void
+  /**
+   * Specifies the size of each movement when incrementing/decrementing the value. Defaults to `1`.
+   */
+  step?: number
+  /**
+   * The current value of the stepper.
+   */
+  value?: number
+}
+
+const StepperField = ({
+  max = Infinity,
+  min = -Infinity,
+  onChange,
+  step = 1,
+  value = 0,
+  ...restProps
+}: StepperFieldProps) => {
+  const { size = 'md', ...themeProps } = useThemeProps(
+    'stepperField',
+    restProps
+  )
+
+  const boxSize: ButtonProps['size'] = size
+
+  const { fontSize, navigateSize, paddingHorizontal } = useBoxSize(boxSize)
+
+  return (
+    <StackView axis="horizontal" fontSize={fontSize} {...themeProps}>
+      <Button
+        disabled={value <= min}
+        icon={{ name: 'general.minus', size: navigateSize(boxSize, -1) }}
+        onClick={() => onChange(Math.max(value - step, min))}
+        size={boxSize}
+        title={`Decrement by ${step}`}
+      />
+      <NumberField
+        fontSize="inherit"
+        max={max}
+        min={min}
+        onChange={onChange}
+        paddingHorizontal={paddingHorizontal}
+        size={boxSize}
+        step={step}
+        value={value}
+      />
+      <Button
+        disabled={value >= max}
+        icon={{ name: 'general.plus', size: navigateSize(boxSize, -1) }}
+        onClick={() => onChange(Math.min(value + step, max))}
+        size={boxSize}
+        title={`Increment by ${step}`}
+      />
+    </StackView>
+  )
+}
+
+export default StepperField

package/src/StepperField/index.js

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

package/src/StepperProgress/Context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+const StepperProgressContext = createContext(null)
+export default StepperProgressContext

package/src/StepperProgress/Step.js

@@ -0,0 +1,84 @@
+// @flow
+import React, { useContext, useLayoutEffect, useState } from 'react'
+
+import Box from '../Box'
+import { spacingValue } from '../system'
+import StackView from '../StackView'
+
+import StepperProgressContext from './Context'
+
+const CIRCLE_SIZE = 1.5
+const BASE_COLOR = 'separatorSecondary'
+
+function Line() {
+  const { active, activeColor } = useContext(StepperProgressContext)
+  return (
+    <Box
+      position="absolute"
+      width="100%"
+      height="3px"
+      x={`calc(-100% + ${spacingValue(CIRCLE_SIZE / 2)})`}
+      y="4.5px"
+      backgroundColor={BASE_COLOR}
+      zIndex={0}
+    >
+      <Box
+        width="100%"
+        height="100%"
+        backgroundColor={activeColor}
+        transformOrigin="left center"
+        transition="transform 280ms ease-out"
+        style={{ transform: `scaleX(${active ? 1 : 0}` }}
+      />
+    </Box>
+  )
+}
+
+function Indicator(props) {
+  const context = useContext(StepperProgressContext)
+  const active = props.active === undefined ? context.active : props.active
+  const activeColor =
+    props.activeColor === undefined ? context.activeColor : props.activeColor
+  const [delay, setDelay] = useState('0ms')
+  useLayoutEffect(() => {
+    setDelay(active === true ? '0ms' : '280ms')
+  }, [active])
+  return (
+    <Box>
+      {context.includeLine && <Line />}
+      <Box
+        width={CIRCLE_SIZE}
+        height={CIRCLE_SIZE}
+        radius="circle"
+        backgroundColor={active ? activeColor : BASE_COLOR}
+        position="relative"
+        zIndex={1}
+        transition={`background-color 280ms ease-out`}
+        transitionDelay={delay}
+      />
+    </Box>
+  )
+}
+
+export type Props = {
+  /** Determines the active state of this individual step. */
+  active?: boolean,
+  /** Determines the active color of this individual step. */
+  activeColor?: string,
+  /** Render content above the step indicator. */
+  renderStart?: any,
+  /** Render content below the step indicator. */
+  renderEnd?: any,
+}
+
+function Step({ active, activeColor, renderStart, renderEnd }: Props) {
+  return (
+    <StackView alignment="center" position="relative">
+      {renderStart}
+      <Indicator active={active} activeColor={activeColor} />
+      {renderEnd}
+    </StackView>
+  )
+}
+
+export default Step

package/src/StepperProgress/StepperProgress.js

@@ -0,0 +1,45 @@
+// @flow
+import React, { Children } from 'react'
+
+import GridView from '../GridView'
+import StepperProgressContext from './Context'
+import { useThemeProps } from '../system'
+
+export type Props = {
+  /** Often accepts `StepperProgress.Step` component. */
+  children?: React.ReactNode,
+  /** Highlighted steps from the first step to this step index. */
+  activeStepIndex?: number,
+  /** Active color for each step indicator and line. Defaults to `primary-light`. */
+  activeColor?: string,
+}
+
+function StepperProgress({ activeStepIndex, children, ...restProps }: Props) {
+  const { activeColor = 'primary-light', ...themeProps } = useThemeProps(
+    'stepperProgress',
+    restProps
+  )
+  return (
+    <GridView
+      autoFlow="column"
+      autoColumns="1fr"
+      alignment="center"
+      {...themeProps}
+    >
+      {Children.map(children, (child, stepIndex) => (
+        <StepperProgressContext.Provider
+          key={stepIndex}
+          value={{
+            activeColor,
+            active: stepIndex <= activeStepIndex,
+            includeLine: stepIndex > 0,
+          }}
+        >
+          {child}
+        </StepperProgressContext.Provider>
+      ))}
+    </GridView>
+  )
+}
+
+export default StepperProgress

package/src/StepperProgress/StepperProgress.mdx

@@ -0,0 +1,61 @@
+---
+title: StepperProgress
+category: Indicators
+summary: Use to convey progress through consecutive steps. Composes [GridView](/gridview).
+propsSummary: Accepts [GridView](/gridview) props.
+themeKey: stepperProgress
+---
+
+```jsx live
+render(() => {
+  const [activeStepIndex, setActiveStepIndex] = React.useState(2)
+  return (
+    <StepperProgress width="50%" activeStepIndex={activeStepIndex}>
+      {generateRange(4).map((step) => (
+        <StepperProgress.Step
+          key={step}
+          renderEnd={
+            <StackView padding={2}>
+              <Button
+                size="sm"
+                title={step + 1}
+                onClick={() => setActiveStepIndex(step)}
+              />
+            </StackView>
+          }
+        />
+      ))}
+    </StepperProgress>
+  )
+})
+```
+
+```jsx live
+function Step({ active, activeColor, label, date, time = '--' }) {
+  return (
+    <StepperProgress.Step
+      active={active}
+      activeColor={activeColor}
+      renderStart={<Text padding={2}>{label}</Text>}
+      renderEnd={
+        <StackView alignment="center" height={8} padding={2} spacing={1}>
+          <Text size={5}>{date}</Text>
+          <Text size={5} color="foregroundSecondary">
+            {time}
+          </Text>
+        </StackView>
+      }
+    />
+  )
+}
+render(
+  <StackView width="100%" alignment="center">
+    <StepperProgress autoColumns="minmax(80px, 120px)" activeStepIndex={1}>
+      <Step label="Prepared" date="04/20" time="1:23pm" />
+      <Step label="Sent" date="04/21" time="8:00am" />
+      <Step label="Read" />
+      <Step label="Declined" active activeColor="error" />
+    </StepperProgress>
+  </StackView>
+)
+```

package/src/StepperProgress/index.js

@@ -0,0 +1,4 @@
+import StepperProgress from './StepperProgress'
+import Step from './Step'
+StepperProgress.Step = Step
+export default StepperProgress

package/src/Summary/Summary.mdx

@@ -0,0 +1,26 @@
+---
+title: Summary
+category: General
+propsSummary: Accepts [StackView](/stackview) props.
+---
+
+```jsx live
+render(
+  <Summary title="Tag Teams">
+    Our position on Positions is you should take your pointer and position it on
+    the Add tag button above to link some Tags.
+  </Summary>
+)
+```
+
+```jsx live
+render(
+  <Summary
+    image={<Avatar source="https://api.adorable.io/avatars/a" size="lg" />}
+    title="Team Leaders"
+  >
+    Our position on Positions is you should take your pointer and position it on
+    the Add tag button above to link some Tags.
+  </Summary>
+)
+```

package/src/Summary/Summary.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import Box from '../Box'
+import Heading from '../Heading'
+import StackView from '../StackView'
+
+export type SummaryProps = {
+  /**
+   * Provide a centered image at the top of the content block.
+   */
+  image?: React.ReactNode
+
+  /**
+   * Provide a centered title above the content and below the optional image.
+   */
+  title?: string
+
+  /**
+   * Brief description. Can include any markup like links and emphasised text.
+   */
+  children?: React.ReactNode
+}
+
+/**
+ * Use for brief content that could have an accompanying image or title.
+ */
+const Summary = ({
+  children,
+  image,
+  title,
+  ...restProps
+}: SummaryProps): JSX.Element => {
+  return (
+    <StackView alignment="center" padding={2} spacing={2} {...restProps}>
+      {image && <Box>{image}</Box>}
+      {title && <Heading level={3}>{title}</Heading>}
+      {children && (
+        <Box maxWidth={40} textAlign="center">
+          {children}
+        </Box>
+      )}
+    </StackView>
+  )
+}
+
+export default Summary

package/src/Summary/index.js

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

package/src/Tab/Tab.mdx

@@ -0,0 +1,22 @@
+---
+title: Tab
+category: General
+propsSummary: Accepts [Text](/text) props.
+---
+
+```jsx live
+render(
+  <StackView
+    axis="horizontal"
+    paddingHorizontal={1}
+    paddingTop={1}
+    spacing={1}
+    backgroundColor="primary-light"
+  >
+    <Tab active>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab disabled>Tab 3</Tab>
+    <Tab>Tab 4</Tab>
+  </StackView>
+)
+```

package/src/Tab/Tab.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+import { ColorProp } from '../index'
+import Text, { TextProps } from '../Text'
+
+const boxSizes = {
+  xs: {
+    fontSize: 5,
+    padding: 0.5,
+    paddingHorizontal: 1,
+  },
+  sm: {
+    fontSize: 4,
+    padding: 0.5,
+    paddingHorizontal: 1.5,
+  },
+  md: {
+    fontSize: 4,
+    padding: 1,
+    paddingHorizontal: 2,
+  },
+  lg: {
+    fontSize: 3,
+    padding: 1.5,
+    lineHeight: 2,
+    paddingHorizontal: 2,
+  },
+}
+
+export type TabProps = {
+  /** Whether or not the tab is active. Sets element to span and removes `href` and hover effects if `true`. */
+  active?: boolean
+
+  /** Whether or not the tab is disabled. */
+  disabled?: boolean
+
+  /** Link to URL. Sets element to an anchor, otherwise it will use a button. */
+  href?: string
+
+  /** The size of the tab which includes `fontSize`, `lineHeight` and `padding`. */
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+
+  /** The background color of the tab. */
+  color?: ColorProp
+} & TextProps
+
+export function Tab({
+  active,
+  disabled,
+  href,
+  color = 'backgroundSecondary',
+  size = 'md',
+  ...props
+}: TabProps) {
+  const tabProps = {
+    as: active ? 'span' : href ? 'a' : 'button',
+    fontWeight: 400,
+    radiusTop: 4,
+    cursor: active ? 'default' : 'pointer',
+    transition: 'opacity 160ms ease-out',
+    backgroundColor: color,
+    disabled,
+  } as any
+  if (!active) {
+    if (disabled) {
+      tabProps.opacity = 0.6
+      tabProps.cursor = 'not-allowed'
+      if (href) {
+        tabProps['aria-disabled'] = true
+      }
+    } else {
+      tabProps.href = href
+      tabProps.opacity = 0.8
+      tabProps.hover = {
+        opacity: 1,
+      }
+    }
+  }
+  return <Text {...tabProps} {...boxSizes[size]} {...props} />
+}

package/src/Tab/index.ts

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

package/src/TabNav/Tab.mdx

@@ -0,0 +1,7 @@
+---
+title: TabNav.Tab
+category: Header
+summary: A tab which renders in the TabNav component.
+parent: TabNav
+uxCompliant: true
+---

package/src/TabNav/Tab.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+
+import Text from '../Text'
+import { Icon } from '..'
+import { StackView, StackViewProps } from '../StackView'
+import { convertToBaseUnit } from '../system/utils'
+import { designTokens } from '../designTokens'
+
+export type TabProps = {
+  /** Number or string to display in a badge to the right of the label. */
+  badge?: string | number
+
+  /** Whether the tab is disabled. */
+  disabled?: boolean
+
+  /** The icon to display to the left of the label. */
+  iconLeft?: string | object
+
+  /** The icon to display to the left of the label. */
+  iconRight?: string | object
+
+  /** Whether the tab is currently being displayed at a mobile breakpoint. This is provided by its TabNav parent. */
+  isMobile: boolean
+
+  /** Whether the tab is selected. */
+  isSelected?: boolean
+
+  /** The label for the tab. */
+  label: string
+
+  /** The function to call when the tab is clicked. */
+  onClick?: () => void
+
+  /** The background color of the selected tab. */
+  selectedTabBackgroundColor: string
+}
+
+const {
+  tabNav: {
+    tab,
+    tab: { desktop, mobile },
+  },
+} = designTokens
+
+export const Tab = ({
+  badge = undefined,
+  disabled = false,
+  iconLeft = undefined,
+  iconRight = undefined,
+  isMobile = false,
+  isSelected = false,
+  label,
+  onClick = undefined,
+  selectedTabBackgroundColor,
+}: TabProps) => {
+  const defaultIconProps = { color: tab.iconColor }
+
+  const iconLeftProps =
+    typeof iconLeft === 'string'
+      ? { ...defaultIconProps, name: iconLeft }
+      : { ...defaultIconProps, ...iconLeft }
+
+  const iconRightProps =
+    typeof iconRight === 'string'
+      ? { ...defaultIconProps, name: iconRight }
+      : { ...defaultIconProps, ...iconRight }
+
+  const desktopStyles = {
+    backgroundColor:
+      isSelected && !disabled
+        ? selectedTabBackgroundColor
+        : desktop.defaultBackgroundColor,
+    fontSize: `${desktop.fontSize}px`,
+    height: convertToBaseUnit(desktop.height),
+    paddingHorizontal: convertToBaseUnit(desktop.paddingX),
+    radiusTop: desktop.borderRadiusTop,
+    ...(!disabled && {
+      active: {
+        backgroundColor: selectedTabBackgroundColor,
+        color: desktop.activeTextColor,
+      },
+      hover: {
+        backgroundColor: selectedTabBackgroundColor,
+        color: desktop.hoverTextColor,
+      },
+    }),
+  } as StackViewProps
+
+  const mobileStyles = {
+    borderBottomColor: isSelected ? 'primary' : 'transparent',
+    borderBottomStyle: 'solid',
+    borderBottomWidth: mobile.borderBottomWidth,
+    fontSize: `${mobile.fontSize}px`,
+    height: convertToBaseUnit(mobile.height),
+    paddingBottom: convertToBaseUnit(mobile.paddingBottom),
+    paddingTop: convertToBaseUnit(mobile.paddingTop),
+  } as StackViewProps
+
+  return (
+    <StackView
+      alignment="center"
+      aria-disabled={disabled}
+      axis="horizontal"
+      color={
+        disabled
+          ? tab.disabledTextColor
+          : isSelected
+          ? tab.selectedTextColor
+          : tab.textColor
+      }
+      cursor={disabled ? 'not-allowed' : isSelected ? 'default' : 'pointer'}
+      role="tab"
+      spacing={1}
+      userSelect="none"
+      {...{ onClick }}
+      {...(isMobile ? mobileStyles : desktopStyles)}
+    >
+      {iconLeft && <Icon {...iconLeftProps} />}
+      {label}
+      {badge && (
+        <StackView
+          backgroundColor={tab.badgeBackgroundColor}
+          distribution="center"
+          paddingHorizontal={1}
+          radius="pill"
+        >
+          <Text color={tab.badgeTextColor} size={`${tab.badgeFontSize}px`}>
+            {badge}
+          </Text>
+        </StackView>
+      )}
+      {iconRight && <Icon {...iconRightProps} />}
+    </StackView>
+  )
+}
+
+Tab.displayName = 'TabNav.Tab'
+
+export default Tab