@cloudflare/component-page 5.0.1 → 5.2.1

package/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-page@5.2.0...@cloudflare/component-page@5.2.1) (2021-12-03)
+
+**Note:** Version bump only for package @cloudflare/component-page
+
+
+
+
+
+# [5.2.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-page@5.1.0...@cloudflare/component-page@5.2.0) (2021-11-25)
+
+
+### Bug Fixes
+
+* **component-page:** A11Y-90 Update prop types ([7bd388f](http://stash.cfops.it:7999/fe/stratus/commits/7bd388f))
+
+
+### Features
+
+* **component-page:** A11Y-90 Add titleRef and subtitleRef properties ([3507385](http://stash.cfops.it:7999/fe/stratus/commits/3507385))
+
+
+
+
+
+# [5.1.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-page@5.0.2...@cloudflare/component-page@5.1.0) (2021-11-25)
+
+
+### Bug Fixes
+
+* **component-page:** A11Y-86 Bug fix ([9ab1079](http://stash.cfops.it:7999/fe/stratus/commits/9ab1079))
+* **component-page:** A11Y-86 remove unused type ([8929fec](http://stash.cfops.it:7999/fe/stratus/commits/8929fec))
+
+
+### Features
+
+* **component-page:** A11Y-86 Section and Heading tags ([5b91d18](http://stash.cfops.it:7999/fe/stratus/commits/5b91d18))
+
+
+
+
+
+## [5.0.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-page@5.0.1...@cloudflare/component-page@5.0.2) (2021-11-23)
+
+
+### Bug Fixes
+
+* **component-page:** UI-4946 Fix mobile rendering ([dd60019](http://stash.cfops.it:7999/fe/stratus/commits/dd60019))
+
+
+
+
+
 ## [5.0.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-page@5.0.0...@cloudflare/component-page@5.0.1) (2021-11-23)
 
 **Note:** Version bump only for package @cloudflare/component-page

package/dist/Heading.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { H1 } from '@cloudflare/elements';
+declare type SectionProps = {
+    children: React.ReactNode;
+    level?: number;
+    offset?: number;
+};
+declare type HeadingProps = React.ComponentProps<typeof H1> & {
+    level?: number;
+    offset?: number;
+};
+export declare function Section(props: SectionProps): JSX.Element;
+export declare function Heading({ level, offset, ...props }: HeadingProps): JSX.Element;
+export {};

package/dist/Page.d.ts

@@ -1,18 +1,20 @@
 import React from 'react';
 declare type PageWidth = 'narrow' | 'wide' | 'unbounded';
 declare const _default: React.ComponentType<{
-    type?: PageWidth | undefined;
-    className?: string | undefined;
-    testId?: string | undefined;
     title?: React.ReactNode;
     subtitle?: React.ReactNode;
     description?: React.ReactNode;
     control?: React.ReactNode;
+    children?: React.ReactNode;
     centerHeader?: boolean | undefined;
+    beta?: boolean | undefined;
+    titleRef?: React.RefObject<HTMLHeadingElement> | undefined;
+    subtitleRef?: React.RefObject<HTMLHeadingElement> | undefined;
+    type?: PageWidth | undefined;
+    className?: string | undefined;
+    testId?: string | undefined;
     sidebar?: React.ReactNode;
     sidebarPosition?: "left" | "inside" | "outside" | undefined;
-    beta?: boolean | undefined;
-    children?: any;
     autofocus?: boolean | undefined;
     p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
     color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import Page from './Page';
-export { Page };
+import { Heading, Section } from './Heading';
+export { Page, Heading, Section };

package/es/Heading.js

@@ -0,0 +1,81 @@
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { H1, H2, H3, H4, H5 } from '@cloudflare/elements';
+import { createStyledComponent } from '@cloudflare/style-container';
+const HeadingInfo = /*#__PURE__*/React.createContext({
+  level: 0,
+  offset: 0
+});
+const headerThemes = [({
+  theme
+}) => ({
+  fontSize: theme.fontSizes[6],
+  lineHeight: 1.25,
+  color: theme.colors.gray[1],
+  fontWeight: 600
+}), ({
+  theme
+}) => ({
+  fontSize: theme.fontSizes[5],
+  lineHeight: 1.25,
+  color: theme.colors.gray[3],
+  fontWeight: 400
+}), ({
+  theme
+}) => ({
+  fontSize: theme.fontSizes[4],
+  fontWeight: 600
+}), ({
+  theme
+}) => ({
+  fontSize: theme.fontSizes[3],
+  lineHeight: 1.25,
+  fontWeight: 600
+})];
+const headings = [H1, H2, H3, H4, H5];
+const maxHeadingLevel = headings.length - 1;
+const maxOffset = 2;
+const standardHeadings = headings.map((h, index) => {
+  const themeIndex = Math.min(index, headerThemes.length);
+  return createStyledComponent(headerThemes[themeIndex], h);
+}); // Renders H1 with H2 style, H2 with H3 style etc.
+
+const offsetOneHeadings = headings.map((h, index) => {
+  const themeIndex = Math.min(index + 1, headerThemes.length);
+  return createStyledComponent(headerThemes[themeIndex], h);
+}); // Renders H1 with H3 style, H2 with H4 style etc.
+
+const offsetTwoHeadings = headings.map((h, index) => {
+  const themeIndex = Math.min(index + 2, headerThemes.length);
+  return createStyledComponent(headerThemes[themeIndex], h);
+});
+export function Section(props) {
+  return /*#__PURE__*/React.createElement(HeadingInfo.Consumer, null, info => {
+    var _props$level, _props$offset;
+
+    return /*#__PURE__*/React.createElement(HeadingInfo.Provider, {
+      value: {
+        level: (_props$level = props.level) !== null && _props$level !== void 0 ? _props$level : info.level + 1,
+        offset: info.offset + ((_props$offset = props.offset) !== null && _props$offset !== void 0 ? _props$offset : 0)
+      }
+    }, props.children);
+  });
+}
+export function Heading(_ref) {
+  let level = _ref.level,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 0 : _ref$offset,
+      props = _objectWithoutProperties(_ref, ["level", "offset"]);
+
+  return /*#__PURE__*/React.createElement(HeadingInfo.Consumer, null, info => {
+    const headingOffset = Math.min(maxOffset, info.offset + offset);
+    const headings = headingOffset === 1 ? offsetOneHeadings : headingOffset === 2 ? offsetTwoHeadings : standardHeadings;
+    const headingLevel = Math.min(level !== undefined ? level - 1 : info.level, maxHeadingLevel);
+    const Heading = headings[Math.max(0, headingLevel)]; // @ts-ignore
+
+    return /*#__PURE__*/React.createElement(Heading, props);
+  });
+}

package/es/Page.js

@@ -4,32 +4,12 @@ import { createStyledComponent, createComponent } from '@cloudflare/style-contai
 import { Main, Header, Div } from '@cloudflare/elements';
 import { Label } from '@cloudflare/component-label';
 import { Trans } from '@cloudflare/intl-react';
+import { Heading, Section } from './Heading';
 const maxWidthByType = {
   narrow: '64em',
   wide: '79em',
   unbounded: '100%'
 };
-const PageTitle = createComponent(({
-  theme
-}) => ({
-  fontSize: theme.fontSizes[6],
-  marginTop: theme.space[0],
-  marginBottom: theme.space[0],
-  lineHeight: 1.25,
-  color: theme.colors.gray[1],
-  fontWeight: 600
-}), 'h1');
-PageTitle.displayName = 'Title';
-const PageSubtitle = createComponent(({
-  theme
-}) => ({
-  fontSize: theme.fontSizes[5],
-  marginBottom: theme.space[0],
-  lineHeight: 1.25,
-  color: theme.colors.gray[3],
-  fontWeight: 400
-}), 'h2');
-PageTitle.displayName = 'PageSubtitle';
 const PageDescription = createComponent(({
   theme
 }) => ({
@@ -40,16 +20,61 @@ const PageDescription = createComponent(({
   fontWeight: 400
 }), 'p');
 PageDescription.displayName = 'PageDescription';
-const PageSubtitleDescription = createComponent(({
-  theme
-}) => ({
-  fontSize: theme.fontSizes[4],
-  marginBottom: theme.space[0],
-  lineHeight: 1.25,
-  color: theme.colors.gray[3],
-  fontWeight: 400
-}), 'h2');
-PageSubtitleDescription.displayName = 'PageSubtitleDescription'; // firstPage is used when dealing with focus. When navigating the dash, focus
+
+const ControlWrapper = ({
+  control,
+  children
+}) => {
+  return control ? /*#__PURE__*/React.createElement(Div, {
+    display: ['block', 'flex'],
+    justifyContent: "space-between"
+  }, children, control) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
+const maxPageTitles = 2;
+
+const PageHeader = ({
+  title,
+  subtitle,
+  description,
+  centerHeader,
+  control,
+  children,
+  beta,
+  titleRef,
+  subtitleRef
+}) => {
+  const headerVisible = !!(title || subtitle || description);
+  const titlesCount = Math.min([title, subtitle, description].filter(Boolean).length, 2);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ControlWrapper, {
+    control: control
+  }, /*#__PURE__*/React.createElement(Header, {
+    mb: headerVisible ? 3 : 0,
+    textAlign: centerHeader ? 'center' : undefined
+  }, title && /*#__PURE__*/React.createElement(Heading, {
+    innerRef: titleRef
+  }, title, beta && /*#__PURE__*/React.createElement(Label, {
+    hue: "orange",
+    ml: 2,
+    verticalAlign: "middle"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    _: "Beta",
+    id: "common.beta"
+  }))), subtitle && /*#__PURE__*/React.createElement(Heading, {
+    level: title ? 2 : 1,
+    offset: title ? 0 : 1,
+    innerRef: subtitleRef
+  }, subtitle), description && (subtitle ? /*#__PURE__*/React.createElement(PageDescription, null, description) : /*#__PURE__*/React.createElement(Heading, {
+    level: 2,
+    fontSize: 4,
+    color: "gray.3"
+  }, description)))), /*#__PURE__*/React.createElement(Section, {
+    level: titlesCount,
+    offset: maxPageTitles - titlesCount
+  }, children));
+};
+
+PageHeader.displayName = 'PageHeader'; // firstPage is used when dealing with focus. When navigating the dash, focus
 // jumps to the page content, but not when the dash is initially loaded.
 
 let firstPage = ''; // firstLoad is used to ensure focus is handled correctly if the user navigates
@@ -80,6 +105,8 @@ const Page = ({
   sidebarPosition = 'inside',
   autofocus = true,
   control,
+  titleRef,
+  subtitleRef,
   children
 }) => {
   var _history$location;
@@ -99,37 +126,17 @@ const Page = ({
       }
     }
   }, [path]);
-  const headerVisible = !!(title || subtitle || description);
-  let header = /*#__PURE__*/React.createElement(Header, {
-    mb: headerVisible ? 3 : 0,
-    textAlign: centerHeader ? 'center' : undefined
-  }, title && /*#__PURE__*/React.createElement(PageTitle, null, title, beta && /*#__PURE__*/React.createElement(Label, {
-    hue: "orange",
-    ml: 2,
-    verticalAlign: "middle"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    _: "Beta",
-    id: "common.beta"
-  }))), subtitle && /*#__PURE__*/React.createElement(PageSubtitle, null, subtitle), description && (subtitle ? /*#__PURE__*/React.createElement(PageDescription, null, description) : /*#__PURE__*/React.createElement(PageSubtitleDescription, null, description)));
-
-  if (control) {
-    header = /*#__PURE__*/React.createElement(Div, {
-      display: ['block', 'flex'],
-      justifyContent: "space-between"
-    }, header, control);
-  }
-
   const sidebarInside = sidebarPosition === 'inside';
-  const width = type === 'unbounded' ? '100%' : '90%';
   return /*#__PURE__*/React.createElement(Main, {
     "data-testid": testId,
     className: className,
-    display: sidebar && sidebarInside ? undefined : 'flex'
+    display: sidebar && sidebarInside ? undefined : 'flex',
+    py: 4
   }, /*#__PURE__*/React.createElement(Div, {
     ml: "auto",
     mr: sidebar && !sidebarInside ? 0 : 'auto',
     display: sidebar ? ['block', 'block', 'flex'] : undefined,
-    width: ['100%', width, width],
+    width: type === 'unbounded' ? '100%' : '90%',
     maxWidth: maxWidthByType[type] || maxWidthByType.narrow
   }, /*#__PURE__*/React.createElement(Div, {
     width: sidebar && sidebarInside ? [1, 1, 2 / 3] : undefined,
@@ -139,7 +146,17 @@ const Page = ({
     id: "skipTarget",
     ref: skipTargetRef,
     tabIndex: -1
-  }), header, children), sidebar && sidebarInside && /*#__PURE__*/React.createElement(Div, {
+  }), /*#__PURE__*/React.createElement(PageHeader, {
+    title: title,
+    subtitle: subtitle,
+    description: description,
+    centerHeader: centerHeader,
+    control: control,
+    children: children,
+    beta: beta,
+    titleRef: titleRef,
+    subtitleRef: subtitleRef
+  })), sidebar && sidebarInside && /*#__PURE__*/React.createElement(Div, {
     width: [1, 1, 1 / 3],
     pl: [0, 0, 3],
     pt: [4, 4, 0]

package/es/index.js

@@ -1,2 +1,3 @@
 import Page from './Page';
-export { Page };
+import { Heading, Section } from './Heading';
+export { Page, Heading, Section };

package/lib/Heading.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Section = Section;
+exports.Heading = Heading;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _elements = require("@cloudflare/elements");
+
+var _styleContainer = require("@cloudflare/style-container");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var HeadingInfo = /*#__PURE__*/_react.default.createContext({
+  level: 0,
+  offset: 0
+});
+
+var headerThemes = [function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: theme.fontSizes[6],
+    lineHeight: 1.25,
+    color: theme.colors.gray[1],
+    fontWeight: 600
+  };
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    fontSize: theme.fontSizes[5],
+    lineHeight: 1.25,
+    color: theme.colors.gray[3],
+    fontWeight: 400
+  };
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    fontSize: theme.fontSizes[4],
+    fontWeight: 600
+  };
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    fontSize: theme.fontSizes[3],
+    lineHeight: 1.25,
+    fontWeight: 600
+  };
+}];
+var headings = [_elements.H1, _elements.H2, _elements.H3, _elements.H4, _elements.H5];
+var maxHeadingLevel = headings.length - 1;
+var maxOffset = 2;
+var standardHeadings = headings.map(function (h, index) {
+  var themeIndex = Math.min(index, headerThemes.length);
+  return (0, _styleContainer.createStyledComponent)(headerThemes[themeIndex], h);
+}); // Renders H1 with H2 style, H2 with H3 style etc.
+
+var offsetOneHeadings = headings.map(function (h, index) {
+  var themeIndex = Math.min(index + 1, headerThemes.length);
+  return (0, _styleContainer.createStyledComponent)(headerThemes[themeIndex], h);
+}); // Renders H1 with H3 style, H2 with H4 style etc.
+
+var offsetTwoHeadings = headings.map(function (h, index) {
+  var themeIndex = Math.min(index + 2, headerThemes.length);
+  return (0, _styleContainer.createStyledComponent)(headerThemes[themeIndex], h);
+});
+
+function Section(props) {
+  return /*#__PURE__*/_react.default.createElement(HeadingInfo.Consumer, null, function (info) {
+    var _props$level, _props$offset;
+
+    return /*#__PURE__*/_react.default.createElement(HeadingInfo.Provider, {
+      value: {
+        level: (_props$level = props.level) !== null && _props$level !== void 0 ? _props$level : info.level + 1,
+        offset: info.offset + ((_props$offset = props.offset) !== null && _props$offset !== void 0 ? _props$offset : 0)
+      }
+    }, props.children);
+  });
+}
+
+function Heading(_ref5) {
+  var level = _ref5.level,
+      _ref5$offset = _ref5.offset,
+      offset = _ref5$offset === void 0 ? 0 : _ref5$offset,
+      props = _objectWithoutProperties(_ref5, ["level", "offset"]);
+
+  return /*#__PURE__*/_react.default.createElement(HeadingInfo.Consumer, null, function (info) {
+    var headingOffset = Math.min(maxOffset, info.offset + offset);
+    var headings = headingOffset === 1 ? offsetOneHeadings : headingOffset === 2 ? offsetTwoHeadings : standardHeadings;
+    var headingLevel = Math.min(level !== undefined ? level - 1 : info.level, maxHeadingLevel);
+    var Heading = headings[Math.max(0, headingLevel)]; // @ts-ignore
+
+    return /*#__PURE__*/_react.default.createElement(Heading, props);
+  });
+}

package/lib/Page.js

@@ -19,6 +19,8 @@ var _componentLabel = require("@cloudflare/component-label");
 
 var _intlReact = require("@cloudflare/intl-react");
 
+var _Heading = require("./Heading");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -28,31 +30,8 @@ var maxWidthByType = {
   wide: '79em',
   unbounded: '100%'
 };
-var PageTitle = (0, _styleContainer.createComponent)(function (_ref) {
+var PageDescription = (0, _styleContainer.createComponent)(function (_ref) {
   var theme = _ref.theme;
-  return {
-    fontSize: theme.fontSizes[6],
-    marginTop: theme.space[0],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    color: theme.colors.gray[1],
-    fontWeight: 600
-  };
-}, 'h1');
-PageTitle.displayName = 'Title';
-var PageSubtitle = (0, _styleContainer.createComponent)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    fontSize: theme.fontSizes[5],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    color: theme.colors.gray[3],
-    fontWeight: 400
-  };
-}, 'h2');
-PageTitle.displayName = 'PageSubtitle';
-var PageDescription = (0, _styleContainer.createComponent)(function (_ref3) {
-  var theme = _ref3.theme;
   return {
     fontSize: theme.fontSizes[4],
     marginBottom: theme.space[0],
@@ -62,17 +41,59 @@ var PageDescription = (0, _styleContainer.createComponent)(function (_ref3) {
   };
 }, 'p');
 PageDescription.displayName = 'PageDescription';
-var PageSubtitleDescription = (0, _styleContainer.createComponent)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    fontSize: theme.fontSizes[4],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    color: theme.colors.gray[3],
-    fontWeight: 400
-  };
-}, 'h2');
-PageSubtitleDescription.displayName = 'PageSubtitleDescription'; // firstPage is used when dealing with focus. When navigating the dash, focus
+
+var ControlWrapper = function ControlWrapper(_ref2) {
+  var control = _ref2.control,
+      children = _ref2.children;
+  return control ? /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    display: ['block', 'flex'],
+    justifyContent: "space-between"
+  }, children, control) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+
+var maxPageTitles = 2;
+
+var PageHeader = function PageHeader(_ref3) {
+  var title = _ref3.title,
+      subtitle = _ref3.subtitle,
+      description = _ref3.description,
+      centerHeader = _ref3.centerHeader,
+      control = _ref3.control,
+      children = _ref3.children,
+      beta = _ref3.beta,
+      titleRef = _ref3.titleRef,
+      subtitleRef = _ref3.subtitleRef;
+  var headerVisible = !!(title || subtitle || description);
+  var titlesCount = Math.min([title, subtitle, description].filter(Boolean).length, 2);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ControlWrapper, {
+    control: control
+  }, /*#__PURE__*/_react.default.createElement(_elements.Header, {
+    mb: headerVisible ? 3 : 0,
+    textAlign: centerHeader ? 'center' : undefined
+  }, title && /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+    innerRef: titleRef
+  }, title, beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
+    hue: "orange",
+    ml: 2,
+    verticalAlign: "middle"
+  }, /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
+    _: "Beta",
+    id: "common.beta"
+  }))), subtitle && /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+    level: title ? 2 : 1,
+    offset: title ? 0 : 1,
+    innerRef: subtitleRef
+  }, subtitle), description && (subtitle ? /*#__PURE__*/_react.default.createElement(PageDescription, null, description) : /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+    level: 2,
+    fontSize: 4,
+    color: "gray.3"
+  }, description)))), /*#__PURE__*/_react.default.createElement(_Heading.Section, {
+    level: titlesCount,
+    offset: maxPageTitles - titlesCount
+  }, children));
+};
+
+PageHeader.displayName = 'PageHeader'; // firstPage is used when dealing with focus. When navigating the dash, focus
 // jumps to the page content, but not when the dash is initially loaded.
 
 var firstPage = ''; // firstLoad is used to ensure focus is handled correctly if the user navigates
