@cloudflare/component-page 4.2.511 → 5.1.0

package/src/Page.tsx

@@ -1,13 +1,231 @@
-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';
+import { Heading, Section } from './Heading';
 
-const Page = createStyledComponent(
-  () => ({
-    py: 4,
-    minHeight: 411
+type PageWidth = 'narrow' | 'wide' | 'unbounded';
+
+type PageHeaderProps = {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  description?: React.ReactNode;
+  control?: React.ReactNode;
+  children?: React.ReactNode;
+  centerHeader?: boolean;
+  beta?: boolean;
+};
+
+type Props = PageHeaderProps & {
+  type?: PageWidth;
+  className?: string;
+  testId?: string;
+  sidebar?: React.ReactNode;
+  sidebarPosition?: 'outside' | 'inside' | 'left';
+  autofocus?: boolean;
+};
+
+const maxWidthByType = {
+  narrow: '64em',
+  wide: '79em',
+  unbounded: '100%'
+};
+
+const PageDescription = createComponent(
+  ({ theme }) => ({
+    fontSize: theme.fontSizes[4],
+    marginBottom: theme.space[0],
+    lineHeight: 1.25,
+    color: theme.colors.gray[3],
+    fontWeight: 400
   }),
-  'main'
+  'p'
 );
 
+PageDescription.displayName = 'PageDescription';
+
+type ControlWrapperProps = {
+  control?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+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
+}: 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>
+              {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}>
+              {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.
+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 sidebarInside = sidebarPosition === 'inside';
+
+  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={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} />
+
+          <PageHeader
+            title={title}
+            subtitle={subtitle}
+            description={description}
+            centerHeader={centerHeader}
+            control={control}
+            children={children}
+            beta={beta}
+          />
+        </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,4 @@
-import PageImport from './Page';
-import PageHeader from './PageHeader';
-import PageContent from './PageContent';
+import Page from './Page';
+import { Heading, Section } from './Heading';
 
-export const Page = PageImport;
-
-export { PageHeader, PageContent };
+export { Page, Heading, Section };

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;

package/lib/PageHeader.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styleContainer = require("@cloudflare/style-container");
-
-var _componentLabel = require("@cloudflare/component-label");
-
-var _intlReact = require("@cloudflare/intl-react");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var PageHeading = (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,
-    fontWeight: 600
-  };
-}, 'h1');
-var PageSubheading = (0, _styleContainer.createComponent)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    fontSize: theme.fontSizes[4],
-    marginTop: theme.space[0],
-    marginBottom: theme.space[0],
-    lineHeight: 1.25,
-    color: theme.colors.gray[3],
-    fontWeight: 400
-  };
-}, 'h2');
-var Beta = (0, _styleContainer.createComponent)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    marginLeft: theme.space[2],
-    verticalAlign: 'middle'
-  };
-}, _componentLabel.Label);
-
-var PageHeader = function PageHeader(_ref4) {
-  var title = _ref4.title,
-      subtitle = _ref4.subtitle,
-      beta = _ref4.beta;
-  return /*#__PURE__*/_react.default.createElement("header", null, /*#__PURE__*/_react.default.createElement(PageHeading, null, title, beta && /*#__PURE__*/_react.default.createElement(Beta, {
-    hue: "orange"
-  }, /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
-    _: "Beta",
-    id: "common.beta"
-  }))), subtitle && /*#__PURE__*/_react.default.createElement(PageSubheading, null, subtitle));
-};
-
-PageHeader.propTypes = {
-  title: _propTypes.default.node.isRequired,
-  subtitle: _propTypes.default.node,
-  beta: _propTypes.default.bool
-};
-var _default = PageHeader;
-exports.default = _default;

package/src/PageContent.tsx

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

package/src/PageHeader.tsx

@@ -1,66 +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
-);
-
-type Props = {
-  title: React.ReactNode;
-  subtitle?: React.ReactNode;
-  beta?: boolean;
-};
-
-const PageHeader: React.FC<Props> = ({ title, subtitle, beta }) => {
-  return (
-    <header>
-      <PageHeading>
-        {title}
-        {beta && (
-          <Beta hue="orange">
-            <Trans _="Beta" id="common.beta" />
-          </Beta>
-        )}
-      </PageHeading>
-      {subtitle && <PageSubheading>{subtitle}</PageSubheading>}
-    </header>
-  );
-};
-
-PageHeader.propTypes = {
-  title: PropTypes.node.isRequired,
-  subtitle: PropTypes.node,
-  beta: PropTypes.bool
-};
-
-export default PageHeader;