@cloudflare/component-page 9.3.2 → 9.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 9.3.4
+
+### Patch Changes
+
+- cce55ea371: Add tooltip and aria label
+
+## 9.3.3
+
+### Patch Changes
+
+- @cloudflare/component-link@8.1.11
+
 ## 9.3.2
 
 ### Patch Changes

package/es/Page.js

@@ -17,6 +17,7 @@ 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';
+import { Tooltip } from '@cloudflare/component-tooltip';
 var maxWidthByType = {
   narrow: '64em',
   wide: '79em',
@@ -81,15 +82,22 @@ var PageHeader = _ref => {
     lineHeight: 1.25,
     fontWeight: 400,
     wordBreak: "break-word"
-  }, description), documentationAsButton && !isMobile ? /*#__PURE__*/React.createElement(Button, {
+  }, description), documentationAsButton && !isMobile ? /*#__PURE__*/React.createElement(Tooltip, {
+    place: "right",
+    message: /*#__PURE__*/React.createElement(Trans, {
+      id: "common.open_documentation",
+      _: 'Open documentation'
+    })
+  }, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     borderRadius: '20vh',
     inverted: true,
     iconType: "documentation",
     onClick: onDocumentationButtonClick,
     px: 3,
-    py: 1
-  }, documentationLabel) : documentationHref && /*#__PURE__*/React.createElement(DocumentationLink, {
+    py: 1,
+    ariaLabel: "open documentation"
+  }, documentationLabel)) : documentationHref && /*#__PURE__*/React.createElement(DocumentationLink, {
     fontSize: 2,
     iconSize: 14,
     mb: [3, 0],

package/lib/Page.js

@@ -29,6 +29,8 @@ var _componentIcon = require("@cloudflare/component-icon");
 
 var _componentButton = require("@cloudflare/component-button");
 
+var _componentTooltip = require("@cloudflare/component-tooltip");
+
 var _excluded = ["title", "parentPageLabel", "description", "documentationLabel", "documentationHref", "centerHeader", "beta", "testId", "className", "sidebar", "type", "sidebarPosition", "autofocus", "control", "titleRef", "parentPageLabelRef", "children", "navigation", "onDocumentationButtonClick", "documentationAsButton"];
 
 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); }
@@ -103,15 +105,22 @@ var PageHeader = function PageHeader(_ref) {
     lineHeight: 1.25,
     fontWeight: 400,
     wordBreak: "break-word"
-  }, description), documentationAsButton && !isMobile ? /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
+  }, description), documentationAsButton && !isMobile ? /*#__PURE__*/_react.default.createElement(_componentTooltip.Tooltip, {
+    place: "right",
+    message: /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
+      id: "common.open_documentation",
+      _: 'Open documentation'
+    })
+  }, /*#__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, {
+    py: 1,
+    ariaLabel: "open documentation"
+  }, documentationLabel)) : documentationHref && /*#__PURE__*/_react.default.createElement(_componentLink.DocumentationLink, {
     fontSize: 2,
     iconSize: 14,
     mb: [3, 0],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-page",
   "description": "Cloudflare Page Component",
-  "version": "9.3.2",
+  "version": "9.3.4",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@cloudflare/component-label": "^5.0.8",
-    "@cloudflare/component-link": "^8.1.10",
+    "@cloudflare/component-link": "^8.1.11",
     "@cloudflare/elements": "^3.0.8",
     "@cloudflare/intl-react": "^1.9.80"
   },

package/src/Page.tsx

@@ -9,6 +9,7 @@ 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';
+import { Tooltip } from '@cloudflare/component-tooltip';
 
 type PageWidth = 'narrow' | 'wide' | 'unbounded';
 
@@ -114,17 +115,28 @@ const PageHeader = ({
             </P>
           )}
           {documentationAsButton && !isMobile ? (
-            <Button
-              type="primary"
-              borderRadius={'20vh'}
-              inverted
-              iconType="documentation"
-              onClick={onDocumentationButtonClick}
-              px={3}
-              py={1}
+            <Tooltip
+              place="right"
+              message={
+                <Trans
+                  id="common.open_documentation"
+                  _={'Open documentation'}
+                />
+              }
             >
-              {documentationLabel}
-            </Button>
+              <Button
+                type="primary"
+                borderRadius={'20vh'}
+                inverted
+                iconType="documentation"
+                onClick={onDocumentationButtonClick}
+                px={3}
+                py={1}
+                ariaLabel="open documentation"
+              >
+                {documentationLabel}
+              </Button>
+            </Tooltip>
           ) : (
             documentationHref && (
               <DocumentationLink