@cloudflare/component-page 4.2.511 → 5.1.0

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

@@ -1,18 +1,190 @@
 "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");
+
+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; }
+
+var maxWidthByType = {
+  narrow: '64em',
+  wide: '79em',
+  unbounded: '100%'
+};
+var PageDescription = (0, _styleContainer.createComponent)(function (_ref) {
+  var theme = _ref.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 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;
+  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, 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(_Heading.Heading, {
+    level: title ? 2 : 1,
+    offset: title ? 0 : 1
+  }, 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
+// 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(_ref4) {
+  var _history$location;
+
+  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,
+      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;
+  (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 sidebarInside = sidebarPosition === 'inside';
+  return /*#__PURE__*/_react.default.createElement(_elements.Main, {
+    "data-testid": testId,
+    className: className,
+    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: 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
+  }), /*#__PURE__*/_react.default.createElement(PageHeader, {
+    title: title,
+    subtitle: subtitle,
+    description: description,
+    centerHeader: centerHeader,
+    control: control,
+    children: children,
+    beta: beta
+  })), 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,27 @@
 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", {
+Object.defineProperty(exports, "Heading", {
   enumerable: true,
   get: function get() {
-    return _PageContent.default;
+    return _Heading.Heading;
+  }
+});
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function get() {
+    return _Heading.Section;
   }
 });
-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 _Heading = require("./Heading");
 
-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.511",
+  "version": "5.1.0",
   "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.27",
-    "@cloudflare/intl-react": "^1.9.15",
-    "@cloudflare/style-container": "^7.5.18",
-    "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": "68e1591044330301f80c8c524e49f4c1ce328e5c"
+  "gitHead": "e1f1fecb460540213dd9f08e78e91e8d71dcbe27"
 }

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