@patternfly/documentation-framework 6.0.0-alpha.120 → 6.0.0-alpha.122
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.
- package/CHANGELOG.md +22 -0
- package/components/cssVariables/cssVariables.js +63 -57
- package/components/footer/footer.js +24 -16
- package/components/sideNav/sideNav.js +161 -68
- package/package.json +7 -7
- package/templates/mdx.js +247 -115
- package/versions.json +24 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 6.0.0-alpha.122 (2024-10-25)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **docs:** hardcode Tile deprecation, fix console errors ([#4341](https://github.com/patternfly/patternfly-org/issues/4341)) ([f2a8ce7](https://github.com/patternfly/patternfly-org/commit/f2a8ce7df4937579e8868bde7b08863128f5671b))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# 6.0.0-alpha.121 (2024-10-24)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* partial bump to 6.0.0 versions ([#4337](https://github.com/patternfly/patternfly-org/issues/4337)) ([ef5b23c](https://github.com/patternfly/patternfly-org/commit/ef5b23c6724f87ab5c1a593c744561f546bc1567))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
# 6.0.0-alpha.120 (2024-10-18)
|
|
7
29
|
|
|
8
30
|
**Note:** Version bump only for package @patternfly/documentation-framework
|
|
@@ -1,16 +1,9 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { List, ListItem, debounce } from
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Tr,
|
|
8
|
-
Tbody,
|
|
9
|
-
Td
|
|
10
|
-
} from "@patternfly/react-table";
|
|
11
|
-
import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
|
|
12
|
-
import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
|
|
13
|
-
import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon";
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { List, ListItem, debounce } from '@patternfly/react-core';
|
|
3
|
+
import { Table, Thead, Th, Tr, Tbody, Td } from '@patternfly/react-table';
|
|
4
|
+
import { AutoLinkHeader } from '../autoLinkHeader/autoLinkHeader';
|
|
5
|
+
import * as tokensModule from '@patternfly/react-tokens/dist/esm/componentIndex';
|
|
6
|
+
import LevelUpAltIcon from '@patternfly/react-icons/dist/esm/icons/level-up-alt-icon';
|
|
14
7
|
import { CSSSearch } from './cssSearch';
|
|
15
8
|
|
|
16
9
|
const isColorRegex = /^(#|rgb)/;
|
|
@@ -19,27 +12,25 @@ const mappingAsList = (property, values) => (
|
|
|
19
12
|
<List isPlain>
|
|
20
13
|
<ListItem>{property}</ListItem>
|
|
21
14
|
{values.map((entry) => (
|
|
22
|
-
<ListItem
|
|
23
|
-
icon={<LevelUpAltIcon className="rotate-90-deg" />}
|
|
24
|
-
>
|
|
15
|
+
<ListItem key={entry} icon={<LevelUpAltIcon className="rotate-90-deg" />}>
|
|
25
16
|
{entry}
|
|
26
17
|
</ListItem>
|
|
27
18
|
))}
|
|
28
19
|
</List>
|
|
29
20
|
);
|
|
30
21
|
|
|
31
|
-
const flattenList = files => {
|
|
22
|
+
const flattenList = (files) => {
|
|
32
23
|
let list = [];
|
|
33
|
-
files.forEach(file => {
|
|
24
|
+
files.forEach((file) => {
|
|
34
25
|
Object.entries(file).forEach(([selector, values]) => {
|
|
35
|
-
if(values !== undefined) {
|
|
26
|
+
if (values !== undefined) {
|
|
36
27
|
Object.entries(values).forEach(([key, val]) => {
|
|
37
28
|
list.push({
|
|
38
29
|
selector,
|
|
39
30
|
property: val.name,
|
|
40
31
|
token: key,
|
|
41
32
|
value: val.value,
|
|
42
|
-
values: val.values
|
|
33
|
+
values: val.values,
|
|
43
34
|
});
|
|
44
35
|
});
|
|
45
36
|
}
|
|
@@ -51,15 +42,15 @@ const flattenList = files => {
|
|
|
51
42
|
export class CSSVariables extends React.Component {
|
|
52
43
|
constructor(props) {
|
|
53
44
|
super(props);
|
|
54
|
-
const prefixToken = props.prefix.replace(
|
|
45
|
+
const prefixToken = props.prefix.replace('pf-v6-', '').replace(/-+/g, '_');
|
|
55
46
|
const applicableFiles = Object.entries(tokensModule)
|
|
56
47
|
.filter(([key, val]) => prefixToken === key)
|
|
57
48
|
.sort(([key1], [key2]) => key1.localeCompare(key2))
|
|
58
49
|
.map(([key, val]) => {
|
|
59
50
|
if (props.selector) {
|
|
60
51
|
return {
|
|
61
|
-
[props.selector]: val[props.selector]
|
|
62
|
-
}
|
|
52
|
+
[props.selector]: val[props.selector],
|
|
53
|
+
};
|
|
63
54
|
}
|
|
64
55
|
return val;
|
|
65
56
|
});
|
|
@@ -69,15 +60,15 @@ export class CSSVariables extends React.Component {
|
|
|
69
60
|
this.state = {
|
|
70
61
|
searchRE: '',
|
|
71
62
|
rows: this.getFilteredRows(),
|
|
72
|
-
allRowsExpanded: true
|
|
63
|
+
allRowsExpanded: true,
|
|
73
64
|
};
|
|
74
65
|
}
|
|
75
66
|
|
|
76
67
|
getFilteredRows = (searchRE) => {
|
|
77
68
|
let filteredRows = [];
|
|
78
69
|
let rowNumber = -1;
|
|
79
|
-
this.flatList.forEach(row => {
|
|
80
|
-
const { selector, property, token, value, values} = row;
|
|
70
|
+
this.flatList.forEach((row) => {
|
|
71
|
+
const { selector, property, token, value, values } = row;
|
|
81
72
|
const passes =
|
|
82
73
|
!searchRE ||
|
|
83
74
|
searchRE.test(selector) ||
|
|
@@ -88,7 +79,7 @@ export class CSSVariables extends React.Component {
|
|
|
88
79
|
const rowKey = `${selector}_${property}`;
|
|
89
80
|
const isColor = isColorRegex.test(value);
|
|
90
81
|
const cells = [
|
|
91
|
-
...this.props.hideSelectorColumn ? [] : [selector],
|
|
82
|
+
...(this.props.hideSelectorColumn ? [] : [selector]),
|
|
92
83
|
property,
|
|
93
84
|
<div key={rowKey}>
|
|
94
85
|
<div
|
|
@@ -100,7 +91,10 @@ export class CSSVariables extends React.Component {
|
|
|
100
91
|
key={`${rowKey}_2`}
|
|
101
92
|
className="pf-v6-l-flex pf-m-column pf-m-align-self-center"
|
|
102
93
|
>
|
|
103
|
-
<span
|
|
94
|
+
<span
|
|
95
|
+
className="circle"
|
|
96
|
+
style={{ backgroundColor: `var(${property})` }}
|
|
97
|
+
/>
|
|
104
98
|
</div>
|
|
105
99
|
)}
|
|
106
100
|
<div
|
|
@@ -110,20 +104,22 @@ export class CSSVariables extends React.Component {
|
|
|
110
104
|
{isColor && '(In light theme)'} {value}
|
|
111
105
|
</div>
|
|
112
106
|
</div>
|
|
113
|
-
</div
|
|
107
|
+
</div>,
|
|
114
108
|
];
|
|
115
109
|
filteredRows.push({
|
|
116
110
|
isOpen: values ? false : undefined,
|
|
117
111
|
cells,
|
|
118
|
-
details: values
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
112
|
+
details: values
|
|
113
|
+
? {
|
|
114
|
+
parent: rowNumber,
|
|
115
|
+
fullWidth: true,
|
|
116
|
+
data: mappingAsList(property, values),
|
|
117
|
+
}
|
|
118
|
+
: undefined,
|
|
123
119
|
});
|
|
124
120
|
rowNumber += 1;
|
|
125
121
|
if (values) {
|
|
126
|
-
rowNumber += 1
|
|
122
|
+
rowNumber += 1;
|
|
127
123
|
}
|
|
128
124
|
}
|
|
129
125
|
});
|
|
@@ -136,28 +132,35 @@ export class CSSVariables extends React.Component {
|
|
|
136
132
|
let newRows = Array.from(rows);
|
|
137
133
|
|
|
138
134
|
if (collapseAll) {
|
|
139
|
-
newRows = newRows.map(r =>
|
|
135
|
+
newRows = newRows.map((r) =>
|
|
136
|
+
r.isOpen === undefined ? r : { ...r, isOpen }
|
|
137
|
+
);
|
|
140
138
|
} else {
|
|
141
139
|
newRows[rowKey] = { ...newRows[rowKey], isOpen };
|
|
142
140
|
}
|
|
143
|
-
this.setState(prevState => ({
|
|
141
|
+
this.setState((prevState) => ({
|
|
144
142
|
rows: newRows,
|
|
145
|
-
...(collapseAll && {allRowsExpanded: !prevState.allRowsExpanded})
|
|
143
|
+
...(collapseAll && { allRowsExpanded: !prevState.allRowsExpanded }),
|
|
146
144
|
}));
|
|
147
145
|
};
|
|
148
146
|
|
|
149
|
-
getDebouncedFilteredRows = debounce(value => {
|
|
150
|
-
const searchRE = new RegExp(value,
|
|
147
|
+
getDebouncedFilteredRows = debounce((value) => {
|
|
148
|
+
const searchRE = new RegExp(value, 'i');
|
|
151
149
|
this.setState({
|
|
152
150
|
searchRE,
|
|
153
|
-
rows: this.getFilteredRows(searchRE)
|
|
151
|
+
rows: this.getFilteredRows(searchRE),
|
|
154
152
|
});
|
|
155
153
|
}, 500);
|
|
156
154
|
|
|
157
155
|
render() {
|
|
158
156
|
return (
|
|
159
157
|
<React.Fragment>
|
|
160
|
-
{this.props.autoLinkHeader &&
|
|
158
|
+
{this.props.autoLinkHeader && (
|
|
159
|
+
<AutoLinkHeader
|
|
160
|
+
headingLevel="h3"
|
|
161
|
+
className="pf-v6-u-mt-lg pf-v6-u-mb-md"
|
|
162
|
+
>{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>
|
|
163
|
+
)}
|
|
161
164
|
<CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
|
|
162
165
|
<Table
|
|
163
166
|
variant="compact"
|
|
@@ -183,11 +186,11 @@ export class CSSVariables extends React.Component {
|
|
|
183
186
|
expand={
|
|
184
187
|
row.details
|
|
185
188
|
? {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
189
|
+
rowIndex,
|
|
190
|
+
isExpanded: row.isOpen,
|
|
191
|
+
onToggle: this.onCollapse,
|
|
192
|
+
expandId: `css-vars-expandable-toggle-${this.props.prefix}`,
|
|
193
|
+
}
|
|
191
194
|
: undefined
|
|
192
195
|
}
|
|
193
196
|
/>
|
|
@@ -198,19 +201,22 @@ export class CSSVariables extends React.Component {
|
|
|
198
201
|
{row.details ? (
|
|
199
202
|
<Tr isExpanded={row.isOpen}>
|
|
200
203
|
{!row.details.fullWidth ? <Td /> : null}
|
|
201
|
-
<Td dataLabel="Selector" colSpan={5}>
|
|
204
|
+
<Td dataLabel="Selector" colSpan={5}>
|
|
205
|
+
{row.details.data}
|
|
206
|
+
</Td>
|
|
202
207
|
</Tr>
|
|
203
208
|
) : null}
|
|
204
209
|
</Tbody>
|
|
205
|
-
))
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
</
|
|
212
|
-
|
|
213
|
-
|
|
210
|
+
))
|
|
211
|
+
) : (
|
|
212
|
+
<Tbody>
|
|
213
|
+
{this.state.rows.map((row, rowIndex) => (
|
|
214
|
+
<Tr key={rowIndex}>
|
|
215
|
+
<Td dataLabel="Variable">{row.cells[0]}</Td>
|
|
216
|
+
<Td dataLabel="Value">{row.cells[1]}</Td>
|
|
217
|
+
</Tr>
|
|
218
|
+
))}
|
|
219
|
+
</Tbody>
|
|
214
220
|
)}
|
|
215
221
|
</Table>
|
|
216
222
|
</React.Fragment>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import {
|
|
3
3
|
Brand,
|
|
4
4
|
Grid,
|
|
@@ -7,11 +7,11 @@ import {
|
|
|
7
7
|
ListItem,
|
|
8
8
|
PageSection,
|
|
9
9
|
Content,
|
|
10
|
-
} from
|
|
11
|
-
import { Link } from
|
|
12
|
-
import { GithubIcon } from
|
|
13
|
-
import redhatLogo from
|
|
14
|
-
import redhatLogoDark from
|
|
10
|
+
} from '@patternfly/react-core';
|
|
11
|
+
import { Link } from '@patternfly/documentation-framework/components';
|
|
12
|
+
import { GithubIcon } from '@patternfly/react-icons';
|
|
13
|
+
import redhatLogo from './RHLogo.png';
|
|
14
|
+
import redhatLogoDark from './RHLogoDark.png';
|
|
15
15
|
|
|
16
16
|
export const Footer = ({ isDarkTheme }) => (
|
|
17
17
|
<React.Fragment>
|
|
@@ -36,7 +36,7 @@ export const Footer = ({ isDarkTheme }) => (
|
|
|
36
36
|
<p className="ws-org-pfsite-footer-menu-list-title">What's new</p>
|
|
37
37
|
<nav aria-label="Quick Links">
|
|
38
38
|
<List isPlain className="ws-org-pfsite-footer-menu-list">
|
|
39
|
-
|
|
39
|
+
<ListItem className="ws-org-pfsite-footer-menu-list-item">
|
|
40
40
|
<Link
|
|
41
41
|
className="ws-org-pfsite-footer-menu-link"
|
|
42
42
|
to="/get-started/upgrade"
|
|
@@ -83,7 +83,7 @@ export const Footer = ({ isDarkTheme }) => (
|
|
|
83
83
|
<p className="ws-org-pfsite-footer-menu-list-title">Contribute</p>
|
|
84
84
|
<nav aria-label="Contribute">
|
|
85
85
|
<List isPlain className="ws-org-pfsite-footer-menu-list">
|
|
86
|
-
|
|
86
|
+
<ListItem className="ws-org-pfsite-footer-menu-list-item">
|
|
87
87
|
<Link
|
|
88
88
|
className="ws-org-pfsite-footer-menu-link"
|
|
89
89
|
to="/get-started/about-patternfly"
|
|
@@ -110,7 +110,7 @@ export const Footer = ({ isDarkTheme }) => (
|
|
|
110
110
|
Contribute
|
|
111
111
|
</Link>
|
|
112
112
|
</ListItem>
|
|
113
|
-
|
|
113
|
+
</List>
|
|
114
114
|
</nav>
|
|
115
115
|
</GridItem>
|
|
116
116
|
<GridItem
|
|
@@ -118,9 +118,7 @@ export const Footer = ({ isDarkTheme }) => (
|
|
|
118
118
|
md={4}
|
|
119
119
|
className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-md pf-v6-u-ml-md pf-v6-u-ml-0-on-md"
|
|
120
120
|
>
|
|
121
|
-
<p className="ws-org-pfsite-footer-menu-list-title">
|
|
122
|
-
Community
|
|
123
|
-
</p>
|
|
121
|
+
<p className="ws-org-pfsite-footer-menu-list-title">Community</p>
|
|
124
122
|
<nav aria-label="Stay in touch">
|
|
125
123
|
<List isPlain className="ws-org-pfsite-footer-menu-list">
|
|
126
124
|
<ListItem className="ws-org-pfsite-footer-menu-list-item">
|
|
@@ -140,7 +138,7 @@ export const Footer = ({ isDarkTheme }) => (
|
|
|
140
138
|
target="top"
|
|
141
139
|
aria-label="Read the PatternFly blog"
|
|
142
140
|
>
|
|
143
|
-
|
|
141
|
+
Blog
|
|
144
142
|
</Link>
|
|
145
143
|
</ListItem>
|
|
146
144
|
<ListItem className="ws-org-pfsite-footer-menu-list-item">
|
|
@@ -171,7 +169,7 @@ export const Footer = ({ isDarkTheme }) => (
|
|
|
171
169
|
>
|
|
172
170
|
Discussions
|
|
173
171
|
</Link>
|
|
174
|
-
|
|
172
|
+
</ListItem>
|
|
175
173
|
</List>
|
|
176
174
|
</nav>
|
|
177
175
|
</GridItem>
|
|
@@ -268,9 +266,19 @@ export const Footer = ({ isDarkTheme }) => (
|
|
|
268
266
|
target="top"
|
|
269
267
|
aria-label="Link to PatternFly X page"
|
|
270
268
|
>
|
|
271
|
-
<svg
|
|
269
|
+
<svg
|
|
270
|
+
className="pf-v6-svg"
|
|
271
|
+
viewBox="0 0 512 512"
|
|
272
|
+
fill="currentColor"
|
|
273
|
+
aria-hidden="true"
|
|
274
|
+
role="img"
|
|
275
|
+
width="1em"
|
|
276
|
+
height="1em"
|
|
277
|
+
>
|
|
278
|
+
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
|
|
279
|
+
</svg>
|
|
272
280
|
</Link>
|
|
273
|
-
|
|
281
|
+
{/* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.*/}
|
|
274
282
|
</GridItem>
|
|
275
283
|
</Grid>
|
|
276
284
|
</GridItem>
|
|
@@ -1,58 +1,88 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Link } from '../link/link';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
Label,
|
|
5
|
+
Nav,
|
|
6
|
+
NavList,
|
|
7
|
+
NavExpandable,
|
|
8
|
+
PageContextConsumer,
|
|
9
|
+
capitalize,
|
|
10
|
+
Flex,
|
|
11
|
+
FlexItem,
|
|
12
|
+
} from '@patternfly/react-core';
|
|
4
13
|
import { css } from '@patternfly/react-styles';
|
|
5
14
|
import { Location } from '@reach/router';
|
|
6
15
|
import { makeSlug } from '../../helpers';
|
|
7
|
-
import globalBreakpointXl from
|
|
16
|
+
import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
|
|
8
17
|
import { trackEvent } from '../../helpers';
|
|
9
18
|
|
|
10
19
|
const getIsActive = (location, section, subsection = null) => {
|
|
11
20
|
const slug = makeSlug(null, section, null, null, subsection);
|
|
12
21
|
return location.pathname.startsWith(slug);
|
|
13
|
-
}
|
|
22
|
+
};
|
|
14
23
|
|
|
15
24
|
const defaultValue = 50;
|
|
16
25
|
|
|
17
26
|
const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
|
|
18
|
-
const isMobileView =
|
|
27
|
+
const isMobileView =
|
|
28
|
+
window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
|
|
19
29
|
return (
|
|
20
30
|
<PageContextConsumer key={href + text}>
|
|
21
|
-
{({onSidebarToggle, isSidebarOpen }) => (
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
31
|
+
{({ onSidebarToggle, isSidebarOpen }) => (
|
|
32
|
+
<li
|
|
33
|
+
key={href + text}
|
|
34
|
+
className="pf-v6-c-nav__item"
|
|
35
|
+
onClick={() => isMobileView && onSidebarToggle && onSidebarToggle()}
|
|
36
|
+
>
|
|
37
|
+
<Link
|
|
38
|
+
to={href}
|
|
39
|
+
getProps={({ isCurrent, href, location }) => {
|
|
40
|
+
const { pathname } = location;
|
|
41
|
+
return {
|
|
42
|
+
className: css(
|
|
43
|
+
'pf-v6-c-nav__link',
|
|
44
|
+
(isCurrent || pathname.startsWith(href + '/')) &&
|
|
45
|
+
'pf-m-current'
|
|
46
|
+
),
|
|
47
|
+
};
|
|
48
|
+
}}
|
|
49
|
+
tabIndex={isSidebarOpen ? undefined : -1}
|
|
50
|
+
>
|
|
51
|
+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
|
|
52
|
+
<FlexItem>{text}</FlexItem>
|
|
53
|
+
{(isBeta || isDemo || isDeprecated) && (
|
|
54
|
+
<FlexItem>
|
|
55
|
+
{isBeta && (
|
|
56
|
+
<Label color="blue" isCompact>
|
|
57
|
+
Beta
|
|
58
|
+
</Label>
|
|
59
|
+
)}
|
|
60
|
+
{!isBeta && isDeprecated && (
|
|
61
|
+
<Label color="grey" isCompact>
|
|
62
|
+
Deprecated
|
|
63
|
+
</Label>
|
|
64
|
+
)}
|
|
65
|
+
{!isBeta && !isDeprecated && isDemo && (
|
|
66
|
+
<Label color="purple" isCompact>
|
|
67
|
+
Demo
|
|
68
|
+
</Label>
|
|
69
|
+
)}
|
|
70
|
+
</FlexItem>
|
|
71
|
+
)}
|
|
72
|
+
</Flex>
|
|
73
|
+
</Link>
|
|
74
|
+
</li>
|
|
50
75
|
)}
|
|
51
76
|
</PageContextConsumer>
|
|
52
|
-
)
|
|
77
|
+
);
|
|
53
78
|
};
|
|
54
79
|
|
|
55
|
-
const ExpandableNav = ({
|
|
80
|
+
const ExpandableNav = ({
|
|
81
|
+
groupedRoutes,
|
|
82
|
+
location,
|
|
83
|
+
section,
|
|
84
|
+
subsection = null,
|
|
85
|
+
}) => {
|
|
56
86
|
const isActive = getIsActive(location, section, subsection);
|
|
57
87
|
const isSubsection = subsection;
|
|
58
88
|
const routes = isSubsection
|
|
@@ -72,39 +102,97 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
|
|
|
72
102
|
event.stopPropagation();
|
|
73
103
|
// Don't trigger for bubbled events from NavItems
|
|
74
104
|
if (!event.target.href) {
|
|
75
|
-
const isExpanded =
|
|
105
|
+
const isExpanded =
|
|
106
|
+
event.currentTarget.classList.contains('pf-m-expanded');
|
|
76
107
|
// 1 === expand section, 0 === collapse section
|
|
77
|
-
trackEvent(
|
|
108
|
+
trackEvent(
|
|
109
|
+
'sidenav_section_click',
|
|
110
|
+
'click_event',
|
|
111
|
+
analyticsName,
|
|
112
|
+
isExpanded ? 0 : 1
|
|
113
|
+
);
|
|
78
114
|
}
|
|
79
115
|
}}
|
|
80
116
|
>
|
|
81
117
|
{Object.entries(routes || {})
|
|
82
|
-
.filter(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
118
|
+
.filter(
|
|
119
|
+
([id, navObj]) =>
|
|
120
|
+
!Boolean(navObj.hideNavItem) && Object.entries(navObj).length > 0
|
|
121
|
+
)
|
|
122
|
+
.map(
|
|
123
|
+
([
|
|
124
|
+
id,
|
|
125
|
+
{
|
|
126
|
+
slug,
|
|
127
|
+
isSubsection = false,
|
|
128
|
+
sortValue = defaultValue,
|
|
129
|
+
subsectionSortValue = defaultValue,
|
|
130
|
+
sources,
|
|
131
|
+
},
|
|
132
|
+
]) => ({
|
|
133
|
+
text: id,
|
|
134
|
+
href: slug,
|
|
135
|
+
isSubsection,
|
|
136
|
+
sortValue: isSubsection ? subsectionSortValue : sortValue,
|
|
137
|
+
sources,
|
|
138
|
+
})
|
|
139
|
+
)
|
|
140
|
+
.sort(
|
|
141
|
+
(
|
|
142
|
+
{ text: text1, sortValue: sortValue1 },
|
|
143
|
+
{ text: text2, sortValue: sortValue2 }
|
|
144
|
+
) => {
|
|
145
|
+
if (sortValue1 === sortValue2) {
|
|
146
|
+
return text1.localeCompare(text2);
|
|
147
|
+
}
|
|
148
|
+
return sortValue1 > sortValue2 ? 1 : -1;
|
|
87
149
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
? ExpandableNav({
|
|
150
|
+
)
|
|
151
|
+
.map((navObj) => {
|
|
152
|
+
return navObj.isSubsection
|
|
153
|
+
? ExpandableNav({
|
|
154
|
+
groupedRoutes,
|
|
155
|
+
location,
|
|
156
|
+
section,
|
|
157
|
+
subsection: navObj.text,
|
|
158
|
+
})
|
|
92
159
|
: NavItem({
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
160
|
+
...navObj,
|
|
161
|
+
isDeprecated:
|
|
162
|
+
navObj.href?.includes('components') &&
|
|
163
|
+
navObj.sources.some(
|
|
164
|
+
(source) =>
|
|
165
|
+
(source.source === 'react-deprecated' ||
|
|
166
|
+
source.source === 'html-deprecated') &&
|
|
167
|
+
// TODO: remove hardcoded Tile when Core PR merges
|
|
168
|
+
// https://github.com/patternfly/patternfly/pull/7178
|
|
169
|
+
(source.id === 'Tile' ||
|
|
170
|
+
!navObj.sources.some(
|
|
171
|
+
(source) =>
|
|
172
|
+
source.source === 'react' ||
|
|
173
|
+
source.source === 'html'
|
|
174
|
+
))
|
|
175
|
+
),
|
|
176
|
+
isBeta: navObj.sources.some(
|
|
177
|
+
(source) =>
|
|
178
|
+
source.beta &&
|
|
179
|
+
source.source !== 'react-next' &&
|
|
180
|
+
source.source !== 'react-templates'
|
|
181
|
+
),
|
|
182
|
+
isDemo: navObj.sources.some(
|
|
183
|
+
(source) =>
|
|
184
|
+
(source.source === 'react-demos' ||
|
|
185
|
+
source.source === 'html-demos') &&
|
|
186
|
+
!navObj.sources.some(
|
|
187
|
+
(source) =>
|
|
188
|
+
source.source === 'react' || source.source === 'html'
|
|
189
|
+
)
|
|
190
|
+
),
|
|
191
|
+
});
|
|
192
|
+
})}
|
|
105
193
|
</NavExpandable>
|
|
106
194
|
);
|
|
107
|
-
}
|
|
195
|
+
};
|
|
108
196
|
|
|
109
197
|
export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
|
|
110
198
|
React.useEffect(() => {
|
|
@@ -115,7 +203,8 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
|
|
|
115
203
|
if (!overflowElement) {
|
|
116
204
|
return;
|
|
117
205
|
}
|
|
118
|
-
const activeElements =
|
|
206
|
+
const activeElements =
|
|
207
|
+
overflowElement.getElementsByClassName('pf-m-current');
|
|
119
208
|
if (activeElements.length > 0) {
|
|
120
209
|
const lastElement = activeElements[activeElements.length - 1];
|
|
121
210
|
lastElement.scrollIntoView({ block: 'center' });
|
|
@@ -125,18 +214,22 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
|
|
|
125
214
|
return (
|
|
126
215
|
<Nav aria-label="Side Nav" theme="light">
|
|
127
216
|
<NavList className="ws-side-nav-list">
|
|
128
|
-
{navItems.map(({ section, text, href }) =>
|
|
129
|
-
? (
|
|
217
|
+
{navItems.map(({ section, text, href }) =>
|
|
218
|
+
section ? (
|
|
130
219
|
<Location key={section}>
|
|
131
|
-
{({ location }) =>
|
|
220
|
+
{({ location }) =>
|
|
221
|
+
ExpandableNav({ groupedRoutes, location, section })
|
|
222
|
+
}
|
|
132
223
|
</Location>
|
|
133
|
-
)
|
|
134
|
-
|
|
135
|
-
text:
|
|
136
|
-
|
|
224
|
+
) : (
|
|
225
|
+
NavItem({
|
|
226
|
+
text:
|
|
227
|
+
text || capitalize(href.replace(/\//g, '').replace(/-/g, ' ')),
|
|
228
|
+
href: href,
|
|
137
229
|
})
|
|
230
|
+
)
|
|
138
231
|
)}
|
|
139
232
|
</NavList>
|
|
140
233
|
</Nav>
|
|
141
234
|
);
|
|
142
|
-
}
|
|
235
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/documentation-framework",
|
|
3
3
|
"description": "A framework to build documentation for PatternFly.",
|
|
4
|
-
"version": "6.0.0-alpha.
|
|
4
|
+
"version": "6.0.0-alpha.122",
|
|
5
5
|
"author": "Red Hat",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"private": false,
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"@babel/preset-env": "^7.24.3",
|
|
14
14
|
"@babel/preset-react": "^7.24.1",
|
|
15
15
|
"@mdx-js/util": "1.6.16",
|
|
16
|
-
"@patternfly/ast-helpers": "^1.4.0-alpha.
|
|
16
|
+
"@patternfly/ast-helpers": "^1.4.0-alpha.111",
|
|
17
17
|
"@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
|
|
18
18
|
"autoprefixer": "9.8.6",
|
|
19
19
|
"babel-loader": "^9.1.3",
|
|
@@ -73,12 +73,12 @@
|
|
|
73
73
|
"webpack-merge": "5.8.0"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
|
-
"@patternfly/patternfly": "6.0.0
|
|
77
|
-
"@patternfly/react-code-editor": "6.0.0
|
|
78
|
-
"@patternfly/react-core": "6.0.0
|
|
79
|
-
"@patternfly/react-table": "6.0.0
|
|
76
|
+
"@patternfly/patternfly": "^6.0.0",
|
|
77
|
+
"@patternfly/react-code-editor": "^6.0.0",
|
|
78
|
+
"@patternfly/react-core": "^6.0.0",
|
|
79
|
+
"@patternfly/react-table": "^6.0.0",
|
|
80
80
|
"react": "^17.0.0 || ^18.0.0",
|
|
81
81
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "208224af6eee4895ca1b40bdd59d1290f5f9080b"
|
|
84
84
|
}
|
package/templates/mdx.js
CHANGED
|
@@ -1,21 +1,37 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
PageSection,
|
|
4
|
+
Title,
|
|
5
|
+
Tooltip,
|
|
6
|
+
PageSectionVariants,
|
|
7
|
+
Button,
|
|
8
|
+
BackToTop,
|
|
9
|
+
Flex,
|
|
10
|
+
FlexItem,
|
|
11
|
+
PageGroup,
|
|
12
|
+
Page,
|
|
13
|
+
Content,
|
|
14
|
+
Label,
|
|
15
|
+
Stack,
|
|
16
|
+
StackItem,
|
|
17
|
+
} from '@patternfly/react-core';
|
|
3
18
|
import { css } from '@patternfly/react-styles';
|
|
4
19
|
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
|
|
5
20
|
import { Router, useLocation } from '@reach/router';
|
|
6
|
-
import {
|
|
21
|
+
import {
|
|
22
|
+
CSSVariables,
|
|
23
|
+
PropsTable,
|
|
24
|
+
TableOfContents,
|
|
25
|
+
Link,
|
|
26
|
+
AutoLinkHeader,
|
|
27
|
+
InlineAlert,
|
|
28
|
+
} from '../components';
|
|
7
29
|
import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
|
|
8
30
|
import './mdx.css';
|
|
9
31
|
import { convertToReactComponent } from '@patternfly/ast-helpers';
|
|
10
32
|
import { FunctionsTable } from '../components/functionsTable/functionsTable';
|
|
11
33
|
|
|
12
|
-
const MDXChildTemplate = ({
|
|
13
|
-
Component,
|
|
14
|
-
source,
|
|
15
|
-
toc = [],
|
|
16
|
-
index = 0,
|
|
17
|
-
id
|
|
18
|
-
}) => {
|
|
34
|
+
const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
|
|
19
35
|
const {
|
|
20
36
|
propComponents = [],
|
|
21
37
|
sourceLink,
|
|
@@ -25,60 +41,107 @@ const MDXChildTemplate = ({
|
|
|
25
41
|
deprecated,
|
|
26
42
|
template,
|
|
27
43
|
newImplementationLink,
|
|
28
|
-
functionDocumentation = []
|
|
44
|
+
functionDocumentation = [],
|
|
29
45
|
} = Component.getPageData();
|
|
30
46
|
const cssVarsTitle = cssPrefix.length > 0 && 'CSS variables';
|
|
31
47
|
const propsTitle = propComponents.length > 0 && 'Props';
|
|
32
|
-
if (propsTitle && !toc.find(item => item.text === propsTitle)) {
|
|
48
|
+
if (propsTitle && !toc.find((item) => item.text === propsTitle)) {
|
|
33
49
|
toc.push({ text: propsTitle });
|
|
34
|
-
toc.push(
|
|
50
|
+
toc.push(
|
|
51
|
+
propComponents.map((propComponent) => ({ text: propComponent.name }))
|
|
52
|
+
);
|
|
35
53
|
}
|
|
36
|
-
if (cssVarsTitle && !toc.find(item => item.text === cssVarsTitle)) {
|
|
54
|
+
if (cssVarsTitle && !toc.find((item) => item.text === cssVarsTitle)) {
|
|
37
55
|
toc.push({ text: cssVarsTitle });
|
|
38
56
|
if (cssPrefix.length > 1) {
|
|
39
|
-
toc.push(
|
|
57
|
+
toc.push(
|
|
58
|
+
cssPrefix.map((cssPrefix) => ({ text: `Prefixed with '${cssPrefix}'` }))
|
|
59
|
+
);
|
|
40
60
|
}
|
|
41
61
|
}
|
|
42
62
|
// We don't add `id`s in anchor-header.js for items where id === slugger(text)
|
|
43
63
|
// in order to save ~10KB bandwidth.
|
|
44
64
|
if (toc.length > 1) {
|
|
45
|
-
const ensureID = tocItem => {
|
|
65
|
+
const ensureID = (tocItem) => {
|
|
46
66
|
if (Array.isArray(tocItem)) {
|
|
47
67
|
tocItem.forEach(ensureID);
|
|
68
|
+
} else if (!tocItem.id) {
|
|
69
|
+
tocItem.id = slugger(tocItem.text);
|
|
48
70
|
}
|
|
49
|
-
|
|
50
|
-
tocItem.id = slugger(tocItem.text)
|
|
51
|
-
}
|
|
52
|
-
}
|
|
71
|
+
};
|
|
53
72
|
ensureID(toc);
|
|
54
73
|
}
|
|
55
74
|
|
|
56
|
-
const isComponentCodeDocs = [
|
|
75
|
+
const isComponentCodeDocs = [
|
|
76
|
+
'react',
|
|
77
|
+
'react-demos',
|
|
78
|
+
'html',
|
|
79
|
+
'html-demos',
|
|
80
|
+
'react-templates',
|
|
81
|
+
].includes(source);
|
|
57
82
|
|
|
58
|
-
const InlineAlerts = (optIn ||
|
|
83
|
+
const InlineAlerts = (optIn ||
|
|
84
|
+
beta ||
|
|
85
|
+
deprecated ||
|
|
86
|
+
source === 'react-deprecated' ||
|
|
87
|
+
source === 'html-deprecated' ||
|
|
88
|
+
// TODO: remove hardcoded Tile when Core PR merges
|
|
89
|
+
// https://github.com/patternfly/patternfly/pull/7178
|
|
90
|
+
id === 'Tile' ||
|
|
91
|
+
template ||
|
|
92
|
+
source === 'react-template') && (
|
|
59
93
|
<StackItem>
|
|
60
|
-
{optIn &&
|
|
61
|
-
<InlineAlert title="Opt-in feature">
|
|
62
|
-
{optIn}
|
|
63
|
-
</InlineAlert>
|
|
64
|
-
)}
|
|
94
|
+
{optIn && <InlineAlert title="Opt-in feature">{optIn}</InlineAlert>}
|
|
65
95
|
{beta && (
|
|
66
96
|
<InlineAlert title="Beta feature">
|
|
67
|
-
This beta component is currently under review and is still open for
|
|
97
|
+
This beta component is currently under review and is still open for
|
|
98
|
+
further evolution. It is available for use in product. Beta components
|
|
99
|
+
are considered for promotion on a quarterly basis. Please join in and
|
|
100
|
+
give us your feedback or submit any questions on the{' '}
|
|
101
|
+
<a href="https://forum.patternfly.org/">PatternFly forum</a> or via{' '}
|
|
102
|
+
<a
|
|
103
|
+
href="//slack.patternfly.org/"
|
|
104
|
+
target="_blank"
|
|
105
|
+
rel="noopener noreferrer"
|
|
106
|
+
>
|
|
107
|
+
Slack
|
|
108
|
+
</a>
|
|
109
|
+
. To learn more about the process, visit our{' '}
|
|
110
|
+
<Link to="/get-started/about-patternfly#beta-components">
|
|
111
|
+
about page
|
|
112
|
+
</Link>{' '}
|
|
113
|
+
or our{' '}
|
|
114
|
+
<a href="https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion">
|
|
115
|
+
Beta components
|
|
116
|
+
</a>{' '}
|
|
117
|
+
page on GitHub.
|
|
68
118
|
</InlineAlert>
|
|
69
119
|
)}
|
|
70
|
-
{(deprecated ||
|
|
120
|
+
{(deprecated ||
|
|
121
|
+
source === 'react-deprecated' ||
|
|
122
|
+
source === 'html-deprecated' ||
|
|
123
|
+
// TODO: remove hardcoded Tile when Core PR merges
|
|
124
|
+
// https://github.com/patternfly/patternfly/pull/7178
|
|
125
|
+
id === 'Tile') && (
|
|
71
126
|
<InlineAlert title="Deprecated feature" variant="warning">
|
|
72
|
-
This component implementation has been deprecated in favor of a newer
|
|
127
|
+
This component implementation has been deprecated in favor of a newer
|
|
128
|
+
solution, and is no longer being maintained or enhanced.
|
|
73
129
|
{newImplementationLink && (
|
|
74
130
|
<React.Fragment>
|
|
75
|
-
You can find the
|
|
131
|
+
You can find the{' '}
|
|
132
|
+
<Link to={newImplementationLink}>
|
|
133
|
+
updated implementation here
|
|
134
|
+
</Link>
|
|
135
|
+
.
|
|
76
136
|
</React.Fragment>
|
|
77
|
-
)}
|
|
78
|
-
|
|
137
|
+
)}{' '}
|
|
138
|
+
To learn more about deprecated components, visit{' '}
|
|
139
|
+
<Link to="/get-started/about-patternfly#deprecated-components">
|
|
140
|
+
about PatternFly.
|
|
141
|
+
</Link>
|
|
79
142
|
</InlineAlert>
|
|
80
143
|
)}
|
|
81
|
-
|
|
144
|
+
{(template || source === 'react-template') && (
|
|
82
145
|
<InlineAlert title="Templates" variant="info">
|
|
83
146
|
{`This page showcases templates for the ${id.toLowerCase()} component. A template combines a component with logic that supports a specific use case, with a streamlined API that offers additional, limited customization.`}
|
|
84
147
|
</InlineAlert>
|
|
@@ -88,107 +151,164 @@ const MDXChildTemplate = ({
|
|
|
88
151
|
// Create dynamic component for @reach/router
|
|
89
152
|
const ChildComponent = () => (
|
|
90
153
|
<div className={source !== 'landing-pages' ? 'pf-v6-l-flex' : ''}>
|
|
91
|
-
{toc.length > 1 &&
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
154
|
+
{toc.length > 1 && <TableOfContents items={toc} />}
|
|
155
|
+
<Stack
|
|
156
|
+
hasGutter
|
|
157
|
+
style={{ ...(source !== 'landing-pages' && { maxWidth: '825px' }) }}
|
|
158
|
+
>
|
|
95
159
|
{InlineAlerts}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
{
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
160
|
+
<Component />
|
|
161
|
+
{functionDocumentation.length > 0 && (
|
|
162
|
+
<StackItem>
|
|
163
|
+
<AutoLinkHeader
|
|
164
|
+
headingLevel="h2"
|
|
165
|
+
className="pf-v6-c-content--h2"
|
|
166
|
+
id="functions"
|
|
167
|
+
>
|
|
168
|
+
Functions
|
|
169
|
+
</AutoLinkHeader>
|
|
170
|
+
<FunctionsTable functionDescriptions={functionDocumentation} />
|
|
171
|
+
</StackItem>
|
|
172
|
+
)}
|
|
173
|
+
{propsTitle && (
|
|
174
|
+
<StackItem>
|
|
175
|
+
<AutoLinkHeader
|
|
176
|
+
headingLevel="h2"
|
|
177
|
+
className="pf-v6-c-content--h2"
|
|
178
|
+
id="props"
|
|
179
|
+
>
|
|
180
|
+
{propsTitle}
|
|
181
|
+
</AutoLinkHeader>
|
|
182
|
+
{propComponents.map((component) => (
|
|
183
|
+
<PropsTable
|
|
184
|
+
key={component.name}
|
|
185
|
+
title={component.name}
|
|
186
|
+
description={component.description}
|
|
187
|
+
rows={component.props}
|
|
188
|
+
allPropComponents={propComponents}
|
|
189
|
+
/>
|
|
190
|
+
))}
|
|
191
|
+
</StackItem>
|
|
192
|
+
)}
|
|
193
|
+
{cssPrefix.length > 0 && (
|
|
194
|
+
<StackItem>
|
|
195
|
+
<AutoLinkHeader
|
|
196
|
+
headingLevel="h2"
|
|
197
|
+
className="pf-v6-c-content--h2"
|
|
198
|
+
id="css-variables"
|
|
199
|
+
>
|
|
200
|
+
{cssVarsTitle}
|
|
201
|
+
</AutoLinkHeader>
|
|
202
|
+
{cssPrefix.map((prefix, index) => (
|
|
203
|
+
<CSSVariables
|
|
204
|
+
key={index}
|
|
205
|
+
autoLinkHeader={cssPrefix.length > 1}
|
|
206
|
+
prefix={prefix}
|
|
207
|
+
/>
|
|
208
|
+
))}
|
|
209
|
+
</StackItem>
|
|
210
|
+
)}
|
|
211
|
+
{sourceLink && (
|
|
212
|
+
<StackItem>
|
|
213
|
+
<br />
|
|
214
|
+
<a
|
|
215
|
+
href={sourceLink}
|
|
216
|
+
target="_blank"
|
|
217
|
+
onClick={() =>
|
|
218
|
+
trackEvent(
|
|
219
|
+
'view_source_click',
|
|
220
|
+
'click_event',
|
|
221
|
+
source.toUpperCase()
|
|
222
|
+
)
|
|
223
|
+
}
|
|
224
|
+
>
|
|
225
|
+
View source on GitHub
|
|
226
|
+
</a>
|
|
227
|
+
</StackItem>
|
|
228
|
+
)}
|
|
137
229
|
</Stack>
|
|
138
230
|
</div>
|
|
139
231
|
);
|
|
140
232
|
ChildComponent.displayName = `MDXChildTemplate${Component.displayName}`;
|
|
141
233
|
return <ChildComponent key={source} path={source} default={index === 0} />;
|
|
142
|
-
}
|
|
234
|
+
};
|
|
143
235
|
|
|
144
236
|
export const MDXTemplate = ({
|
|
145
237
|
title,
|
|
146
238
|
sources = [],
|
|
147
239
|
path,
|
|
148
240
|
id,
|
|
149
|
-
componentsData
|
|
241
|
+
componentsData,
|
|
150
242
|
}) => {
|
|
151
|
-
const isDeprecated =
|
|
152
|
-
|
|
153
|
-
|
|
243
|
+
const isDeprecated =
|
|
244
|
+
sources.some(
|
|
245
|
+
(source) =>
|
|
246
|
+
source.source === 'react-deprecated' ||
|
|
247
|
+
source.source === 'html-deprecated'
|
|
248
|
+
) &&
|
|
249
|
+
!sources.some(
|
|
250
|
+
(source) => source.source === 'react' || source.source === 'html'
|
|
251
|
+
);
|
|
252
|
+
const isBeta = sources.some(
|
|
253
|
+
(source) =>
|
|
254
|
+
source.beta &&
|
|
255
|
+
source.source !== 'react-next' &&
|
|
256
|
+
source.source !== 'react-templates'
|
|
257
|
+
);
|
|
258
|
+
const isDemo =
|
|
259
|
+
sources.some(
|
|
260
|
+
(source) =>
|
|
261
|
+
source.source === 'react-demos' || source.source === 'html-demos'
|
|
262
|
+
) &&
|
|
263
|
+
!sources.some(
|
|
264
|
+
(source) => source.source === 'react' || source.source === 'html'
|
|
265
|
+
);
|
|
154
266
|
// Build obj mapping source names to text displayed on tabs
|
|
155
267
|
const tabNames = sources.reduce((acc, curSrc) => {
|
|
156
268
|
const { source, tabName } = curSrc;
|
|
157
269
|
// use tabName for tab name if present, otherwise default to source
|
|
158
|
-
const tabLinkText =
|
|
270
|
+
const tabLinkText =
|
|
271
|
+
tabName || capitalize(source.replace('html', 'HTML').replace(/-/g, ' '));
|
|
159
272
|
acc[source] = tabLinkText;
|
|
160
273
|
return acc;
|
|
161
274
|
}, {});
|
|
162
275
|
const sourceKeys = Object.keys(tabNames);
|
|
163
276
|
const isSinglePage = sourceKeys.length === 1;
|
|
164
277
|
|
|
165
|
-
let isDevResources,
|
|
278
|
+
let isDevResources,
|
|
279
|
+
isComponent,
|
|
280
|
+
isExtension,
|
|
281
|
+
isChart,
|
|
282
|
+
isPattern,
|
|
283
|
+
isLayout,
|
|
284
|
+
isUtility,
|
|
285
|
+
isUpgrade;
|
|
166
286
|
|
|
167
287
|
const getSection = () => {
|
|
168
288
|
return sources.some((source) => {
|
|
169
289
|
switch (source.section) {
|
|
170
|
-
case
|
|
290
|
+
case 'developer-resources':
|
|
171
291
|
isDevResources = true;
|
|
172
292
|
return;
|
|
173
|
-
case
|
|
293
|
+
case 'components':
|
|
174
294
|
isComponent = true;
|
|
175
295
|
return;
|
|
176
|
-
case
|
|
296
|
+
case 'extensions':
|
|
177
297
|
isExtension = true;
|
|
178
298
|
return;
|
|
179
|
-
case
|
|
299
|
+
case 'charts':
|
|
180
300
|
isChart = true;
|
|
181
301
|
return;
|
|
182
|
-
case
|
|
302
|
+
case 'patterns':
|
|
183
303
|
isPattern = true;
|
|
184
304
|
return;
|
|
185
|
-
case
|
|
305
|
+
case 'layouts':
|
|
186
306
|
isLayout = true;
|
|
187
307
|
return;
|
|
188
|
-
case
|
|
308
|
+
case 'utilities':
|
|
189
309
|
isUtility = true;
|
|
190
310
|
return;
|
|
191
|
-
case
|
|
311
|
+
case 'get-started':
|
|
192
312
|
if (source.source.includes('upgrade')) {
|
|
193
313
|
isUpgrade = true;
|
|
194
314
|
}
|
|
@@ -199,7 +319,7 @@ export const MDXTemplate = ({
|
|
|
199
319
|
|
|
200
320
|
// hide tab if it doesn't include the strings below
|
|
201
321
|
const hideTabName = sourceKeys.some(
|
|
202
|
-
(e) => e.includes(
|
|
322
|
+
(e) => e.includes('pages') || e.includes('training')
|
|
203
323
|
);
|
|
204
324
|
const { pathname } = useLocation();
|
|
205
325
|
let activeSource = pathname.replace(/\/$/, '').split('/').pop();
|
|
@@ -225,34 +345,30 @@ export const MDXTemplate = ({
|
|
|
225
345
|
getSection();
|
|
226
346
|
if (isChart || isDevResources || isExtension) {
|
|
227
347
|
if (isSinglePage) {
|
|
228
|
-
return
|
|
348
|
+
return 'pf-m-light-100';
|
|
229
349
|
}
|
|
230
|
-
return
|
|
350
|
+
return 'pf-m-light';
|
|
231
351
|
} else if (isUtility || isPattern || isLayout || isComponent || isUpgrade) {
|
|
232
|
-
return
|
|
352
|
+
return 'pf-m-light';
|
|
233
353
|
}
|
|
234
|
-
return
|
|
354
|
+
return 'pf-m-light-100';
|
|
235
355
|
};
|
|
236
356
|
|
|
237
|
-
const showTabs =
|
|
238
|
-
(!isSinglePage && !hideTabName) ||
|
|
239
|
-
isComponent ||
|
|
240
|
-
isUtility ||
|
|
241
|
-
isPattern
|
|
242
|
-
);
|
|
357
|
+
const showTabs =
|
|
358
|
+
(!isSinglePage && !hideTabName) || isComponent || isUtility || isPattern;
|
|
243
359
|
|
|
244
360
|
return (
|
|
245
361
|
<React.Fragment>
|
|
246
362
|
<PageGroup>
|
|
247
363
|
<PageSection
|
|
248
364
|
className={getClassName()}
|
|
249
|
-
variant={!isSinglePage ? PageSectionVariants.light :
|
|
365
|
+
variant={!isSinglePage ? PageSectionVariants.light : ''}
|
|
250
366
|
isWidthLimited
|
|
251
367
|
>
|
|
252
368
|
<Content isEditorial>
|
|
253
|
-
<Flex alignItems={{ default: 'alignItemsCenter'}}>
|
|
369
|
+
<Flex alignItems={{ default: 'alignItemsCenter' }}>
|
|
254
370
|
<FlexItem>
|
|
255
|
-
<Title headingLevel=
|
|
371
|
+
<Title headingLevel="h1" size="4xl" id="ws-page-title">
|
|
256
372
|
{title}
|
|
257
373
|
</Title>
|
|
258
374
|
</FlexItem>
|
|
@@ -288,11 +404,15 @@ export const MDXTemplate = ({
|
|
|
288
404
|
</Flex>
|
|
289
405
|
</FlexItem>
|
|
290
406
|
</Flex>
|
|
291
|
-
{isComponent && summary &&
|
|
407
|
+
{isComponent && summary && <SummaryComponent />}
|
|
292
408
|
</Content>
|
|
293
409
|
</PageSection>
|
|
294
|
-
{
|
|
295
|
-
<PageSection
|
|
410
|
+
{showTabs && (
|
|
411
|
+
<PageSection
|
|
412
|
+
id="ws-sticky-nav-tabs"
|
|
413
|
+
stickyOnBreakpoint={{ default: 'top' }}
|
|
414
|
+
type="tabs"
|
|
415
|
+
>
|
|
296
416
|
<div className="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
|
|
297
417
|
<ul className="pf-v6-c-tabs__list">
|
|
298
418
|
{sourceKeys.map((source, index) => (
|
|
@@ -303,9 +423,18 @@ export const MDXTemplate = ({
|
|
|
303
423
|
activeSource === source && 'pf-m-current'
|
|
304
424
|
)}
|
|
305
425
|
// Send clicked tab name for analytics
|
|
306
|
-
onClick={() =>
|
|
426
|
+
onClick={() =>
|
|
427
|
+
trackEvent(
|
|
428
|
+
'tab_click',
|
|
429
|
+
'click_event',
|
|
430
|
+
source.toUpperCase()
|
|
431
|
+
)
|
|
432
|
+
}
|
|
307
433
|
>
|
|
308
|
-
<Link
|
|
434
|
+
<Link
|
|
435
|
+
className="pf-v6-c-tabs__link"
|
|
436
|
+
to={`${path}${index === 0 ? '' : '/' + source}`}
|
|
437
|
+
>
|
|
309
438
|
{tabNames[source]}
|
|
310
439
|
</Link>
|
|
311
440
|
</li>
|
|
@@ -315,7 +444,7 @@ export const MDXTemplate = ({
|
|
|
315
444
|
</PageSection>
|
|
316
445
|
)}
|
|
317
446
|
<PageSection id="main-content" isFilled className="pf-m-light-100">
|
|
318
|
-
{isSinglePage && <MDXChildTemplate {...sources[0]} id={id}/>}
|
|
447
|
+
{isSinglePage && <MDXChildTemplate {...sources[0]} id={id} />}
|
|
319
448
|
{!isSinglePage && (
|
|
320
449
|
<Router className="pf-v6-u-h-100" primary={false}>
|
|
321
450
|
{sources
|
|
@@ -327,8 +456,11 @@ export const MDXTemplate = ({
|
|
|
327
456
|
</Router>
|
|
328
457
|
)}
|
|
329
458
|
</PageSection>
|
|
330
|
-
<BackToTop
|
|
459
|
+
<BackToTop
|
|
460
|
+
className="ws-back-to-top"
|
|
461
|
+
scrollableSelector="#ws-page-main"
|
|
462
|
+
/>
|
|
331
463
|
</PageGroup>
|
|
332
464
|
</React.Fragment>
|
|
333
465
|
);
|
|
334
|
-
}
|
|
466
|
+
};
|
package/versions.json
CHANGED
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"Releases": [
|
|
3
3
|
{
|
|
4
|
+
"name": "6.0.0",
|
|
5
|
+
"date": "2024-10-24",
|
|
6
|
+
"latest": true,
|
|
7
|
+
"versions": {
|
|
8
|
+
"@patternfly/patternfly": "6.0.0",
|
|
9
|
+
"@patternfly/react-catalog-view-extension": "6.0.0-prerelease.1",
|
|
10
|
+
"@patternfly/react-charts": "8.0.0",
|
|
11
|
+
"@patternfly/react-code-editor": "6.0.0",
|
|
12
|
+
"@patternfly/react-component-groups": "6.0.0-prerelease.4",
|
|
13
|
+
"@patternfly/react-core": "6.0.0",
|
|
14
|
+
"@patternfly/react-drag-drop": "6.0.0",
|
|
15
|
+
"@patternfly/react-icons": "6.0.0",
|
|
16
|
+
"@patternfly/react-log-viewer": "6.0.0-prerelease.1",
|
|
17
|
+
"@patternfly/react-styles": "6.0.0",
|
|
18
|
+
"@patternfly/react-table": "6.0.0",
|
|
19
|
+
"@patternfly/react-tokens": "6.0.0",
|
|
20
|
+
"@patternfly/react-topology": "6.0.0-prerelease.2",
|
|
21
|
+
"@patternfly/react-user-feedback": "6.0.0-prerelease.2",
|
|
22
|
+
"@patternfly/react-console": "6.0.0-prerelease.2",
|
|
23
|
+
"@patternfly/quickstarts": "6.0.0-prerelease.2",
|
|
24
|
+
"@patternfly/react-virtualized-extension": "6.0.0-prerelease.4",
|
|
25
|
+
"@patternfly/react-templates": "6.0.0-prerelease.21"
|
|
26
|
+
}
|
|
27
|
+
},{
|
|
4
28
|
"name": "prerelease",
|
|
5
29
|
"date": "2024-10-08",
|
|
6
30
|
"latest": true,
|