@@ -93,25 +114,27 @@ var focus = function focus(el) {
   }
 };
 
-var Page = function Page(_ref5) {
+var Page = function Page(_ref4) {
   var _history$location;
 
-  var title = _ref5.title,
-      subtitle = _ref5.subtitle,
-      description = _ref5.description,
-      centerHeader = _ref5.centerHeader,
-      beta = _ref5.beta,
-      testId = _ref5.testId,
-      className = _ref5.className,
-      sidebar = _ref5.sidebar,
-      _ref5$type = _ref5.type,
-      type = _ref5$type === void 0 ? 'wide' : _ref5$type,
-      _ref5$sidebarPosition = _ref5.sidebarPosition,
-      sidebarPosition = _ref5$sidebarPosition === void 0 ? 'inside' : _ref5$sidebarPosition,
-      _ref5$autofocus = _ref5.autofocus,
-      autofocus = _ref5$autofocus === void 0 ? true : _ref5$autofocus,
-      control = _ref5.control,
-      children = _ref5.children;
+  var title = _ref4.title,
+      subtitle = _ref4.subtitle,
+      description = _ref4.description,
+      centerHeader = _ref4.centerHeader,
+      beta = _ref4.beta,
+      testId = _ref4.testId,
+      className = _ref4.className,
+      sidebar = _ref4.sidebar,
+      _ref4$type = _ref4.type,
+      type = _ref4$type === void 0 ? 'wide' : _ref4$type,
+      _ref4$sidebarPosition = _ref4.sidebarPosition,
+      sidebarPosition = _ref4$sidebarPosition === void 0 ? 'inside' : _ref4$sidebarPosition,
+      _ref4$autofocus = _ref4.autofocus,
+      autofocus = _ref4$autofocus === void 0 ? true : _ref4$autofocus,
+      control = _ref4.control,
+      titleRef = _ref4.titleRef,
+      subtitleRef = _ref4.subtitleRef,
+      children = _ref4.children;
   var history = (0, _reactRouterDom.useHistory)();
   var skipTargetRef = (0, _react.useRef)(null);
   var path = history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : _history$location.pathname;
@@ -127,38 +150,17 @@ var Page = function Page(_ref5) {
       }
     }
   }, [path]);
