@patternfly/react-core 4.202.29 → 4.202.32

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 (64) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/esm/helpers/Popper/Popper.d.ts.map +1 -1
  3. package/dist/esm/helpers/Popper/Popper.js +1 -7
  4. package/dist/esm/helpers/Popper/Popper.js.map +1 -1
  5. package/dist/js/helpers/Popper/Popper.d.ts.map +1 -1
  6. package/dist/js/helpers/Popper/Popper.js +1 -7
  7. package/dist/js/helpers/Popper/Popper.js.map +1 -1
  8. package/dist/umd/react-core.js +1 -7
  9. package/package.json +5 -5
  10. package/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx +1 -1
  11. package/src/components/Page/__tests__/Page.test.tsx +225 -205
  12. package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +1088 -2059
  13. package/src/components/Pagination/__tests__/Pagination.test.tsx +235 -283
  14. package/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap +143 -577
  15. package/src/components/Radio/__tests__/Radio.test.tsx +38 -44
  16. package/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap +30 -30
  17. package/src/components/SearchInput/__tests__/SearchInput.test.tsx +87 -68
  18. package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +230 -137
  19. package/src/components/Select/__tests__/Select.test.tsx +238 -195
  20. package/src/components/Select/__tests__/SelectToggle.test.tsx +68 -130
  21. package/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap +978 -2149
  22. package/src/components/Select/__tests__/__snapshots__/SelectToggle.test.tsx.snap +3 -3
  23. package/src/components/SimpleList/__tests__/SimpleList.test.tsx +29 -32
  24. package/src/components/SimpleList/__tests__/__snapshots__/SimpleList.test.tsx.snap +4 -366
  25. package/src/components/Switch/__tests__/Switch.test.tsx +85 -75
  26. package/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap +30 -40
  27. package/src/components/TextArea/__tests__/TextArea.test.tsx +98 -103
  28. package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap +24 -103
  29. package/src/components/TextInput/__tests__/TextInput.test.tsx +71 -70
  30. package/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap +15 -103
  31. package/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx +65 -39
  32. package/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap +53 -14
  33. package/src/components/TimePicker/__tests__/TimePicker.test.tsx +113 -110
  34. package/src/components/Title/__tests__/Title.test.tsx +21 -20
  35. package/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap +24 -30
  36. package/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx +43 -39
  37. package/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap +20 -19
  38. package/src/components/Wizard/__tests__/Wizard.test.tsx +195 -189
  39. package/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap +131 -10
  40. package/src/helpers/Popper/Popper.tsx +5 -7
  41. package/src/helpers/__tests__/util.test.ts +113 -0
  42. package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx +25 -25
  43. package/src/layouts/Bullseye/__tests__/__snapshots__/Bullseye.test.tsx.snap +3 -5
  44. package/src/layouts/Flex/__tests__/Flex.test.tsx +159 -96
  45. package/src/layouts/Flex/__tests__/__snapshots__/Flex.test.tsx.snap +9 -17
  46. package/src/components/Page/__tests__/Generated/Page.test.tsx +0 -28
  47. package/src/components/Page/__tests__/Generated/__snapshots__/Page.test.tsx.snap +0 -19
  48. package/src/components/Pagination/__tests__/Generated/Pagination.test.tsx +0 -58
  49. package/src/components/Pagination/__tests__/Generated/__snapshots__/Pagination.test.tsx.snap +0 -205
  50. package/src/components/Radio/__tests__/Generated/Radio.test.tsx +0 -29
  51. package/src/components/Radio/__tests__/Generated/__snapshots__/Radio.test.tsx.snap +0 -36
  52. package/src/components/Select/__tests__/Generated/Select.test.tsx +0 -49
  53. package/src/components/Select/__tests__/Generated/SelectToggle.test.tsx +0 -34
  54. package/src/components/Select/__tests__/Generated/__snapshots__/Select.test.tsx.snap +0 -48
  55. package/src/components/Select/__tests__/Generated/__snapshots__/SelectToggle.test.tsx.snap +0 -36
  56. package/src/components/SimpleList/__tests__/Generated/SimpleList.test.tsx +0 -22
  57. package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleList.test.tsx.snap +0 -13
  58. package/src/components/Switch/__tests__/Generated/Switch.test.tsx +0 -24
  59. package/src/components/Switch/__tests__/Generated/__snapshots__/Switch.test.tsx.snap +0 -36
  60. package/src/components/TextArea/__tests__/Generated/TextArea.test.tsx +0 -23
  61. package/src/components/TextArea/__tests__/Generated/__snapshots__/TextArea.test.tsx.snap +0 -13
  62. package/src/components/Title/__tests__/Generated/Title.test.tsx +0 -13
  63. package/src/components/Title/__tests__/Generated/__snapshots__/Title.test.tsx.snap +0 -12
  64. package/src/helpers/__tests__/util.test.js +0 -235
package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap CHANGED
@@ -1,7 +1,7 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Check dark page against snapshot 1`] = `
4
- <div>
3
+ exports[`Page Check dark page against snapshot 1`] = `
4
+ <DocumentFragment>
5
5
  <div
6
6
  aria-label="Page layout"
7
7
  class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
@@ -58,11 +58,11 @@ exports[`Check dark page against snapshot 1`] = `
58
58
  </section>
59
59
  </main>
60
60
  </div>
61
- </div>
61
+ </DocumentFragment>
62
62
  `;
63
63
 
64
- exports[`Check page horizontal layout example against snapshot 1`] = `
65
- <div>
64
+ exports[`Page Check page horizontal layout example against snapshot 1`] = `
65
+ <DocumentFragment>
66
66
  <div
67
67
  aria-label="Page layout"
68
68
  class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
@@ -122,1869 +122,873 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
122
122
  </section>
123
123
  </main>
124
124
  </div>
125
- </div>
125
+ </DocumentFragment>
126
126
  `;
127
127
 
