@planningcenter/tapestry-react 1.2.0 → 1.3.0

package/dist/cjs/Button/Button.js

@@ -68,6 +68,7 @@ function Button(_ref) {
 
   var buttonProps = {
     alignment: 'center',
+    as: restProps.href || to ? 'a' : 'div',
     axis: 'horizontal',
     distribution: 'center',
     fontSize: fontSize,
@@ -79,7 +80,6 @@ function Button(_ref) {
     role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
-    as: restProps.href || to ? 'a' : 'div',
     userSelect: 'none',
     zIndex: 1
   };
@@ -227,6 +227,11 @@ function Button(_ref) {
         zIndex: 2
       }, buttonProps.hover)
     });
+  } // pass to if as is defined
+
+
+  if (restProps.as) {
+    buttonProps.to = to;
   }
 
   if (process.env.NODE_ENV !== 'production') {

package/dist/cjs/ChurchCenterStatus/ChurchCenterStatus.js

@@ -30,7 +30,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function ChurchCenterStatus(_ref) {
-  var _ref$ccAppEnabled = _ref.ccAppEnabled,
+  var _ref$buttonProps = _ref.buttonProps,
+      passedButtonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+      _ref$ccAppEnabled = _ref.ccAppEnabled,
       ccAppEnabled = _ref$ccAppEnabled === void 0 ? false : _ref$ccAppEnabled,
       _ref$ccPublishingEnab = _ref.ccPublishingEnabled,
       ccPublishingEnabled = _ref$ccPublishingEnab === void 0 ? false : _ref$ccPublishingEnab,
@@ -44,16 +46,23 @@ function ChurchCenterStatus(_ref) {
       dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
       icons = _ref.icons,
       productUrl = _ref.productUrl,
+      _ref$renderPopoverFoo = _ref.renderPopoverFooter,
+      renderPopoverFooter = _ref$renderPopoverFoo === void 0 ? function () {} : _ref$renderPopoverFoo,
       settingsUrl = _ref.settingsUrl,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "settingsUrl"]);
-  var buttonProps = {
+      _ref$showSettingsLink = _ref.showSettingsLink,
+      showSettingsLink = _ref$showSettingsLink === void 0 ? true : _ref$showSettingsLink,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["buttonProps", "ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "renderPopoverFooter", "settingsUrl", "showSettingsLink"]);
+
+  var buttonProps = _objectSpread({
     distribution: 'start',
     fontWeight: 400,
     paddingHorizontal: 2,
     radius: 0,
     variant: 'naked'
-  };
+  }, passedButtonProps);
+
   var ccEnabled = ccAppEnabled || ccWebEnabled;
+  var hasLinks = showSettingsLink || ccEnabled && ccPublishingEnabled || !!renderPopoverFooter();
 
   var icon = _objectSpread({
     check: 'checkmark',
@@ -113,19 +122,23 @@ function ChurchCenterStatus(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
     size: "14px",
     weight: 700
-  }, "Mobile app")))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+  }, "Mobile app")))), hasLinks && /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
     margin: 0.5
-  }), /*#__PURE__*/_react["default"].createElement(_StackView["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+  }), /*#__PURE__*/_react["default"].createElement(_StackView["default"], null, showSettingsLink && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
     external: true,
     title: "Update settings",
     to: settingsUrl
   }, buttonProps)), ccEnabled && ccPublishingEnabled && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
     external: true,
+    iconRight: {
+      color: 'primary',
+      name: icon.external,
+      marginLeft: 1,
+      size: 'xs'
+    },
+    title: "Visit " + destinationLabel,
     to: productUrl
-  }, buttonProps), "Visit ", destinationLabel, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    color: "primary",
-    name: icon.external,
-    marginLeft: 1,
-    size: "sm"
-  })))));
+  }, buttonProps, {
+    as: "a"
+  })), renderPopoverFooter(buttonProps))));
 }

package/dist/cjs/Menu/Heading.js