-  var headerVisible = !!(title || subtitle || description);
-
-  var header = /*#__PURE__*/_react.default.createElement(_elements.Header, {
-    mb: headerVisible ? 3 : 0,
-    textAlign: centerHeader ? 'center' : undefined
-  }, title && /*#__PURE__*/_react.default.createElement(PageTitle, null, title, beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
-    hue: "orange",
-    ml: 2,
-    verticalAlign: "middle"
-  }, /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
-    _: "Beta",
-    id: "common.beta"
-  }))), subtitle && /*#__PURE__*/_react.default.createElement(PageSubtitle, null, subtitle), description && (subtitle ? /*#__PURE__*/_react.default.createElement(PageDescription, null, description) : /*#__PURE__*/_react.default.createElement(PageSubtitleDescription, null, description)));
-
-  if (control) {
-    header = /*#__PURE__*/_react.default.createElement(_elements.Div, {
-      display: ['block', 'flex'],
-      justifyContent: "space-between"
-    }, header, control);
-  }
-
   var sidebarInside = sidebarPosition === 'inside';
-  var width = type === 'unbounded' ? '100%' : '90%';
   return /*#__PURE__*/_react.default.createElement(_elements.Main, {
     "data-testid": testId,
     className: className,
-    display: sidebar && sidebarInside ? undefined : 'flex'
+    display: sidebar && sidebarInside ? undefined : 'flex',
+    py: 4
   }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
     ml: "auto",
     mr: sidebar && !sidebarInside ? 0 : 'auto',
     display: sidebar ? ['block', 'block', 'flex'] : undefined,
-    width: ['100%', width, width],
+    width: type === 'unbounded' ? '100%' : '90%',
     maxWidth: maxWidthByType[type] || maxWidthByType.narrow
   }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
     width: sidebar && sidebarInside ? [1, 1, 2 / 3] : undefined,
