@ansible/ansible-ui-framework 0.0.366 → 0.0.367
Sign up to get free protection for your applications and to get access to all the features.
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
|
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,
|
@@ -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)";
|
@@ -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;
|