@@ -17,8 +17,9 @@ function Heading(_ref) {
   var children = _ref.children,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children"]);
   return /*#__PURE__*/_react["default"].createElement(_HeadingUppercase["default"], (0, _extends2["default"])({
-    padding: 1,
-    paddingBottom: 0.5
+    paddingBottom: 0.5,
+    paddingHorizontal: 2,
+    paddingTop: 1
   }, restProps), children);
 }
 

package/dist/cjs/Menu/Item.js

@@ -35,7 +35,7 @@ function Item(_ref) {
     minHeight: 4,
     fontSize: '14px',
     paddingVertical: 0.75,
-    paddingHorizontal: 1,
+    paddingHorizontal: 2,
     whiteSpace: 'nowrap',
     position: 'relative',
     userSelect: 'none',
@@ -43,11 +43,11 @@ function Item(_ref) {
   };
 
   if (renderLeft) {
-    css.paddingLeft = 4;
+    css.paddingLeft = 5;
   }
 
   if (renderRight) {
-    css.paddingRight = 4;
+    css.paddingRight = 5;
   }
 
   if (isHighlighted) {
@@ -69,7 +69,7 @@ function Item(_ref) {
     height: "100%",
     position: "absolute",
     top: 0,
-    left: "-1px"
+    left: 0.5
   }, typeof renderLeft === 'function' ? renderRight() : /*#__PURE__*/(0, _react.cloneElement)(renderLeft, {
     size: renderLeft.props && renderLeft.props.size || 'md'
   })), children, renderRight && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
@@ -80,7 +80,7 @@ function Item(_ref) {
     height: "100%",
     position: "absolute",
     top: 0,
-    right: "-1px"
+    right: 0.5
   }, typeof renderRight === 'function' ? renderRight() : /*#__PURE__*/(0, _react.cloneElement)(renderRight, {
     size: renderRight.props && renderRight.props.size || 'md'
   })));

package/dist/esm/Button/Button.js

@@ -61,6 +61,7 @@ export function Button(_ref) {
 
   var buttonProps = {
     alignment: 'center',
+    as: restProps.href || to ? 'a' : 'div',
     axis: 'horizontal',
     distribution: 'center',
     fontSize: fontSize,
@@ -72,7 +73,6 @@ export function Button(_ref) {
     role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
-    as: restProps.href || to ? 'a' : 'div',
     userSelect: 'none',
     zIndex: 1
   };
@@ -220,6 +220,11 @@ export function Button(_ref) {
         zIndex: 2
       }, buttonProps.hover)
     });