128
- exports[`Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = `
129
- <Page
130
- aria-label="Page layout"
131
- className="my-page-class"
132
- defaultManagedSidebarIsOpen={true}
133
- getBreakpoint={[Function]}
134
- header={
135
- <PageHeader
136
- headerTools="PageHeaderTools | Avatar"
137
- logo="Logo"
138
- topNav="Navigation"
139
- />
140
- }
141
- id="PageId"
142
- isBreadcrumbWidthLimited={false}
143
- isManagedSidebar={false}
144
- isNotificationDrawerExpanded={false}
145
- mainTabIndex={-1}
146
- onNotificationDrawerExpand={[Function]}
147
- onPageResize={[Function]}
148
- sidebar={
149
- <PageSidebar
150
- isNavOpen={true}
151
- />
152
- }
153
- >
128
+ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = `
129
+ <DocumentFragment>
154
130
  <div
155
131
  aria-label="Page layout"
156
- className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
132
+ class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
157
133
  id="PageId"
158
134
  >
159
- <PageHeader
160
- headerTools="PageHeaderTools | Avatar"
161
- logo="Logo"
162
- topNav="Navigation"
135
+ <header
136
+ class="pf-c-page__header"
163
137
  >
164
- <header
165
- className="pf-c-page__header"
138
+ <div
139
+ class="pf-c-page__header-brand"
166
140
  >
167
- <div
168
- className="pf-c-page__header-brand"
169
- >
170
- <a
171
- className="pf-c-page__header-brand-link"
172
- >
173
- Logo
174
- </a>
175
- </div>
176
- <div
177
- className="pf-c-page__header-nav"
141
+ <a
142
+ class="pf-c-page__header-brand-link"
178
143
  >
179
- Navigation
180
- </div>
181
- PageHeaderTools | Avatar
182
- </header>
183
- </PageHeader>
184
- <PageSidebar
185
- isNavOpen={true}
186
- >
144
+ Logo
145
+ </a>
146
+ </div>
187
147
  <div
188
- aria-hidden={false}
189
- className="pf-c-page__sidebar pf-m-expanded"
190
- id="page-sidebar"
148
+ class="pf-c-page__header-nav"
191
149
  >
192
- <div
193
- className="pf-topology-side-bar__body"
194
- />
150
+ Navigation
195
151
  </div>
196
- </PageSidebar>
152
+ PageHeaderTools | Avatar
153
+ </header>
154
+ <div
155
+ aria-hidden="false"
156
+ class="pf-c-page__sidebar pf-m-expanded"
157
+ id="page-sidebar"
158
+ >
159
+ <div
160
+ class="pf-topology-side-bar__body"
161
+ />
162
+ </div>
197
163
  <main
198
- className="pf-c-page__main"
199
- tabIndex={-1}
164
+ class="pf-c-page__main"
165
+ tabindex="-1"
200
166
  >
201
- <PageBreadcrumb>
202
- <section
203
- className="pf-c-page__main-breadcrumb"
167
+ <section
168
+ class="pf-c-page__main-breadcrumb"
169
+ >
170
+ <nav
171
+ aria-label="Breadcrumb"
172
+ class="pf-c-breadcrumb"
173
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
174
+ data-ouia-component-type="PF4/Breadcrumb"
175
+ data-ouia-safe="true"
204
176
  >
205
- <Breadcrumb>
206
- <nav
207
- aria-label="Breadcrumb"
208
- className="pf-c-breadcrumb"
209
- data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
210
- data-ouia-component-type="PF4/Breadcrumb"
211
- data-ouia-safe={true}
177
+ <ol
178
+ class="pf-c-breadcrumb__list"
179
+ >
180
+ <li
181
+ class="pf-c-breadcrumb__item"
212
182
  >
213
- <ol
214
- className="pf-c-breadcrumb__list"
183
+ Section Home
184
+ </li>
185
+ <li
186
+ class="pf-c-breadcrumb__item"
187
+ >
188
+ <span
189
+ class="pf-c-breadcrumb__item-divider"
215
190
  >
216
- <BreadcrumbItem
217
- key=".0"
218
- showDivider={false}
219
- >
220
- <li
221
- className="pf-c-breadcrumb__item"
222
- >
223
- Section Home
224
- </li>
225
- </BreadcrumbItem>
226
- <BreadcrumbItem
227
- key=".1"
228
- showDivider={true}
229
- to="#"
191
+ <svg
192
+ aria-hidden="true"
193
+ fill="currentColor"
194
+ height="1em"
195
+ role="img"
196
+ style="vertical-align: -0.125em;"
197
+ viewBox="0 0 256 512"
198
+ width="1em"
230
199
  >
231
- <li
232
- className="pf-c-breadcrumb__item"
233
- >
234
- <span
235
- className="pf-c-breadcrumb__item-divider"
236
- >
237
- <AngleRightIcon
238
- color="currentColor"
239
- noVerticalAlign={false}
240
- size="sm"
241
- >
242
- <svg
243
- aria-hidden={true}
244
- aria-labelledby={null}
245
- fill="currentColor"
246
- height="1em"
247
- role="img"
248
- style={
249
- Object {
250
- "verticalAlign": "-0.125em",
251
- }
252
- }
253
- viewBox="0 0 256 512"
254
- width="1em"
255
- >
256
- <path
257
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
258
- />
259
- </svg>
260
- </AngleRightIcon>
261
- </span>
262
- <a
263
- className="pf-c-breadcrumb__link"
264
- href="#"
265
- >
266
- Section Title
267
- </a>
268
- </li>
269
- </BreadcrumbItem>
270
- <BreadcrumbItem
271
- key=".2"
272
- showDivider={true}
273
- to="#"
200
+ <path
201
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
202
+ />
203
+ </svg>
204
+ </span>
205
+ <a
206
+ class="pf-c-breadcrumb__link"
207
+ href="#"
208
+ >
209
+ Section Title
210
+ </a>
211
+ </li>
212
+ <li
213
+ class="pf-c-breadcrumb__item"
214
+ >
215
+ <span
216
+ class="pf-c-breadcrumb__item-divider"
217
+ >
218
+ <svg
219
+ aria-hidden="true"
220
+ fill="currentColor"
221
+ height="1em"
222
+ role="img"
223
+ style="vertical-align: -0.125em;"
224
+ viewBox="0 0 256 512"
225
+ width="1em"
274
226
  >
275
- <li
276
- className="pf-c-breadcrumb__item"
277
- >
278
- <span
279
- className="pf-c-breadcrumb__item-divider"
280
- >
281
- <AngleRightIcon
282
- color="currentColor"
283
- noVerticalAlign={false}
284
- size="sm"
285
- >
286
- <svg
287
- aria-hidden={true}
288
- aria-labelledby={null}
289
- fill="currentColor"
290
- height="1em"
291
- role="img"
292
- style={
293
- Object {
294
- "verticalAlign": "-0.125em",
295
- }
296
- }
297
- viewBox="0 0 256 512"
298
- width="1em"
299
- >
300
- <path
301
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
302
- />
303
- </svg>
304
- </AngleRightIcon>
305
- </span>
306
- <a
307
- className="pf-c-breadcrumb__link"
308
- href="#"
309
- >
310
- Section Title
311
- </a>
312
- </li>
313
- </BreadcrumbItem>
314
- <BreadcrumbItem
315
- isActive={true}
316
- key=".3"
317
- showDivider={true}
318
- to="#"
227
+ <path
228
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
229
+ />
230
+ </svg>
231
+ </span>
232
+ <a
233
+ class="pf-c-breadcrumb__link"
234
+ href="#"
235
+ >
236
+ Section Title
237
+ </a>
238
+ </li>
239
+ <li
240
+ class="pf-c-breadcrumb__item"
241
+ >
242
+ <span
243
+ class="pf-c-breadcrumb__item-divider"
244
+ >
245
+ <svg
246
+ aria-hidden="true"
247
+ fill="currentColor"
248
+ height="1em"
249
+ role="img"
250
+ style="vertical-align: -0.125em;"
251
+ viewBox="0 0 256 512"
252
+ width="1em"
319
253
  >
320
- <li
321
- className="pf-c-breadcrumb__item"
322
- >
323
- <span
324
- className="pf-c-breadcrumb__item-divider"
325
- >
326
- <AngleRightIcon
327
- color="currentColor"
328
- noVerticalAlign={false}
329
- size="sm"
330
- >
331
- <svg
332
- aria-hidden={true}
333
- aria-labelledby={null}
334
- fill="currentColor"
335
- height="1em"
336
- role="img"
337
- style={
338
- Object {
339
- "verticalAlign": "-0.125em",
340
- }
341
- }
342
- viewBox="0 0 256 512"
343
- width="1em"
344
- >
345
- <path
346
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
347
- />
348
- </svg>
349
- </AngleRightIcon>
350
- </span>
351
- <a
352
- aria-current="page"
353
- className="pf-c-breadcrumb__link pf-m-current"
354
- href="#"
355
- >
356
- Section Landing
357
- </a>
358
- </li>
359
- </BreadcrumbItem>
360
- </ol>
361
- </nav>
362
- </Breadcrumb>
363
- </section>
364
- </PageBreadcrumb>
365
- <PageSection
366
- variant="default"
254
+ <path
255
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
256
+ />
257
+ </svg>
258
+ </span>
259
+ <a
260
+ aria-current="page"
261
+ class="pf-c-breadcrumb__link pf-m-current"
262
+ href="#"
263
+ >
264
+ Section Landing
265
+ </a>
266
+ </li>
267
+ </ol>
268
+ </nav>
269
+ </section>
270
+ <section
271
+ class="pf-c-page__main-section"
367
272
  >
368
- <section
369
- className="pf-c-page__main-section"
370
- >
371
- Section with default background
372
- </section>
373
- </PageSection>
374
- <PageSection
375
- variant="light"
273
+ Section with default background
274
+ </section>
275
+ <section
276
+ class="pf-c-page__main-section pf-m-light"
376
277
  >
377
- <section
378
- className="pf-c-page__main-section pf-m-light"
379
- >
380
- Section with light background
381
- </section>
382
- </PageSection>
383
- <PageSection
384
- variant="dark"
278
+ Section with light background
279
+ </section>
280
+ <section
281
+ class="pf-c-page__main-section pf-m-dark-200"
385
282
  >
386
- <section
387
- className="pf-c-page__main-section pf-m-dark-200"
388
- >
389
- Section with dark background
390
- </section>
391
- </PageSection>
392
- <PageSection
393
- variant="darker"
283
+ Section with dark background
284
+ </section>
285
+ <section
286
+ class="pf-c-page__main-section pf-m-dark-100"
394
287
  >
395
- <section
396
- className="pf-c-page__main-section pf-m-dark-100"
397
- >
398
- Section with darker background
399
- </section>
400
- </PageSection>
288
+ Section with darker background
289
+ </section>
401
290
  </main>
402
291
  </div>
403
- </Page>
292
+ </DocumentFragment>
404
293
  `;
405
294
 
406
- exports[`Check page to verify breadcrumb is created 1`] = `
407
- <Page
408
- aria-label="Page layout"
409
- breadcrumb={<PageBreadcrumb />}
410
- className="my-page-class"
411
- defaultManagedSidebarIsOpen={true}
412
- getBreakpoint={[Function]}
413
- header={
414
- <PageHeader
415
- headerTools="PageHeaderTools | Avatar"
416
- logo="Logo"
417
- topNav="Navigation"
418
- />
419
- }
420
- id="PageId"
421
- isBreadcrumbWidthLimited={false}
422
- isManagedSidebar={false}
423
- isNotificationDrawerExpanded={false}
424
- mainTabIndex={-1}
425
- onNotificationDrawerExpand={[Function]}
426
- onPageResize={[Function]}
427
- sidebar={
428
- <PageSidebar
429
- isNavOpen={true}
430
- />
431
- }
432
- >
295
+ exports[`Page Check page to verify breadcrumb is created 1`] = `
296
+ <DocumentFragment>
433
297
  <div
434
298
  aria-label="Page layout"
435
- className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
299
+ class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
436
300
  id="PageId"
437
301
  >
438
- <PageHeader
439
- headerTools="PageHeaderTools | Avatar"
440
- logo="Logo"
441
- topNav="Navigation"
302
+ <header
303
+ class="pf-c-page__header"
442
304
  >
443
- <header
444
- className="pf-c-page__header"
305
+ <div
306
+ class="pf-c-page__header-brand"
445
307
  >
446
- <div
447
- className="pf-c-page__header-brand"
448
- >
449
- <a
450
- className="pf-c-page__header-brand-link"
451
- >
452
- Logo
453
- </a>
454
- </div>
455
- <div
456
- className="pf-c-page__header-nav"
308
+ <a
309
+ class="pf-c-page__header-brand-link"
457
310
  >
458
- Navigation
459
- </div>
460
- PageHeaderTools | Avatar
461
- </header>
462
- </PageHeader>
463
- <PageSidebar
464
- isNavOpen={true}
465
- >
311
+ Logo
312
+ </a>
313
+ </div>
466
314
  <div
467
- aria-hidden={false}
468
- className="pf-c-page__sidebar pf-m-expanded"
469
- id="page-sidebar"
315
+ class="pf-c-page__header-nav"
470
316
  >
471
- <div
472
- className="pf-topology-side-bar__body"
473
- />
317
+ Navigation
474
318
  </div>
475
- </PageSidebar>
319
+ PageHeaderTools | Avatar
320
+ </header>
321
+ <div
322
+ aria-hidden="false"
323
+ class="pf-c-page__sidebar pf-m-expanded"
324
+ id="page-sidebar"
325
+ >
326
+ <div
327
+ class="pf-topology-side-bar__body"
328
+ />
329
+ </div>
476
330
  <main
477
- className="pf-c-page__main"
478
- tabIndex={-1}
331
+ class="pf-c-page__main"
332
+ tabindex="-1"
479
333
  >
480
334
  <section
481
- className="pf-c-page__main-breadcrumb"
335
+ class="pf-c-page__main-breadcrumb"
482
336
  >
483
- <PageBreadcrumb>
484
- <Breadcrumb>
485
- <nav
486
- aria-label="Breadcrumb"
487
- className="pf-c-breadcrumb"
488
- data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
489
- data-ouia-component-type="PF4/Breadcrumb"
490
- data-ouia-safe={true}
337
+ <nav
338
+ aria-label="Breadcrumb"
339
+ class="pf-c-breadcrumb"
340
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
341
+ data-ouia-component-type="PF4/Breadcrumb"
342
+ data-ouia-safe="true"
343
+ >
344
+ <ol
345
+ class="pf-c-breadcrumb__list"
346
+ >
347
+ <li
348
+ class="pf-c-breadcrumb__item"
491
349
  >
492
- <ol
493
- className="pf-c-breadcrumb__list"
350
+ Section Home
351
+ </li>
352
+ <li
353
+ class="pf-c-breadcrumb__item"
354
+ >
355
+ <span
356
+ class="pf-c-breadcrumb__item-divider"
494
357
  >
495
- <BreadcrumbItem
496
- key=".0"
497
- showDivider={false}
358
+ <svg
359
+ aria-hidden="true"
360
+ fill="currentColor"
361
+ height="1em"
362
+ role="img"
363
+ style="vertical-align: -0.125em;"
364
+ viewBox="0 0 256 512"
365
+ width="1em"
498
366
  >
499
- <li
500
- className="pf-c-breadcrumb__item"
501
- >
502
- Section Home
503
- </li>
504
- </BreadcrumbItem>
505
- <BreadcrumbItem
506
- key=".1"
507
- showDivider={true}
508
- to="#"
509
- >
510
- <li
511
- className="pf-c-breadcrumb__item"
512
- >
513
- <span
514
- className="pf-c-breadcrumb__item-divider"
515
- >
516
- <AngleRightIcon
517
- color="currentColor"
518
- noVerticalAlign={false}
519
- size="sm"
520
- >
521
- <svg
522
- aria-hidden={true}
523
- aria-labelledby={null}
524
- fill="currentColor"
525
- height="1em"
526
- role="img"
527
- style={
528
- Object {
529
- "verticalAlign": "-0.125em",
530
- }
531
- }
532
- viewBox="0 0 256 512"
533
- width="1em"
534
- >
535
- <path
536
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
537
- />
538
- </svg>
539
- </AngleRightIcon>
540
- </span>
541
- <a
542
- className="pf-c-breadcrumb__link"
543
- href="#"
544
- >
545
- Section Title
546
- </a>
547
- </li>
548
- </BreadcrumbItem>
549
- <BreadcrumbItem
550
- key=".2"
551
- showDivider={true}
552
- to="#"
367
+ <path
368
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
369
+ />
370
+ </svg>
371
+ </span>
372
+ <a
373
+ class="pf-c-breadcrumb__link"
374
+ href="#"
375
+ >
376
+ Section Title
377
+ </a>
378
+ </li>
379
+ <li
380
+ class="pf-c-breadcrumb__item"
381
+ >
382
+ <span
383
+ class="pf-c-breadcrumb__item-divider"
384
+ >
385
+ <svg
386
+ aria-hidden="true"
387
+ fill="currentColor"
388
+ height="1em"
389
+ role="img"
390
+ style="vertical-align: -0.125em;"
391
+ viewBox="0 0 256 512"
392
+ width="1em"
553
393
  >
554
- <li
555
- className="pf-c-breadcrumb__item"
556
- >
557
- <span
558
- className="pf-c-breadcrumb__item-divider"
559
- >
560
- <AngleRightIcon
561
- color="currentColor"
562
- noVerticalAlign={false}
563
- size="sm"
564
- >
565
- <svg
566
- aria-hidden={true}
567
- aria-labelledby={null}
568
- fill="currentColor"
569
- height="1em"
570
- role="img"
571
- style={
572
- Object {
573
- "verticalAlign": "-0.125em",
574
- }
575
- }
576
- viewBox="0 0 256 512"
577
- width="1em"
578
- >
579
- <path
580
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
581
- />
582
- </svg>
583
- </AngleRightIcon>
584
- </span>
585
- <a
586
- className="pf-c-breadcrumb__link"
587
- href="#"
588
- >
589
- Section Title
590
- </a>
591
- </li>
592
- </BreadcrumbItem>
593
- <BreadcrumbItem
594
- isActive={true}
595
- key=".3"
596
- showDivider={true}
597
- to="#"
394
+ <path
395
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
396
+ />
397
+ </svg>
398
+ </span>
399
+ <a
400
+ class="pf-c-breadcrumb__link"
401
+ href="#"
402
+ >
403
+ Section Title
404
+ </a>
405
+ </li>
406
+ <li
407
+ class="pf-c-breadcrumb__item"
408
+ >
409
+ <span
410
+ class="pf-c-breadcrumb__item-divider"
411
+ >
412
+ <svg
413
+ aria-hidden="true"
414
+ fill="currentColor"
415
+ height="1em"
416
+ role="img"
417
+ style="vertical-align: -0.125em;"
418
+ viewBox="0 0 256 512"
419
+ width="1em"
598
420
  >
599
- <li
600
- className="pf-c-breadcrumb__item"
601
- >
602
- <span
603
- className="pf-c-breadcrumb__item-divider"
604
- >
605
- <AngleRightIcon
606
- color="currentColor"
607
- noVerticalAlign={false}
608
- size="sm"
609
- >
610
- <svg
611
- aria-hidden={true}
612
- aria-labelledby={null}
613
- fill="currentColor"
614
- height="1em"
615
- role="img"
616
- style={
617
- Object {
618
- "verticalAlign": "-0.125em",
619
- }
620
- }
621
- viewBox="0 0 256 512"
622
- width="1em"
623
- >
624
- <path
625
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
626
- />
627
- </svg>
628
- </AngleRightIcon>
629
- </span>
630
- <a
631
- aria-current="page"
632
- className="pf-c-breadcrumb__link pf-m-current"
633
- href="#"
634
- >
635
- Section Landing
636
- </a>
637
- </li>
638
- </BreadcrumbItem>
639
- </ol>
640
- </nav>
641
- </Breadcrumb>
642
- </PageBreadcrumb>
421
+ <path
422
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
423
+ />
424
+ </svg>
425
+ </span>
426
+ <a
427
+ aria-current="page"
428
+ class="pf-c-breadcrumb__link pf-m-current"
429
+ href="#"
430
+ >
431
+ Section Landing
432
+ </a>
433
+ </li>
434
+ </ol>
435
+ </nav>
643
436
  </section>
644
- <PageSection
645
- variant="default"
437
+ <section
438
+ class="pf-c-page__main-section"
646
439
  >
647
- <section
648
- className="pf-c-page__main-section"
649
- >
650
- Section with default background
651
- </section>
652
- </PageSection>
653
- <PageSection
654
- variant="light"
440
+ Section with default background
441
+ </section>
442
+ <section
443
+ class="pf-c-page__main-section pf-m-light"
655
444
  >
656
- <section
657
- className="pf-c-page__main-section pf-m-light"
658
- >
659
- Section with light background
660
- </section>
661
- </PageSection>
662
- <PageSection
663
- variant="dark"
445
+ Section with light background
446
+ </section>
447
+ <section
448
+ class="pf-c-page__main-section pf-m-dark-200"
664
449
  >
665
- <section
666
- className="pf-c-page__main-section pf-m-dark-200"
667
- >
668
- Section with dark background
669
- </section>
670
- </PageSection>
671
- <PageSection
672
- variant="darker"
450
+ Section with dark background
451
+ </section>
452
+ <section
453
+ class="pf-c-page__main-section pf-m-dark-100"
673
454
  >
674
- <section
675
- className="pf-c-page__main-section pf-m-dark-100"
676
- >
677
- Section with darker background
678
- </section>
679
- </PageSection>
455
+ Section with darker background
456
+ </section>
680
457
  </main>
681
458
  </div>
682
- </Page>
459
+ </DocumentFragment>
683
460
  `;
684
461
 
685
- exports[`Check page to verify grouped nav and breadcrumb - new components syntax 1`] = `
686
- <Page
687
- aria-label="Page layout"
688
- className="my-page-class"
689
- defaultManagedSidebarIsOpen={true}
690
- getBreakpoint={[Function]}
691
- header={
692
- <PageHeader
693
- headerTools="PageHeaderTools | Avatar"
694
- logo="Logo"
695
- topNav="Navigation"
696
- />
697
- }
698
- id="PageId"
699
- isBreadcrumbWidthLimited={false}
700
- isManagedSidebar={false}
701
- isNotificationDrawerExpanded={false}
702
- mainTabIndex={-1}
703
- onNotificationDrawerExpand={[Function]}
704
- onPageResize={[Function]}
705
- sidebar={
706
- <PageSidebar
707
- isNavOpen={true}
708
- />
709
- }
710
- >
462
+ exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = `
463
+ <DocumentFragment>
711
464
  <div
712
465
  aria-label="Page layout"
713
- className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
466
+ class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
714
467
  id="PageId"
715
468
  >
716
- <PageHeader
717
- headerTools="PageHeaderTools | Avatar"
718
- logo="Logo"
719
- topNav="Navigation"
469
+ <header
470
+ class="pf-c-page__header"
720
471
  >
721
- <header
722
- className="pf-c-page__header"
472
+ <div
473
+ class="pf-c-page__header-brand"
723
474
  >
724
- <div
725
- className="pf-c-page__header-brand"
726
- >
727
- <a
728
- className="pf-c-page__header-brand-link"
729
- >
730
- Logo
731
- </a>
732
- </div>
733
- <div
734
- className="pf-c-page__header-nav"
475
+ <a
476
+ class="pf-c-page__header-brand-link"
735
477
  >
736
- Navigation
737
- </div>
738
- PageHeaderTools | Avatar
739
- </header>
740
- </PageHeader>
741
- <PageSidebar
742
- isNavOpen={true}
743
- >
478
+ Logo
479
+ </a>
480
+ </div>
744
481
  <div
745
- aria-hidden={false}
746
- className="pf-c-page__sidebar pf-m-expanded"
747
- id="page-sidebar"
482
+ class="pf-c-page__header-nav"
748
483
  >
749
- <div
750
- className="pf-topology-side-bar__body"
751
- />
484
+ Navigation
752
485
  </div>
753
- </PageSidebar>
486
+ PageHeaderTools | Avatar
487
+ </header>
488
+ <div
489
+ aria-hidden="false"
490
+ class="pf-c-page__sidebar pf-m-expanded"
491
+ id="page-sidebar"
492
+ >
493
+ <div
494
+ class="pf-topology-side-bar__body"
495
+ />
496
+ </div>
754
497
  <main
755
- className="pf-c-page__main"
756
- tabIndex={-1}
498
+ class="pf-c-page__main"
499
+ tabindex="-1"
757
500
  >
758
- <PageGroup
759
- sticky="bottom"
501
+ <div
502
+ class="pf-c-page__main-group pf-m-sticky-bottom"
760
503
  >
761
- <div
762
- className="pf-c-page__main-group pf-m-sticky-bottom"
504
+ <section
505
+ class="pf-c-page__main-breadcrumb"
763
506
  >
764
- <PageBreadcrumb>
765
- <section
766
- className="pf-c-page__main-breadcrumb"
507
+ <nav
508
+ aria-label="Breadcrumb"
509
+ class="pf-c-breadcrumb"
510
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
511
+ data-ouia-component-type="PF4/Breadcrumb"
512
+ data-ouia-safe="true"
513
+ >
514
+ <ol
515
+ class="pf-c-breadcrumb__list"
767
516
  >
768
- <Breadcrumb>
769
- <nav
770
- aria-label="Breadcrumb"
771
- className="pf-c-breadcrumb"
772
- data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
773
- data-ouia-component-type="PF4/Breadcrumb"
774
- data-ouia-safe={true}
517
+ <li
518
+ class="pf-c-breadcrumb__item"
519
+ >
520
+ Section Home
521
+ </li>
522
+ <li
523
+ class="pf-c-breadcrumb__item"
524
+ >
525
+ <span
526
+ class="pf-c-breadcrumb__item-divider"
775
527
  >
776
- <ol
777
- className="pf-c-breadcrumb__list"
528
+ <svg
529
+ aria-hidden="true"
530
+ fill="currentColor"
531
+ height="1em"
532
+ role="img"
533
+ style="vertical-align: -0.125em;"
534
+ viewBox="0 0 256 512"
535
+ width="1em"
778
536
  >
779
- <BreadcrumbItem
780
- key=".0"
781
- showDivider={false}
782
- >
783
- <li
784
- className="pf-c-breadcrumb__item"
785
- >
786
- Section Home
787
- </li>
788
- </BreadcrumbItem>
789
- <BreadcrumbItem
790
- key=".1"
791
- showDivider={true}
792
- to="#"
793
- >
794
- <li
795
- className="pf-c-breadcrumb__item"
796
- >
797
- <span
798
- className="pf-c-breadcrumb__item-divider"
799
- >
800
- <AngleRightIcon
801
- color="currentColor"
802
- noVerticalAlign={false}
803
- size="sm"
804
- >
805
- <svg
806
- aria-hidden={true}
807
- aria-labelledby={null}
808
- fill="currentColor"
809
- height="1em"
810
- role="img"
811
- style={
812
- Object {
813
- "verticalAlign": "-0.125em",
814
- }
815
- }
816
- viewBox="0 0 256 512"
817
- width="1em"
818
- >
819
- <path
820
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
821
- />
822
- </svg>
823
- </AngleRightIcon>
824
- </span>
825
- <a
826
- className="pf-c-breadcrumb__link"
827
- href="#"
828
- >
829
- Section Title
830
- </a>
831
- </li>
832
- </BreadcrumbItem>
833
- <BreadcrumbItem
834
- key=".2"
835
- showDivider={true}
836
- to="#"
837
- >
838
- <li
839
- className="pf-c-breadcrumb__item"
840
- >
841
- <span
842
- className="pf-c-breadcrumb__item-divider"
843
- >
844
- <AngleRightIcon
845
- color="currentColor"
846
- noVerticalAlign={false}
847
- size="sm"
848
- >
849
- <svg
850
- aria-hidden={true}
851
- aria-labelledby={null}
852
- fill="currentColor"
853
- height="1em"
854
- role="img"
855
- style={
856
- Object {
857
- "verticalAlign": "-0.125em",
858
- }
859
- }
860
- viewBox="0 0 256 512"
861
- width="1em"
862
- >
863
- <path
864
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
865
- />
866
- </svg>
867
- </AngleRightIcon>
868
- </span>
869
- <a
870
- className="pf-c-breadcrumb__link"
871
- href="#"
872
- >
873
- Section Title
874
- </a>
875
- </li>
876
- </BreadcrumbItem>
877
- <BreadcrumbItem
878
- isActive={true}
879
- key=".3"
880
- showDivider={true}
881
- to="#"
882
- >
883
- <li
884
- className="pf-c-breadcrumb__item"
885
- >
886
- <span
887
- className="pf-c-breadcrumb__item-divider"
888
- >
889
- <AngleRightIcon
890
- color="currentColor"
891
- noVerticalAlign={false}
892
- size="sm"
893
- >
894
- <svg
895
- aria-hidden={true}
896
- aria-labelledby={null}
897
- fill="currentColor"
898
- height="1em"
899
- role="img"
900
- style={
901
- Object {
902
- "verticalAlign": "-0.125em",
903
- }
904
- }
905
- viewBox="0 0 256 512"
906
- width="1em"
907
- >
908
- <path
909
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
910
- />
911
- </svg>
912
- </AngleRightIcon>
913
- </span>
914
- <a
915
- aria-current="page"
916
- className="pf-c-breadcrumb__link pf-m-current"
917
- href="#"
918
- >
919
- Section Landing
920
- </a>
921
- </li>
922
- </BreadcrumbItem>
923
- </ol>
924
- </nav>
925
- </Breadcrumb>
926
- </section>
927
- </PageBreadcrumb>
928
- <PageNavigation>
929
- <div
930
- className="pf-c-page__main-nav"
931
- >
932
- <Nav
933
- aria-label="Nav"
934
- onSelect={[Function]}
935
- onToggle={[Function]}
936
- ouiaSafe={true}
937
- theme="dark"
938
- variant="tertiary"
537
+ <path
538
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
539
+ />
540
+ </svg>
541
+ </span>
542
+ <a
543
+ class="pf-c-breadcrumb__link"
544
+ href="#"
545
+ >
546
+ Section Title
547
+ </a>
548
+ </li>
549
+ <li
550
+ class="pf-c-breadcrumb__item"
939
551
  >
940
- <nav
941
- aria-label="Nav"
942
- className="pf-c-nav pf-m-horizontal pf-m-tertiary"
943
- data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
944
- data-ouia-component-type="PF4/Nav"
945
- data-ouia-safe={true}
552
+ <span
553
+ class="pf-c-breadcrumb__item-divider"
946
554
  >
947
- <NavList
948
- ariaLeftScroll="Scroll left"
949
- ariaRightScroll="Scroll right"
555
+ <svg
556
+ aria-hidden="true"
557
+ fill="currentColor"
558
+ height="1em"
559
+ role="img"
560
+ style="vertical-align: -0.125em;"
561
+ viewBox="0 0 256 512"
562
+ width="1em"
950
563
  >
951
- <button
952
- aria-label="Scroll left"
953
- className="pf-c-nav__scroll-button"
954
- disabled={true}
955
- onClick={[Function]}
956
- tabIndex={null}
957
- >
958
- <AngleLeftIcon
959
- color="currentColor"
960
- noVerticalAlign={false}
961
- size="sm"
962
- >
963
- <svg
964
- aria-hidden={true}
965
- aria-labelledby={null}
966
- fill="currentColor"
967
- height="1em"
968
- role="img"
969
- style={
970
- Object {
971
- "verticalAlign": "-0.125em",
972
- }
973
- }
974
- viewBox="0 0 256 512"
975
- width="1em"
976
- >
977
- <path
978
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
979
- />
980
- </svg>
981
- </AngleLeftIcon>
982
- </button>
983
- <ul
984
- className="pf-c-nav__list"
985
- onScroll={[Function]}
986
- >
987
- <NavItem
988
- isActive={true}
989
- itemId={0}
990
- >
991
- <li
992
- className="pf-c-nav__item"
993
- data-ouia-component-id="OUIA-Generated-NavItem-6"
994
- data-ouia-component-type="PF4/NavItem"
995
- data-ouia-safe={true}
996
- onMouseOver={[Function]}
997
- >
998
- <a
999
- aria-current="page"
1000
- className="pf-c-nav__link pf-m-current"
1001
- onClick={[Function]}
1002
- tabIndex={null}
1003
- >
1004
- System Panel
1005
- </a>
1006
- </li>
1007
- </NavItem>
1008
- <NavItem
1009
- itemId={1}
1010
- >
1011
- <li
1012
- className="pf-c-nav__item"
1013
- data-ouia-component-id="OUIA-Generated-NavItem-7"
1014
- data-ouia-component-type="PF4/NavItem"
1015
- data-ouia-safe={true}
1016
- onMouseOver={[Function]}
1017
- >
1018
- <a
1019
- aria-current={null}
1020
- className="pf-c-nav__link"
1021
- onClick={[Function]}
1022
- tabIndex={null}
1023
- >
1024
- Policy
1025
- </a>
1026
- </li>
1027
- </NavItem>
1028
- <NavItem
1029
- itemId={2}
1030
- >
1031
- <li
1032
- className="pf-c-nav__item"
1033
- data-ouia-component-id="OUIA-Generated-NavItem-8"
1034
- data-ouia-component-type="PF4/NavItem"
1035
- data-ouia-safe={true}
1036
- onMouseOver={[Function]}
1037
- >
1038
- <a
1039
- aria-current={null}
1040
- className="pf-c-nav__link"
1041
- onClick={[Function]}
1042
- tabIndex={null}
1043
- >
1044
- Authentication
1045
- </a>
1046
- </li>
1047
- </NavItem>
1048
- <NavItem
1049
- itemId={3}
1050
- >
1051
- <li
1052
- className="pf-c-nav__item"
1053
- data-ouia-component-id="OUIA-Generated-NavItem-9"
1054
- data-ouia-component-type="PF4/NavItem"
1055
- data-ouia-safe={true}
1056
- onMouseOver={[Function]}
1057
- >
1058
- <a
1059
- aria-current={null}
1060
- className="pf-c-nav__link"
1061
- onClick={[Function]}
1062
- tabIndex={null}
1063
- >
1064
- Network Services
1065
- </a>
1066
- </li>
1067
- </NavItem>
1068
- <NavItem
1069
- itemId={4}
1070
- >
1071
- <li
1072
- className="pf-c-nav__item"
1073
- data-ouia-component-id="OUIA-Generated-NavItem-10"
1074
- data-ouia-component-type="PF4/NavItem"
1075
- data-ouia-safe={true}
1076
- onMouseOver={[Function]}
1077
- >
1078
- <a
1079
- aria-current={null}
1080
- className="pf-c-nav__link"
1081
- onClick={[Function]}
1082
- tabIndex={null}
1083
- >
1084
- Server
1085
- </a>
1086
- </li>
1087
- </NavItem>
1088
- </ul>
1089
- <button
1090
- aria-label="Scroll right"
1091
- className="pf-c-nav__scroll-button"
1092
- disabled={true}
1093
- onClick={[Function]}
1094
- tabIndex={null}
1095
- >
1096
- <AngleRightIcon
1097
- color="currentColor"
1098
- noVerticalAlign={false}
1099
- size="sm"
1100
- >
1101
- <svg
1102
- aria-hidden={true}
1103
- aria-labelledby={null}
1104
- fill="currentColor"
1105
- height="1em"
1106
- role="img"
1107
- style={
1108
- Object {
1109
- "verticalAlign": "-0.125em",
1110
- }
1111
- }
1112
- viewBox="0 0 256 512"
1113
- width="1em"
1114
- >
1115
- <path
1116
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1117
- />
1118
- </svg>
1119
- </AngleRightIcon>
1120
- </button>
1121
- </NavList>
1122
- </nav>
1123
- </Nav>
1124
- </div>
1125
- </PageNavigation>
1126
- </div>
1127
- </PageGroup>
1128
- <PageSection
1129
- variant="default"
1130
- >
1131
- <section
1132
- className="pf-c-page__main-section"
1133
- >
1134
- Section with default background
1135
- </section>
1136
- </PageSection>
1137
- <PageSection
1138
- variant="light"
1139
- >
1140
- <section
1141
- className="pf-c-page__main-section pf-m-light"
1142
- >
1143
- Section with light background
1144
- </section>
1145
- </PageSection>
1146
- <PageSection
1147
- variant="dark"
1148
- >
1149
- <section
1150
- className="pf-c-page__main-section pf-m-dark-200"
1151
- >
1152
- Section with dark background
564
+ <path
565
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
566
+ />
567
+ </svg>
568
+ </span>
569
+ <a
570
+ class="pf-c-breadcrumb__link"
571
+ href="#"
572
+ >
573
+ Section Title
574
+ </a>
575
+ </li>
576
+ <li
577
+ class="pf-c-breadcrumb__item"
578
+ >
579
+ <span
580
+ class="pf-c-breadcrumb__item-divider"
581
+ >
582
+ <svg
583
+ aria-hidden="true"
584
+ fill="currentColor"
585
+ height="1em"
586
+ role="img"
587
+ style="vertical-align: -0.125em;"
588
+ viewBox="0 0 256 512"
589
+ width="1em"
590
+ >
591
+ <path
592
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
593
+ />
594
+ </svg>
595
+ </span>
596
+ <a
597
+ aria-current="page"
598
+ class="pf-c-breadcrumb__link pf-m-current"
599
+ href="#"
600
+ >
601
+ Section Landing
602
+ </a>
603
+ </li>
604
+ </ol>
605
+ </nav>
1153
606
  </section>
1154
- </PageSection>
1155
- <PageSection
1156
- variant="darker"
1157
- >
1158
- <section
1159
- className="pf-c-page__main-section pf-m-dark-100"
607
+ <div
608
+ class="pf-c-page__main-nav"
1160
609
  >
1161
- Section with darker background
1162
- </section>
1163
- </PageSection>
1164
- </main>
1165
- </div>
1166
- </Page>
1167
- `;
1168
-
1169
- exports[`Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = `
1170
- <Page
1171
- aria-label="Page layout"
1172
- breadcrumb={
1173
- <PageBreadcrumb>
1174
- <Breadcrumb>
1175
- <BreadcrumbItem>
1176
- Section Home
1177
- </BreadcrumbItem>
1178
- <BreadcrumbItem
1179
- to="#"
1180
- >
1181
- Section Title
1182
- </BreadcrumbItem>
1183
- <BreadcrumbItem
1184
- to="#"
1185
- >
1186
- Section Title
1187
- </BreadcrumbItem>
1188
- <BreadcrumbItem
1189
- isActive={true}
1190
- to="#"
1191
- >
1192
- Section Landing
1193
- </BreadcrumbItem>
1194
- </Breadcrumb>
1195
- </PageBreadcrumb>
1196
- }
1197
- className="my-page-class"
1198
- defaultManagedSidebarIsOpen={true}
1199
- getBreakpoint={[Function]}
1200
- groupProps={
1201
- Object {
1202
- "hasShadowTop": true,
1203
- "sticky": "bottom",
1204
- }
1205
- }
1206
- header={
1207
- <PageHeader
1208
- headerTools="PageHeaderTools | Avatar"
1209
- logo="Logo"
1210
- topNav="Navigation"
1211
- />
1212
- }
1213
- id="PageId"
1214
- isBreadcrumbGrouped={true}
1215
- isBreadcrumbWidthLimited={false}
1216
- isManagedSidebar={false}
1217
- isNotificationDrawerExpanded={false}
1218
- isTertiaryNavGrouped={true}
1219
- mainTabIndex={-1}
1220
- onNotificationDrawerExpand={[Function]}
1221
- onPageResize={[Function]}
1222
- sidebar={
1223
- <PageSidebar
1224
- isNavOpen={true}
1225
- />
1226
- }
1227
- tertiaryNav={
1228
- <Nav
1229
- aria-label="Nav"
1230
- onSelect={[Function]}
1231
- onToggle={[Function]}
1232
- ouiaSafe={true}
1233
- theme="dark"
1234
- variant="tertiary"
1235
- >
1236
- <NavList
1237
- ariaLeftScroll="Scroll left"
1238
- ariaRightScroll="Scroll right"
1239
- >
1240
- <NavItem
1241
- isActive={true}
1242
- itemId={0}
1243
- >
1244
- System Panel
1245
- </NavItem>
1246
- <NavItem
1247
- itemId={1}
1248
- >
1249
- Policy
1250
- </NavItem>
1251
- <NavItem
1252
- itemId={2}
1253
- >
1254
- Authentication
1255
- </NavItem>
1256
- <NavItem
1257
- itemId={3}
1258
- >
1259
- Network Services
1260
- </NavItem>
1261
- <NavItem
1262
- itemId={4}
1263
- >
1264
- Server
1265
- </NavItem>
1266
- </NavList>
1267
- </Nav>
1268
- }
1269
- >
1270
- <div
1271
- aria-label="Page layout"
1272
- className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
1273
- id="PageId"
1274
- >
1275
- <PageHeader
1276
- headerTools="PageHeaderTools | Avatar"
1277
- logo="Logo"
1278
- topNav="Navigation"
1279
- >
1280
- <header
1281
- className="pf-c-page__header"
1282
- >
1283
- <div
1284
- className="pf-c-page__header-brand"
1285
- >
1286
- <a
1287
- className="pf-c-page__header-brand-link"
1288
- >
1289
- Logo
1290
- </a>
1291
- </div>
1292
- <div
1293
- className="pf-c-page__header-nav"
1294
- >
1295
- Navigation
1296
- </div>
1297
- PageHeaderTools | Avatar
1298
- </header>
1299
- </PageHeader>
1300
- <PageSidebar
1301
- isNavOpen={true}
1302
- >
1303
- <div
1304
- aria-hidden={false}
1305
- className="pf-c-page__sidebar pf-m-expanded"
1306
- id="page-sidebar"
1307
- >
1308
- <div
1309
- className="pf-topology-side-bar__body"
1310
- />
1311
- </div>
1312
- </PageSidebar>
1313
- <main
1314
- className="pf-c-page__main"
1315
- tabIndex={-1}
1316
- >
1317
- <PageGroup
1318
- hasShadowTop={true}
1319
- sticky="bottom"
1320
- >
1321
- <div
1322
- className="pf-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top"
1323
- >
1324
- <div
1325
- className="pf-c-page__main-nav"
610
+ <nav
611
+ aria-label="Nav"
612
+ class="pf-c-nav pf-m-horizontal pf-m-tertiary"
613
+ data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
614
+ data-ouia-component-type="PF4/Nav"
615
+ data-ouia-safe="true"
1326
616
  >
1327
- <Nav
1328
- aria-label="Nav"
1329
- onSelect={[Function]}
1330
- onToggle={[Function]}
1331
- ouiaSafe={true}
1332
- theme="dark"
1333
- variant="tertiary"
617
+ <button
618
+ aria-label="Scroll left"
619
+ class="pf-c-nav__scroll-button"
620
+ disabled=""
1334
621
  >
1335
- <nav
1336
- aria-label="Nav"
1337
- className="pf-c-nav pf-m-horizontal pf-m-tertiary"
1338
- data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
1339
- data-ouia-component-type="PF4/Nav"
1340
- data-ouia-safe={true}
622
+ <svg
623
+ aria-hidden="true"
624
+ fill="currentColor"
625
+ height="1em"
626
+ role="img"
627
+ style="vertical-align: -0.125em;"
628
+ viewBox="0 0 256 512"
629
+ width="1em"
1341
630
  >
1342
- <NavList
1343
- ariaLeftScroll="Scroll left"
1344
- ariaRightScroll="Scroll right"
631
+ <path
632
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
633
+ />
634
+ </svg>
635
+ </button>
636
+ <ul
637
+ class="pf-c-nav__list"
638
+ >
639
+ <li
640
+ class="pf-c-nav__item"
641
+ data-ouia-component-id="OUIA-Generated-NavItem-6"
642
+ data-ouia-component-type="PF4/NavItem"
643
+ data-ouia-safe="true"
644
+ >
645
+ <a
646
+ aria-current="page"
647
+ class="pf-c-nav__link pf-m-current"
1345
648
  >
1346
- <button
1347
- aria-label="Scroll left"
1348
- className="pf-c-nav__scroll-button"
1349
- disabled={true}
1350
- onClick={[Function]}
1351
- tabIndex={null}
1352
- >
1353
- <AngleLeftIcon
1354
- color="currentColor"
1355
- noVerticalAlign={false}
1356
- size="sm"
1357
- >
1358
- <svg
1359
- aria-hidden={true}
1360
- aria-labelledby={null}
1361
- fill="currentColor"
1362
- height="1em"
1363
- role="img"
1364
- style={
1365
- Object {
1366
- "verticalAlign": "-0.125em",
1367
- }
1368
- }
1369
- viewBox="0 0 256 512"
1370
- width="1em"
1371
- >
1372
- <path
1373
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1374
- />
1375
- </svg>
1376
- </AngleLeftIcon>
1377
- </button>
1378
- <ul
1379
- className="pf-c-nav__list"
1380
- onScroll={[Function]}
1381
- >
1382
- <NavItem
1383
- isActive={true}
1384
- itemId={0}
1385
- >
1386
- <li
1387
- className="pf-c-nav__item"
1388
- data-ouia-component-id="OUIA-Generated-NavItem-11"
1389
- data-ouia-component-type="PF4/NavItem"
1390
- data-ouia-safe={true}
1391
- onMouseOver={[Function]}
1392
- >
1393
- <a
1394
- aria-current="page"
1395
- className="pf-c-nav__link pf-m-current"
1396
- onClick={[Function]}
1397
- tabIndex={null}
1398
- >
1399
- System Panel
1400
- </a>
1401
- </li>
1402
- </NavItem>
1403
- <NavItem
1404
- itemId={1}
1405
- >
1406
- <li
1407
- className="pf-c-nav__item"
1408
- data-ouia-component-id="OUIA-Generated-NavItem-12"
1409
- data-ouia-component-type="PF4/NavItem"
1410
- data-ouia-safe={true}
1411
- onMouseOver={[Function]}
1412
- >
1413
- <a
1414
- aria-current={null}
1415
- className="pf-c-nav__link"
1416
- onClick={[Function]}
1417
- tabIndex={null}
1418
- >
1419
- Policy
1420
- </a>
1421
- </li>
1422
- </NavItem>
1423
- <NavItem
1424
- itemId={2}
1425
- >
1426
- <li
1427
- className="pf-c-nav__item"
1428
- data-ouia-component-id="OUIA-Generated-NavItem-13"
1429
- data-ouia-component-type="PF4/NavItem"
1430
- data-ouia-safe={true}
1431
- onMouseOver={[Function]}
1432
- >
1433
- <a
1434
- aria-current={null}
1435
- className="pf-c-nav__link"
1436
- onClick={[Function]}
1437
- tabIndex={null}
1438
- >
1439
- Authentication
1440
- </a>
1441
- </li>
1442
- </NavItem>
1443
- <NavItem
1444
- itemId={3}
1445
- >
1446
- <li
1447
- className="pf-c-nav__item"
1448
- data-ouia-component-id="OUIA-Generated-NavItem-14"
1449
- data-ouia-component-type="PF4/NavItem"
1450
- data-ouia-safe={true}
1451
- onMouseOver={[Function]}
1452
- >
1453
- <a
1454
- aria-current={null}
1455
- className="pf-c-nav__link"
1456
- onClick={[Function]}
1457
- tabIndex={null}
1458
- >
1459
- Network Services
1460
- </a>
1461
- </li>
1462
- </NavItem>
1463
- <NavItem
1464
- itemId={4}
1465
- >
1466
- <li
1467
- className="pf-c-nav__item"
1468
- data-ouia-component-id="OUIA-Generated-NavItem-15"
1469
- data-ouia-component-type="PF4/NavItem"
1470
- data-ouia-safe={true}
1471
- onMouseOver={[Function]}
1472
- >
1473
- <a
1474
- aria-current={null}
1475
- className="pf-c-nav__link"
1476
- onClick={[Function]}
1477
- tabIndex={null}
1478
- >
1479
- Server
1480
- </a>
1481
- </li>
1482
- </NavItem>
1483
- </ul>
1484
- <button
1485
- aria-label="Scroll right"
1486
- className="pf-c-nav__scroll-button"
1487
- disabled={true}
1488
- onClick={[Function]}
1489
- tabIndex={null}
1490
- >
1491
- <AngleRightIcon
1492
- color="currentColor"
1493
- noVerticalAlign={false}
1494
- size="sm"
1495
- >
1496
- <svg
1497
- aria-hidden={true}
1498
- aria-labelledby={null}
1499
- fill="currentColor"
1500
- height="1em"
1501
- role="img"
1502
- style={
1503
- Object {
1504
- "verticalAlign": "-0.125em",
1505
- }
1506
- }
1507
- viewBox="0 0 256 512"
1508
- width="1em"
1509
- >
1510
- <path
1511
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1512
- />
1513
- </svg>
1514
- </AngleRightIcon>
1515
- </button>
1516
- </NavList>
1517
- </nav>
1518
- </Nav>
1519
- </div>
1520
- <section
1521
- className="pf-c-page__main-breadcrumb"
1522
- >
1523
- <PageBreadcrumb>
1524
- <section
1525
- className="pf-c-page__main-breadcrumb"
649
+ System Panel
650
+ </a>
651
+ </li>
652
+ <li
653
+ class="pf-c-nav__item"
654
+ data-ouia-component-id="OUIA-Generated-NavItem-7"
655
+ data-ouia-component-type="PF4/NavItem"
656
+ data-ouia-safe="true"
1526
657
  >
1527
- <Breadcrumb>
1528
- <nav
1529
- aria-label="Breadcrumb"
1530
- className="pf-c-breadcrumb"
1531
- data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
1532
- data-ouia-component-type="PF4/Breadcrumb"
1533
- data-ouia-safe={true}
1534
- >
1535
- <ol
1536
- className="pf-c-breadcrumb__list"
1537
- >
1538
- <BreadcrumbItem
1539
- key=".0"
1540
- showDivider={false}
1541
- >
1542
- <li
1543
- className="pf-c-breadcrumb__item"
1544
- >
1545
- Section Home
1546
- </li>
1547
- </BreadcrumbItem>
1548
- <BreadcrumbItem
1549
- key=".1"
1550
- showDivider={true}
1551
- to="#"
1552
- >
1553
- <li
1554
- className="pf-c-breadcrumb__item"
1555
- >
1556
- <span
1557
- className="pf-c-breadcrumb__item-divider"
1558
- >
1559
- <AngleRightIcon
1560
- color="currentColor"
1561
- noVerticalAlign={false}
1562
- size="sm"
1563
- >
1564
- <svg
1565
- aria-hidden={true}
1566
- aria-labelledby={null}
1567
- fill="currentColor"
1568
- height="1em"
1569
- role="img"
1570
- style={
1571
- Object {
1572
- "verticalAlign": "-0.125em",
1573
- }
1574
- }
1575
- viewBox="0 0 256 512"
1576
- width="1em"
1577
- >
1578
- <path
1579
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1580
- />
1581
- </svg>
1582
- </AngleRightIcon>
1583
- </span>
1584
- <a
1585
- className="pf-c-breadcrumb__link"
1586
- href="#"
1587
- >
1588
- Section Title
1589
- </a>
1590
- </li>
1591
- </BreadcrumbItem>
1592
- <BreadcrumbItem
1593
- key=".2"
1594
- showDivider={true}
1595
- to="#"
1596
- >
1597
- <li
1598
- className="pf-c-breadcrumb__item"
1599
- >
1600
- <span
1601
- className="pf-c-breadcrumb__item-divider"
1602
- >
1603
- <AngleRightIcon
1604
- color="currentColor"
1605
- noVerticalAlign={false}
1606
- size="sm"
1607
- >
1608
- <svg
1609
- aria-hidden={true}
1610
- aria-labelledby={null}
1611
- fill="currentColor"
1612
- height="1em"
1613
- role="img"
1614
- style={
1615
- Object {
1616
- "verticalAlign": "-0.125em",
1617
- }
1618
- }
1619
- viewBox="0 0 256 512"
1620
- width="1em"
1621
- >
1622
- <path
1623
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1624
- />
1625
- </svg>
1626
- </AngleRightIcon>
1627
- </span>
1628
- <a
1629
- className="pf-c-breadcrumb__link"
1630
- href="#"
1631
- >
1632
- Section Title
1633
- </a>
1634
- </li>
1635
- </BreadcrumbItem>
1636
- <BreadcrumbItem
1637
- isActive={true}
1638
- key=".3"
1639
- showDivider={true}
1640
- to="#"
1641
- >
1642
- <li
1643
- className="pf-c-breadcrumb__item"
1644
- >
1645
- <span
1646
- className="pf-c-breadcrumb__item-divider"
1647
- >
1648
- <AngleRightIcon
1649
- color="currentColor"
1650
- noVerticalAlign={false}
1651
- size="sm"
1652
- >
1653
- <svg
1654
- aria-hidden={true}
1655
- aria-labelledby={null}
1656
- fill="currentColor"
1657
- height="1em"
1658
- role="img"
1659
- style={
1660
- Object {
1661
- "verticalAlign": "-0.125em",
1662
- }
1663
- }
1664
- viewBox="0 0 256 512"
1665
- width="1em"
1666
- >
1667
- <path
1668
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1669
- />
1670
- </svg>
1671
- </AngleRightIcon>
1672
- </span>
1673
- <a
1674
- aria-current="page"
1675
- className="pf-c-breadcrumb__link pf-m-current"
1676
- href="#"
1677
- >
1678
- Section Landing
1679
- </a>
1680
- </li>
1681
- </BreadcrumbItem>
1682
- </ol>
1683
- </nav>
1684
- </Breadcrumb>
1685
- </section>
1686
- </PageBreadcrumb>
1687
- </section>
658
+ <a
659
+ class="pf-c-nav__link"
660
+ >
661
+ Policy
662
+ </a>
663
+ </li>
664
+ <li
665
+ class="pf-c-nav__item"
666
+ data-ouia-component-id="OUIA-Generated-NavItem-8"
667
+ data-ouia-component-type="PF4/NavItem"
668
+ data-ouia-safe="true"
669
+ >
670
+ <a
671
+ class="pf-c-nav__link"
672
+ >
673
+ Authentication
674
+ </a>
675
+ </li>
676
+ <li
677
+ class="pf-c-nav__item"
678
+ data-ouia-component-id="OUIA-Generated-NavItem-9"
679
+ data-ouia-component-type="PF4/NavItem"
680
+ data-ouia-safe="true"
681
+ >
682
+ <a
683
+ class="pf-c-nav__link"
684
+ >
685
+ Network Services
686
+ </a>
687
+ </li>
688
+ <li
689
+ class="pf-c-nav__item"
690
+ data-ouia-component-id="OUIA-Generated-NavItem-10"
691
+ data-ouia-component-type="PF4/NavItem"
692
+ data-ouia-safe="true"
693
+ >
694
+ <a
695
+ class="pf-c-nav__link"
696
+ >
697
+ Server
698
+ </a>
699
+ </li>
700
+ </ul>
701
+ <button
702
+ aria-label="Scroll right"
703
+ class="pf-c-nav__scroll-button"
704
+ disabled=""
705
+ >
706
+ <svg
707
+ aria-hidden="true"
708
+ fill="currentColor"
709
+ height="1em"
710
+ role="img"
711
+ style="vertical-align: -0.125em;"
712
+ viewBox="0 0 256 512"
713
+ width="1em"
714
+ >
715
+ <path
716
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
717
+ />
718
+ </svg>
719
+ </button>
720
+ </nav>
1688
721
  </div>
1689
- </PageGroup>
1690
- <PageSection
1691
- variant="default"
722
+ </div>
723
+ <section
724
+ class="pf-c-page__main-section"
1692
725
  >
1693
- <section
1694
- className="pf-c-page__main-section"
1695
- >
1696
- Section with default background
1697
- </section>
1698
- </PageSection>
1699
- <PageSection
1700
- variant="light"
726
+ Section with default background
727
+ </section>
728
+ <section
729
+ class="pf-c-page__main-section pf-m-light"
1701
730
  >
1702
- <section
1703
- className="pf-c-page__main-section pf-m-light"
1704
- >
1705
- Section with light background
1706
- </section>
1707
- </PageSection>
1708
- <PageSection
1709
- variant="dark"
731
+ Section with light background
732
+ </section>
733
+ <section
734
+ class="pf-c-page__main-section pf-m-dark-200"
1710
735
  >
1711
- <section
1712
- className="pf-c-page__main-section pf-m-dark-200"
1713
- >
1714
- Section with dark background
1715
- </section>
1716
- </PageSection>
1717
- <PageSection
1718
- variant="darker"
736
+ Section with dark background
737
+ </section>
738
+ <section
739
+ class="pf-c-page__main-section pf-m-dark-100"
1719
740
  >
1720
- <section
1721
- className="pf-c-page__main-section pf-m-dark-100"
1722
- >
1723
- Section with darker background
1724
- </section>
1725
- </PageSection>
741
+ Section with darker background
742
+ </section>
1726
743
  </main>
1727
744
  </div>
1728
- </Page>
745
+ </DocumentFragment>
1729
746
  `;
1730
747
 
1731
- exports[`Check page to verify nav is created - PageNavigation syntax 1`] = `
1732
- <Page
1733
- aria-label="Page layout"
1734
- className="my-page-class"
1735
- defaultManagedSidebarIsOpen={true}
1736
- getBreakpoint={[Function]}
1737
- header={
1738
- <PageHeader
1739
- headerTools="PageHeaderTools | Avatar"
1740
- logo="Logo"
1741
- topNav="Navigation"
1742
- />
1743
- }
1744
- id="PageId"
1745
- isBreadcrumbWidthLimited={false}
1746
- isManagedSidebar={false}
1747
- isNotificationDrawerExpanded={false}
1748
- mainTabIndex={-1}
1749
- onNotificationDrawerExpand={[Function]}
1750
- onPageResize={[Function]}
1751
- sidebar={
1752
- <PageSidebar
1753
- isNavOpen={true}
1754
- />
1755
- }
1756
- >
748
+ exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = `
749
+ <DocumentFragment>
1757
750
  <div
1758
751
  aria-label="Page layout"
1759
- className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
752
+ class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
1760
753
  id="PageId"
1761
754
  >
1762
- <PageHeader
1763
- headerTools="PageHeaderTools | Avatar"
1764
- logo="Logo"
1765
- topNav="Navigation"
755
+ <header
756
+ class="pf-c-page__header"
1766
757
  >
1767
- <header
1768
- className="pf-c-page__header"
758
+ <div
759
+ class="pf-c-page__header-brand"
1769
760
  >
1770
- <div
1771
- className="pf-c-page__header-brand"
1772
- >
1773
- <a
1774
- className="pf-c-page__header-brand-link"
1775
- >
1776
- Logo
1777
- </a>
1778
- </div>
1779
- <div
1780
- className="pf-c-page__header-nav"
761
+ <a
762
+ class="pf-c-page__header-brand-link"
1781
763
  >
1782
- Navigation
1783
- </div>
1784
- PageHeaderTools | Avatar
1785
- </header>
1786
- </PageHeader>
1787
- <PageSidebar
1788
- isNavOpen={true}
1789
- >
764
+ Logo
765
+ </a>
766
+ </div>
1790
767
  <div
1791
- aria-hidden={false}
1792
- className="pf-c-page__sidebar pf-m-expanded"
1793
- id="page-sidebar"
768
+ class="pf-c-page__header-nav"
1794
769
  >
1795
- <div
1796
- className="pf-topology-side-bar__body"
1797
- />
770
+ Navigation
1798
771
  </div>
1799
- </PageSidebar>
772
+ PageHeaderTools | Avatar
773
+ </header>
774
+ <div
775
+ aria-hidden="false"
776
+ class="pf-c-page__sidebar pf-m-expanded"
777
+ id="page-sidebar"
778
+ >
779
+ <div
780
+ class="pf-topology-side-bar__body"
781
+ />
782
+ </div>
1800
783
  <main
1801
- className="pf-c-page__main"
1802
- tabIndex={-1}
784
+ class="pf-c-page__main"
785
+ tabindex="-1"
1803
786
  >
1804
- <PageNavigation>
787
+ <div
788
+ class="pf-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top"
789
+ >
1805
790
  <div
1806
- className="pf-c-page__main-nav"
791
+ class="pf-c-page__main-nav"
1807
792
  >
1808
- <Nav
793
+ <nav
1809
794
  aria-label="Nav"
1810
- onSelect={[Function]}
1811
- onToggle={[Function]}
1812
- ouiaSafe={true}
1813
- theme="dark"
1814
- variant="tertiary"
795
+ class="pf-c-nav pf-m-horizontal pf-m-tertiary"
796
+ data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
797
+ data-ouia-component-type="PF4/Nav"
798
+ data-ouia-safe="true"
799
+ >
800
+ <button
801
+ aria-label="Scroll left"
802
+ class="pf-c-nav__scroll-button"
803
+ disabled=""
804
+ >
805
+ <svg
806
+ aria-hidden="true"
807
+ fill="currentColor"
808
+ height="1em"
809
+ role="img"
810
+ style="vertical-align: -0.125em;"
811
+ viewBox="0 0 256 512"
812
+ width="1em"
813
+ >
814
+ <path
815
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
816
+ />
817
+ </svg>
818
+ </button>
819
+ <ul
820
+ class="pf-c-nav__list"
821
+ >
822
+ <li
823
+ class="pf-c-nav__item"
824
+ data-ouia-component-id="OUIA-Generated-NavItem-11"
825
+ data-ouia-component-type="PF4/NavItem"
826
+ data-ouia-safe="true"
827
+ >
828
+ <a
829
+ aria-current="page"
830
+ class="pf-c-nav__link pf-m-current"
831
+ >
832
+ System Panel
833
+ </a>
834
+ </li>
835
+ <li
836
+ class="pf-c-nav__item"
837
+ data-ouia-component-id="OUIA-Generated-NavItem-12"
838
+ data-ouia-component-type="PF4/NavItem"
839
+ data-ouia-safe="true"
840
+ >
841
+ <a
842
+ class="pf-c-nav__link"
843
+ >
844
+ Policy
845
+ </a>
846
+ </li>
847
+ <li
848
+ class="pf-c-nav__item"
849
+ data-ouia-component-id="OUIA-Generated-NavItem-13"
850
+ data-ouia-component-type="PF4/NavItem"
851
+ data-ouia-safe="true"
852
+ >
853
+ <a
854
+ class="pf-c-nav__link"
855
+ >
856
+ Authentication
857
+ </a>
858
+ </li>
859
+ <li
860
+ class="pf-c-nav__item"
861
+ data-ouia-component-id="OUIA-Generated-NavItem-14"
862
+ data-ouia-component-type="PF4/NavItem"
863
+ data-ouia-safe="true"
864
+ >
865
+ <a
866
+ class="pf-c-nav__link"
867
+ >
868
+ Network Services
869
+ </a>
870
+ </li>
871
+ <li
872
+ class="pf-c-nav__item"
873
+ data-ouia-component-id="OUIA-Generated-NavItem-15"
874
+ data-ouia-component-type="PF4/NavItem"
875
+ data-ouia-safe="true"
876
+ >
877
+ <a
878
+ class="pf-c-nav__link"
879
+ >
880
+ Server
881
+ </a>
882
+ </li>
883
+ </ul>
884
+ <button
885
+ aria-label="Scroll right"
886
+ class="pf-c-nav__scroll-button"
887
+ disabled=""
888
+ >
889
+ <svg
890
+ aria-hidden="true"
891
+ fill="currentColor"
892
+ height="1em"
893
+ role="img"
894
+ style="vertical-align: -0.125em;"
895
+ viewBox="0 0 256 512"
896
+ width="1em"
897
+ >
898
+ <path
899
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
900
+ />
901
+ </svg>
902
+ </button>
903
+ </nav>
904
+ </div>
905
+ <section
906
+ class="pf-c-page__main-breadcrumb"
907
+ >
908
+ <section
909
+ class="pf-c-page__main-breadcrumb"
1815
910
  >
1816
911
  <nav
1817
- aria-label="Nav"
1818
- className="pf-c-nav pf-m-horizontal pf-m-tertiary"
1819
- data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
1820
- data-ouia-component-type="PF4/Nav"
1821
- data-ouia-safe={true}
912
+ aria-label="Breadcrumb"
913
+ class="pf-c-breadcrumb"
914
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
915
+ data-ouia-component-type="PF4/Breadcrumb"
916
+ data-ouia-safe="true"
1822
917
  >
1823
- <NavList
1824
- ariaLeftScroll="Scroll left"
1825
- ariaRightScroll="Scroll right"
918
+ <ol
919
+ class="pf-c-breadcrumb__list"
1826
920
  >
1827
- <button
1828
- aria-label="Scroll left"
1829
- className="pf-c-nav__scroll-button"
1830
- disabled={true}
1831
- onClick={[Function]}
1832
- tabIndex={null}
921
+ <li
922
+ class="pf-c-breadcrumb__item"
1833
923
  >
1834
- <AngleLeftIcon
1835
- color="currentColor"
1836
- noVerticalAlign={false}
1837
- size="sm"
924
+ Section Home
925
+ </li>
926
+ <li
927
+ class="pf-c-breadcrumb__item"
928
+ >
929
+ <span
930
+ class="pf-c-breadcrumb__item-divider"
1838
931
  >
1839
932
  <svg
1840
- aria-hidden={true}
1841
- aria-labelledby={null}
933
+ aria-hidden="true"
1842
934
  fill="currentColor"
1843
935
  height="1em"
1844
936
  role="img"
1845
- style={
1846
- Object {
1847
- "verticalAlign": "-0.125em",
1848
- }
1849
- }
937
+ style="vertical-align: -0.125em;"
1850
938
  viewBox="0 0 256 512"
1851
939
  width="1em"
1852
940
  >
1853
941
  <path
1854
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
942
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1855
943
  />
1856
944
  </svg>
1857
- </AngleLeftIcon>
1858
- </button>
1859
- <ul
1860
- className="pf-c-nav__list"
1861
- onScroll={[Function]}
1862
- >
1863
- <NavItem
1864
- isActive={true}
1865
- itemId={0}
1866
- >
1867
- <li
1868
- className="pf-c-nav__item"
1869
- data-ouia-component-id="OUIA-Generated-NavItem-1"
1870
- data-ouia-component-type="PF4/NavItem"
1871
- data-ouia-safe={true}
1872
- onMouseOver={[Function]}
1873
- >
1874
- <a
1875
- aria-current="page"
1876
- className="pf-c-nav__link pf-m-current"
1877
- onClick={[Function]}
1878
- tabIndex={null}
1879
- >
1880
- System Panel
1881
- </a>
1882
- </li>
1883
- </NavItem>
1884
- <NavItem
1885
- itemId={1}
1886
- >
1887
- <li
1888
- className="pf-c-nav__item"
1889
- data-ouia-component-id="OUIA-Generated-NavItem-2"
1890
- data-ouia-component-type="PF4/NavItem"
1891
- data-ouia-safe={true}
1892
- onMouseOver={[Function]}
1893
- >
1894
- <a
1895
- aria-current={null}
1896
- className="pf-c-nav__link"
1897
- onClick={[Function]}
1898
- tabIndex={null}
1899
- >
1900
- Policy
1901
- </a>
1902
- </li>
1903
- </NavItem>
1904
- <NavItem
1905
- itemId={2}
945
+ </span>
946
+ <a
947
+ class="pf-c-breadcrumb__link"
948
+ href="#"
1906
949
  >
1907
- <li
1908
- className="pf-c-nav__item"
1909
- data-ouia-component-id="OUIA-Generated-NavItem-3"
1910
- data-ouia-component-type="PF4/NavItem"
1911
- data-ouia-safe={true}
1912
- onMouseOver={[Function]}
1913
- >
1914
- <a
1915
- aria-current={null}
1916
- className="pf-c-nav__link"
1917
- onClick={[Function]}
1918
- tabIndex={null}
1919
- >
1920
- Authentication
1921
- </a>
1922
- </li>
1923
- </NavItem>
1924
- <NavItem
1925
- itemId={3}
950
+ Section Title
951
+ </a>
952
+ </li>
953
+ <li
954
+ class="pf-c-breadcrumb__item"
955
+ >
956
+ <span
957
+ class="pf-c-breadcrumb__item-divider"
1926
958
  >
1927
- <li
1928
- className="pf-c-nav__item"
1929
- data-ouia-component-id="OUIA-Generated-NavItem-4"
1930
- data-ouia-component-type="PF4/NavItem"
1931
- data-ouia-safe={true}
1932
- onMouseOver={[Function]}
959
+ <svg
960
+ aria-hidden="true"
961
+ fill="currentColor"
962
+ height="1em"
963
+ role="img"
964
+ style="vertical-align: -0.125em;"
965
+ viewBox="0 0 256 512"
966
+ width="1em"
1933
967
  >
1934
- <a
1935
- aria-current={null}
1936
- className="pf-c-nav__link"
1937
- onClick={[Function]}
1938
- tabIndex={null}
1939
- >
1940
- Network Services
1941
- </a>
1942
- </li>
1943
- </NavItem>
1944
- <NavItem
1945
- itemId={4}
968
+ <path
969
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
970
+ />
971
+ </svg>
972
+ </span>
973
+ <a
974
+ class="pf-c-breadcrumb__link"
975
+ href="#"
1946
976
  >
1947
- <li
1948
- className="pf-c-nav__item"
1949
- data-ouia-component-id="OUIA-Generated-NavItem-5"
1950
- data-ouia-component-type="PF4/NavItem"
1951
- data-ouia-safe={true}
1952
- onMouseOver={[Function]}
1953
- >
1954
- <a
1955
- aria-current={null}
1956
- className="pf-c-nav__link"
1957
- onClick={[Function]}
1958
- tabIndex={null}
1959
- >
1960
- Server
1961
- </a>
1962
- </li>
1963
- </NavItem>
1964
- </ul>
1965
- <button
1966
- aria-label="Scroll right"
1967
- className="pf-c-nav__scroll-button"
1968
- disabled={true}
1969
- onClick={[Function]}
1970
- tabIndex={null}
977
+ Section Title
978
+ </a>
979
+ </li>
980
+ <li
981
+ class="pf-c-breadcrumb__item"
1971
982
  >
1972
- <AngleRightIcon
1973
- color="currentColor"
1974
- noVerticalAlign={false}
1975
- size="sm"
983
+ <span
984
+ class="pf-c-breadcrumb__item-divider"
1976
985
  >
1977
986
  <svg
1978
- aria-hidden={true}
1979
- aria-labelledby={null}
987
+ aria-hidden="true"
1980
988
  fill="currentColor"
1981
989
  height="1em"
1982
990
  role="img"
1983
- style={
1984
- Object {
1985
- "verticalAlign": "-0.125em",
1986
- }
1987
- }
991
+ style="vertical-align: -0.125em;"
1988
992
  viewBox="0 0 256 512"
1989
993
  width="1em"
1990
994
  >
@@ -1992,376 +996,401 @@ exports[`Check page to verify nav is created - PageNavigation syntax 1`] = `
1992
996
  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1993
997
  />
1994
998
  </svg>
1995
- </AngleRightIcon>
1996
- </button>
1997
- </NavList>
999
+ </span>
1000
+ <a
1001
+ aria-current="page"
1002
+ class="pf-c-breadcrumb__link pf-m-current"
1003
+ href="#"
1004
+ >
1005
+ Section Landing
1006
+ </a>
1007
+ </li>
1008
+ </ol>
1998
1009
  </nav>
1999
- </Nav>
2000
- </div>
2001
- </PageNavigation>
2002
- <PageSection
2003
- variant="default"
2004
- >
2005
- <section
2006
- className="pf-c-page__main-section"
2007
- >
2008
- Section with default background
1010
+ </section>
2009
1011
  </section>
2010
- </PageSection>
2011
- <PageSection
2012
- variant="light"
1012
+ </div>
1013
+ <section
1014
+ class="pf-c-page__main-section"
2013
1015
  >
2014
- <section
2015
- className="pf-c-page__main-section pf-m-light"
2016
- >
2017
- Section with light background
2018
- </section>
2019
- </PageSection>
2020
- <PageSection
2021
- variant="dark"
1016
+ Section with default background
1017
+ </section>
1018
+ <section
1019
+ class="pf-c-page__main-section pf-m-light"
2022
1020
  >
2023
- <section
2024
- className="pf-c-page__main-section pf-m-dark-200"
2025
- >
2026
- Section with dark background
2027
- </section>
2028
- </PageSection>
2029
- <PageSection
2030
- variant="darker"
1021
+ Section with light background
1022
+ </section>
1023
+ <section
1024
+ class="pf-c-page__main-section pf-m-dark-200"
2031
1025
  >
2032
- <section
2033
- className="pf-c-page__main-section pf-m-dark-100"
2034
- >
2035
- Section with darker background
2036
- </section>
2037
- </PageSection>
1026
+ Section with dark background
1027
+ </section>
1028
+ <section
1029
+ class="pf-c-page__main-section pf-m-dark-100"
1030
+ >
1031
+ Section with darker background
1032
+ </section>
2038
1033
  </main>
2039
1034
  </div>
2040
- </Page>
1035
+ </DocumentFragment>
2041
1036
  `;
2042
1037
 
2043
- exports[`Check page to verify skip to content points to main content region 1`] = `
2044
- <Page
2045
- aria-label="Page layout"
2046
- breadcrumb={
2047
- <Breadcrumb>
2048
- <BreadcrumbItem>
2049
- Section Home
2050
- </BreadcrumbItem>
2051
- <BreadcrumbItem
2052
- to="#"
2053
- >
2054
- Section Title
2055
- </BreadcrumbItem>
2056
- <BreadcrumbItem
2057
- to="#"
1038
+ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] = `
1039
+ <DocumentFragment>
1040
+ <div
1041
+ aria-label="Page layout"
1042
+ class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
1043
+ id="PageId"
1044
+ >
1045
+ <header
1046
+ class="pf-c-page__header"
1047
+ >
1048
+ <div
1049
+ class="pf-c-page__header-brand"
2058
1050
  >
2059
- Section Title
2060
- </BreadcrumbItem>
2061
- <BreadcrumbItem
2062
- isActive={true}
2063
- to="#"
1051
+ <a
1052
+ class="pf-c-page__header-brand-link"
1053
+ >
1054
+ Logo
1055
+ </a>
1056
+ </div>
1057
+ <div
1058
+ class="pf-c-page__header-nav"
2064
1059
  >
2065
- Section Landing
2066
- </BreadcrumbItem>
2067
- </Breadcrumb>
2068
- }
2069
- className="my-page-class"
2070
- defaultManagedSidebarIsOpen={true}
2071
- getBreakpoint={[Function]}
2072
- header={
2073
- <PageHeader
2074
- headerTools="PageHeaderTools | Avatar"
2075
- logo="Logo"
2076
- topNav="Navigation"
2077
- />
2078
- }
2079
- id="PageId"
2080
- isBreadcrumbWidthLimited={false}
2081
- isManagedSidebar={false}
2082
- isNotificationDrawerExpanded={false}
2083
- mainContainerId="main-content-page-layout-test-nav"
2084
- mainTabIndex={-1}
2085
- onNotificationDrawerExpand={[Function]}
2086
- onPageResize={[Function]}
2087
- sidebar={
2088
- <PageSidebar
2089
- isNavOpen={true}
2090
- />
2091
- }
2092
- skipToContent={
2093
- <SkipToContent
2094
- href="#main-content-page-layout-test-nav"
2095
- show={false}
1060
+ Navigation
1061
+ </div>
1062
+ PageHeaderTools | Avatar
1063
+ </header>
1064
+ <div
1065
+ aria-hidden="false"
1066
+ class="pf-c-page__sidebar pf-m-expanded"
1067
+ id="page-sidebar"
2096
1068
  >
2097
- Skip to Content
2098
- </SkipToContent>
2099
- }
2100
- >
1069
+ <div
1070
+ class="pf-topology-side-bar__body"
1071
+ />
1072
+ </div>
1073
+ <main
1074
+ class="pf-c-page__main"
1075
+ tabindex="-1"
1076
+ >
1077
+ <div
1078
+ class="pf-c-page__main-nav"
1079
+ >
1080
+ <nav
1081
+ aria-label="Nav"
1082
+ class="pf-c-nav pf-m-horizontal pf-m-tertiary"
1083
+ data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
1084
+ data-ouia-component-type="PF4/Nav"
1085
+ data-ouia-safe="true"
1086
+ >
1087
+ <button
1088
+ aria-label="Scroll left"
1089
+ class="pf-c-nav__scroll-button"
1090
+ disabled=""
1091
+ >
1092
+ <svg
1093
+ aria-hidden="true"
1094
+ fill="currentColor"
1095
+ height="1em"
1096
+ role="img"
1097
+ style="vertical-align: -0.125em;"
1098
+ viewBox="0 0 256 512"
1099
+ width="1em"
1100
+ >
1101
+ <path
1102
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1103
+ />
1104
+ </svg>
1105
+ </button>
1106
+ <ul
1107
+ class="pf-c-nav__list"
1108
+ >
1109
+ <li
1110
+ class="pf-c-nav__item"
1111
+ data-ouia-component-id="OUIA-Generated-NavItem-1"
1112
+ data-ouia-component-type="PF4/NavItem"
1113
+ data-ouia-safe="true"
1114
+ >
1115
+ <a
1116
+ aria-current="page"
1117
+ class="pf-c-nav__link pf-m-current"
1118
+ >
1119
+ System Panel
1120
+ </a>
1121
+ </li>
1122
+ <li
1123
+ class="pf-c-nav__item"
1124
+ data-ouia-component-id="OUIA-Generated-NavItem-2"
1125
+ data-ouia-component-type="PF4/NavItem"
1126
+ data-ouia-safe="true"
1127
+ >
1128
+ <a
1129
+ class="pf-c-nav__link"
1130
+ >
1131
+ Policy
1132
+ </a>
1133
+ </li>
1134
+ <li
1135
+ class="pf-c-nav__item"
1136
+ data-ouia-component-id="OUIA-Generated-NavItem-3"
1137
+ data-ouia-component-type="PF4/NavItem"
1138
+ data-ouia-safe="true"
1139
+ >
1140
+ <a
1141
+ class="pf-c-nav__link"
1142
+ >
1143
+ Authentication
1144
+ </a>
1145
+ </li>
1146
+ <li
1147
+ class="pf-c-nav__item"
1148
+ data-ouia-component-id="OUIA-Generated-NavItem-4"
1149
+ data-ouia-component-type="PF4/NavItem"
1150
+ data-ouia-safe="true"
1151
+ >
1152
+ <a
1153
+ class="pf-c-nav__link"
1154
+ >
1155
+ Network Services
1156
+ </a>
1157
+ </li>
1158
+ <li
1159
+ class="pf-c-nav__item"
1160
+ data-ouia-component-id="OUIA-Generated-NavItem-5"
1161
+ data-ouia-component-type="PF4/NavItem"
1162
+ data-ouia-safe="true"
1163
+ >
1164
+ <a
1165
+ class="pf-c-nav__link"
1166
+ >
1167
+ Server
1168
+ </a>
1169
+ </li>
1170
+ </ul>
1171
+ <button
1172
+ aria-label="Scroll right"
1173
+ class="pf-c-nav__scroll-button"
1174
+ disabled=""
1175
+ >
1176
+ <svg
1177
+ aria-hidden="true"
1178
+ fill="currentColor"
1179
+ height="1em"
1180
+ role="img"
1181
+ style="vertical-align: -0.125em;"
1182
+ viewBox="0 0 256 512"
1183
+ width="1em"
1184
+ >
1185
+ <path
1186
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1187
+ />
1188
+ </svg>
1189
+ </button>
1190
+ </nav>
1191
+ </div>
1192
+ <section
1193
+ class="pf-c-page__main-section"
1194
+ >
1195
+ Section with default background
1196
+ </section>
1197
+ <section
1198
+ class="pf-c-page__main-section pf-m-light"
1199
+ >
1200
+ Section with light background
1201
+ </section>
1202
+ <section
1203
+ class="pf-c-page__main-section pf-m-dark-200"
1204
+ >
1205
+ Section with dark background
1206
+ </section>
1207
+ <section
1208
+ class="pf-c-page__main-section pf-m-dark-100"
1209
+ >
1210
+ Section with darker background
1211
+ </section>
1212
+ </main>
1213
+ </div>
1214
+ </DocumentFragment>
1215
+ `;
1216
+
1217
+ exports[`Page Check page to verify skip to content points to main content region 1`] = `
1218
+ <DocumentFragment>
2101
1219
  <div
2102
1220
  aria-label="Page layout"
2103
- className="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
1221
+ class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
1222
+ data-testid="page-test-id"
2104
1223
  id="PageId"
2105
1224
  >
2106
- <SkipToContent
1225
+ <a
1226
+ class="pf-c-button pf-m-primary pf-c-skip-to-content"
2107
1227
  href="#main-content-page-layout-test-nav"
2108
- show={false}
2109
1228
  >
2110
- <a
2111
- className="pf-c-button pf-m-primary pf-c-skip-to-content"
2112
- href="#main-content-page-layout-test-nav"
2113
- >
2114
- Skip to Content
2115
- </a>
2116
- </SkipToContent>
2117
- <PageHeader
2118
- headerTools="PageHeaderTools | Avatar"
2119
- logo="Logo"
2120
- topNav="Navigation"
1229
+ Skip to Content
1230
+ </a>
1231
+ <header
1232
+ class="pf-c-page__header"
2121
1233
  >
2122
- <header
2123
- className="pf-c-page__header"
1234
+ <div
1235
+ class="pf-c-page__header-brand"
2124
1236
  >
2125
- <div
2126
- className="pf-c-page__header-brand"
2127
- >
2128
- <a
2129
- className="pf-c-page__header-brand-link"
2130
- >
2131
- Logo
2132
- </a>
2133
- </div>
2134
- <div
2135
- className="pf-c-page__header-nav"
1237
+ <a
1238
+ class="pf-c-page__header-brand-link"
2136
1239
  >
2137
- Navigation
2138
- </div>
2139
- PageHeaderTools | Avatar
2140
- </header>
2141
- </PageHeader>
2142
- <PageSidebar
2143
- isNavOpen={true}
2144
- >
1240
+ Logo
1241
+ </a>
1242
+ </div>
2145
1243
  <div
2146
- aria-hidden={false}
2147
- className="pf-c-page__sidebar pf-m-expanded"
2148
- id="page-sidebar"
1244
+ class="pf-c-page__header-nav"
2149
1245
  >
2150
- <div
2151
- className="pf-topology-side-bar__body"
2152
- />
1246
+ Navigation
2153
1247
  </div>
2154
- </PageSidebar>
1248
+ PageHeaderTools | Avatar
1249
+ </header>
1250
+ <div
1251
+ aria-hidden="false"
1252
+ class="pf-c-page__sidebar pf-m-expanded"
1253
+ id="page-sidebar"
1254
+ >
1255
+ <div
1256
+ class="pf-topology-side-bar__body"
1257
+ />
1258
+ </div>
2155
1259
  <main
2156
- className="pf-c-page__main"
1260
+ class="pf-c-page__main"
2157
1261
  id="main-content-page-layout-test-nav"
2158
- tabIndex={-1}
1262
+ tabindex="-1"
2159
1263
  >
2160
1264
  <section
2161
- className="pf-c-page__main-breadcrumb"
1265
+ class="pf-c-page__main-breadcrumb"
2162
1266
  >
2163
- <Breadcrumb>
2164
- <nav
2165
- aria-label="Breadcrumb"
2166
- className="pf-c-breadcrumb"
2167
- data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
2168
- data-ouia-component-type="PF4/Breadcrumb"
2169
- data-ouia-safe={true}
1267
+ <nav
1268
+ aria-label="Breadcrumb"
1269
+ class="pf-c-breadcrumb"
1270
+ data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
1271
+ data-ouia-component-type="PF4/Breadcrumb"
1272
+ data-ouia-safe="true"
1273
+ >
1274
+ <ol
1275
+ class="pf-c-breadcrumb__list"
2170
1276
  >
2171
- <ol
2172
- className="pf-c-breadcrumb__list"
1277
+ <li
1278
+ class="pf-c-breadcrumb__item"
2173
1279
  >
2174
- <BreadcrumbItem
2175
- key=".0"
2176
- showDivider={false}
1280
+ Section Home
1281
+ </li>
1282
+ <li
1283
+ class="pf-c-breadcrumb__item"
1284
+ >
1285
+ <span
1286
+ class="pf-c-breadcrumb__item-divider"
2177
1287
  >
2178
- <li
2179
- className="pf-c-breadcrumb__item"
1288
+ <svg
1289
+ aria-hidden="true"
1290
+ fill="currentColor"
1291
+ height="1em"
1292
+ role="img"
1293
+ style="vertical-align: -0.125em;"
1294
+ viewBox="0 0 256 512"
1295
+ width="1em"
2180
1296
  >
2181
- Section Home
2182
- </li>
2183
- </BreadcrumbItem>
2184
- <BreadcrumbItem
2185
- key=".1"
2186
- showDivider={true}
2187
- to="#"
1297
+ <path
1298
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1299
+ />
1300
+ </svg>
1301
+ </span>
1302
+ <a
1303
+ class="pf-c-breadcrumb__link"
1304
+ href="#"
2188
1305
  >
2189
- <li
2190
- className="pf-c-breadcrumb__item"
2191
- >
2192
- <span
2193
- className="pf-c-breadcrumb__item-divider"
2194
- >
2195
- <AngleRightIcon
2196
- color="currentColor"
2197
- noVerticalAlign={false}
2198
- size="sm"
2199
- >
2200
- <svg
2201
- aria-hidden={true}
2202
- aria-labelledby={null}
2203
- fill="currentColor"
2204
- height="1em"
2205
- role="img"
2206
- style={
2207
- Object {
2208
- "verticalAlign": "-0.125em",
2209
- }
2210
- }
2211
- viewBox="0 0 256 512"
2212
- width="1em"
2213
- >
2214
- <path
2215
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
2216
- />
2217
- </svg>
2218
- </AngleRightIcon>
2219
- </span>
2220
- <a
2221
- className="pf-c-breadcrumb__link"
2222
- href="#"
2223
- >
2224
- Section Title
2225
- </a>
2226
- </li>
2227
- </BreadcrumbItem>
2228
- <BreadcrumbItem
2229
- key=".2"
2230
- showDivider={true}
2231
- to="#"
1306
+ Section Title
1307
+ </a>
1308
+ </li>
1309
+ <li
1310
+ class="pf-c-breadcrumb__item"
1311
+ >
1312
+ <span
1313
+ class="pf-c-breadcrumb__item-divider"
2232
1314
  >
2233
- <li
2234
- className="pf-c-breadcrumb__item"
1315
+ <svg
1316
+ aria-hidden="true"
1317
+ fill="currentColor"
1318
+ height="1em"
1319
+ role="img"
1320
+ style="vertical-align: -0.125em;"
1321
+ viewBox="0 0 256 512"
1322
+ width="1em"
2235
1323
  >
2236
- <span
2237
- className="pf-c-breadcrumb__item-divider"
2238
- >
2239
- <AngleRightIcon
2240
- color="currentColor"
2241
- noVerticalAlign={false}
2242
- size="sm"
2243
- >
2244
- <svg
2245
- aria-hidden={true}
2246
- aria-labelledby={null}
2247
- fill="currentColor"
2248
- height="1em"
2249
- role="img"
2250
- style={
2251
- Object {
2252
- "verticalAlign": "-0.125em",
2253
- }
2254
- }
2255
- viewBox="0 0 256 512"
2256
- width="1em"
2257
- >
2258
- <path
2259
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
2260
- />
2261
- </svg>
2262
- </AngleRightIcon>
2263
- </span>
2264
- <a
2265
- className="pf-c-breadcrumb__link"
2266
- href="#"
2267
- >
2268
- Section Title
2269
- </a>
2270
- </li>
2271
- </BreadcrumbItem>
2272
- <BreadcrumbItem
2273
- isActive={true}
2274
- key=".3"
2275
- showDivider={true}
2276
- to="#"
1324
+ <path
1325
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1326
+ />
1327
+ </svg>
1328
+ </span>
1329
+ <a
1330
+ class="pf-c-breadcrumb__link"
1331
+ href="#"
2277
1332
  >
2278
- <li
2279
- className="pf-c-breadcrumb__item"
1333
+ Section Title
1334
+ </a>
1335
+ </li>
1336
+ <li
1337
+ class="pf-c-breadcrumb__item"
1338
+ >
1339
+ <span
1340
+ class="pf-c-breadcrumb__item-divider"
1341
+ >
1342
+ <svg
1343
+ aria-hidden="true"
1344
+ fill="currentColor"
1345
+ height="1em"
1346
+ role="img"
1347
+ style="vertical-align: -0.125em;"
1348
+ viewBox="0 0 256 512"
1349
+ width="1em"
2280
1350
  >
2281
- <span
2282
- className="pf-c-breadcrumb__item-divider"
2283
- >
2284
- <AngleRightIcon
2285
- color="currentColor"
2286
- noVerticalAlign={false}
2287
- size="sm"
2288
- >
2289
- <svg
2290
- aria-hidden={true}
2291
- aria-labelledby={null}
2292
- fill="currentColor"
2293
- height="1em"
2294
- role="img"
2295
- style={
2296
- Object {
2297
- "verticalAlign": "-0.125em",
2298
- }
2299
- }
2300
- viewBox="0 0 256 512"
2301
- width="1em"
2302
- >
2303
- <path
2304
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
2305
- />
2306
- </svg>
2307
- </AngleRightIcon>
2308
- </span>
2309
- <a
2310
- aria-current="page"
2311
- className="pf-c-breadcrumb__link pf-m-current"
2312
- href="#"
2313
- >
2314
- Section Landing
2315
- </a>
2316
- </li>
2317
- </BreadcrumbItem>
2318
- </ol>
2319
- </nav>
2320
- </Breadcrumb>
1351
+ <path
1352
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1353
+ />
1354
+ </svg>
1355
+ </span>
1356
+ <a
1357
+ aria-current="page"
1358
+ class="pf-c-breadcrumb__link pf-m-current"
1359
+ href="#"
1360
+ >
1361
+ Section Landing
1362
+ </a>
1363
+ </li>
1364
+ </ol>
1365
+ </nav>
2321
1366
  </section>
2322
- <PageSection
2323
- variant="default"
1367
+ <section
1368
+ class="pf-c-page__main-section"
2324
1369
  >
2325
- <section
2326
- className="pf-c-page__main-section"
2327
- >
2328
- Section with default background
2329
- </section>
2330
- </PageSection>
2331
- <PageSection
2332
- variant="light"
1370
+ Section with default background
1371
+ </section>
1372
+ <section
1373
+ class="pf-c-page__main-section pf-m-light"
2333
1374
  >
2334
- <section
2335
- className="pf-c-page__main-section pf-m-light"
2336
- >
2337
- Section with light background
2338
- </section>
2339
- </PageSection>
2340
- <PageSection
2341
- variant="dark"
1375
+ Section with light background
1376
+ </section>
1377
+ <section
1378
+ class="pf-c-page__main-section pf-m-dark-200"
2342
1379
  >
2343
- <section
2344
- className="pf-c-page__main-section pf-m-dark-200"
2345
- >
2346
- Section with dark background
2347
- </section>
2348
- </PageSection>
2349
- <PageSection
2350
- variant="darker"
1380
+ Section with dark background
1381
+ </section>
1382
+ <section
1383
+ class="pf-c-page__main-section pf-m-dark-100"
2351
1384
  >
2352
- <section
2353
- className="pf-c-page__main-section pf-m-dark-100"
2354
- >
2355
- Section with darker background
2356
- </section>
2357
- </PageSection>
1385
+ Section with darker background
1386
+ </section>
2358
1387
  </main>
2359
1388
  </div>
2360
- </Page>
1389
+ </DocumentFragment>
2361
1390
  `;
2362
1391
 
2363
- exports[`Check page vertical layout example against snapshot 1`] = `
2364
- <div>
1392
+ exports[`Page Check page vertical layout example against snapshot 1`] = `
1393
+ <DocumentFragment>
2365
1394
  <div
2366
1395
  aria-label="Page layout"
2367
1396
  class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
@@ -2418,5 +1447,5 @@ exports[`Check page vertical layout example against snapshot 1`] = `
2418
1447
  </section>
2419
1448
  </main>
2420
1449
  </div>
2421
- </div>
1450
+ </DocumentFragment>
2422
1451
  `;