@planningcenter/tapestry-react 1.0.0 → 1.3.0

package/dist/esm/NumberField/NumberField.js

@@ -134,12 +134,25 @@ var NumberField = /*#__PURE__*/function (_Component) {
           maxValue = _this$getParsedValues5.maxValue;
 
       if (_this.props.pad) {
-        var targetValue = event.target.value === '' ? event.target.value : parseFloat(event.target.value);
+        var deleteKeyPressed = event.target.value === '';
+        var targetValue = deleteKeyPressed ? event.target.value : parseFloat(event.target.value);
 
-        if (targetValue !== '') {
-          var nextValue = _this.clampValue(targetValue);
+        if (deleteKeyPressed) {
+          var nextValue = ("" + _this.props.value).slice(0, -1);
 
-          if (_this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
+          _this.props.onChange(padNumber(nextValue, _this.props.pad));
+        } else {
+          var _nextValue = _this.clampValue(targetValue);
+
+          var paddedValue = parseFloat("" + _this.props.value + targetValue);
+
+          if (!_this.firstTouch && !isNaN(targetValue) && _this.isValueValid(paddedValue)) {
+            _nextValue = paddedValue;
+          }
+
+          _this.firstTouch = false;
+
+          if (_this.props.moveFocusOnMax && _nextValue / maxValue > 0.1) {
             var _getTabbableSiblings = getTabbableSiblings(event.target),
                 next = _getTabbableSiblings.next;
 
@@ -150,11 +163,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
             }
           }
 
-          _this.firstTouch = false;
-
-          _this.changeIfValid(nextValue);
-        } else {
-          _this.props.onChange('');
+          _this.changeIfValid(_nextValue);
         }
       } else {
         _this.props.onChange(event.target.value);
@@ -219,7 +228,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
       textOverflow: undefined,
       autoComplete: 'off',
       value: numberValue,
-      highlightOnInteraction: highlightOnInteraction,
+      highlightOnInteraction: highlightOnInteraction || pad,
       onBlur: this.handleBlur,
       onInput: this.handleInput,
       onKeyDown: this.handleKeyDown

package/dist/esm/Page/PageActions.js

@@ -4,7 +4,12 @@ import StackView from '../StackView';
 
 function PageActions(props) {
   return /*#__PURE__*/React.createElement(StackView, _extends({
+    alignment: "center",
+    alignSelf: "end",
     axis: "horizontal",
+    distribution: "end",
+    flex: "1",
+    paddingBottom: 2,
     spacing: 1
   }, props));
 }

package/dist/esm/Page/PageHeader.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { Children } from 'react';
+import React from 'react';
 import { useThemeValue } from '../system';
 import StackView from '../StackView';
-import { PAGE_TABLIST_DISPLAY_NAME } from './PageTabList';
 
 function PageHeader(_ref) {
   var children = _ref.children,
@@ -11,24 +10,24 @@ function PageHeader(_ref) {
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "toolbar"]);
 
   var themeProps = useThemeValue('pageHeader');
-  var tabsPresent = toolbar ? Children.toArray(toolbar.props.children).some(function (child) {
-    return child && child.type.displayName === PAGE_TABLIST_DISPLAY_NAME;
-  }) : false;
-  var childrenToRender = toolbar ? children ? Children.toArray([/*#__PURE__*/React.createElement(StackView, {
-    axis: "horizontal",
-    alignment: "center",
-    width: "100%"
-  }, children), toolbar]) : toolbar : children;
   return /*#__PURE__*/React.createElement(StackView, _extends({
     as: "header",
-    axis: children && toolbar ? 'vertical' : 'horizontal',
-    alignment: children && toolbar ? 'start' : 'center',
-    paddingHorizontal: 3,
-    paddingTop: 1.5,
-    paddingBottom: tabsPresent ? null : 1.5,
-    spacing: 1.5,
-    backgroundColor: "primary-light"
-  }, themeProps, restProps), childrenToRender);
+    axis: "vertical",
+    backgroundColor: "primary-light",
+    paddingHorizontal: 2,
+    minHeight: 8,
+    mediaQueries: {
+      sm: {
+        paddingHorizontal: 3
+      }
+    },
+    spacing: 0
+  }, themeProps, restProps), children && /*#__PURE__*/React.createElement(StackView, {
+    alignment: "center",
+    axis: "horizontal",
+    paddingTop: 2,
+    width: "100%"
+  }, children), toolbar);
 }
 
 export default PageHeader;

