@ansible/ansible-ui-framework 0.0.366 → 0.0.368

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/cjs/PageHeader.js +1 -7
  2. package/cjs/PageTableCard.js +3 -1
  3. package/cjs/components/pfcolors.d.ts +3 -2
  4. package/cjs/components/pfcolors.js +3 -0
  5. package/package.json +1 -1
package/cjs/PageHeader.js CHANGED
@@ -61,9 +61,7 @@ function PageHeader(props) {
61
61
  var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls, pageActions = props.headerActions;
62
62
  var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
63
63
  var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
64
- var xxl = (0, useBreakPoint_1.useBreakpoint)('xxl');
65
64
  var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
66
- // const isSmLarger = useBreakpoint('sm')
67
65
  var settings = (0, Settings_1.useSettings)();
68
66
  var t = props.t;
69
67
  t = t ? t : function (t) { return t; };
@@ -87,11 +85,7 @@ function PageHeader(props) {
87
85
  borderBottom: !props.disableBorderBottom && settings.borders
88
86
  ? 'thin solid var(--pf-global--BorderColor--100)'
89
87
  : undefined,
90
- backgroundColor: settings.theme === 'dark'
91
- ? xxl
92
- ? 'var(--pf-global--BackgroundColor--300)'
93
- : 'var(--pf-global--BackgroundColor--400)'
94
- : undefined,
88
+ backgroundColor: settings.theme !== 'light' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
95
89
  } }, { 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: {
96
90
  padding: 0,
97
91
  marginTop: 1,
package/cjs/PageTableCard.js CHANGED
@@ -143,7 +143,9 @@ function useColumnsToTableCardFn(columns, keyFn) {
143
143
  icon: (_a = nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon) === null || _a === void 0 ? void 0 : _a.call(nameColumn, item),
144
144
  title: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: nameColumn, item: item }),
145
145
  subtitle: subtitleColumn && (!subtitleColumn.value || subtitleColumn.value(item)) && ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: subtitleColumn, item: item })),
146
- 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)); }) })) }))] })) })),
146
+ 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
147
+ .filter(function (column) { return !column.value || column.value(item); })
148
+ .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)); }) })) }))] })) })),
147
149
  labels: labelColumn && ((_b = labelColumn.value(item)) === null || _b === void 0 ? void 0 : _b.map(function (label) { return ({ label: label }); })),
148
150
  };
149
151
  if (!descriptionColumn && cardColumns.length === 0 && countColumns.length === 0) {
package/cjs/components/pfcolors.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare enum PFColorE {
2
+ Default = "default",
2
3
  Green = "green",
3
4
  Success = "success",
4
5
  Blue = "blue",
@@ -10,8 +11,8 @@ export declare enum PFColorE {
10
11
  Grey = "grey",
11
12
  Disabled = "disabled"
12
13
  }
13
- export type PFColor = 'green' | 'success' | 'blue' | 'info' | 'red' | 'danger' | 'yellow' | 'warning' | 'grey' | 'disabled';
14
- 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)";
14
+ export type PFColor = 'default' | 'green' | 'success' | 'blue' | 'info' | 'red' | 'danger' | 'yellow' | 'warning' | 'grey' | 'disabled';
15
+ 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;
15
16
  export declare const pfSuccess = "var(--pf-global--success-color--100)";
16
17
  export declare const pfDanger = "var(--pf-global--danger-color--100)";
17
18
  export declare const pfWarning = "var(--pf-global--warning-color--100)";
package/cjs/components/pfcolors.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LabelColorE = exports.pfDisabled = exports.pfInfo = exports.pfWarning = exports.pfDanger = exports.pfSuccess = exports.getPatternflyColor = exports.PFColorE = void 0;
4
4
  var PFColorE;
5
5
  (function (PFColorE) {
6
+ PFColorE["Default"] = "default";
6
7
  PFColorE["Green"] = "green";
7
8
  PFColorE["Success"] = "success";
8
9
  PFColorE["Blue"] = "blue";
@@ -16,6 +17,8 @@ var PFColorE;
16
17
  })(PFColorE = exports.PFColorE || (exports.PFColorE = {}));
17
18
  function getPatternflyColor(color) {
18
19
  switch (color) {
20
+ case 'default':
21
+ return undefined;
19
22
  case 'green':
20
23
  case 'success':
21
24
  return exports.pfSuccess;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "A framework for building applications using PatternFly.",
4
- "version": "0.0.366",
4
+ "version": "0.0.368",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {