@cloudflare/component-page 9.0.0 → 9.1.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 9.1.1
+
+### Patch Changes
+
+- Updated dependencies [0d66b430a2]
+  - @cloudflare/elements@3.0.4
+  - @cloudflare/component-link@8.0.8
+
+## 9.1.0
+
+### Minor Changes
+
+- 47cd1e5858: add support for rendering documentation button instead of a link in page header
+
 ## 9.0.0
 
 ### Major Changes

package/dist/Page.d.ts

@@ -13,6 +13,8 @@ declare const _default: React.ComponentType<{
     titleRef?: React.RefObject<HTMLHeadingElement> | undefined;
     parentPageLabelRef?: React.RefObject<HTMLHeadingElement> | undefined;
     navigation?: React.ReactNode;
+    onDocumentationButtonClick?: (() => void) | undefined;
+    documentationAsButton?: boolean | undefined;
     type?: PageWidth | undefined;
     className?: string | undefined;
     testId?: string | undefined;

package/es/Page.js

@@ -8,6 +8,7 @@ import { Heading, Section } from './Heading';
 import { DocumentationLink, Link } from '@cloudflare/component-link';
 import { useIsMobile } from '@cloudflare/util-responsive';
 import { Icon } from '@cloudflare/component-icon';
+import { Button } from '@cloudflare/component-button';
 var maxWidthByType = {
   narrow: '64em',
   wide: '79em',
@@ -28,7 +29,9 @@ var PageHeader = _ref => {
     beta,
     titleRef,
     parentPageLabelRef,
-    navigation
+    navigation,
+    onDocumentationButtonClick,
+    documentationAsButton
   } = _ref;
   var headerVisible = !!(title || description);
   var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
@@ -69,7 +72,15 @@ var PageHeader = _ref => {
     mb: documentationHref ? 2 : 3,
     lineHeight: 1.25,
     fontWeight: 400
-  }, description), documentationHref && /*#__PURE__*/React.createElement(DocumentationLink, {
+  }, description), documentationAsButton ? /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    borderRadius: '20vh',
+    inverted: true,
+    iconType: "documentation",
+    onClick: onDocumentationButtonClick,
+    px: 3,
+    py: 1
+  }, documentationLabel) : documentationHref && /*#__PURE__*/React.createElement(DocumentationLink, {
     fontSize: 2,
     iconSize: 14,
     mb: [3, 0],
@@ -124,7 +135,9 @@ var Page = _ref2 => {
     titleRef,
     parentPageLabelRef,
     children,
-    navigation
+    navigation,
+    onDocumentationButtonClick,
+    documentationAsButton
   } = _ref2;
   var history = useHistory();
   var skipTargetRef = useRef(null);
@@ -174,7 +187,9 @@ var Page = _ref2 => {
     beta: beta,
     titleRef: titleRef,
     parentPageLabelRef: parentPageLabelRef,
-    navigation: navigation
+    navigation: navigation,
+    onDocumentationButtonClick: onDocumentationButtonClick,
+    documentationAsButton: documentationAsButton
   })), sidebar && sidebarInside && /*#__PURE__*/React.createElement(Div, {
     width: [1, 1, 1 / 3],
     pl: [0, 0, 3],

package/lib/Page.js

@@ -27,6 +27,8 @@ var _utilResponsive = require("@cloudflare/util-responsive");
 
 var _componentIcon = require("@cloudflare/component-icon");
 
+var _componentButton = require("@cloudflare/component-button");
+
 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; }
@@ -50,7 +52,9 @@ var PageHeader = function PageHeader(_ref) {
       beta = _ref.beta,
       titleRef = _ref.titleRef,
       parentPageLabelRef = _ref.parentPageLabelRef,
-      navigation = _ref.navigation;
+      navigation = _ref.navigation,
+      onDocumentationButtonClick = _ref.onDocumentationButtonClick,
+      documentationAsButton = _ref.documentationAsButton;
   var headerVisible = !!(title || description);
   var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
   var isMobile = (0, _utilResponsive.useIsMobile)();
@@ -90,7 +94,15 @@ var PageHeader = function PageHeader(_ref) {
     mb: documentationHref ? 2 : 3,
     lineHeight: 1.25,
     fontWeight: 400
-  }, description), documentationHref && /*#__PURE__*/_react.default.createElement(_componentLink.DocumentationLink, {
+  }, description), documentationAsButton ? /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
+    type: "primary",
+    borderRadius: '20vh',
+    inverted: true,
+    iconType: "documentation",
+    onClick: onDocumentationButtonClick,
+    px: 3,
+    py: 1
+  }, documentationLabel) : documentationHref && /*#__PURE__*/_react.default.createElement(_componentLink.DocumentationLink, {
     fontSize: 2,
     iconSize: 14,
     mb: [3, 0],
@@ -149,7 +161,9 @@ var Page = function Page(_ref2) {
       titleRef = _ref2.titleRef,
       parentPageLabelRef = _ref2.parentPageLabelRef,
       children = _ref2.children,
-      navigation = _ref2.navigation;
+      navigation = _ref2.navigation,
+      onDocumentationButtonClick = _ref2.onDocumentationButtonClick,
+      documentationAsButton = _ref2.documentationAsButton;
   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;
@@ -198,7 +212,9 @@ var Page = function Page(_ref2) {
     beta: beta,
     titleRef: titleRef,
     parentPageLabelRef: parentPageLabelRef,
-    navigation: navigation
+    navigation: navigation,
+    onDocumentationButtonClick: onDocumentationButtonClick,
+    documentationAsButton: documentationAsButton
   })), sidebar && sidebarInside && /*#__PURE__*/_react.default.createElement(_elements.Div, {
     width: [1, 1, 1 / 3],
     pl: [0, 0, 3],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-page",
   "description": "Cloudflare Page Component",
-  "version": "9.0.0",
+  "version": "9.1.1",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@cloudflare/component-label": "^5.0.4",
-    "@cloudflare/component-link": "^8.0.7",
-    "@cloudflare/elements": "^3.0.3",
+    "@cloudflare/component-link": "^8.0.8",
+    "@cloudflare/elements": "^3.0.4",
     "@cloudflare/intl-react": "^1.9.80"
   },
   "peerDependencies": {

package/src/Page.tsx

@@ -8,6 +8,7 @@ import { Heading, Section } from './Heading';
 import { DocumentationLink, Link } from '@cloudflare/component-link';
 import { useIsMobile } from '@cloudflare/util-responsive';
 import { Icon } from '@cloudflare/component-icon';
+import { Button } from '@cloudflare/component-button';
 
 type PageWidth = 'narrow' | 'wide' | 'unbounded';
 
@@ -24,6 +25,8 @@ type PageHeaderProps = {
   titleRef?: React.RefObject<HTMLHeadingElement>;
   parentPageLabelRef?: React.RefObject<HTMLHeadingElement>;
   navigation?: React.ReactNode;
+  onDocumentationButtonClick?: () => void;
+  documentationAsButton?: boolean;
 };
 
 type Props = PageHeaderProps & {
@@ -55,7 +58,9 @@ const PageHeader = ({
   beta,
   titleRef,
   parentPageLabelRef,
-  navigation
+  navigation,
+  onDocumentationButtonClick,
+  documentationAsButton
 }: PageHeaderProps) => {
   const headerVisible = !!(title || description);
   const titlesCount = Math.min([title, description].filter(Boolean).length, 2);
@@ -107,20 +112,34 @@ const PageHeader = ({
               {description}
             </P>
           )}
-          {documentationHref && (
-            <DocumentationLink
-              fontSize={2}
-              iconSize={14}
-              mb={[3, 0]}
-              href={documentationHref}
-              display="inline-block"
+          {documentationAsButton ? (
+            <Button
+              type="primary"
+              borderRadius={'20vh'}
+              inverted
+              iconType="documentation"
+              onClick={onDocumentationButtonClick}
+              px={3}
+              py={1}
             >
-              {documentationLabel ? (
-                documentationLabel
-              ) : (
-                <Trans id="common.documentation" _={'Documentation'} />
-              )}
-            </DocumentationLink>
+              {documentationLabel}
+            </Button>
+          ) : (
+            documentationHref && (
+              <DocumentationLink
+                fontSize={2}
+                iconSize={14}
+                mb={[3, 0]}
+                href={documentationHref}
+                display="inline-block"
+              >
+                {documentationLabel ? (
+                  documentationLabel
+                ) : (
+                  <Trans id="common.documentation" _={'Documentation'} />
+                )}
+              </DocumentationLink>
+            )
           )}
         </Header>
         {control}
@@ -173,7 +192,9 @@ const Page = ({
   titleRef,
   parentPageLabelRef,
   children,
-  navigation
+  navigation,
+  onDocumentationButtonClick,
+  documentationAsButton
 }: Props) => {
   const history = useHistory();
   const skipTargetRef = useRef<HTMLAnchorElement>(null);
@@ -231,6 +252,8 @@ const Page = ({
             titleRef={titleRef}
             parentPageLabelRef={parentPageLabelRef}
             navigation={navigation}
+            onDocumentationButtonClick={onDocumentationButtonClick}
+            documentationAsButton={documentationAsButton}
           />
         </Div>
         {sidebar && sidebarInside && (