package/dist/esm/Page/PageTab.js

@@ -1,11 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Tab from '../Tab';
+import { useThemeValue } from '../system';
 
 function PageTab(props) {
-  return /*#__PURE__*/React.createElement(Tab, _extends({}, props, {
+  var themeProps = useThemeValue('pageTab');
+  return /*#__PURE__*/React.createElement(Tab, _extends({
+    mediaQueries: {
+      sm: {
+        paddingHorizontal: 3
+      }
+    },
+    paddingHorizontal: 1.5,
     size: "lg"
-  }));
+  }, themeProps, props));
 }
 
 export default PageTab;

package/dist/esm/Page/PageTabList.js

@@ -1,14 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import StackView from '../StackView';
-export var PAGE_TABLIST_DISPLAY_NAME = 'PageTabList';
-
-function PageTabList(props) {
+export default function PageTabList(props) {
   return /*#__PURE__*/React.createElement(StackView, _extends({
     axis: "horizontal",
-    spacing: 0.5
+    paddingTop: 2,
+    spacing: 0.5,
+    alignSelf: "end"
   }, props));
-}
-
-PageTabList.displayName = PAGE_TABLIST_DISPLAY_NAME;
-export default PageTabList;
+}

package/dist/esm/Page/PageTitle.js

@@ -6,8 +6,9 @@ import Heading from '../Heading';
 function PageTitle(props) {
   var themeProps = useThemeValue('pageTitle');
   return /*#__PURE__*/React.createElement(Heading, _extends({
-    level: 2,
-    color: "white"
+    color: "white",
+    fontSize: "25px",
+    level: 2
   }, themeProps, props));
 }
 

package/dist/esm/Page/PageToolbar.js

@@ -1,14 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import StackView from '../StackView';
+import { useThemeValue } from '../system';
 
 function PageToolbar(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(StackView, {
-    grow: 1,
+  var _mediaQueries;
+
+  var stackBelow = _ref.stackBelow,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["stackBelow"]);
+
+  var themeBreakpoints = useThemeValue('breakpoints');
+  var breakpoint = Object.keys(themeBreakpoints).includes(stackBelow) ? stackBelow : 'sm';
+  var stackProps = stackBelow ? {
+    axis: 'vertical',
+    alignment: 'stretch',
+    spacing: 2,
+    mediaQueries: (_mediaQueries = {}, _mediaQueries[breakpoint] = {
+      axis: 'horizontal',
+      alignment: 'center',
+      paddingBottom: 0,
+      spacing: 0
+    }, _mediaQueries)
+  } : null;
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    alignment: "center",
     axis: "horizontal",
-    alignment: "start",
-    distribution: "space-between"
-  }, children);
+    distribution: "space-between",
+    flex: 1,
+    spacing: 2,
+    width: "100%"
+  }, stackProps, restProps));
 }
 
 export default PageToolbar;

