@ansible/ansible-ui-framework 0.0.455 → 0.0.457

package/cjs/PageDetails/PageDetail.d.ts

@@ -2,5 +2,6 @@ import { ReactNode } from 'react';
 export declare function PageDetail(props: {
     label?: string;
     children?: ReactNode;
+    helpText?: string;
     isEmpty?: boolean;
 }): JSX.Element;

package/cjs/PageDetails/PageDetail.js

@@ -14,14 +14,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageDetail = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
+var StandardPopover_1 = require("../components/StandardPopover");
 function PageDetail(props) {
-    var _a;
-    if (props.children === null || typeof props.children === 'undefined' || props.children === '') {
+    var label = props.label, children = props.children, helpText = props.helpText, isEmpty = props.isEmpty;
+    if (children === null || typeof children === 'undefined' || children === '') {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
-    if (props.isEmpty) {
+    if (isEmpty) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [props.label && (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: props.label }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: (_a = props.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [label && ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListTerm, { children: [label, helpText ? (0, jsx_runtime_1.jsx)(StandardPopover_1.StandardPopover, { header: label, content: helpText }) : null] })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: label === null || label === void 0 ? void 0 : label.toLowerCase().split(' ').join('-') }, { children: children }))] }));
 }
 exports.PageDetail = PageDetail;

package/cjs/components/StandardPopover.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+declare function StandardPopover(props: {
+    ariaLabel?: string;
+    content: ReactNode;
+    header: ReactNode;
+    id?: string;
+    maxWidth?: string;
+}): JSX.Element | null;
+export { StandardPopover };

package/cjs/components/StandardPopover.js

@@ -0,0 +1,48 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StandardPopover = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_icons_1 = require("@patternfly/react-icons");
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+var PopoverButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: var(--pf-global--spacer--xs);\n  margin: -(var(--pf-global--spacer--xs));\n  font-size: var(--pf-global--FontSize--sm);\n  --pf-c-form__group-label-help--Color: var(--pf-global--Color--200);\n  --pf-c-form__group-label-help--hover--Color: var(--pf-global--Color--100);\n"], ["\n  padding: var(--pf-global--spacer--xs);\n  margin: -(var(--pf-global--spacer--xs));\n  font-size: var(--pf-global--FontSize--sm);\n  --pf-c-form__group-label-help--Color: var(--pf-global--Color--200);\n  --pf-c-form__group-label-help--hover--Color: var(--pf-global--Color--100);\n"])));
+function StandardPopover(props) {
+    var _a = props.ariaLabel, ariaLabel = _a === void 0 ? '' : _a, content = props.content, header = props.header, _b = props.id, id = _b === void 0 ? '' : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? '' : _c, rest = __rest(props, ["ariaLabel", "content", "header", "id", "maxWidth"]);
+    var t = (0, react_i18next_1.useTranslation)().t;
+    if (!content) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ bodyContent: content, headerContent: header, hideOnOutsideClick: true, id: id, "data-cy": id, maxWidth: maxWidth }, rest, { children: (0, jsx_runtime_1.jsx)(PopoverButton, __assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t('More information`'), "aria-haspopup": "true", className: "pf-c-form__group-label-help", onClick: function (e) { return e.preventDefault(); }, type: "button" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.HelpIcon, { noVerticalAlign: true }) })) })));
+}
+exports.StandardPopover = StandardPopover;
+var templateObject_1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.455",
+  "version": "0.0.457",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {