@planningcenter/tapestry-react 1.0.0 → 1.3.0

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}
+    />
   )
 }