@@ -168,7 +170,17 @@ var Page = function Page(_ref5) {
     id: "skipTarget",
     ref: skipTargetRef,
     tabIndex: -1
-  }), header, children), sidebar && sidebarInside && /*#__PURE__*/_react.default.createElement(_elements.Div, {
+  }), /*#__PURE__*/_react.default.createElement(PageHeader, {
+    title: title,
+    subtitle: subtitle,
+    description: description,
+    centerHeader: centerHeader,
+    control: control,
+    children: children,
+    beta: beta,
+    titleRef: titleRef,
+    subtitleRef: subtitleRef
+  })), sidebar && sidebarInside && /*#__PURE__*/_react.default.createElement(_elements.Div, {
     width: [1, 1, 1 / 3],
     pl: [0, 0, 3],
     pt: [4, 4, 0]

package/lib/index.js

@@ -9,7 +9,21 @@ Object.defineProperty(exports, "Page", {
     return _Page.default;
   }
 });
+Object.defineProperty(exports, "Heading", {
+  enumerable: true,
+  get: function get() {
+    return _Heading.Heading;
+  }
+});
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function get() {
+    return _Heading.Section;
+  }
+});
 
 var _Page = _interopRequireDefault(require("./Page"));
 
+var _Heading = require("./Heading");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-page",
   "description": "Cloudflare Page Component",
-  "version": "5.0.1",
+  "version": "5.2.1",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -11,10 +11,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/component-label": "^3.3.29",
-    "@cloudflare/elements": "^1.11.31",
-    "@cloudflare/intl-react": "^1.9.17",
-    "@cloudflare/style-container": "^7.5.20",
+    "@cloudflare/component-label": "^3.3.30",
+    "@cloudflare/elements": "^1.11.32",
+    "@cloudflare/intl-react": "^1.9.18",
+    "@cloudflare/style-container": "^7.5.21",
     "react-router-dom": "^5.1.0"
   },
   "peerDependencies": {
@@ -31,5 +31,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "33e724b3b47f1a0afbbf27e0e868959b34e04945"
+  "gitHead": "ceaeb1a7b750bec5b0dfc6edbba94bf2ddac31bf"
 }

package/src/Heading.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { H1, H2, H3, H4, H5 } from '@cloudflare/elements';
+import { createStyledComponent, ThemeProp } from '@cloudflare/style-container';
+
+type SectionProps = {
+  children: React.ReactNode;
+  level?: number;
+  offset?: number;
+};
+
+type HeadingProps = React.ComponentProps<typeof H1> & {
+  level?: number;
+  offset?: number;
+};
+
+const HeadingInfo = React.createContext({
+  level: 0,
+  offset: 0
+});
+
+const headerThemes = [
+  ({ theme }: { theme: ThemeProp['theme'] }) => ({
+    fontSize: theme.fontSizes[6],
+    lineHeight: 1.25,
+    color: theme.colors.gray[1],
+    fontWeight: 600
+  }),
+  ({ theme }: { theme: ThemeProp['theme'] }) => ({
+    fontSize: theme.fontSizes[5],
+    lineHeight: 1.25,
+    color: theme.colors.gray[3],
+    fontWeight: 400
+  }),
+  ({ theme }: { theme: ThemeProp['theme'] }) => ({
+    fontSize: theme.fontSizes[4],
+    fontWeight: 600
+  }),
+  ({ theme }: { theme: ThemeProp['theme'] }) => ({
+    fontSize: theme.fontSizes[3],
+    lineHeight: 1.25,
+    fontWeight: 600
+  })
+];
+
+const headings = [H1, H2, H3, H4, H5];
+
+const maxHeadingLevel = headings.length - 1;
+
+const maxOffset = 2;
+
+const standardHeadings = headings.map((h, index) => {
+  const themeIndex = Math.min(index, headerThemes.length);
+  return createStyledComponent(headerThemes[themeIndex], h);
+});
+
+// Renders H1 with H2 style, H2 with H3 style etc.
+const offsetOneHeadings = headings.map((h, index) => {
+  const themeIndex = Math.min(index + 1, headerThemes.length);
+  return createStyledComponent(headerThemes[themeIndex], h);
+});
+
+// Renders H1 with H3 style, H2 with H4 style etc.
+const offsetTwoHeadings = headings.map((h, index) => {
+  const themeIndex = Math.min(index + 2, headerThemes.length);
+  return createStyledComponent(headerThemes[themeIndex], h);
+});
+
+export function Section(props: SectionProps) {
+  return (
+    <HeadingInfo.Consumer>
+      {info => (
+        <HeadingInfo.Provider
+          value={{
+            level: props.level ?? info.level + 1,
+            offset: info.offset + (props.offset ?? 0)
+          }}
+        >
+          {props.children}
+        </HeadingInfo.Provider>
+      )}
+    </HeadingInfo.Consumer>
+  );
+}
+
+export function Heading({ level, offset = 0, ...props }: HeadingProps) {
+  return (
+    <HeadingInfo.Consumer>
+      {info => {
+        const headingOffset = Math.min(maxOffset, info.offset + offset);
+        const headings =
+          headingOffset === 1
+            ? offsetOneHeadings
+            : headingOffset === 2
+            ? offsetTwoHeadings
+            : standardHeadings;
+
+        const headingLevel = Math.min(
+          level !== undefined ? level - 1 : info.level,
+          maxHeadingLevel
+        );
+        const Heading = headings[Math.max(0, headingLevel)];
+        // @ts-ignore
+        return <Heading {...props} />;
+      }}
+    </HeadingInfo.Consumer>
+  );
+}

