@ansible/ansible-ui-framework 0.0.219 → 0.0.221

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/cjs/PageHeader.js +7 -1
  2. package/mjs/PageBody.d.ts +1 -1
  3. package/mjs/PageHeader.d.ts +1 -1
  4. package/mjs/PageHeader.js +7 -1
  5. package/package.json +1 -1
package/cjs/PageHeader.js CHANGED
@@ -71,6 +71,9 @@ function PageHeader(props) {
71
71
  paddingLeft: 0,
72
72
  paddingTop: 0,
73
73
  paddingBottom: 0,
74
+ borderTop: settings.theme !== 'light' && settings.borders
75
+ ? 'thin solid var(--pf-global--BorderColor--100)'
76
+ : undefined,
74
77
  borderBottom: settings.borders
75
78
  ? 'thin solid var(--pf-global--BorderColor--100)'
76
79
  : undefined,
@@ -78,6 +81,9 @@ function PageHeader(props) {
78
81
  } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageNavigation, __assign({ style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 }, hasOverflowScroll: true }, { children: navigation })) })) }))), (isMdOrLarger || !navigation) && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
79
82
  paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
80
83
  paddingBottom: xl ? 20 : 12,
84
+ borderTop: !navigation && settings.theme !== 'light' && settings.borders
85
+ ? 'thin solid var(--pf-global--BorderColor--100)'
86
+ : undefined,
81
87
  borderBottom: settings.borders
82
88
  ? 'thin solid var(--pf-global--BorderColor--100)'
83
89
  : undefined,
@@ -91,6 +97,6 @@ function PageHeader(props) {
91
97
  marginTop: 1,
92
98
  marginLeft: 8,
93
99
  verticalAlign: 'top',
94
- } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description }) })))] })), title && (pageActions || controls) && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' } }, { children: [controls && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: controls })), pageActions && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: pageActions })] })))] })) })))] }));
100
+ } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description })) : ((0, jsx_runtime_1.jsx)(react_core_1.Stack, { children: description.map(function (d) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: d }, d)); }) })) })))] })), title && (pageActions || controls) && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' } }, { children: [controls && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: controls })), pageActions && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: pageActions })] })))] })) })))] }));
95
101
  }
96
102
  exports.PageHeader = PageHeader;
package/mjs/PageBody.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ReactNode } from 'react';
2
2
  export declare function PageBody(props: {
3
- children: ReactNode;
3
+ children?: ReactNode;
4
4
  }): JSX.Element;
package/mjs/PageHeader.d.ts CHANGED
@@ -13,7 +13,7 @@ export interface PageHeaderProps {
13
13
  titleHelpTitle?: string;
14
14
  titleHelp?: string | string[];
15
15
  titleDocLink?: string;
16
- description?: string;
16
+ description?: string | string[];
17
17
  controls?: ReactNode;
18
18
  headerActions?: ReactNode;
19
19
  t?: (t: string) => string;
package/mjs/PageHeader.js CHANGED
@@ -56,6 +56,9 @@ export function PageHeader(props) {
56
56
  paddingLeft: 0,
57
57
  paddingTop: 0,
58
58
  paddingBottom: 0,
59
+ borderTop: settings.theme !== 'light' && settings.borders
60
+ ? 'thin solid var(--pf-global--BorderColor--100)'
61
+ : undefined,
59
62
  borderBottom: settings.borders
60
63
  ? 'thin solid var(--pf-global--BorderColor--100)'
61
64
  : undefined,
@@ -63,6 +66,9 @@ export function PageHeader(props) {
63
66
  }, children: _jsx(Flex, { direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' }, children: _jsx(PageNavigation, { style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 }, hasOverflowScroll: true, children: navigation }) }) })), (isMdOrLarger || !navigation) && (_jsx(PageSection, { variant: PageSectionVariants.light, style: {
64
67
  paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
65
68
  paddingBottom: xl ? 20 : 12,
69
+ borderTop: !navigation && settings.theme !== 'light' && settings.borders
70
+ ? 'thin solid var(--pf-global--BorderColor--100)'
71
+ : undefined,
66
72
  borderBottom: settings.borders
67
73
  ? 'thin solid var(--pf-global--BorderColor--100)'
68
74
  : undefined,
@@ -76,5 +82,5 @@ export function PageHeader(props) {
76
82
  marginTop: 1,
77
83
  marginLeft: 8,
78
84
  verticalAlign: 'top',
79
- }, children: _jsx(OutlinedQuestionCircleIcon, {}) })] }) })) : (_jsx(Title, { headingLevel: "h1", children: title }))) : (_jsx(Title, { headingLevel: "h1", children: _jsx(Skeleton, { width: "160px" }) })), isMdOrLarger && description && (_jsx(Text, { component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 }, children: _jsx(Truncate, { content: description }) }))] }), title && (pageActions || controls) && (_jsxs(Flex, { direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' }, children: [controls && _jsx(FlexItem, { grow: { default: 'grow' }, children: controls }), pageActions && _jsx(FlexItem, { children: pageActions })] }))] }) }))] }));
85
+ }, children: _jsx(OutlinedQuestionCircleIcon, {}) })] }) })) : (_jsx(Title, { headingLevel: "h1", children: title }))) : (_jsx(Title, { headingLevel: "h1", children: _jsx(Skeleton, { width: "160px" }) })), isMdOrLarger && description && (_jsx(Text, { component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 }, children: typeof description === 'string' ? (_jsx(Truncate, { content: description })) : (_jsx(Stack, { children: description.map((d) => (_jsx(StackItem, { children: d }, d))) })) }))] }), title && (pageActions || controls) && (_jsxs(Flex, { direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' }, children: [controls && _jsx(FlexItem, { grow: { default: 'grow' }, children: controls }), pageActions && _jsx(FlexItem, { children: pageActions })] }))] }) }))] }));
80
86
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "Framework for building consistent responsive web applications using PatternFly.",
4
- "version": "0.0.219",
4
+ "version": "0.0.221",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {