@cloudflare/component-page 4.2.510 → 5.0.2

package/lib/Page.js

@@ -1,18 +1,186 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
 var _styleContainer = require("@cloudflare/style-container");
 
-var Page = (0, _styleContainer.createStyledComponent)(function () {
+var _elements = require("@cloudflare/elements");
+
+var _componentLabel = require("@cloudflare/component-label");
+
+var _intlReact = require("@cloudflare/intl-react");
+
+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; }
+
+var maxWidthByType = {
+  narrow: '64em',
+  wide: '79em',
+  unbounded: '100%'
+};
+var PageTitle = (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],
+    lineHeight: 1.25,
+    color: theme.colors.gray[3],
+    fontWeight: 400
+  };
+}, '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
+// 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
+// back to the first page that was loaded.
+
+var firstLoad = true; // Workaround for a bug where elements don't focus correctly.
+
+var maxFocusAttempts = 10;
+
+var focus = function focus(el) {
+  var attempt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  el === null || el === void 0 ? void 0 : el.focus();
+
+  if (typeof document !== 'undefined' && document.activeElement !== el && attempt < maxFocusAttempts) {
+    setTimeout(function () {
+      return focus(el, attempt + 1);
+    }, 10);
+  }
+};
+
+var Page = function Page(_ref5) {
+  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 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;
+  (0, _react.useEffect)(function () {
+    // If autofocus is enabled, then focus will move to the title block when
+    // the page is navigated to (but not when the dash is first loaded)
+    if (autofocus) {
+      if (!firstPage) {
+        firstPage = path;
+      } else if (firstPage !== path || !firstLoad) {
+        focus(skipTargetRef.current);
+        firstLoad = false;
+      }
+    }
+  }, [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';
+  return /*#__PURE__*/_react.default.createElement(_elements.Main, {
+    "data-testid": testId,
+    className: className,
+    display: sidebar && sidebarInside ? undefined : 'flex'
+  }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    ml: "auto",
+    mr: sidebar && !sidebarInside ? 0 : 'auto',
+    display: sidebar ? ['block', 'block', 'flex'] : undefined,
+    width: type === 'unbounded' ? '100%' : '90%',
+    maxWidth: maxWidthByType[type] || maxWidthByType.narrow
+  }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    width: sidebar && sidebarInside ? [1, 1, 2 / 3] : undefined,
+    pr: sidebar && sidebarInside ? [0, 0, 3] : undefined,
+    mt: 0
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    id: "skipTarget",
+    ref: skipTargetRef,
+    tabIndex: -1
+  }), header, children), sidebar && sidebarInside && /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    width: [1, 1, 1 / 3],
+    pl: [0, 0, 3],
+    pt: [4, 4, 0]
+  }, sidebar)), !sidebarInside && sidebar);
+};
+
+Page.displayName = 'Page';
+
+var _default = (0, _styleContainer.createStyledComponent)(function () {
   return {
     py: 4,
     minHeight: 411
   };
-}, 'main');
-Page.displayName = 'Page';
-var _default = Page;
+}, Page);
+
 exports.default = _default;

package/lib/index.js

@@ -3,27 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "PageHeader", {
+Object.defineProperty(exports, "Page", {
   enumerable: true,
   get: function get() {
-    return _PageHeader.default;
+    return _Page.default;
   }
 });
-Object.defineProperty(exports, "PageContent", {
-  enumerable: true,
-  get: function get() {
-    return _PageContent.default;
-  }
-});
-exports.Page = void 0;
 
 var _Page = _interopRequireDefault(require("./Page"));
 
-var _PageHeader = _interopRequireDefault(require("./PageHeader"));
-
-var _PageContent = _interopRequireDefault(require("./PageContent"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Page = _Page.default;
-exports.Page = Page;
+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": "4.2.510",
+  "version": "5.0.2",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -11,10 +11,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/component-label": "^3.3.26",
-    "@cloudflare/intl-react": "^1.9.15",
-    "@cloudflare/style-container": "^7.5.17",
-    "prop-types": "^15.6.0"
+    "@cloudflare/component-label": "^3.3.29",
+    "@cloudflare/elements": "^1.11.31",
+    "@cloudflare/intl-react": "^1.9.17",
+    "@cloudflare/style-container": "^7.5.20",
+    "react-router-dom": "^5.1.0"
   },
   "peerDependencies": {
     "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
@@ -30,5 +31,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "737c0d5801ce0a460ef414075e1de979c645ade4"
+  "gitHead": "155894df6e83b90a322155ee33eae61e97d8eb9c"
 }

package/src/Page.tsx

@@ -1,13 +1,220 @@
-import { createStyledComponent } from '@cloudflare/style-container';
+import React, { useEffect, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  createStyledComponent,
+  createComponent
+} from '@cloudflare/style-container';
+import { Main, Header, Div } from '@cloudflare/elements';
+import { Label } from '@cloudflare/component-label';
+import { Trans } from '@cloudflare/intl-react';
 
-const Page = createStyledComponent(
-  () => ({
-    py: 4,
-    minHeight: 411
+type PageWidth = 'narrow' | 'wide' | 'unbounded';
+
+type Props = {
+  type?: PageWidth;
+  className?: string;
+  testId?: string;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  description?: React.ReactNode;
+  control?: React.ReactNode;
+  centerHeader?: boolean;
+  sidebar?: React.ReactNode;
+  sidebarPosition?: 'outside' | 'inside' | 'left';
+  beta?: boolean;
+  children?: any;
+  autofocus?: boolean;
+};
+
+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 }) => ({
+    fontSize: theme.fontSizes[4],
+    marginBottom: theme.space[0],
+    lineHeight: 1.25,
+    color: theme.colors.gray[3],
+    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
   }),
-  'main'
+  'h2'
 );
 
+PageSubtitleDescription.displayName = 'PageSubtitleDescription';
+
+// 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
+// back to the first page that was loaded.
+let firstLoad = true;
+
+// Workaround for a bug where elements don't focus correctly.
+const maxFocusAttempts = 10;
+const focus = (el: HTMLElement | null, attempt: number = 0) => {
+  el?.focus();
+  if (
+    typeof document !== 'undefined' &&
+    document.activeElement !== el &&
+    attempt < maxFocusAttempts
+  ) {
+    setTimeout(() => focus(el, attempt + 1), 10);
+  }
+};
+
+const Page = ({
+  title,
+  subtitle,
+  description,
+  centerHeader,
+  beta,
+  testId,
+  className,
+  sidebar,
+  type = 'wide',
+  sidebarPosition = 'inside',
+  autofocus = true,
+  control,
+  children
+}: Props) => {
+  const history = useHistory();
+  const skipTargetRef = useRef<HTMLAnchorElement>(null);
+  const path = history?.location?.pathname;
+
+  useEffect(() => {
+    // If autofocus is enabled, then focus will move to the title block when
+    // the page is navigated to (but not when the dash is first loaded)
+    if (autofocus) {
+      if (!firstPage) {
+        firstPage = path;
+      } else if (firstPage !== path || !firstLoad) {
+        focus(skipTargetRef.current);
+        firstLoad = false;
+      }
+    }
+  }, [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';
+
+  return (
+    <Main
+      data-testid={testId}
+      className={className}
+      display={sidebar && sidebarInside ? undefined : 'flex'}
+    >
+      <Div
+        ml="auto"
+        mr={sidebar && !sidebarInside ? 0 : 'auto'}
+        display={sidebar ? ['block', 'block', 'flex'] : undefined}
+        width={type === 'unbounded' ? '100%' : '90%'}
+        maxWidth={maxWidthByType[type] || maxWidthByType.narrow}
+      >
+        <Div
+          width={sidebar && sidebarInside ? [1, 1, 2 / 3] : undefined}
+          pr={sidebar && sidebarInside ? [0, 0, 3] : undefined}
+          mt={0}
+        >
+          <a id="skipTarget" ref={skipTargetRef} tabIndex={-1} />
+          {header}
+          {children}
+        </Div>
+        {sidebar && sidebarInside && (
+          <Div width={[1, 1, 1 / 3]} pl={[0, 0, 3]} pt={[4, 4, 0]}>
+            {sidebar}
+          </Div>
+        )}
+      </Div>
+      {!sidebarInside && sidebar}
+    </Main>
+  );
+};
+
 Page.displayName = 'Page';
 
-export default Page;
+export default createStyledComponent(
+  () => ({
+    py: 4,
+    minHeight: 411
+  }),
+  Page
+);

package/src/index.ts

@@ -1,7 +1,3 @@
-import PageImport from './Page';
-import PageHeader from './PageHeader';
-import PageContent from './PageContent';
+import Page from './Page';
 
-export const Page = PageImport;
-
-export { PageHeader, PageContent };
+export { Page };

package/dist/PageContent.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-declare type PageWidth = 'narrow' | 'wide' | 'unbounded';
-declare const _default: React.ComponentType<{
-    children?: any;
-    className?: string | undefined;
-    testId?: string | undefined;
-    type?: PageWidth | undefined;
-    innerRef?: React.Ref<never> | undefined;
-}>;
-export default _default;

package/dist/PageHeader.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-declare type Props = {
-    title: React.ReactNode;
-    subtitle?: React.ReactNode;
-    beta?: boolean;
-};
-declare const PageHeader: React.FC<Props>;
-export default PageHeader;

package/es/PageContent.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { createComponent } from '@cloudflare/style-container';
-const maxWidthByType = {
-  narrow: '64em',
-  wide: '79em',
-  unbounded: '100%'
-};
-
-const styles = ({
-  type = 'wide'
-}) => ({
-  marginLeft: 'auto',
-  marginRight: 'auto',
-  width: type === 'unbounded' ? '100%' : '90%',
-  maxWidth: maxWidthByType[type] || maxWidthByType.narrow
-});
-
-const PageContent = ({
-  className,
-  children,
-  testId
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: className,
-    "data-testid": testId
-  }, children);
-};
-
-export default createComponent(styles, PageContent);

package/es/PageHeader.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createComponent } from '@cloudflare/style-container';
-import { Label } from '@cloudflare/component-label';
-import { Trans } from '@cloudflare/intl-react';
-const PageHeading = createComponent(({
-  theme
-}) => ({
-  fontSize: theme.fontSizes[6],
-  marginTop: theme.space[0],
-  marginBottom: theme.space[0],
-  lineHeight: 1.25,
-  fontWeight: 600
-}), 'h1');
-const PageSubheading = createComponent(({
-  theme
-}) => ({
-  fontSize: theme.fontSizes[4],
-  marginTop: theme.space[0],
-  marginBottom: theme.space[0],
-  lineHeight: 1.25,
-  color: theme.colors.gray[3],
-  fontWeight: 400
-}), 'h2');
-const Beta = createComponent(({
-  theme
-}) => ({
-  marginLeft: theme.space[2],
-  verticalAlign: 'middle'
-}), Label);
-
-const PageHeader = ({
-  title,
-  subtitle,
-  beta
-}) => {
-  return /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(PageHeading, null, title, beta && /*#__PURE__*/React.createElement(Beta, {
-    hue: "orange"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    _: "Beta",
-    id: "common.beta"
-  }))), subtitle && /*#__PURE__*/React.createElement(PageSubheading, null, subtitle));
-};
-
-PageHeader.propTypes = {
-  title: PropTypes.node.isRequired,
-  subtitle: PropTypes.node,
-  beta: PropTypes.bool
-};
-export default PageHeader;

package/lib/PageContent.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styleContainer = require("@cloudflare/style-container");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var maxWidthByType = {
-  narrow: '64em',
-  wide: '79em',
-  unbounded: '100%'
-};
-
-var styles = function styles(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'wide' : _ref$type;
-  return {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    width: type === 'unbounded' ? '100%' : '90%',
-    maxWidth: maxWidthByType[type] || maxWidthByType.narrow
-  };
-};
-
-var PageContent = function PageContent(_ref2) {
-  var className = _ref2.className,
-      children = _ref2.children,
-      testId = _ref2.testId;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: className,
-    "data-testid": testId
-  }, children);
-};
-
-var _default = (0, _styleContainer.createComponent)(styles, PageContent);
-
-exports.default = _default;