package/src/Page.tsx

@@ -7,22 +7,28 @@ import {
 import { Main, Header, Div } from '@cloudflare/elements';
 import { Label } from '@cloudflare/component-label';
 import { Trans } from '@cloudflare/intl-react';
+import { Heading, Section } from './Heading';
 
 type PageWidth = 'narrow' | 'wide' | 'unbounded';
 
-type Props = {
-  type?: PageWidth;
-  className?: string;
-  testId?: string;
+type PageHeaderProps = {
   title?: React.ReactNode;
   subtitle?: React.ReactNode;
   description?: React.ReactNode;
   control?: React.ReactNode;
+  children?: React.ReactNode;
   centerHeader?: boolean;
+  beta?: boolean;
+  titleRef?: React.RefObject<HTMLHeadingElement>;
+  subtitleRef?: React.RefObject<HTMLHeadingElement>;
+};
+
+type Props = PageHeaderProps & {
+  type?: PageWidth;
+  className?: string;
+  testId?: string;
   sidebar?: React.ReactNode;
   sidebarPosition?: 'outside' | 'inside' | 'left';
-  beta?: boolean;
-  children?: any;
   autofocus?: boolean;
 };
 
@@ -32,33 +38,6 @@ const maxWidthByType = {
   unbounded: '100%'
 };
 
-const PageTitle = createComponent(
-  ({ theme }) => ({
-    fontSize: theme.fontSizes[6],
-    marginTop: theme.space[0],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    color: theme.colors.gray[1],
-    fontWeight: 600
-  }),
-  'h1'
-);
-
-PageTitle.displayName = 'Title';
-
-const PageSubtitle = createComponent(
-  ({ theme }) => ({
-    fontSize: theme.fontSizes[5],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    color: theme.colors.gray[3],
-    fontWeight: 400
-  }),
-  'h2'
-);
-
-PageTitle.displayName = 'PageSubtitle';
-
 const PageDescription = createComponent(
   ({ theme }) => ({
     fontSize: theme.fontSizes[4],
@@ -72,18 +51,85 @@ const PageDescription = createComponent(
 
 PageDescription.displayName = 'PageDescription';
 
-const PageSubtitleDescription = createComponent(
-  ({ theme }) => ({
-    fontSize: theme.fontSizes[4],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    color: theme.colors.gray[3],
-    fontWeight: 400
-  }),
-  'h2'
-);
+type ControlWrapperProps = {
+  control?: React.ReactNode;
+  children: React.ReactNode;
+};
 
-PageSubtitleDescription.displayName = 'PageSubtitleDescription';
+const ControlWrapper = ({ control, children }: ControlWrapperProps) => {
+  return control ? (
+    <Div display={['block', 'flex']} justifyContent="space-between">
+      {children}
+      {control}
+    </Div>
+  ) : (
+    <>{children}</>
+  );
+};
+
+const maxPageTitles = 2;
+
+const PageHeader = ({
+  title,
+  subtitle,
+  description,
+  centerHeader,
+  control,
+  children,
+  beta,
+  titleRef,
+  subtitleRef
+}: PageHeaderProps) => {
+  const headerVisible = !!(title || subtitle || description);
+  const titlesCount = Math.min(
+    [title, subtitle, description].filter(Boolean).length,
+    2
+  );
+
+  return (
+    <>
+      <ControlWrapper control={control}>
+        <Header
+          mb={headerVisible ? 3 : 0}
+          textAlign={centerHeader ? 'center' : undefined}
+        >
+          {title && (
+            <Heading innerRef={titleRef}>
+              {title}
+              {beta && (
+                <Label hue="orange" ml={2} verticalAlign="middle">
+                  <Trans _="Beta" id="common.beta" />
+                </Label>
+              )}
+            </Heading>
+          )}
+          {subtitle && (
+            <Heading
+              level={title ? 2 : 1}
+              offset={title ? 0 : 1}
+              innerRef={subtitleRef}
+            >
+              {subtitle}
+            </Heading>
+          )}
+          {description &&
+            (subtitle ? (
+              <PageDescription>{description}</PageDescription>
+            ) : (
+              <Heading level={2} fontSize={4} color="gray.3">
+                {description}
+              </Heading>
+            ))}
+        </Header>
+      </ControlWrapper>
+      <Section level={titlesCount} offset={maxPageTitles - titlesCount}>
+        {children}
+      </Section>
+    </>
+  );
+};
+
+PageHeader.displayName = 'PageHeader';
 
 // firstPage is used when dealing with focus. When navigating the dash, focus
 // jumps to the page content, but not when the dash is initially loaded.
@@ -119,6 +165,8 @@ const Page = ({
   sidebarPosition = 'inside',
   autofocus = true,
   control,
+  titleRef,
+  subtitleRef,
   children
 }: Props) => {
   const history = useHistory();
@@ -138,56 +186,20 @@ const Page = ({
     }
   }, [path]);
 
-  const headerVisible = !!(title || subtitle || description);
-
-  let header = (
-    <Header
-      mb={headerVisible ? 3 : 0}
-      textAlign={centerHeader ? 'center' : undefined}
-    >
-      {title && (
-        <PageTitle>
-          {title}
-          {beta && (
-            <Label hue="orange" ml={2} verticalAlign="middle">
-              <Trans _="Beta" id="common.beta" />
-            </Label>
-          )}
-        </PageTitle>
-      )}
-      {subtitle && <PageSubtitle>{subtitle}</PageSubtitle>}
-      {description &&
-        (subtitle ? (
-          <PageDescription>{description}</PageDescription>
-        ) : (
-          <PageSubtitleDescription>{description}</PageSubtitleDescription>
-        ))}
-    </Header>
-  );
-
-  if (control) {
-    header = (
-      <Div display={['block', 'flex']} justifyContent="space-between">
-        {header}
-        {control}
-      </Div>
-    );
-  }
-
   const sidebarInside = sidebarPosition === 'inside';
-  const width = type === 'unbounded' ? '100%' : '90%';
 
   return (
     <Main
       data-testid={testId}
       className={className}
       display={sidebar && sidebarInside ? undefined : 'flex'}
+      py={4}
     >
       <Div
         ml="auto"
         mr={sidebar && !sidebarInside ? 0 : 'auto'}
         display={sidebar ? ['block', 'block', 'flex'] : undefined}
-        width={['100%', width, width]}
+        width={type === 'unbounded' ? '100%' : '90%'}
         maxWidth={maxWidthByType[type] || maxWidthByType.narrow}
       >
         <Div
@@ -196,8 +208,18 @@ const Page = ({
           mt={0}
         >
           <a id="skipTarget" ref={skipTargetRef} tabIndex={-1} />
-          {header}
-          {children}
+
+          <PageHeader
+            title={title}
+            subtitle={subtitle}
+            description={description}
+            centerHeader={centerHeader}
+            control={control}
+            children={children}
+            beta={beta}
+            titleRef={titleRef}
+            subtitleRef={subtitleRef}
+          />
         </Div>
         {sidebar && sidebarInside && (
           <Div width={[1, 1, 1 / 3]} pl={[0, 0, 3]} pt={[4, 4, 0]}>

package/src/index.ts

@@ -1,3 +1,4 @@
 import Page from './Page';
+import { Heading, Section } from './Heading';
 
-export { Page };
+export { Page, Heading, Section };