Merge dc9a9bc into 6025e77

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpscout/hsds-react",
-  "version": "2.5.7",
+  "version": "2.5.8-page-beta-0",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

src/components/Page/Card.tsx

@@ -8,22 +8,13 @@ import { COMPONENT_KEY } from './utils'
 export interface Props {
   children?: any
   className?: string
-  isResponsive: boolean
 }
 
 class Card extends React.PureComponent<Props> {
-  static defaultProps = {
-    isResponsive: false,
-  }
-
   render() {
-    const { children, className, isResponsive, ...rest } = this.props
+    const { children, className, ...rest } = this.props
 
-    const componentClassName = classNames(
-      'c-PageCard',
-      isResponsive && 'is-responsive',
-      className
-    )
+    const componentClassName = classNames('c-PageCard', className)
 
     return (
       <CardUI {...getValidProps(rest)} className={componentClassName}>

src/components/Page/Header.tsx

@@ -3,20 +3,44 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import Text from '../Text'
 import { classNames } from '../../utilities/classNames'
 import { namespaceComponent } from '../../utilities/component'
-import { HeaderUI, TitleUI, SubTitleUI } from './styles/Header.css'
-import Heading from './Heading'
+import { HeaderUI, TitleUI, SubTitleUI, HeadingUI } from './styles/Header.css'
 import { COMPONENT_KEY } from './utils'
 
 export interface Props {
   children?: any
   className?: string
   isResponsive: boolean
-  title: string
+  render?: any
+  title?: string
   subtitle?: string
   withBorder: boolean
   withBottomMargin: boolean
 }
 
+const Title = props => {
+  const { headingLevel, isSecondary, className, children, ...rest } = props
+  const componentClassName = classNames('c-PageHeading', className)
+
+  return (
+    <TitleUI className="c-PageHeader__title">
+      <HeadingUI
+        {...getValidProps(rest)}
+        selector={headingLevel || 'h1'}
+        size={isSecondary ? 'h4' : 'md'}
+        className={componentClassName}
+      >
+        {children}
+      </HeadingUI>
+    </TitleUI>
+  )
+}
+
+const Subtitle = ({ children }) => (
+  <SubTitleUI className="c-PageHeader__subtitle">
+    <Text shade="muted">{children}</Text>
+  </SubTitleUI>
+)
+
 class Header extends React.PureComponent<Props> {
   static defaultProps = {
     isResponsive: false,
@@ -27,9 +51,9 @@ class Header extends React.PureComponent<Props> {
 
   render() {
     const {
-      children,
       className,
       isResponsive,
+      render,
       title,
       subtitle,
       withBorder,
@@ -45,23 +69,16 @@ class Header extends React.PureComponent<Props> {
       className
     )
 
-    const titleMarkup = title && (
-      <TitleUI className="c-PageHeader__title">
-        <Heading className="c-PageHeader__titleHeading">{title}</Heading>
-      </TitleUI>
-    )
-    const subtitleMarkup = subtitle && (
-      <SubTitleUI className="c-PageHeader__subtitle">
-        <Text className="c-PageHeader__subtitleText" shade="muted">
-          {subtitle}
-        </Text>
-      </SubTitleUI>
-    )
-
     return (
       <HeaderUI {...getValidProps(rest)} className={componentClassName}>
-        {titleMarkup}
-        {subtitleMarkup}
+        {render ? (
+          render({ Title, Subtitle })
+        ) : (
+          <div>
+            <Title>{title}</Title>
+            {subtitle && <Subtitle>{subtitle}</Subtitle>}
+          </div>
+        )}
       </HeaderUI>
     )
   }

src/components/Page/Page.tsx

@@ -4,7 +4,7 @@ import Actions from './Actions'
 import Card from './Card'
 import Content from './Content'
 import Header from './Header'
-import Heading from './Heading'
+import Section from './Section'
 import PropProvider from '../PropProvider'
 import { classNames } from '../../utilities/classNames'
 import { namespaceComponent } from '../../utilities/component'
@@ -25,19 +25,22 @@ class Page extends React.PureComponent<Props> {
   static Card = Card
   static Content = Content
   static Header = Header
-  static Heading = Heading
+  static Section = Section
 
   getPropProviderProps = () => {
     const { isResponsive } = this.props
 
     return {
       Accordion: { isPage: true, isSeamless: true },
-      [COMPONENT_KEY.Card]: {
+      [COMPONENT_KEY.Section]: {
         isResponsive,
       },
       [COMPONENT_KEY.Header]: {
         isResponsive,
       },
+      [COMPONENT_KEY.Content]: {
+        isResponsive,
+      },
     }
   }
 

src/components/Page/Section.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { COMPONENT_KEY } from './utils'
+import { classNames } from '../../utilities/classNames'
+import { namespaceComponent } from '../../utilities/component'
+import { SectionUI } from './styles/Section.css'
+
+export interface Props {
+  children?: any
+  className?: string
+  isResponsive?: boolean
+}
+
+class Section extends React.PureComponent<Props> {
+  static defaultProps = {
+    isResponsive: false,
+  }
+
+  render() {
+    const { children, className, isResponsive, ...rest } = this.props
+
+    const componentClassName = classNames(
+      'c-PageSection',
+      isResponsive && 'is-responsive',
+      className
+    )
+
+    return (
+      <SectionUI className={componentClassName}>
+        {this.props.children}
+      </SectionUI>
+    )
+  }
+}
+
+namespaceComponent(COMPONENT_KEY.Section)(Section)
+
+export default Section