package/dist/types/ChurchCenterStatus/ChurchCenterStatus.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 declare type ChurchCenterStatusProps = {
+    /**
+     * Pass props to the Dropdown buttons.
+     */
+    buttonProps?: object;
     /**
      * Determines status of Church Center App.
      */
@@ -36,10 +40,20 @@ declare type ChurchCenterStatusProps = {
      * Where the browser should navigate when destination button is pressed.
      */
     productUrl: string;
+    /**
+     * Render nodes at the end of the popover. `buttonProps` is passed as an argument
+     * and can be spread on any `<Button />` component to match the style of the other
+     * popover links.
+     */
+    renderPopoverFooter: Function;
     /**
      * Where the browser should navigate when settings button is pressed.
      */
     settingsUrl: string;
+    /**
+     * Toggle the settings link display.
+     */
+    showSettingsLink?: boolean;
 };
-export declare function ChurchCenterStatus({ ccAppEnabled, ccPublishingEnabled, ccWebEnabled, description, destinationLabel, disabledDescription, dropdownProps, icons, productUrl, settingsUrl, ...props }: ChurchCenterStatusProps): JSX.Element;
+export declare function ChurchCenterStatus({ buttonProps: passedButtonProps, ccAppEnabled, ccPublishingEnabled, ccWebEnabled, description, destinationLabel, disabledDescription, dropdownProps, icons, productUrl, renderPopoverFooter, settingsUrl, showSettingsLink, ...props }: ChurchCenterStatusProps): JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/ActionsDropdown/ActionsDropdown.tsx

@@ -60,10 +60,10 @@ export function ActionsDropdown({
   defaultButtonProps = defaultTheme.button.themes.primary.fill,
   duplicates,
   duplicatesButtonProps = {
-    color: 'white',
-    backgroundColor: 'hsl(25deg 79% 57%)',
-    hover: { backgroundColor: 'hsl(25deg 80% 54%)' },
-    active: { backgroundColor: 'hsl(25deg 82% 51%)' },
+    backgroundColor: 'hsl(42deg 87% 94%)',
+    color: 'hsl(0deg 0% 24%)',
+    hover: { backgroundColor: 'hsl(42deg 87% 90%)' },
+    active: { backgroundColor: 'hsl(42deg 87% 87%)' },
   },
   inactive,
   inactiveButtonProps = {
@@ -82,8 +82,9 @@ export function ActionsDropdown({
       iconLeft={
         hasDuplicates || hasInactiveDate
           ? {
+              color: hasDuplicates ? '#E6A714' : 'white',
               name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
-              size: 'lg',
+              size: 'md',
             }
           : undefined
       }
@@ -104,9 +105,9 @@ export function ActionsDropdown({
         <>
           <StackView axis="horizontal" padding={2} spacing={1}>
             <Icon
-              name="exclamation-triangle-filled"
-              color="#e8833a"
+              color="#E6A714"
               marginTop="3px"
+              name="exclamation-triangle-filled"
             />
             <Text size={4}>
               There {duplicates.amount > 1 ? 'are' : 'is'} {duplicates.amount}{' '}

package/src/Button/Button.tsx

@@ -116,6 +116,7 @@ export function Button({
 
   let buttonProps: any = {
     alignment: 'center',
+    as: (restProps as any).href || to ? 'a' : 'div',
     axis: 'horizontal',
     distribution: 'center',
     fontSize,
@@ -127,7 +128,6 @@ export function Button({
     role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
-    as: (restProps as any).href || to ? 'a' : 'div',
     userSelect: 'none',
     zIndex: 1,
   }
@@ -271,6 +271,11 @@ export function Button({
     }
   }
 
+  // pass to if as is defined
+  if ((restProps as any).as) {
+    buttonProps.to = to
+  }
+
   if (process.env.NODE_ENV !== 'production') {
     if (icon && !(title || (tooltip && (tooltip as any).title))) {
       const { tooltipProps, wrapperProps } = useAccessibilityViolation(

package/src/ChurchCenterStatus/ChurchCenterStatus.mdx

@@ -59,6 +59,24 @@ render(
 )
 ```
 
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled
+    ccPublishingEnabled={false}
+    ccWebEnabled
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    renderPopoverFooter={(buttonProps) => (
+      <Button title="Another link!" {...buttonProps} />
+    )}
+    settingsUrl="#settings"
+    showSettingsLink={false}
+  />
+)
+```
+
 ## Custom icons
 
 To use the Planning Center General set of icons, import the general set to your theme and define the overrides with the `icons` prop.

package/src/ChurchCenterStatus/ChurchCenterStatus.tsx

@@ -8,6 +8,11 @@ import StackView from '../StackView'
 import Text from '../Text'
 
 type ChurchCenterStatusProps = {
+  /**
+   * Pass props to the Dropdown buttons.
+   */
+  buttonProps?: object
+
   /**
    * Determines status of Church Center App.
    */
@@ -53,13 +58,26 @@ type ChurchCenterStatusProps = {
    */
   productUrl: string
 
+  /**
+   * Render nodes at the end of the popover. `buttonProps` is passed as an argument
+   * and can be spread on any `<Button />` component to match the style of the other
+   * popover links.
+   */
+  renderPopoverFooter: Function
+
   /**
    * Where the browser should navigate when settings button is pressed.
    */
   settingsUrl: string
+
+  /**
+   * Toggle the settings link display.
+   */
+  showSettingsLink?: boolean
 }
 
 export function ChurchCenterStatus({
+  buttonProps: passedButtonProps = {},
   ccAppEnabled = false,
   ccPublishingEnabled = false,
   ccWebEnabled = false,
@@ -69,7 +87,9 @@ export function ChurchCenterStatus({
   dropdownProps = {},
   icons,
   productUrl,
+  renderPopoverFooter = () => {},
   settingsUrl,
+  showSettingsLink = true,
   ...props
 }: ChurchCenterStatusProps) {
   const buttonProps: any = {
@@ -78,9 +98,14 @@ export function ChurchCenterStatus({
     paddingHorizontal: 2,
     radius: 0,
     variant: 'naked',
+    ...passedButtonProps,
   }
 
   const ccEnabled = ccAppEnabled || ccWebEnabled
+  const hasLinks =
+    showSettingsLink ||
+    (ccEnabled && ccPublishingEnabled) ||
+    !!renderPopoverFooter()
 
   const icon = {
     check: 'checkmark',
@@ -142,25 +167,32 @@ export function ChurchCenterStatus({
             </StackView>
           )}
         </StackView>
-        <Divider margin={0.5} />
+        {hasLinks && <Divider margin={0.5} />}
         <StackView>
-          <Button
-            external
-            title="Update settings"
-            to={settingsUrl}
-            {...buttonProps}
-          />
+          {showSettingsLink && (
+            <Button
+              external
+              title="Update settings"
+              to={settingsUrl}
+              {...buttonProps}
+            />
+          )}
           {ccEnabled && ccPublishingEnabled && (
-            <Button external to={productUrl} {...buttonProps}>
-              Visit {destinationLabel}
-              <Icon
-                color="primary"
-                name={icon.external}
-                marginLeft={1}
-                size="sm"
-              />
-            </Button>
+            <Button
+              external
+              iconRight={{
+                color: 'primary',
+                name: icon.external,
+                marginLeft: 1,
+                size: 'xs',
+              }}
+              title={`Visit ${destinationLabel}`}
+              to={productUrl}
+              {...buttonProps}
+              as="a"
+            />
           )}
+          {renderPopoverFooter(buttonProps)}
         </StackView>
       </Dropdown>
     </StackView>

package/src/Menu/Heading.js

@@ -4,7 +4,12 @@ import HeadingUppercase from '../HeadingUppercase'
 
 function Heading({ children, ...restProps }) {
   return (
-    <HeadingUppercase padding={1} paddingBottom={0.5} {...restProps}>
+    <HeadingUppercase
+      paddingBottom={0.5}
+      paddingHorizontal={2}
+      paddingTop={1}
+      {...restProps}
+    >
       {children}
     </HeadingUppercase>
   )

package/src/Menu/Item.js

@@ -20,7 +20,7 @@ function Item({
     minHeight: 4,
     fontSize: '14px',
     paddingVertical: 0.75,
-    paddingHorizontal: 1,
+    paddingHorizontal: 2,
     whiteSpace: 'nowrap',
     position: 'relative',
     userSelect: 'none',
@@ -28,11 +28,11 @@ function Item({
   }
 
   if (renderLeft) {
-    css.paddingLeft = 4
+    css.paddingLeft = 5
   }
 
   if (renderRight) {
-    css.paddingRight = 4
+    css.paddingRight = 5
   }
 
   if (isHighlighted) {
@@ -62,7 +62,7 @@ function Item({
           height="100%"
           position="absolute"
           top={0}
-          left="-1px"
+          left={0.5}
         >
           {typeof renderLeft === 'function'
             ? renderRight()
@@ -83,7 +83,7 @@ function Item({
           height="100%"
           position="absolute"
           top={0}
-          right="-1px"
+          right={0.5}
         >
           {typeof renderRight === 'function'
             ? renderRight()

package/src/NumberField/NumberField.js

@@ -168,13 +168,26 @@ class NumberField extends Component<Props> {
   handleInput = (event) => {
     const { maxValue } = this.getParsedValues(event.target.value)
     if (this.props.pad) {
-      const targetValue =
-        event.target.value === ''
-          ? event.target.value
-          : parseFloat(event.target.value)
+      const deleteKeyPressed = event.target.value === ''
+      const targetValue = deleteKeyPressed
+        ? event.target.value
+        : parseFloat(event.target.value)
 
-      if (targetValue !== '') {
+      if (deleteKeyPressed) {
+        const nextValue = `${this.props.value}`.slice(0, -1)
+        this.props.onChange(padNumber(nextValue, this.props.pad))
+      } else {
         let nextValue = this.clampValue(targetValue)
+        const paddedValue = parseFloat(`${this.props.value}${targetValue}`)
+        if (
+          !this.firstTouch &&
+          !isNaN(targetValue) &&
+          this.isValueValid(paddedValue)
+        ) {
+          nextValue = paddedValue
+        }
+        this.firstTouch = false
+
         if (this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
           const { next } = getTabbableSiblings(event.target)
           if (next) {
@@ -182,10 +195,7 @@ class NumberField extends Component<Props> {
           }
         }
 
-        this.firstTouch = false
         this.changeIfValid(nextValue)
-      } else {
-        this.props.onChange('')
       }
     } else {
       this.props.onChange(event.target.value)
@@ -244,7 +254,7 @@ class NumberField extends Component<Props> {
       textOverflow: undefined,
       autoComplete: 'off',
       value: numberValue,
-      highlightOnInteraction: highlightOnInteraction,
+      highlightOnInteraction: highlightOnInteraction || pad,
       onBlur: this.handleBlur,
       onInput: this.handleInput,
       onKeyDown: this.handleKeyDown,

package/src/Page/Page.mdx

@@ -4,6 +4,27 @@ category: General
 summary: Page specific components.
 ---
 
+```jsx live
+render(
+  <Box width="100%">
+    <PageHeader>
+      <PageTitle>People</PageTitle>
+    </PageHeader>
+    <PageBody
+      sidebar={
+        <Sidebar grow={0}>
+          <Sidebar.Item active>Item 1</Sidebar.Item>
+          <Sidebar.Item>Item 2</Sidebar.Item>
+          <Sidebar.Item>Item 3</Sidebar.Item>
+        </Sidebar>
+      }
+    >
+      Regular body
+    </PageBody>
+  </Box>
+)
+```
+
 ```jsx live
 render(
   <Box width="100%">
@@ -33,6 +54,40 @@ render(
 )
 ```
 
+```jsx live
+render(
+  <Box width="100%">
+    <PageHeader
+      toolbar={
+        <PageToolbar>
+          <PageTabList>
+            <PageTab active>My Schedule</PageTab>
+            <PageTab>All Plans</PageTab>
+          </PageTabList>
+          <PageActions>
+            <PageButton title="One" />
+            <PageButton title="Two" />
+          </PageActions>
+        </PageToolbar>
+      }
+    >
+      <PageTitle>People</PageTitle>
+    </PageHeader>
+    <PageBody
+      sidebar={
+        <Sidebar grow={0}>
+          <Sidebar.Item active>Item 1</Sidebar.Item>
+          <Sidebar.Item>Item 2</Sidebar.Item>
+          <Sidebar.Item>Item 3</Sidebar.Item>
+        </Sidebar>
+      }
+    >
+      Regular body
+    </PageBody>
+  </Box>
+)
+```
+
 ```jsx live
 render(
   <Box width="100%">
@@ -74,7 +129,7 @@ render(
 
 ## Theming
 
-Use theme keys `pageBody`, `pageButton`, `pageDropdown`, and `pageTitle` to override `Page` component props.
+Use theme keys `pageBody`, `pageButton`, `pageDropdown`, `pageHeader`, and `pageTitle` to override `Page` component props.
 
 ```jsx live
 render(

package/src/Page/PageActions.js

@@ -3,7 +3,18 @@ import React from 'react'
 import StackView from '../StackView'
 
 function PageActions(props) {
-  return <StackView axis="horizontal" spacing={1} {...props} />
+  return (
+    <StackView
+      alignment="center"
+      alignSelf="end"
+      axis="horizontal"
+      distribution="end"
+      flex="1"
+      paddingBottom={2}
+      spacing={1}
+      {...props}
+    />
+  )
 }
 
 export default PageActions