@planningcenter/tapestry-react 1.1.0 → 1.2.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "1.1.0",
+  "version": "1.2.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/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}
+    />
   )
 }