+  } // pass to if as is defined
+
+
+  if (restProps.as) {
+    buttonProps.to = to;
   }
 
   if (process.env.NODE_ENV !== 'production') {

package/dist/esm/ChurchCenterStatus/ChurchCenterStatus.js

@@ -33,7 +33,9 @@ var _ref6 = /*#__PURE__*/React.createElement(Divider, {
 });
 
 export function ChurchCenterStatus(_ref) {
-  var _ref$ccAppEnabled = _ref.ccAppEnabled,
+  var _ref$buttonProps = _ref.buttonProps,
+      passedButtonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+      _ref$ccAppEnabled = _ref.ccAppEnabled,
       ccAppEnabled = _ref$ccAppEnabled === void 0 ? false : _ref$ccAppEnabled,
       _ref$ccPublishingEnab = _ref.ccPublishingEnabled,
       ccPublishingEnabled = _ref$ccPublishingEnab === void 0 ? false : _ref$ccPublishingEnab,
@@ -47,17 +49,23 @@ export function ChurchCenterStatus(_ref) {
       dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
       icons = _ref.icons,
       productUrl = _ref.productUrl,
+      _ref$renderPopoverFoo = _ref.renderPopoverFooter,
+      renderPopoverFooter = _ref$renderPopoverFoo === void 0 ? function () {} : _ref$renderPopoverFoo,
       settingsUrl = _ref.settingsUrl,
-      props = _objectWithoutPropertiesLoose(_ref, ["ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "settingsUrl"]);
+      _ref$showSettingsLink = _ref.showSettingsLink,
+      showSettingsLink = _ref$showSettingsLink === void 0 ? true : _ref$showSettingsLink,
+      props = _objectWithoutPropertiesLoose(_ref, ["buttonProps", "ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "renderPopoverFooter", "settingsUrl", "showSettingsLink"]);
 
-  var buttonProps = {
+  var buttonProps = _objectSpread({
     distribution: 'start',
     fontWeight: 400,
     paddingHorizontal: 2,
     radius: 0,
     variant: 'naked'
-  };
+  }, passedButtonProps);
+
   var ccEnabled = ccAppEnabled || ccWebEnabled;
+  var hasLinks = showSettingsLink || ccEnabled && ccPublishingEnabled || !!renderPopoverFooter();
 
   var icon = _objectSpread({
     check: 'checkmark',
@@ -111,17 +119,21 @@ export function ChurchCenterStatus(_ref) {
     color: ccAppEnabled ? 'success' : 'error',
     name: ccAppEnabled ? icon.check : icon.x,
     size: "sm"
-  }), _ref5))), _ref6, /*#__PURE__*/React.createElement(StackView, null, /*#__PURE__*/React.createElement(Button, _extends({
+  }), _ref5))), hasLinks && _ref6, /*#__PURE__*/React.createElement(StackView, null, showSettingsLink && /*#__PURE__*/React.createElement(Button, _extends({
     external: true,
     title: "Update settings",
     to: settingsUrl
   }, buttonProps)), ccEnabled && ccPublishingEnabled && /*#__PURE__*/React.createElement(Button, _extends({
     external: true,
+    iconRight: {
+      color: 'primary',
+      name: icon.external,
+      marginLeft: 1,
+      size: 'xs'
+    },
+    title: "Visit " + destinationLabel,
     to: productUrl
-  }, buttonProps), "Visit ", destinationLabel, /*#__PURE__*/React.createElement(Icon, {
-    color: "primary",
-    name: icon.external,
-    marginLeft: 1,
-    size: "sm"
-  })))));
+  }, buttonProps, {
+    as: "a"
+  })), renderPopoverFooter(buttonProps))));
 }

package/dist/esm/Menu/Heading.js

@@ -8,8 +8,9 @@ function Heading(_ref) {
       restProps = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
   return /*#__PURE__*/React.createElement(HeadingUppercase, _extends({
-    padding: 1,
-    paddingBottom: 0.5
+    paddingBottom: 0.5,
+    paddingHorizontal: 2,
+    paddingTop: 1
   }, restProps), children);
 }
 

package/dist/esm/Menu/Item.js

@@ -23,7 +23,7 @@ function Item(_ref) {
     minHeight: 4,
     fontSize: '14px',
     paddingVertical: 0.75,
-    paddingHorizontal: 1,
+    paddingHorizontal: 2,
     whiteSpace: 'nowrap',
     position: 'relative',
     userSelect: 'none',
@@ -31,11 +31,11 @@ function Item(_ref) {
   };
 
   if (renderLeft) {
-    css.paddingLeft = 4;
+    css.paddingLeft = 5;
   }
 
   if (renderRight) {
-    css.paddingRight = 4;
+    css.paddingRight = 5;
   }
 
   if (isHighlighted) {
@@ -57,7 +57,7 @@ function Item(_ref) {
     height: "100%",
     position: "absolute",
     top: 0,
-    left: "-1px"
+    left: 0.5
   }, typeof renderLeft === 'function' ? renderRight() : /*#__PURE__*/cloneElement(renderLeft, {
     size: renderLeft.props && renderLeft.props.size || 'md'
   })), children, renderRight && /*#__PURE__*/React.createElement(Box, {
@@ -68,7 +68,7 @@ function Item(_ref) {
     height: "100%",
     position: "absolute",
     top: 0,
-    right: "-1px"
+    right: 0.5
   }, typeof renderRight === 'function' ? renderRight() : /*#__PURE__*/cloneElement(renderRight, {
     size: renderRight.props && renderRight.props.size || 'md'
   })));

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.2.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/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()