@ansible/ansible-ui-framework 0.0.366 → 0.0.368

package/cjs/PageHeader.js

@@ -61,9 +61,7 @@ function PageHeader(props) {
     var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls, pageActions = props.headerActions;
     var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
     var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
-    var xxl = (0, useBreakPoint_1.useBreakpoint)('xxl');
     var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
-    // const isSmLarger = useBreakpoint('sm')
     var settings = (0, Settings_1.useSettings)();
     var t = props.t;
     t = t ? t : function (t) { return t; };
@@ -87,11 +85,7 @@ function PageHeader(props) {
                     borderBottom: !props.disableBorderBottom && settings.borders
                         ? 'thin solid var(--pf-global--BorderColor--100)'
                         : undefined,
-                    backgroundColor: settings.theme === 'dark'
-                        ? xxl
-                            ? 'var(--pf-global--BackgroundColor--300)'
-                            : 'var(--pf-global--BackgroundColor--400)'
-                        : undefined,
+                    backgroundColor: settings.theme !== 'light' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
                 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children: t('Documentation') })) }))] })), position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: [title, (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
                                                     padding: 0,
                                                     marginTop: 1,

package/cjs/PageTableCard.js

@@ -143,7 +143,9 @@ function useColumnsToTableCardFn(columns, keyFn) {
                 icon: (_a = nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon) === null || _a === void 0 ? void 0 : _a.call(nameColumn, item),
                 title: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: nameColumn, item: item }),
                 subtitle: subtitleColumn && (!subtitleColumn.value || subtitleColumn.value(item)) && ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: subtitleColumn, item: item })),
-                cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [descriptionColumn && (!descriptionColumn.value || descriptionColumn.value(item)) && ((0, jsx_runtime_1.jsx)(Details_1.Detail, { children: descriptionColumn.type === 'description' ? ((0, jsx_runtime_1.jsx)("div", { children: descriptionColumn.value(item) })) : ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: descriptionColumn, item: item })) }, descriptionColumn.id)), cardColumns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.header }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) }), column.id)); }), countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(Details_1.Detail, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: 16, marginTop: 8, flexWrap: 'wrap' } }, { children: countColumns.map(function (column, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: 6, alignItems: 'baseline' } }, { children: [(0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }), (0, jsx_runtime_1.jsx)("small", __assign({ style: { opacity: 0.7 } }, { children: column.header }))] }), i)); }) })) }))] })) })),
+                cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [descriptionColumn && (!descriptionColumn.value || descriptionColumn.value(item)) && ((0, jsx_runtime_1.jsx)(Details_1.Detail, { children: descriptionColumn.type === 'description' ? ((0, jsx_runtime_1.jsx)("div", { children: descriptionColumn.value(item) })) : ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: descriptionColumn, item: item })) }, descriptionColumn.id)), cardColumns
+                                .filter(function (column) { return !column.value || column.value(item); })
+                                .map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.header }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) }), column.id)); }), countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(Details_1.Detail, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: 16, marginTop: 8, flexWrap: 'wrap' } }, { children: countColumns.map(function (column, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: 6, alignItems: 'baseline' } }, { children: [(0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }), (0, jsx_runtime_1.jsx)("small", __assign({ style: { opacity: 0.7 } }, { children: column.header }))] }), i)); }) })) }))] })) })),
                 labels: labelColumn && ((_b = labelColumn.value(item)) === null || _b === void 0 ? void 0 : _b.map(function (label) { return ({ label: label }); })),
             };
             if (!descriptionColumn && cardColumns.length === 0 && countColumns.length === 0) {

package/cjs/components/pfcolors.d.ts

@@ -1,4 +1,5 @@
 export declare enum PFColorE {
+    Default = "default",
     Green = "green",
     Success = "success",
     Blue = "blue",
@@ -10,8 +11,8 @@ export declare enum PFColorE {
     Grey = "grey",
     Disabled = "disabled"
 }
-export type PFColor = 'green' | 'success' | 'blue' | 'info' | 'red' | 'danger' | 'yellow' | 'warning' | 'grey' | 'disabled';
-export declare function getPatternflyColor(color: PFColor): "var(--pf-global--success-color--100)" | "var(--pf-global--danger-color--100)" | "var(--pf-global--warning-color--100)" | "var(--pf-global--info-color--100)" | "var(--pf-global--disabled-color--100)";
+export type PFColor = 'default' | 'green' | 'success' | 'blue' | 'info' | 'red' | 'danger' | 'yellow' | 'warning' | 'grey' | 'disabled';
+export declare function getPatternflyColor(color: PFColor): "var(--pf-global--success-color--100)" | "var(--pf-global--danger-color--100)" | "var(--pf-global--warning-color--100)" | "var(--pf-global--info-color--100)" | "var(--pf-global--disabled-color--100)" | undefined;
 export declare const pfSuccess = "var(--pf-global--success-color--100)";
 export declare const pfDanger = "var(--pf-global--danger-color--100)";
 export declare const pfWarning = "var(--pf-global--warning-color--100)";

package/cjs/components/pfcolors.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabelColorE = exports.pfDisabled = exports.pfInfo = exports.pfWarning = exports.pfDanger = exports.pfSuccess = exports.getPatternflyColor = exports.PFColorE = void 0;
 var PFColorE;
 (function (PFColorE) {
+    PFColorE["Default"] = "default";
     PFColorE["Green"] = "green";
     PFColorE["Success"] = "success";
     PFColorE["Blue"] = "blue";
@@ -16,6 +17,8 @@ var PFColorE;
 })(PFColorE = exports.PFColorE || (exports.PFColorE = {}));
 function getPatternflyColor(color) {
     switch (color) {
+        case 'default':
+            return undefined;
         case 'green':
         case 'success':
             return exports.pfSuccess;

package/package.json

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