@planningcenter/tapestry-react 1.1.0 → 1.4.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/Field/Field.js

@@ -103,6 +103,7 @@ var Field = /*#__PURE__*/function (_Component) {
       order: inline ? 0 : 1,
       grow: 1,
       marginTop: inline || !label ? undefined : 1,
+      maxWidth: "100%",
       spacing: spacing
     }, (0, _utils.cloneChildren)(children, function (child, _ref) {
       var firstChild = _ref.firstChild;

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/cjs/Page/PageActions.js

@@ -13,7 +13,12 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 function PageActions(props) {
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    alignment: "center",
+    alignSelf: "end",
     axis: "horizontal",
+    distribution: "end",
+    flex: "1",
+    paddingBottom: 2,
     spacing: 1
   }, props));
 }

package/dist/cjs/Page/PageHeader.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -11,37 +9,35 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _system = require("../system");
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
-var _PageTabList = require("./PageTabList");
-
 function PageHeader(_ref) {
   var children = _ref.children,
       toolbar = _ref.toolbar,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "toolbar"]);
   var themeProps = (0, _system.useThemeValue)('pageHeader');
-  var tabsPresent = toolbar ? _react.Children.toArray(toolbar.props.children).some(function (child) {
-    return child && child.type.displayName === _PageTabList.PAGE_TABLIST_DISPLAY_NAME;
-  }) : false;
-  var childrenToRender = toolbar ? children ? _react.Children.toArray([/*#__PURE__*/_react["default"].createElement(_StackView["default"], {
-    axis: "horizontal",
-    alignment: "center",
-    width: "100%"
-  }, children), toolbar]) : toolbar : children;
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     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["default"].createElement(_StackView["default"], {
+    alignment: "center",
+    axis: "horizontal",
+    paddingTop: 2,
+    width: "100%"
+  }, children), toolbar);
 }
 
 var _default = PageHeader;

package/dist/cjs/Page/PageTab.js

@@ -11,10 +11,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Tab = _interopRequireDefault(require("../Tab"));
 
+var _system = require("../system");
+
 function PageTab(props) {
-  return /*#__PURE__*/_react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, props, {
+  var themeProps = (0, _system.useThemeValue)('pageTab');
+  return /*#__PURE__*/_react["default"].createElement(_Tab["default"], (0, _extends2["default"])({
+    mediaQueries: {
+      sm: {
+        paddingHorizontal: 3
+      }
+    },
+    paddingHorizontal: 1.5,
     size: "lg"
-  }));
+  }, themeProps, props));
 }
 
 var _default = PageTab;

package/dist/cjs/Page/PageTabList.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.PAGE_TABLIST_DISPLAY_NAME = void 0;
+exports["default"] = PageTabList;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -11,16 +11,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
-var PAGE_TABLIST_DISPLAY_NAME = 'PageTabList';
-exports.PAGE_TABLIST_DISPLAY_NAME = PAGE_TABLIST_DISPLAY_NAME;
-
 function PageTabList(props) {
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     axis: "horizontal",
-    spacing: 0.5
+    paddingTop: 2,
+    spacing: 0.5,
+    alignSelf: "end"
   }, props));
-}
-
-PageTabList.displayName = PAGE_TABLIST_DISPLAY_NAME;
-var _default = PageTabList;
-exports["default"] = _default;
+}

package/dist/cjs/Page/PageTitle.js

@@ -16,8 +16,9 @@ var _Heading = _interopRequireDefault(require("../Heading"));
 function PageTitle(props) {
   var themeProps = (0, _system.useThemeValue)('pageTitle');
   return /*#__PURE__*/_react["default"].createElement(_Heading["default"], (0, _extends2["default"])({
-    level: 2,
-    color: "white"
+    color: "white",
+    fontSize: "25px",
+    level: 2
   }, themeProps, props));
 }
 

package/dist/cjs/Page/PageToolbar.js

@@ -5,18 +5,42 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
+var _system = require("../system");
+
 function PageToolbar(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
-    grow: 1,
+  var _mediaQueries;
+
+  var stackBelow = _ref.stackBelow,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["stackBelow"]);
+  var themeBreakpoints = (0, _system.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["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    alignment: "center",
     axis: "horizontal",
-    alignment: "start",
-    distribution: "space-between"
-  }, children);
+    distribution: "space-between",
+    flex: 1,
+    spacing: 2,
+    width: "100%"
+  }, stackProps, restProps));
 }
 
 var _default = PageToolbar;

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/Field/Field.js

@@ -87,6 +87,7 @@ var Field = /*#__PURE__*/function (_Component) {
       order: inline ? 0 : 1,
       grow: 1,
       marginTop: inline || !label ? undefined : 1,
+      maxWidth: "100%",
       spacing: spacing
     }, cloneChildren(children, function (child, _ref) {
       var firstChild = _ref.firstChild;

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/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.1.0",
+  "version": "1.4.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",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@popmotion/popcorn": "^0.4.4",
-    "@popperjs/core": "^2.6.0",
+    "@popperjs/core": "~2.9.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/user-event": "^13.1.9",
     "camel-to-kebab": "^1.1.0",

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/Field/Field.js

@@ -113,6 +113,7 @@ class Field extends Component<Props> {
             order={inline ? 0 : 1}
             grow={1}
             marginTop={inline || !label ? undefined : 1}
+            maxWidth="100%"
             spacing={spacing}
           >
             {cloneChildren(children, (child, { firstChild }) =>

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/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

package/src/Page/PageHeader.js

@@ -1,41 +1,35 @@
-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({ children, toolbar, ...restProps }) {
   const themeProps = useThemeValue('pageHeader')
-  const tabsPresent = toolbar
-    ? Children.toArray(toolbar.props.children).some(
-        (child) => child && child.type.displayName === PAGE_TABLIST_DISPLAY_NAME
-      )
-    : false
-  const childrenToRender = toolbar
-    ? children
-      ? Children.toArray([
-          <StackView axis="horizontal" alignment="center" width="100%">
-            {children}
-          </StackView>,
-          toolbar,
-        ])
-      : toolbar
-    : children
   return (
     <StackView
       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}
+      axis="vertical"
       backgroundColor="primary-light"
+      paddingHorizontal={2}
+      minHeight={8}
+      mediaQueries={{
+        sm: { paddingHorizontal: 3 },
+      }}
+      spacing={0}
       {...themeProps}
       {...restProps}
     >
-      {childrenToRender}
+      {children && (
+        <StackView
+          alignment="center"
+          axis="horizontal"
+          paddingTop={2}
+          width="100%"
+        >
+          {children}
+        </StackView>
+      )}
+      {toolbar}
     </StackView>
   )
 }

package/src/Page/PageTab.js

@@ -1,9 +1,23 @@
 import React from 'react'
 
 import Tab from '../Tab'
+import { useThemeValue } from '../system'
 
 function PageTab(props) {
-  return <Tab {...props} size="lg" />
+  const themeProps = useThemeValue('pageTab')
+  return (
+    <Tab
+      mediaQueries={{
+        sm: {
+          paddingHorizontal: 3,
+        },
+      }}
+      paddingHorizontal={1.5}
+      size="lg"
+      {...themeProps}
+      {...props}
+    />
+  )
 }
 
 export default PageTab

package/src/Page/PageTabList.js

@@ -2,12 +2,14 @@ import React from 'react'
 
 import StackView from '../StackView'
 
-export const PAGE_TABLIST_DISPLAY_NAME = 'PageTabList'
-
-function PageTabList(props) {
-  return <StackView axis="horizontal" spacing={0.5} {...props} />
+export default function PageTabList(props) {
+  return (
+    <StackView
+      axis="horizontal"
+      paddingTop={2}
+      spacing={0.5}
+      alignSelf="end"
+      {...props}
+    />
+  )
 }
-
-PageTabList.displayName = PAGE_TABLIST_DISPLAY_NAME
-
-export default PageTabList

package/src/Page/PageTitle.js

@@ -5,7 +5,15 @@ import Heading from '../Heading'
 
 function PageTitle(props) {
   const themeProps = useThemeValue('pageTitle')
-  return <Heading level={2} color="white" {...themeProps} {...props} />
+  return (
+    <Heading
+      color="white"
+      fontSize="25px"
+      level={2}
+      {...themeProps}
+      {...props}
+    />
+  )
 }
 
 export default PageTitle

package/src/Page/PageToolbar.js

@@ -1,17 +1,40 @@
 import React from 'react'
 
 import StackView from '../StackView'
+import { useThemeValue } from '../system'
+
+function PageToolbar({ stackBelow, ...restProps }) {
+  const themeBreakpoints = useThemeValue('breakpoints')
+  const breakpoint = Object.keys(themeBreakpoints).includes(stackBelow)
+    ? stackBelow
+    : 'sm'
+  const stackProps = stackBelow
+    ? {
+        axis: 'vertical',
+        alignment: 'stretch',
+        spacing: 2,
+        mediaQueries: {
+          [breakpoint]: {
+            axis: 'horizontal',
+            alignment: 'center',
+            paddingBottom: 0,
+            spacing: 0,
+          },
+        },
+      }
+    : null
 
-function PageToolbar({ children }) {
   return (
     <StackView
-      grow={1}
+      alignment="center"
       axis="horizontal"
-      alignment="start"
       distribution="space-between"
-    >
-      {children}
-    </StackView>
+      flex={1}
+      spacing={2}
+      width="100%"
+      {...stackProps}
+      {...restProps}
+    />
   )
 }