@cloudflare/component-page 8.0.14 → 8.0.15

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 8.0.15
+
+### Patch Changes
+
+- c66be7df18: Update Page component navigation link mobile view location
+  - @cloudflare/component-link@7.1.25
+
 ## 8.0.14
 
 ### Patch Changes

package/es/Page.js

@@ -5,7 +5,9 @@ import { Main, Header, Div, P } from '@cloudflare/elements';
 import { Label } from '@cloudflare/component-label';
 import { Trans } from '@cloudflare/intl-react';
 import { Heading, Section } from './Heading';
-import { DocumentationLink } from '@cloudflare/component-link';
+import { DocumentationLink, Link } from '@cloudflare/component-link';
+import { useIsMobile } from '@cloudflare/util-responsive';
+import { Icon } from '@cloudflare/component-icon';
 var maxWidthByType = {
   narrow: '64em',
   wide: '79em',
@@ -30,7 +32,8 @@ var PageHeader = _ref => {
   } = _ref;
   var headerVisible = !!(title || description);
   var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, navigation && /*#__PURE__*/React.createElement(Div, {
+  var isMobile = useIsMobile();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, navigation && !isMobile && /*#__PURE__*/React.createElement(Div, {
     mb: 4
   }, navigation), /*#__PURE__*/React.createElement(Div, {
     display: control ? ['block', 'flex'] : 'block',
@@ -48,7 +51,12 @@ var PageHeader = _ref => {
     mt: 0,
     mb: 2,
     innerRef: titleRef
-  }, title, beta && /*#__PURE__*/React.createElement(Label, {
+  }, isMobile && navigation && /*#__PURE__*/React.isValidElement(navigation) && /*#__PURE__*/React.createElement(Link, {
+    mr: 2,
+    onClick: navigation.props.onClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "backward"
+  })), title, beta && /*#__PURE__*/React.createElement(Label, {
     hue: "orange",
     ml: 2,
     verticalAlign: "middle"

package/lib/Page.js

@@ -23,6 +23,10 @@ var _Heading = require("./Heading");
 
 var _componentLink = require("@cloudflare/component-link");
 
+var _utilResponsive = require("@cloudflare/util-responsive");
+
+var _componentIcon = require("@cloudflare/component-icon");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -49,7 +53,8 @@ var PageHeader = function PageHeader(_ref) {
       navigation = _ref.navigation;
   var headerVisible = !!(title || description);
   var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, navigation && /*#__PURE__*/_react.default.createElement(_elements.Div, {
+  var isMobile = (0, _utilResponsive.useIsMobile)();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, navigation && !isMobile && /*#__PURE__*/_react.default.createElement(_elements.Div, {
     mb: 4
   }, navigation), /*#__PURE__*/_react.default.createElement(_elements.Div, {
     display: control ? ['block', 'flex'] : 'block',
@@ -67,7 +72,12 @@ var PageHeader = function PageHeader(_ref) {
     mt: 0,
     mb: 2,
     innerRef: titleRef
-  }, title, beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
+  }, isMobile && navigation && /*#__PURE__*/_react.default.isValidElement(navigation) && /*#__PURE__*/_react.default.createElement(_componentLink.Link, {
+    mr: 2,
+    onClick: navigation.props.onClick
+  }, /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
+    type: "backward"
+  })), title, beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
     hue: "orange",
     ml: 2,
     verticalAlign: "middle"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-page",
   "description": "Cloudflare Page Component",
-  "version": "8.0.14",
+  "version": "8.0.15",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@cloudflare/component-label": "^5.0.4",
-    "@cloudflare/component-link": "^7.1.24",
+    "@cloudflare/component-link": "^7.1.25",
     "@cloudflare/elements": "^3.0.3",
     "@cloudflare/intl-react": "^1.9.80",
     "react-router-dom": "^5.1.0"

package/src/Page.tsx

@@ -5,7 +5,9 @@ import { Main, Header, Div, P } from '@cloudflare/elements';
 import { Label } from '@cloudflare/component-label';
 import { Trans } from '@cloudflare/intl-react';
 import { Heading, Section } from './Heading';
-import { DocumentationLink } from '@cloudflare/component-link';
+import { DocumentationLink, Link } from '@cloudflare/component-link';
+import { useIsMobile } from '@cloudflare/util-responsive';
+import { Icon } from '@cloudflare/component-icon';
 
 type PageWidth = 'narrow' | 'wide' | 'unbounded';
 
@@ -57,10 +59,11 @@ const PageHeader = ({
 }: PageHeaderProps) => {
   const headerVisible = !!(title || description);
   const titlesCount = Math.min([title, description].filter(Boolean).length, 2);
+  const isMobile = useIsMobile();
 
   return (
     <>
-      {navigation && <Div mb={4}>{navigation}</Div>}
+      {navigation && !isMobile && <Div mb={4}>{navigation}</Div>}
       <Div
         display={control ? ['block', 'flex'] : 'block'}
         justifyContent="space-between"
@@ -80,6 +83,11 @@ const PageHeader = ({
           )}
           {title && (
             <Heading mt={0} mb={2} innerRef={titleRef}>
+              {isMobile && navigation && React.isValidElement(navigation) && (
+                <Link mr={2} onClick={navigation.props.onClick}>
+                  <Icon type="backward" />
+                </Link>
+              )}
               {title}
               {beta && (
                 <Label hue="orange" ml={2} verticalAlign="middle">