@patternfly/react-core 4.202.17 → 4.202.20

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 (95) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/esm/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  3. package/dist/esm/components/CalendarMonth/CalendarMonth.js +12 -4
  4. package/dist/esm/components/CalendarMonth/CalendarMonth.js.map +1 -1
  5. package/dist/esm/components/NumberInput/NumberInput.d.ts +2 -0
  6. package/dist/esm/components/NumberInput/NumberInput.d.ts.map +1 -1
  7. package/dist/esm/components/NumberInput/NumberInput.js +2 -2
  8. package/dist/esm/components/NumberInput/NumberInput.js.map +1 -1
  9. package/dist/js/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  10. package/dist/js/components/CalendarMonth/CalendarMonth.js +12 -4
  11. package/dist/js/components/CalendarMonth/CalendarMonth.js.map +1 -1
  12. package/dist/js/components/NumberInput/NumberInput.d.ts +2 -0
  13. package/dist/js/components/NumberInput/NumberInput.d.ts.map +1 -1
  14. package/dist/js/components/NumberInput/NumberInput.js +2 -2
  15. package/dist/js/components/NumberInput/NumberInput.js.map +1 -1
  16. package/dist/umd/react-core.js +14 -6
  17. package/dist/umd/react-core.min.js +2 -2
  18. package/package.json +5 -5
  19. package/src/components/CalendarMonth/CalendarMonth.tsx +10 -4
  20. package/src/components/CalendarMonth/examples/CalendarMonth.md +9 -0
  21. package/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx +10 -0
  22. package/src/components/ContextSelector/examples/ContextSelector.md +3 -279
  23. package/src/components/ContextSelector/examples/ContextSelectorBasic.tsx +84 -0
  24. package/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx +85 -0
  25. package/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx +91 -0
  26. package/src/components/DescriptionList/examples/DescriptionList.md +22 -930
  27. package/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx +40 -0
  28. package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx +40 -0
  29. package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx +40 -0
  30. package/src/components/DescriptionList/examples/DescriptionListBasic.tsx +40 -0
  31. package/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx +42 -0
  32. package/src/components/DescriptionList/examples/DescriptionListCompact.tsx +40 -0
  33. package/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx +40 -0
  34. package/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx +40 -0
  35. package/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx +40 -0
  36. package/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx +40 -0
  37. package/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx +40 -0
  38. package/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx +44 -0
  39. package/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx +40 -0
  40. package/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx +40 -0
  41. package/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx +40 -0
  42. package/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx +50 -0
  43. package/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx +40 -0
  44. package/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx +40 -0
  45. package/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx +40 -0
  46. package/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx +45 -0
  47. package/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx +48 -0
  48. package/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx +62 -0
  49. package/src/components/Divider/examples/Divider.md +15 -68
  50. package/src/components/Divider/examples/DividerInsetMedium.tsx +4 -0
  51. package/src/components/Divider/examples/DividerInsetVariousBreakpoints.tsx +13 -0
  52. package/src/components/Divider/examples/DividerUsingDiv.tsx +4 -0
  53. package/src/components/Divider/examples/DividerUsingHr.tsx +4 -0
  54. package/src/components/Divider/examples/DividerUsingLi.tsx +10 -0
  55. package/src/components/Divider/examples/DividerVerticalFlex.tsx +10 -0
  56. package/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx +10 -0
  57. package/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +18 -0
  58. package/src/components/FormSelect/__tests__/FormSelect.test.tsx +0 -1
  59. package/src/components/List/__tests__/List.test.tsx +33 -33
  60. package/src/components/List/__tests__/__snapshots__/List.test.tsx.snap +33 -64
  61. package/src/components/Menu/__tests__/Menu.test.tsx +37 -33
  62. package/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap +3 -36
  63. package/src/components/Modal/__tests__/Modal.test.tsx +65 -67
  64. package/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx +13 -10
  65. package/src/components/Nav/__tests__/Nav.test.tsx +185 -214
  66. package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap +877 -1729
  67. package/src/components/NotificationDrawer/__tests__/NotificationDrawer.test.tsx +13 -15
  68. package/src/components/NotificationDrawer/__tests__/NotificationDrawerBody.test.tsx +13 -15
  69. package/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx +21 -27
  70. package/src/components/NotificationDrawer/__tests__/NotificationDrawerGroupList.test.tsx +13 -15
  71. package/src/components/NotificationDrawer/__tests__/NotificationDrawerHeader.test.tsx +25 -27
  72. package/src/components/NotificationDrawer/__tests__/NotificationDrawerList.test.tsx +17 -19
  73. package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx +20 -27
  74. package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemBody.test.tsx +17 -13
  75. package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx +30 -25
  76. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawer.test.tsx.snap +3 -5
  77. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerBody.test.tsx.snap +3 -5
  78. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap +9 -11
  79. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroupList.test.tsx.snap +3 -5
  80. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap +16 -18
  81. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerList.test.tsx.snap +7 -8
  82. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap +3 -5
  83. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemBody.test.tsx.snap +6 -8
  84. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap +12 -14
  85. package/src/components/NumberInput/NumberInput.tsx +4 -0
  86. package/src/components/NumberInput/examples/NumberInput.md +8 -0
  87. package/src/components/OverflowMenu/__tests__/OverflowMenu.test.tsx +15 -12
  88. package/src/components/OverflowMenu/__tests__/OverflowMenuControl.test.tsx +9 -8
  89. package/src/components/OverflowMenu/__tests__/OverflowMenuGroup.test.tsx +17 -18
  90. package/src/components/OverflowMenu/__tests__/OverflowMenuItem.test.tsx +10 -9
  91. package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenu.test.tsx.snap +6 -16
  92. package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuControl.test.tsx.snap +3 -15
  93. package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuItem.test.tsx.snap +3 -17
  94. package/src/components/Modal/__tests__/__snapshots__/ModalBoxCloseButton.test.tsx.snap +0 -16
  95. package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuGroup.test.tsx.snap +0 -33
package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap CHANGED
@@ -1,1950 +1,1098 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Dark Nav List 1`] = `
4
- <Nav
5
- className="test=nav-class"
6
- onSelect={[Function]}
7
- onToggle={[Function]}
8
- ouiaSafe={true}
9
- theme="dark"
10
- >
3
+ exports[`Nav Dark Nav List 1`] = `
4
+ <DocumentFragment>
11
5
  <nav
12
6
  aria-label="Global"
13
- className="pf-c-nav test=nav-class"
7
+ class="pf-c-nav test=nav-class"
14
8
  data-ouia-component-id="OUIA-Generated-Nav-2"
15
9
  data-ouia-component-type="PF4/Nav"
16
- data-ouia-safe={true}
10
+ data-ouia-safe="true"
17
11
  >
18
- <NavList
19
- ariaLeftScroll="Scroll left"
20
- ariaRightScroll="Scroll right"
21
- className="test-nav-list-class"
12
+ <ul
13
+ class="pf-c-nav__list test-nav-list-class"
22
14
  >
23
- <ul
24
- className="pf-c-nav__list test-nav-list-class"
25
- onScroll={[Function]}
15
+ <li
16
+ class="pf-c-nav__item test-nav-item-class"
17
+ data-ouia-component-id="OUIA-Generated-NavItem-5"
18
+ data-ouia-component-type="PF4/NavItem"
19
+ data-ouia-safe="true"
26
20
  >
27
- <NavItem
28
- className="test-nav-item-class"
29
- key="#link1"
30
- to="#link1"
21
+ <a
22
+ class="pf-c-nav__link test-nav-item-class"
23
+ href="#link1"
31
24
  >
32
- <li
33
- className="pf-c-nav__item test-nav-item-class"
34
- data-ouia-component-id="OUIA-Generated-NavItem-5"
35
- data-ouia-component-type="PF4/NavItem"
36
- data-ouia-safe={true}
37
- onMouseOver={[Function]}
38
- >
39
- <a
40
- aria-current={null}
41
- className="pf-c-nav__link test-nav-item-class"
42
- href="#link1"
43
- onClick={[Function]}
44
- tabIndex={null}
45
- >
46
- Link 1
47
- </a>
48
- </li>
49
- </NavItem>
50
- <NavItem
51
- className="test-nav-item-class"
52
- key="#link2"
53
- to="#link2"
25
+ Link 1
26
+ </a>
27
+ </li>
28
+ <li
29
+ class="pf-c-nav__item test-nav-item-class"
30
+ data-ouia-component-id="OUIA-Generated-NavItem-6"
31
+ data-ouia-component-type="PF4/NavItem"
32
+ data-ouia-safe="true"
33
+ >
34
+ <a
35
+ class="pf-c-nav__link test-nav-item-class"
36
+ href="#link2"
54
37
  >
55
- <li
56
- className="pf-c-nav__item test-nav-item-class"
57
- data-ouia-component-id="OUIA-Generated-NavItem-6"
58
- data-ouia-component-type="PF4/NavItem"
59
- data-ouia-safe={true}
60
- onMouseOver={[Function]}
61
- >
62
- <a
63
- aria-current={null}
64
- className="pf-c-nav__link test-nav-item-class"
65
- href="#link2"
66
- onClick={[Function]}
67
- tabIndex={null}
68
- >
69
- Link 2
70
- </a>
71
- </li>
72
- </NavItem>
73
- <NavItem
74
- className="test-nav-item-class"
75
- key="#link3"
76
- to="#link3"
38
+ Link 2
39
+ </a>
40
+ </li>
41
+ <li
42
+ class="pf-c-nav__item test-nav-item-class"
43
+ data-ouia-component-id="OUIA-Generated-NavItem-7"
44
+ data-ouia-component-type="PF4/NavItem"
45
+ data-ouia-safe="true"
46
+ >
47
+ <a
48
+ class="pf-c-nav__link test-nav-item-class"
49
+ href="#link3"
77
50
  >
78
- <li
79
- className="pf-c-nav__item test-nav-item-class"
80
- data-ouia-component-id="OUIA-Generated-NavItem-7"
81
- data-ouia-component-type="PF4/NavItem"
82
- data-ouia-safe={true}
83
- onMouseOver={[Function]}
84
- >
85
- <a
86
- aria-current={null}
87
- className="pf-c-nav__link test-nav-item-class"
88
- href="#link3"
89
- onClick={[Function]}
90
- tabIndex={null}
91
- >
92
- Link 3
93
- </a>
94
- </li>
95
- </NavItem>
96
- <NavItem
97
- className="test-nav-item-class"
98
- key="#link4"
99
- to="#link4"
51
+ Link 3
52
+ </a>
53
+ </li>
54
+ <li
55
+ class="pf-c-nav__item test-nav-item-class"
56
+ data-ouia-component-id="OUIA-Generated-NavItem-8"
57
+ data-ouia-component-type="PF4/NavItem"
58
+ data-ouia-safe="true"
59
+ >
60
+ <a
61
+ class="pf-c-nav__link test-nav-item-class"
62
+ href="#link4"
100
63
  >
101
- <li
102
- className="pf-c-nav__item test-nav-item-class"
103
- data-ouia-component-id="OUIA-Generated-NavItem-8"
104
- data-ouia-component-type="PF4/NavItem"
105
- data-ouia-safe={true}
106
- onMouseOver={[Function]}
107
- >
108
- <a
109
- aria-current={null}
110
- className="pf-c-nav__link test-nav-item-class"
111
- href="#link4"
112
- onClick={[Function]}
113
- tabIndex={null}
114
- >
115
- Link 4
116
- </a>
117
- </li>
118
- </NavItem>
119
- </ul>
120
- </NavList>
64
+ Link 4
65
+ </a>
66
+ </li>
67
+ </ul>
121
68
  </nav>
122
- </Nav>
69
+ </DocumentFragment>
123
70
  `;
124
71
 
125
- exports[`Default Nav List - Trigger item active update 1`] = `
126
- <Nav
127
- onSelect={[Function]}
128
- onToggle={[Function]}
129
- ouiaSafe={true}
130
- theme="dark"
131
- >
72
+ exports[`Nav Default Nav List - Trigger item active update 1`] = `
73
+ <DocumentFragment>
132
74
  <nav
133
75
  aria-label="Global"
134
- className="pf-c-nav"
135
- data-ouia-component-id="OUIA-Generated-Nav-1"
76
+ class="pf-c-nav"
77
+ data-ouia-component-id="OUIA-Generated-Nav-3"
136
78
  data-ouia-component-type="PF4/Nav"
137
- data-ouia-safe={true}
79
+ data-ouia-safe="true"
138
80
  >
139
- <NavList
140
- ariaLeftScroll="Scroll left"
141
- ariaRightScroll="Scroll right"
81
+ <ul
82
+ class="pf-c-nav__list"
142
83
  >
143
- <ul
144
- className="pf-c-nav__list"
145
- onScroll={[Function]}
84
+ <li
85
+ class="pf-c-nav__item"
86
+ data-ouia-component-id="OUIA-Generated-NavItem-9"
87
+ data-ouia-component-type="PF4/NavItem"
88
+ data-ouia-safe="true"
146
89
  >
147
- <NavItem
148
- key="#link1"
149
- to="#link1"
90
+ <a
91
+ class="pf-c-nav__link"
92
+ href="#link1"
150
93
  >
151
- <li
152
- className="pf-c-nav__item"
153
- data-ouia-component-id="OUIA-Generated-NavItem-1"
154
- data-ouia-component-type="PF4/NavItem"
155
- data-ouia-safe={true}
156
- onMouseOver={[Function]}
157
- >
158
- <a
159
- aria-current={null}
160
- className="pf-c-nav__link"
161
- href="#link1"
162
- onClick={[Function]}
163
- tabIndex={null}
164
- >
165
- Link 1
166
- </a>
167
- </li>
168
- </NavItem>
169
- <NavItem
170
- key="#link2"
171
- to="#link2"
94
+ Link 1
95
+ </a>
96
+ </li>
97
+ <li
98
+ class="pf-c-nav__item"
99
+ data-ouia-component-id="OUIA-Generated-NavItem-10"
100
+ data-ouia-component-type="PF4/NavItem"
101
+ data-ouia-safe="true"
102
+ >
103
+ <a
104
+ class="pf-c-nav__link"
105
+ href="#link2"
172
106
  >
173
- <li
174
- className="pf-c-nav__item"
175
- data-ouia-component-id="OUIA-Generated-NavItem-2"
176
- data-ouia-component-type="PF4/NavItem"
177
- data-ouia-safe={true}
178
- onMouseOver={[Function]}
179
- >
180
- <a
181
- aria-current={null}
182
- className="pf-c-nav__link"
183
- href="#link2"
184
- onClick={[Function]}
185
- tabIndex={null}
186
- >
187
- Link 2
188
- </a>
189
- </li>
190
- </NavItem>
191
- <NavItem
192
- key="#link3"
193
- to="#link3"
107
+ Link 2
108
+ </a>
109
+ </li>
110
+ <li
111
+ class="pf-c-nav__item"
112
+ data-ouia-component-id="OUIA-Generated-NavItem-11"
113
+ data-ouia-component-type="PF4/NavItem"
114
+ data-ouia-safe="true"
115
+ >
116
+ <a
117
+ class="pf-c-nav__link"
118
+ href="#link3"
194
119
  >
195
- <li
196
- className="pf-c-nav__item"
197
- data-ouia-component-id="OUIA-Generated-NavItem-3"
198
- data-ouia-component-type="PF4/NavItem"
199
- data-ouia-safe={true}
200
- onMouseOver={[Function]}
201
- >
202
- <a
203
- aria-current={null}
204
- className="pf-c-nav__link"
205
- href="#link3"
206
- onClick={[Function]}
207
- tabIndex={null}
208
- >
209
- Link 3
210
- </a>
211
- </li>
212
- </NavItem>
213
- <NavItem
214
- key="#link4"
215
- to="#link4"
120
+ Link 3
121
+ </a>
122
+ </li>
123
+ <li
124
+ class="pf-c-nav__item"
125
+ data-ouia-component-id="OUIA-Generated-NavItem-12"
126
+ data-ouia-component-type="PF4/NavItem"
127
+ data-ouia-safe="true"
128
+ >
129
+ <a
130
+ class="pf-c-nav__link"
131
+ href="#link4"
216
132
  >
217
- <li
218
- className="pf-c-nav__item"
219
- data-ouia-component-id="OUIA-Generated-NavItem-4"
220
- data-ouia-component-type="PF4/NavItem"
221
- data-ouia-safe={true}
222
- onMouseOver={[Function]}
223
- >
224
- <a
225
- aria-current={null}
226
- className="pf-c-nav__link"
227
- href="#link4"
228
- onClick={[Function]}
229
- tabIndex={null}
230
- >
231
- Link 4
232
- </a>
233
- </li>
234
- </NavItem>
235
- </ul>
236
- </NavList>
133
+ Link 4
134
+ </a>
135
+ </li>
136
+ </ul>
237
137
  </nav>
238
- </Nav>
138
+ </DocumentFragment>
239
139
  `;
240
140
 
241
- exports[`Default Nav List 1`] = `
242
- <Nav
243
- className="test=nav-class"
244
- onSelect={[Function]}
245
- onToggle={[Function]}
246
- ouiaSafe={true}
247
- theme="dark"
248
- >
141
+ exports[`Nav Default Nav List 1`] = `
142
+ <DocumentFragment>
249
143
  <nav
250
144
  aria-label="Global"
251
- className="pf-c-nav test=nav-class"
145
+ class="pf-c-nav test-nav-class"
252
146
  data-ouia-component-id="OUIA-Generated-Nav-1"
253
147
  data-ouia-component-type="PF4/Nav"
254
- data-ouia-safe={true}
148
+ data-ouia-safe="true"
255
149
  >
256
- <NavList
257
- ariaLeftScroll="Scroll left"
258
- ariaRightScroll="Scroll right"
259
- className="test-nav-list-class"
150
+ <ul
151
+ class="pf-c-nav__list test-nav-list-class"
260
152
  >
261
- <ul
262
- className="pf-c-nav__list test-nav-list-class"
263
- onScroll={[Function]}
153
+ <li
154
+ class="pf-c-nav__item test-nav-item-class"
155
+ data-ouia-component-id="OUIA-Generated-NavItem-1"
156
+ data-ouia-component-type="PF4/NavItem"
157
+ data-ouia-safe="true"
264
158
  >
265
- <NavItem
266
- className="test-nav-item-class"
267
- key="#link1"
268
- to="#link1"
159
+ <a
160
+ class="pf-c-nav__link test-nav-item-class"
161
+ href="#link1"
269
162
  >
270
- <li
271
- className="pf-c-nav__item test-nav-item-class"
272
- data-ouia-component-id="OUIA-Generated-NavItem-1"
273
- data-ouia-component-type="PF4/NavItem"
274
- data-ouia-safe={true}
275
- onMouseOver={[Function]}
276
- >
277
- <a
278
- aria-current={null}
279
- className="pf-c-nav__link test-nav-item-class"
280
- href="#link1"
281
- onClick={[Function]}
282
- tabIndex={null}
283
- >
284
- Link 1
285
- </a>
286
- </li>
287
- </NavItem>
288
- <NavItem
289
- className="test-nav-item-class"
290
- key="#link2"
291
- to="#link2"
163
+ Link 1
164
+ </a>
165
+ </li>
166
+ <li
167
+ class="pf-c-nav__item test-nav-item-class"
168
+ data-ouia-component-id="OUIA-Generated-NavItem-2"
169
+ data-ouia-component-type="PF4/NavItem"
170
+ data-ouia-safe="true"
171
+ >
172
+ <a
173
+ class="pf-c-nav__link test-nav-item-class"
174
+ href="#link2"
292
175
  >
293
- <li
294
- className="pf-c-nav__item test-nav-item-class"
295
- data-ouia-component-id="OUIA-Generated-NavItem-2"
296
- data-ouia-component-type="PF4/NavItem"
297
- data-ouia-safe={true}
298
- onMouseOver={[Function]}
299
- >
300
- <a
301
- aria-current={null}
302
- className="pf-c-nav__link test-nav-item-class"
303
- href="#link2"
304
- onClick={[Function]}
305
- tabIndex={null}
306
- >
307
- Link 2
308
- </a>
309
- </li>
310
- </NavItem>
311
- <NavItem
312
- className="test-nav-item-class"
313
- key="#link3"
314
- to="#link3"
176
+ Link 2
177
+ </a>
178
+ </li>
179
+ <li
180
+ class="pf-c-nav__item test-nav-item-class"
181
+ data-ouia-component-id="OUIA-Generated-NavItem-3"
182
+ data-ouia-component-type="PF4/NavItem"
183
+ data-ouia-safe="true"
184
+ >
185
+ <a
186
+ class="pf-c-nav__link test-nav-item-class"
187
+ href="#link3"
315
188
  >
316
- <li
317
- className="pf-c-nav__item test-nav-item-class"
318
- data-ouia-component-id="OUIA-Generated-NavItem-3"
319
- data-ouia-component-type="PF4/NavItem"
320
- data-ouia-safe={true}
321
- onMouseOver={[Function]}
322
- >
323
- <a
324
- aria-current={null}
325
- className="pf-c-nav__link test-nav-item-class"
326
- href="#link3"
327
- onClick={[Function]}
328
- tabIndex={null}
329
- >
330
- Link 3
331
- </a>
332
- </li>
333
- </NavItem>
334
- <NavItem
335
- className="test-nav-item-class"
336
- key="#link4"
337
- to="#link4"
189
+ Link 3
190
+ </a>
191
+ </li>
192
+ <li
193
+ class="pf-c-nav__item test-nav-item-class"
194
+ data-ouia-component-id="OUIA-Generated-NavItem-4"
195
+ data-ouia-component-type="PF4/NavItem"
196
+ data-ouia-safe="true"
197
+ >
198
+ <a
199
+ class="pf-c-nav__link test-nav-item-class"
200
+ href="#link4"
338
201
  >
339
- <li
340
- className="pf-c-nav__item test-nav-item-class"
341
- data-ouia-component-id="OUIA-Generated-NavItem-4"
342
- data-ouia-component-type="PF4/NavItem"
343
- data-ouia-safe={true}
344
- onMouseOver={[Function]}
345
- >
346
- <a
347
- aria-current={null}
348
- className="pf-c-nav__link test-nav-item-class"
349
- href="#link4"
350
- onClick={[Function]}
351
- tabIndex={null}
352
- >
353
- Link 4
354
- </a>
355
- </li>
356
- </NavItem>
357
- </ul>
358
- </NavList>
202
+ Link 4
203
+ </a>
204
+ </li>
205
+ </ul>
359
206
  </nav>
360
- </Nav>
207
+ </DocumentFragment>
361
208
  `;
362
209
 
363
- exports[`Expandable Nav List - Trigger toggle 1`] = `
364
- <Nav
365
- onSelect={[Function]}
366
- onToggle={[Function]}
367
- ouiaSafe={true}
368
- theme="dark"
369
- >
210
+ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
211
+ <DocumentFragment>
370
212
  <nav
371
213
  aria-label="Global"
372
- className="pf-c-nav"
373
- data-ouia-component-id="OUIA-Generated-Nav-2"
214
+ class="pf-c-nav"
215
+ data-ouia-component-id="OUIA-Generated-Nav-1"
374
216
  data-ouia-component-type="PF4/Nav"
375
- data-ouia-safe={true}
217
+ data-ouia-safe="true"
376
218
  >
377
- <NavList
378
- ariaLeftScroll="Scroll left"
379
- ariaRightScroll="Scroll right"
219
+ <ul
220
+ class="pf-c-nav__list"
380
221
  >
381
- <ul
382
- className="pf-c-nav__list"
383
- onScroll={[Function]}
222
+ <li
223
+ class="pf-c-nav__item pf-m-expandable expandable-group"
224
+ data-ouia-component-id="OUIA-Generated-NavExpandable-1"
225
+ data-ouia-component-type="PF4/NavExpandable"
226
+ data-ouia-safe="true"
384
227
  >
385
- <NavExpandable
386
- className="expandable-group"
387
- groupId={null}
228
+ <button
229
+ aria-expanded="false"
230
+ class="pf-c-nav__link"
388
231
  id="grp-1"
389
- isActive={false}
390
- isExpanded={true}
391
- srText=""
392
- title="Section 1"
393
232
  >
394
- <li
395
- className="pf-c-nav__item pf-m-expandable pf-m-expanded expandable-group"
396
- data-ouia-component-id="OUIA-Generated-NavExpandable-1"
397
- data-ouia-component-type="PF4/NavExpandable"
398
- data-ouia-safe={true}
233
+ Section 1
234
+ <span
235
+ class="pf-c-nav__toggle"
399
236
  >
400
- <button
401
- aria-expanded={true}
402
- className="pf-c-nav__link"
403
- id="grp-1"
404
- onClick={[Function]}
405
- tabIndex={null}
237
+ <span
238
+ class="pf-c-nav__toggle-icon"
406
239
  >
407
- Section 1
408
- <span
409
- className="pf-c-nav__toggle"
240
+ <svg
241
+ aria-hidden="true"
242
+ fill="currentColor"
243
+ height="1em"
244
+ role="img"
245
+ style="vertical-align: -0.125em;"
246
+ viewBox="0 0 256 512"
247
+ width="1em"
410
248
  >
411
- <span
412
- className="pf-c-nav__toggle-icon"
413
- >
414
- <AngleRightIcon
415
- aria-hidden="true"
416
- color="currentColor"
417
- noVerticalAlign={false}
418
- size="sm"
419
- >
420
- <svg
421
- aria-hidden="true"
422
- aria-labelledby={null}
423
- fill="currentColor"
424
- height="1em"
425
- role="img"
426
- style={
427
- Object {
428
- "verticalAlign": "-0.125em",
429
- }
430
- }
431
- viewBox="0 0 256 512"
432
- width="1em"
433
- >
434
- <path
435
- 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"
436
- />
437
- </svg>
438
- </AngleRightIcon>
439
- </span>
440
- </span>
441
- </button>
442
- <section
443
- aria-labelledby="grp-1"
444
- className="pf-c-nav__subnav"
445
- hidden={null}
249
+ <path
250
+ 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"
251
+ />
252
+ </svg>
253
+ </span>
254
+ </span>
255
+ </button>
256
+ <section
257
+ aria-labelledby="grp-1"
258
+ class="pf-c-nav__subnav"
259
+ hidden=""
260
+ >
261
+ <ul
262
+ class="pf-c-nav__list"
263
+ >
264
+ <li
265
+ class="pf-c-nav__item"
266
+ data-ouia-component-id="OUIA-Generated-NavItem-1"
267
+ data-ouia-component-type="PF4/NavItem"
268
+ data-ouia-safe="true"
446
269
  >
447
- <ul
448
- className="pf-c-nav__list"
270
+ <a
271
+ class="pf-c-nav__link"
272
+ href="#link1"
449
273
  >
450
- <NavItem
451
- key="#link1"
452
- to="#link1"
453
- >
454
- <li
455
- className="pf-c-nav__item"
456
- data-ouia-component-id="OUIA-Generated-NavItem-5"
457
- data-ouia-component-type="PF4/NavItem"
458
- data-ouia-safe={true}
459
- onMouseOver={[Function]}
460
- >
461
- <a
462
- aria-current={null}
463
- className="pf-c-nav__link"
464
- href="#link1"
465
- onClick={[Function]}
466
- tabIndex={null}
467
- >
468
- Link 1
469
- </a>
470
- </li>
471
- </NavItem>
472
- <NavItem
473
- key="#link2"
474
- to="#link2"
475
- >
476
- <li
477
- className="pf-c-nav__item"
478
- data-ouia-component-id="OUIA-Generated-NavItem-6"
479
- data-ouia-component-type="PF4/NavItem"
480
- data-ouia-safe={true}
481
- onMouseOver={[Function]}
482
- >
483
- <a
484
- aria-current={null}
485
- className="pf-c-nav__link"
486
- href="#link2"
487
- onClick={[Function]}
488
- tabIndex={null}
489
- >
490
- Link 2
491
- </a>
492
- </li>
493
- </NavItem>
494
- <NavItem
495
- key="#link3"
496
- to="#link3"
497
- >
498
- <li
499
- className="pf-c-nav__item"
500
- data-ouia-component-id="OUIA-Generated-NavItem-7"
501
- data-ouia-component-type="PF4/NavItem"
502
- data-ouia-safe={true}
503
- onMouseOver={[Function]}
504
- >
505
- <a
506
- aria-current={null}
507
- className="pf-c-nav__link"
508
- href="#link3"
509
- onClick={[Function]}
510
- tabIndex={null}
511
- >
512
- Link 3
513
- </a>
514
- </li>
515
- </NavItem>
516
- <NavItem
517
- key="#link4"
518
- to="#link4"
519
- >
520
- <li
521
- className="pf-c-nav__item"
522
- data-ouia-component-id="OUIA-Generated-NavItem-8"
523
- data-ouia-component-type="PF4/NavItem"
524
- data-ouia-safe={true}
525
- onMouseOver={[Function]}
526
- >
527
- <a
528
- aria-current={null}
529
- className="pf-c-nav__link"
530
- href="#link4"
531
- onClick={[Function]}
532
- tabIndex={null}
533
- >
534
- Link 4
535
- </a>
536
- </li>
537
- </NavItem>
538
- </ul>
539
- </section>
540
- </li>
541
- </NavExpandable>
542
- </ul>
543
- </NavList>
274
+ Link 1
275
+ </a>
276
+ </li>
277
+ <li
278
+ class="pf-c-nav__item"
279
+ data-ouia-component-id="OUIA-Generated-NavItem-2"
280
+ data-ouia-component-type="PF4/NavItem"
281
+ data-ouia-safe="true"
282
+ >
283
+ <a
284
+ class="pf-c-nav__link"
285
+ href="#link2"
286
+ >
287
+ Link 2
288
+ </a>
289
+ </li>
290
+ <li
291
+ class="pf-c-nav__item"
292
+ data-ouia-component-id="OUIA-Generated-NavItem-3"
293
+ data-ouia-component-type="PF4/NavItem"
294
+ data-ouia-safe="true"
295
+ >
296
+ <a
297
+ class="pf-c-nav__link"
298
+ href="#link3"
299
+ >
300
+ Link 3
301
+ </a>
302
+ </li>
303
+ <li
304
+ class="pf-c-nav__item"
305
+ data-ouia-component-id="OUIA-Generated-NavItem-4"
306
+ data-ouia-component-type="PF4/NavItem"
307
+ data-ouia-safe="true"
308
+ >
309
+ <a
310
+ class="pf-c-nav__link"
311
+ href="#link4"
312
+ >
313
+ Link 4
314
+ </a>
315
+ </li>
316
+ </ul>
317
+ </section>
318
+ </li>
319
+ </ul>
544
320
  </nav>
545
- </Nav>
321
+ </DocumentFragment>
546
322
  `;
547
323
 
548
- exports[`Expandable Nav List 1`] = `
549
- <Nav
550
- onSelect={[Function]}
551
- onToggle={[Function]}
552
- ouiaSafe={true}
553
- theme="dark"
554
- >
324
+ exports[`Nav Expandable Nav List 1`] = `
325
+ <DocumentFragment>
555
326
  <nav
556
327
  aria-label="Global"
557
- className="pf-c-nav"
328
+ class="pf-c-nav"
558
329
  data-ouia-component-id="OUIA-Generated-Nav-4"
559
330
  data-ouia-component-type="PF4/Nav"
560
- data-ouia-safe={true}
331
+ data-ouia-safe="true"
561
332
  >
562
- <NavList
563
- ariaLeftScroll="Scroll left"
564
- ariaRightScroll="Scroll right"
333
+ <ul
334
+ class="pf-c-nav__list"
565
335
  >
566
- <ul
567
- className="pf-c-nav__list"
568
- onScroll={[Function]}
336
+ <li
337
+ class="pf-c-nav__item pf-m-expandable"
338
+ data-ouia-component-id="OUIA-Generated-NavExpandable-1"
339
+ data-ouia-component-type="PF4/NavExpandable"
340
+ data-ouia-safe="true"
569
341
  >
570
- <NavExpandable
571
- className=""
572
- groupId={null}
342
+ <button
343
+ aria-expanded="false"
344
+ class="pf-c-nav__link"
573
345
  id="grp-1"
574
- isActive={false}
575
- isExpanded={false}
576
- srText=""
577
- title="Section 1"
578
346
  >
579
- <li
580
- className="pf-c-nav__item pf-m-expandable"
581
- data-ouia-component-id="OUIA-Generated-NavExpandable-1"
582
- data-ouia-component-type="PF4/NavExpandable"
583
- data-ouia-safe={true}
347
+ Section 1
348
+ <span
349
+ class="pf-c-nav__toggle"
584
350
  >
585
- <button
586
- aria-expanded={false}
587
- className="pf-c-nav__link"
588
- id="grp-1"
589
- onClick={[Function]}
590
- tabIndex={null}
591
- >
592
- Section 1
593
- <span
594
- className="pf-c-nav__toggle"
595
- >
596
- <span
597
- className="pf-c-nav__toggle-icon"
598
- >
599
- <AngleRightIcon
600
- aria-hidden="true"
601
- color="currentColor"
602
- noVerticalAlign={false}
603
- size="sm"
604
- >
605
- <svg
606
- aria-hidden="true"
607
- aria-labelledby={null}
608
- fill="currentColor"
609
- height="1em"
610
- role="img"
611
- style={
612
- Object {
613
- "verticalAlign": "-0.125em",
614
- }
615
- }
616
- viewBox="0 0 256 512"
617
- width="1em"
618
- >
619
- <path
620
- 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"
621
- />
622
- </svg>
623
- </AngleRightIcon>
624
- </span>
625
- </span>
626
- </button>
627
- <section
628
- aria-labelledby="grp-1"
629
- className="pf-c-nav__subnav"
630
- hidden={true}
351
+ <span
352
+ class="pf-c-nav__toggle-icon"
631
353
  >
632
- <ul
633
- className="pf-c-nav__list"
354
+ <svg
355
+ aria-hidden="true"
356
+ fill="currentColor"
357
+ height="1em"
358
+ role="img"
359
+ style="vertical-align: -0.125em;"
360
+ viewBox="0 0 256 512"
361
+ width="1em"
634
362
  >
635
- <NavItem
636
- key="#link1"
637
- to="#link1"
638
- >
639
- <li
640
- className="pf-c-nav__item"
641
- data-ouia-component-id="OUIA-Generated-NavItem-13"
642
- data-ouia-component-type="PF4/NavItem"
643
- data-ouia-safe={true}
644
- onMouseOver={[Function]}
645
- >
646
- <a
647
- aria-current={null}
648
- className="pf-c-nav__link"
649
- href="#link1"
650
- onClick={[Function]}
651
- tabIndex={null}
652
- >
653
- Link 1
654
- </a>
655
- </li>
656
- </NavItem>
657
- <NavItem
658
- key="#link2"
659
- to="#link2"
660
- >
661
- <li
662
- className="pf-c-nav__item"
663
- data-ouia-component-id="OUIA-Generated-NavItem-14"
664
- data-ouia-component-type="PF4/NavItem"
665
- data-ouia-safe={true}
666
- onMouseOver={[Function]}
667
- >
668
- <a
669
- aria-current={null}
670
- className="pf-c-nav__link"
671
- href="#link2"
672
- onClick={[Function]}
673
- tabIndex={null}
674
- >
675
- Link 2
676
- </a>
677
- </li>
678
- </NavItem>
679
- <NavItem
680
- key="#link3"
681
- to="#link3"
682
- >
683
- <li
684
- className="pf-c-nav__item"
685
- data-ouia-component-id="OUIA-Generated-NavItem-15"
686
- data-ouia-component-type="PF4/NavItem"
687
- data-ouia-safe={true}
688
- onMouseOver={[Function]}
689
- >
690
- <a
691
- aria-current={null}
692
- className="pf-c-nav__link"
693
- href="#link3"
694
- onClick={[Function]}
695
- tabIndex={null}
696
- >
697
- Link 3
698
- </a>
699
- </li>
700
- </NavItem>
701
- <NavItem
702
- key="#link4"
703
- to="#link4"
704
- >
705
- <li
706
- className="pf-c-nav__item"
707
- data-ouia-component-id="OUIA-Generated-NavItem-16"
708
- data-ouia-component-type="PF4/NavItem"
709
- data-ouia-safe={true}
710
- onMouseOver={[Function]}
711
- >
712
- <a
713
- aria-current={null}
714
- className="pf-c-nav__link"
715
- href="#link4"
716
- onClick={[Function]}
717
- tabIndex={null}
718
- >
719
- Link 4
720
- </a>
721
- </li>
722
- </NavItem>
723
- </ul>
724
- </section>
725
- </li>
726
- </NavExpandable>
727
- </ul>
728
- </NavList>
729
- </nav>
730
- </Nav>
731
- `;
732
-
733
- exports[`Expandable Nav List with aria label 1`] = `
734
- <Nav
735
- aria-label="Test"
736
- onSelect={[Function]}
737
- onToggle={[Function]}
738
- ouiaSafe={true}
739
- theme="dark"
740
- >
741
- <nav
742
- aria-label="Test"
743
- className="pf-c-nav"
744
- data-ouia-component-id="OUIA-Generated-Nav-6"
745
- data-ouia-component-type="PF4/Nav"
746
- data-ouia-safe={true}
747
- >
748
- <NavList
749
- ariaLeftScroll="Scroll left"
750
- ariaRightScroll="Scroll right"
751
- >
752
- <ul
753
- className="pf-c-nav__list"
754
- onScroll={[Function]}
755
- >
756
- <NavExpandable
757
- className=""
758
- groupId={null}
759
- id="grp-1"
760
- isActive={false}
761
- isExpanded={false}
762
- srText="Section 1 - Example sub-navigation"
763
- title="Section 1"
363
+ <path
364
+ 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"
365
+ />
366
+ </svg>
367
+ </span>
368
+ </span>
369
+ </button>
370
+ <section
371
+ aria-labelledby="grp-1"
372
+ class="pf-c-nav__subnav"
373
+ hidden=""
764
374
  >
765
- <li
766
- className="pf-c-nav__item pf-m-expandable"
767
- data-ouia-component-id="OUIA-Generated-NavExpandable-3"
768
- data-ouia-component-type="PF4/NavExpandable"
769
- data-ouia-safe={true}
375
+ <ul
376
+ class="pf-c-nav__list"
770
377
  >
771
- <button
772
- aria-expanded={false}
773
- className="pf-c-nav__link"
774
- id={null}
775
- onClick={[Function]}
776
- tabIndex={null}
378
+ <li
379
+ class="pf-c-nav__item"
380
+ data-ouia-component-id="OUIA-Generated-NavItem-13"
381
+ data-ouia-component-type="PF4/NavItem"
382
+ data-ouia-safe="true"
383
+ >
384
+ <a
385
+ class="pf-c-nav__link"
386
+ href="#link1"
387
+ >
388
+ Link 1
389
+ </a>
390
+ </li>
391
+ <li
392
+ class="pf-c-nav__item"
393
+ data-ouia-component-id="OUIA-Generated-NavItem-14"
394
+ data-ouia-component-type="PF4/NavItem"
395
+ data-ouia-safe="true"
777
396
  >
778
- Section 1
779
- <span
780
- className="pf-c-nav__toggle"
397
+ <a
398
+ class="pf-c-nav__link"
399
+ href="#link2"
781
400
  >
782
- <span
783
- className="pf-c-nav__toggle-icon"
784
- >
785
- <AngleRightIcon
786
- aria-hidden="true"
787
- color="currentColor"
788
- noVerticalAlign={false}
789
- size="sm"
790
- >
791
- <svg
792
- aria-hidden="true"
793
- aria-labelledby={null}
794
- fill="currentColor"
795
- height="1em"
796
- role="img"
797
- style={
798
- Object {
799
- "verticalAlign": "-0.125em",
800
- }
801
- }
802
- viewBox="0 0 256 512"
803
- width="1em"
804
- >
805
- <path
806
- 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"
807
- />
808
- </svg>
809
- </AngleRightIcon>
810
- </span>
811
- </span>
812
- </button>
813
- <section
814
- aria-labelledby="grp-1"
815
- className="pf-c-nav__subnav"
816
- hidden={true}
401
+ Link 2
402
+ </a>
403
+ </li>
404
+ <li
405
+ class="pf-c-nav__item"
406
+ data-ouia-component-id="OUIA-Generated-NavItem-15"
407
+ data-ouia-component-type="PF4/NavItem"
408
+ data-ouia-safe="true"
817
409
  >
818
- <h2
819
- className="pf-u-screen-reader"
820
- id="grp-1"
410
+ <a
411
+ class="pf-c-nav__link"
412
+ href="#link3"
821
413
  >
822
- Section 1 - Example sub-navigation
823
- </h2>
824
- <ul
825
- className="pf-c-nav__list"
414
+ Link 3
415
+ </a>
416
+ </li>
417
+ <li
418
+ class="pf-c-nav__item"
419
+ data-ouia-component-id="OUIA-Generated-NavItem-16"
420
+ data-ouia-component-type="PF4/NavItem"
421
+ data-ouia-safe="true"
422
+ >
423
+ <a
424
+ class="pf-c-nav__link"
425
+ href="#link4"
826
426
  >
827
- <NavItem
828
- key="#link1"
829
- to="#link1"
830
- >
831
- <li
832
- className="pf-c-nav__item"
833
- data-ouia-component-id="OUIA-Generated-NavItem-21"
834
- data-ouia-component-type="PF4/NavItem"
835
- data-ouia-safe={true}
836
- onMouseOver={[Function]}
837
- >
838
- <a
839
- aria-current={null}
840
- className="pf-c-nav__link"
841
- href="#link1"
842
- onClick={[Function]}
843
- tabIndex={null}
844
- >
845
- Link 1
846
- </a>
847
- </li>
848
- </NavItem>
849
- <NavItem
850
- key="#link2"
851
- to="#link2"
852
- >
853
- <li
854
- className="pf-c-nav__item"
855
- data-ouia-component-id="OUIA-Generated-NavItem-22"
856
- data-ouia-component-type="PF4/NavItem"
857
- data-ouia-safe={true}
858
- onMouseOver={[Function]}
859
- >
860
- <a
861
- aria-current={null}
862
- className="pf-c-nav__link"
863
- href="#link2"
864
- onClick={[Function]}
865
- tabIndex={null}
866
- >
867
- Link 2
868
- </a>
869
- </li>
870
- </NavItem>
871
- <NavItem
872
- key="#link3"
873
- to="#link3"
874
- >
875
- <li
876
- className="pf-c-nav__item"
877
- data-ouia-component-id="OUIA-Generated-NavItem-23"
878
- data-ouia-component-type="PF4/NavItem"
879
- data-ouia-safe={true}
880
- onMouseOver={[Function]}
881
- >
882
- <a
883
- aria-current={null}
884
- className="pf-c-nav__link"
885
- href="#link3"
886
- onClick={[Function]}
887
- tabIndex={null}
888
- >
889
- Link 3
890
- </a>
891
- </li>
892
- </NavItem>
893
- <NavItem
894
- key="#link4"
895
- to="#link4"
896
- >
897
- <li
898
- className="pf-c-nav__item"
899
- data-ouia-component-id="OUIA-Generated-NavItem-24"
900
- data-ouia-component-type="PF4/NavItem"
901
- data-ouia-safe={true}
902
- onMouseOver={[Function]}
903
- >
904
- <a
905
- aria-current={null}
906
- className="pf-c-nav__link"
907
- href="#link4"
908
- onClick={[Function]}
909
- tabIndex={null}
910
- >
911
- Link 4
912
- </a>
913
- </li>
914
- </NavItem>
915
- </ul>
916
- </section>
917
- </li>
918
- </NavExpandable>
919
- </ul>
920
- </NavList>
427
+ Link 4
428
+ </a>
429
+ </li>
430
+ </ul>
431
+ </section>
432
+ </li>
433
+ </ul>
921
434
  </nav>
922
- </Nav>
435
+ </DocumentFragment>
923
436
  `;
924
437
 
925
- exports[`Horizontal Nav List 1`] = `
926
- <Nav
927
- onSelect={[Function]}
928
- onToggle={[Function]}
929
- ouiaSafe={true}
930
- theme="dark"
931
- variant="horizontal"
932
- >
438
+ exports[`Nav Expandable Nav List with aria label 1`] = `
439
+ <DocumentFragment>
933
440
  <nav
934
- aria-label="Global"
935
- className="pf-c-nav pf-m-horizontal"
936
- data-ouia-component-id="OUIA-Generated-Nav-horizontal-1"
441
+ aria-label="Test"
442
+ class="pf-c-nav"
443
+ data-ouia-component-id="OUIA-Generated-Nav-6"
937
444
  data-ouia-component-type="PF4/Nav"
938
- data-ouia-safe={true}
445
+ data-ouia-safe="true"
939
446
  >
940
- <NavList
941
- ariaLeftScroll="Scroll left"
942
- ariaRightScroll="Scroll right"
447
+ <ul
448
+ class="pf-c-nav__list"
943
449
  >
944
- <button
945
- aria-label="Scroll left"
946
- className="pf-c-nav__scroll-button"
947
- disabled={true}
948
- onClick={[Function]}
949
- tabIndex={null}
950
- >
951
- <AngleLeftIcon
952
- color="currentColor"
953
- noVerticalAlign={false}
954
- size="sm"
955
- >
956
- <svg
957
- aria-hidden={true}
958
- aria-labelledby={null}
959
- fill="currentColor"
960
- height="1em"
961
- role="img"
962
- style={
963
- Object {
964
- "verticalAlign": "-0.125em",
965
- }
966
- }
967
- viewBox="0 0 256 512"
968
- width="1em"
969
- >
970
- <path
971
- 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"
972
- />
973
- </svg>
974
- </AngleLeftIcon>
975
- </button>
976
- <ul
977
- className="pf-c-nav__list"
978
- onScroll={[Function]}
450
+ <li
451
+ class="pf-c-nav__item pf-m-expandable"
452
+ data-ouia-component-id="OUIA-Generated-NavExpandable-3"
453
+ data-ouia-component-type="PF4/NavExpandable"
454
+ data-ouia-safe="true"
979
455
  >
980
- <NavItem
981
- key="#link1"
982
- to="#link1"
456
+ <button
457
+ aria-expanded="false"
458
+ class="pf-c-nav__link"
983
459
  >
984
- <li
985
- className="pf-c-nav__item"
986
- data-ouia-component-id="OUIA-Generated-NavItem-33"
987
- data-ouia-component-type="PF4/NavItem"
988
- data-ouia-safe={true}
989
- onMouseOver={[Function]}
460
+ Section 1
461
+ <span
462
+ class="pf-c-nav__toggle"
990
463
  >
991
- <a
992
- aria-current={null}
993
- className="pf-c-nav__link"
994
- href="#link1"
995
- onClick={[Function]}
996
- tabIndex={null}
464
+ <span
465
+ class="pf-c-nav__toggle-icon"
997
466
  >
998
- Link 1
999
- </a>
1000
- </li>
1001
- </NavItem>
1002
- <NavItem
1003
- key="#link2"
1004
- to="#link2"
467
+ <svg
468
+ aria-hidden="true"
469
+ fill="currentColor"
470
+ height="1em"
471
+ role="img"
472
+ style="vertical-align: -0.125em;"
473
+ viewBox="0 0 256 512"
474
+ width="1em"
475
+ >
476
+ <path
477
+ 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"
478
+ />
479
+ </svg>
480
+ </span>
481
+ </span>
482
+ </button>
483
+ <section
484
+ aria-labelledby="grp-1"
485
+ class="pf-c-nav__subnav"
486
+ hidden=""
1005
487
  >
1006
- <li
1007
- className="pf-c-nav__item"
1008
- data-ouia-component-id="OUIA-Generated-NavItem-34"
1009
- data-ouia-component-type="PF4/NavItem"
1010
- data-ouia-safe={true}
1011
- onMouseOver={[Function]}
488
+ <h2
489
+ class="pf-u-screen-reader"
490
+ id="grp-1"
1012
491
  >
1013
- <a
1014
- aria-current={null}
1015
- className="pf-c-nav__link"
1016
- href="#link2"
1017
- onClick={[Function]}
1018
- tabIndex={null}
1019
- >
1020
- Link 2
1021
- </a>
1022
- </li>
1023
- </NavItem>
1024
- <NavItem
1025
- key="#link3"
1026
- to="#link3"
1027
- >
1028
- <li
1029
- className="pf-c-nav__item"
1030
- data-ouia-component-id="OUIA-Generated-NavItem-35"
1031
- data-ouia-component-type="PF4/NavItem"
1032
- data-ouia-safe={true}
1033
- onMouseOver={[Function]}
492
+ Section 1 - Example sub-navigation
493
+ </h2>
494
+ <ul
495
+ class="pf-c-nav__list"
1034
496
  >
1035
- <a
1036
- aria-current={null}
1037
- className="pf-c-nav__link"
1038
- href="#link3"
1039
- onClick={[Function]}
1040
- tabIndex={null}
497
+ <li
498
+ class="pf-c-nav__item"
499
+ data-ouia-component-id="OUIA-Generated-NavItem-21"
500
+ data-ouia-component-type="PF4/NavItem"
501
+ data-ouia-safe="true"
1041
502
  >
1042
- Link 3
1043
- </a>
1044
- </li>
1045
- </NavItem>
1046
- <NavItem
1047
- key="#link4"
1048
- to="#link4"
1049
- >
1050
- <li
1051
- className="pf-c-nav__item"
1052
- data-ouia-component-id="OUIA-Generated-NavItem-36"
1053
- data-ouia-component-type="PF4/NavItem"
1054
- data-ouia-safe={true}
1055
- onMouseOver={[Function]}
1056
- >
1057
- <a
1058
- aria-current={null}
1059
- className="pf-c-nav__link"
1060
- href="#link4"
1061
- onClick={[Function]}
1062
- tabIndex={null}
503
+ <a
504
+ class="pf-c-nav__link"
505
+ href="#link1"
506
+ >
507
+ Link 1
508
+ </a>
509
+ </li>
510
+ <li
511
+ class="pf-c-nav__item"
512
+ data-ouia-component-id="OUIA-Generated-NavItem-22"
513
+ data-ouia-component-type="PF4/NavItem"
514
+ data-ouia-safe="true"
1063
515
  >
1064
- Link 4
1065
- </a>
1066
- </li>
1067
- </NavItem>
1068
- </ul>
1069
- <button
1070
- aria-label="Scroll right"
1071
- className="pf-c-nav__scroll-button"
1072
- disabled={true}
1073
- onClick={[Function]}
1074
- tabIndex={null}
1075
- >
1076
- <AngleRightIcon
1077
- color="currentColor"
1078
- noVerticalAlign={false}
1079
- size="sm"
1080
- >
1081
- <svg
1082
- aria-hidden={true}
1083
- aria-labelledby={null}
1084
- fill="currentColor"
1085
- height="1em"
1086
- role="img"
1087
- style={
1088
- Object {
1089
- "verticalAlign": "-0.125em",
1090
- }
1091
- }
1092
- viewBox="0 0 256 512"
1093
- width="1em"
1094
- >
1095
- <path
1096
- 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"
1097
- />
1098
- </svg>
1099
- </AngleRightIcon>
1100
- </button>
1101
- </NavList>
516
+ <a
517
+ class="pf-c-nav__link"
518
+ href="#link2"
519
+ >
520
+ Link 2
521
+ </a>
522
+ </li>
523
+ <li
524
+ class="pf-c-nav__item"
525
+ data-ouia-component-id="OUIA-Generated-NavItem-23"
526
+ data-ouia-component-type="PF4/NavItem"
527
+ data-ouia-safe="true"
528
+ >
529
+ <a
530
+ class="pf-c-nav__link"
531
+ href="#link3"
532
+ >
533
+ Link 3
534
+ </a>
535
+ </li>
536
+ <li
537
+ class="pf-c-nav__item"
538
+ data-ouia-component-id="OUIA-Generated-NavItem-24"
539
+ data-ouia-component-type="PF4/NavItem"
540
+ data-ouia-safe="true"
541
+ >
542
+ <a
543
+ class="pf-c-nav__link"
544
+ href="#link4"
545
+ >
546
+ Link 4
547
+ </a>
548
+ </li>
549
+ </ul>
550
+ </section>
551
+ </li>
552
+ </ul>
1102
553
  </nav>
1103
- </Nav>
554
+ </DocumentFragment>
1104
555
  `;
1105
556
 
1106
- exports[`Horizontal SubNav List 1`] = `
1107
- <Nav
1108
- onSelect={[Function]}
1109
- onToggle={[Function]}
1110
- ouiaSafe={true}
1111
- theme="dark"
1112
- variant="horizontal-subnav"
1113
- >
557
+ exports[`Nav Horizontal Nav List 1`] = `
558
+ <DocumentFragment>
1114
559
  <nav
1115
560
  aria-label="Global"
1116
- className="pf-c-nav pf-m-horizontal-subnav"
1117
- data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
561
+ class="pf-c-nav pf-m-horizontal"
562
+ data-ouia-component-id="OUIA-Generated-Nav-horizontal-1"
1118
563
  data-ouia-component-type="PF4/Nav"
1119
- data-ouia-safe={true}
564
+ data-ouia-safe="true"
1120
565
  >
1121
- <NavList
1122
- ariaLeftScroll="Scroll left"
1123
- ariaRightScroll="Scroll right"
566
+ <button
567
+ aria-label="Scroll left"
568
+ class="pf-c-nav__scroll-button"
569
+ disabled=""
1124
570
  >
1125
- <button
1126
- aria-label="Scroll left"
1127
- className="pf-c-nav__scroll-button"
1128
- disabled={true}
1129
- onClick={[Function]}
1130
- tabIndex={null}
571
+ <svg
572
+ aria-hidden="true"
573
+ fill="currentColor"
574
+ height="1em"
575
+ role="img"
576
+ style="vertical-align: -0.125em;"
577
+ viewBox="0 0 256 512"
578
+ width="1em"
1131
579
  >
1132
- <AngleLeftIcon
1133
- color="currentColor"
1134
- noVerticalAlign={false}
1135
- size="sm"
1136
- >
1137
- <svg
1138
- aria-hidden={true}
1139
- aria-labelledby={null}
1140
- fill="currentColor"
1141
- height="1em"
1142
- role="img"
1143
- style={
1144
- Object {
1145
- "verticalAlign": "-0.125em",
1146
- }
1147
- }
1148
- viewBox="0 0 256 512"
1149
- width="1em"
1150
- >
1151
- <path
1152
- 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"
1153
- />
1154
- </svg>
1155
- </AngleLeftIcon>
1156
- </button>
1157
- <ul
1158
- className="pf-c-nav__list"
1159
- onScroll={[Function]}
580
+ <path
581
+ 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"
582
+ />
583
+ </svg>
584
+ </button>
585
+ <ul
586
+ class="pf-c-nav__list"
587
+ >
588
+ <li
589
+ class="pf-c-nav__item"
590
+ data-ouia-component-id="OUIA-Generated-NavItem-33"
591
+ data-ouia-component-type="PF4/NavItem"
592
+ data-ouia-safe="true"
1160
593
  >
1161
- <NavItem
1162
- key="#link1"
1163
- to="#link1"
1164
- >
1165
- <li
1166
- className="pf-c-nav__item"
1167
- data-ouia-component-id="OUIA-Generated-NavItem-37"
1168
- data-ouia-component-type="PF4/NavItem"
1169
- data-ouia-safe={true}
1170
- onMouseOver={[Function]}
1171
- >
1172
- <a
1173
- aria-current={null}
1174
- className="pf-c-nav__link"
1175
- href="#link1"
1176
- onClick={[Function]}
1177
- tabIndex={null}
1178
- >
1179
- Link 1
1180
- </a>
1181
- </li>
1182
- </NavItem>
1183
- <NavItem
1184
- key="#link2"
1185
- to="#link2"
594
+ <a
595
+ class="pf-c-nav__link"
596
+ href="#link1"
1186
597
  >
1187
- <li
1188
- className="pf-c-nav__item"
1189
- data-ouia-component-id="OUIA-Generated-NavItem-38"
1190
- data-ouia-component-type="PF4/NavItem"
1191
- data-ouia-safe={true}
1192
- onMouseOver={[Function]}
1193
- >
1194
- <a
1195
- aria-current={null}
1196
- className="pf-c-nav__link"
1197
- href="#link2"
1198
- onClick={[Function]}
1199
- tabIndex={null}
1200
- >
1201
- Link 2
1202
- </a>
1203
- </li>
1204
- </NavItem>
1205
- <NavItem
1206
- key="#link3"
1207
- to="#link3"
598
+ Link 1
599
+ </a>
600
+ </li>
601
+ <li
602
+ class="pf-c-nav__item"
603
+ data-ouia-component-id="OUIA-Generated-NavItem-34"
604
+ data-ouia-component-type="PF4/NavItem"
605
+ data-ouia-safe="true"
606
+ >
607
+ <a
608
+ class="pf-c-nav__link"
609
+ href="#link2"
1208
610
  >
1209
- <li
1210
- className="pf-c-nav__item"
1211
- data-ouia-component-id="OUIA-Generated-NavItem-39"
1212
- data-ouia-component-type="PF4/NavItem"
1213
- data-ouia-safe={true}
1214
- onMouseOver={[Function]}
1215
- >
1216
- <a
1217
- aria-current={null}
1218
- className="pf-c-nav__link"
1219
- href="#link3"
1220
- onClick={[Function]}
1221
- tabIndex={null}
1222
- >
1223
- Link 3
1224
- </a>
1225
- </li>
1226
- </NavItem>
1227
- <NavItem
1228
- key="#link4"
1229
- to="#link4"
611
+ Link 2
612
+ </a>
613
+ </li>
614
+ <li
615
+ class="pf-c-nav__item"
616
+ data-ouia-component-id="OUIA-Generated-NavItem-35"
617
+ data-ouia-component-type="PF4/NavItem"
618
+ data-ouia-safe="true"
619
+ >
620
+ <a
621
+ class="pf-c-nav__link"
622
+ href="#link3"
1230
623
  >
1231
- <li
1232
- className="pf-c-nav__item"
1233
- data-ouia-component-id="OUIA-Generated-NavItem-40"
1234
- data-ouia-component-type="PF4/NavItem"
1235
- data-ouia-safe={true}
1236
- onMouseOver={[Function]}
1237
- >
1238
- <a
1239
- aria-current={null}
1240
- className="pf-c-nav__link"
1241
- href="#link4"
1242
- onClick={[Function]}
1243
- tabIndex={null}
1244
- >
1245
- Link 4
1246
- </a>
1247
- </li>
1248
- </NavItem>
1249
- </ul>
1250
- <button
1251
- aria-label="Scroll right"
1252
- className="pf-c-nav__scroll-button"
1253
- disabled={true}
1254
- onClick={[Function]}
1255
- tabIndex={null}
624
+ Link 3
625
+ </a>
626
+ </li>
627
+ <li
628
+ class="pf-c-nav__item"
629
+ data-ouia-component-id="OUIA-Generated-NavItem-36"
630
+ data-ouia-component-type="PF4/NavItem"
631
+ data-ouia-safe="true"
1256
632
  >
1257
- <AngleRightIcon
1258
- color="currentColor"
1259
- noVerticalAlign={false}
1260
- size="sm"
633
+ <a
634
+ class="pf-c-nav__link"
635
+ href="#link4"
1261
636
  >
1262
- <svg
1263
- aria-hidden={true}
1264
- aria-labelledby={null}
1265
- fill="currentColor"
1266
- height="1em"
1267
- role="img"
1268
- style={
1269
- Object {
1270
- "verticalAlign": "-0.125em",
1271
- }
1272
- }
1273
- viewBox="0 0 256 512"
1274
- width="1em"
1275
- >
1276
- <path
1277
- 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"
1278
- />
1279
- </svg>
1280
- </AngleRightIcon>
1281
- </button>
1282
- </NavList>
637
+ Link 4
638
+ </a>
639
+ </li>
640
+ </ul>
641
+ <button
642
+ aria-label="Scroll right"
643
+ class="pf-c-nav__scroll-button"
644
+ disabled=""
645
+ >
646
+ <svg
647
+ aria-hidden="true"
648
+ fill="currentColor"
649
+ height="1em"
650
+ role="img"
651
+ style="vertical-align: -0.125em;"
652
+ viewBox="0 0 256 512"
653
+ width="1em"
654
+ >
655
+ <path
656
+ 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"
657
+ />
658
+ </svg>
659
+ </button>
1283
660
  </nav>
1284
- </Nav>
661
+ </DocumentFragment>
1285
662
  `;
1286
663
 
1287
- exports[`Nav Grouped List 1`] = `
1288
- <Nav
1289
- onSelect={[Function]}
1290
- onToggle={[Function]}
1291
- ouiaSafe={true}
1292
- theme="dark"
1293
- >
664
+ exports[`Nav Horizontal SubNav List 1`] = `
665
+ <DocumentFragment>
1294
666
  <nav
1295
667
  aria-label="Global"
1296
- className="pf-c-nav"
1297
- data-ouia-component-id="OUIA-Generated-Nav-7"
668
+ class="pf-c-nav pf-m-horizontal-subnav"
669
+ data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
1298
670
  data-ouia-component-type="PF4/Nav"
1299
- data-ouia-safe={true}
671
+ data-ouia-safe="true"
1300
672
  >
1301
- <NavGroup
1302
- id="grp-1"
1303
- title="Section 1"
673
+ <button
674
+ aria-label="Scroll left"
675
+ class="pf-c-nav__scroll-button"
676
+ disabled=""
1304
677
  >
1305
- <section
1306
- aria-labelledby="grp-1"
1307
- className="pf-c-nav__section"
678
+ <svg
679
+ aria-hidden="true"
680
+ fill="currentColor"
681
+ height="1em"
682
+ role="img"
683
+ style="vertical-align: -0.125em;"
684
+ viewBox="0 0 256 512"
685
+ width="1em"
1308
686
  >
1309
- <h2
1310
- className="pf-c-nav__section-title"
1311
- id="grp-1"
1312
- >
1313
- Section 1
1314
- </h2>
1315
- <ul
1316
- className="pf-c-nav__list"
1317
- >
1318
- <NavList
1319
- ariaLeftScroll="Scroll left"
1320
- ariaRightScroll="Scroll right"
1321
- >
1322
- <ul
1323
- className="pf-c-nav__list"
1324
- onScroll={[Function]}
1325
- >
1326
- <NavItem
1327
- key="section1_#link1"
1328
- to="#link1"
1329
- >
1330
- <li
1331
- className="pf-c-nav__item"
1332
- data-ouia-component-id="OUIA-Generated-NavItem-25"
1333
- data-ouia-component-type="PF4/NavItem"
1334
- data-ouia-safe={true}
1335
- onMouseOver={[Function]}
1336
- >
1337
- <a
1338
- aria-current={null}
1339
- className="pf-c-nav__link"
1340
- href="#link1"
1341
- onClick={[Function]}
1342
- tabIndex={null}
1343
- >
1344
- Link 1
1345
- </a>
1346
- </li>
1347
- </NavItem>
1348
- <NavItem
1349
- key="section1_#link2"
1350
- to="#link2"
1351
- >
1352
- <li
1353
- className="pf-c-nav__item"
1354
- data-ouia-component-id="OUIA-Generated-NavItem-26"
1355
- data-ouia-component-type="PF4/NavItem"
1356
- data-ouia-safe={true}
1357
- onMouseOver={[Function]}
1358
- >
1359
- <a
1360
- aria-current={null}
1361
- className="pf-c-nav__link"
1362
- href="#link2"
1363
- onClick={[Function]}
1364
- tabIndex={null}
1365
- >
1366
- Link 2
1367
- </a>
1368
- </li>
1369
- </NavItem>
1370
- <NavItem
1371
- key="section1_#link3"
1372
- to="#link3"
1373
- >
1374
- <li
1375
- className="pf-c-nav__item"
1376
- data-ouia-component-id="OUIA-Generated-NavItem-27"
1377
- data-ouia-component-type="PF4/NavItem"
1378
- data-ouia-safe={true}
1379
- onMouseOver={[Function]}
1380
- >
1381
- <a
1382
- aria-current={null}
1383
- className="pf-c-nav__link"
1384
- href="#link3"
1385
- onClick={[Function]}
1386
- tabIndex={null}
1387
- >
1388
- Link 3
1389
- </a>
1390
- </li>
1391
- </NavItem>
1392
- <NavItem
1393
- key="section1_#link4"
1394
- to="#link4"
1395
- >
1396
- <li
1397
- className="pf-c-nav__item"
1398
- data-ouia-component-id="OUIA-Generated-NavItem-28"
1399
- data-ouia-component-type="PF4/NavItem"
1400
- data-ouia-safe={true}
1401
- onMouseOver={[Function]}
1402
- >
1403
- <a
1404
- aria-current={null}
1405
- className="pf-c-nav__link"
1406
- href="#link4"
1407
- onClick={[Function]}
1408
- tabIndex={null}
1409
- >
1410
- Link 4
1411
- </a>
1412
- </li>
1413
- </NavItem>
1414
- </ul>
1415
- </NavList>
1416
- </ul>
1417
- </section>
1418
- </NavGroup>
1419
- <NavGroup
1420
- id="grp-2"
1421
- title="Section 2"
687
+ <path
688
+ 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"
689
+ />
690
+ </svg>
691
+ </button>
692
+ <ul
693
+ class="pf-c-nav__list"
1422
694
  >
1423
- <section
1424
- aria-labelledby="grp-2"
1425
- className="pf-c-nav__section"
695
+ <li
696
+ class="pf-c-nav__item"
697
+ data-ouia-component-id="OUIA-Generated-NavItem-37"
698
+ data-ouia-component-type="PF4/NavItem"
699
+ data-ouia-safe="true"
1426
700
  >
1427
- <h2
1428
- className="pf-c-nav__section-title"
1429
- id="grp-2"
1430
- >
1431
- Section 2
1432
- </h2>
1433
- <ul
1434
- className="pf-c-nav__list"
701
+ <a
702
+ class="pf-c-nav__link"
703
+ href="#link1"
1435
704
  >
1436
- <NavList
1437
- ariaLeftScroll="Scroll left"
1438
- ariaRightScroll="Scroll right"
1439
- >
1440
- <ul
1441
- className="pf-c-nav__list"
1442
- onScroll={[Function]}
1443
- >
1444
- <NavItem
1445
- key="section2_#link1"
1446
- to="#link1"
1447
- >
1448
- <li
1449
- className="pf-c-nav__item"
1450
- data-ouia-component-id="OUIA-Generated-NavItem-29"
1451
- data-ouia-component-type="PF4/NavItem"
1452
- data-ouia-safe={true}
1453
- onMouseOver={[Function]}
1454
- >
1455
- <a
1456
- aria-current={null}
1457
- className="pf-c-nav__link"
1458
- href="#link1"
1459
- onClick={[Function]}
1460
- tabIndex={null}
1461
- >
1462
- Link 1
1463
- </a>
1464
- </li>
1465
- </NavItem>
1466
- <NavItem
1467
- key="section2_#link2"
1468
- to="#link2"
1469
- >
1470
- <li
1471
- className="pf-c-nav__item"
1472
- data-ouia-component-id="OUIA-Generated-NavItem-30"
1473
- data-ouia-component-type="PF4/NavItem"
1474
- data-ouia-safe={true}
1475
- onMouseOver={[Function]}
1476
- >
1477
- <a
1478
- aria-current={null}
1479
- className="pf-c-nav__link"
1480
- href="#link2"
1481
- onClick={[Function]}
1482
- tabIndex={null}
1483
- >
1484
- Link 2
1485
- </a>
1486
- </li>
1487
- </NavItem>
1488
- <NavItem
1489
- key="section2_#link3"
1490
- to="#link3"
1491
- >
1492
- <li
1493
- className="pf-c-nav__item"
1494
- data-ouia-component-id="OUIA-Generated-NavItem-31"
1495
- data-ouia-component-type="PF4/NavItem"
1496
- data-ouia-safe={true}
1497
- onMouseOver={[Function]}
1498
- >
1499
- <a
1500
- aria-current={null}
1501
- className="pf-c-nav__link"
1502
- href="#link3"
1503
- onClick={[Function]}
1504
- tabIndex={null}
1505
- >
1506
- Link 3
1507
- </a>
1508
- </li>
1509
- </NavItem>
1510
- <NavItem
1511
- key="section2_#link4"
1512
- to="#link4"
1513
- >
1514
- <li
1515
- className="pf-c-nav__item"
1516
- data-ouia-component-id="OUIA-Generated-NavItem-32"
1517
- data-ouia-component-type="PF4/NavItem"
1518
- data-ouia-safe={true}
1519
- onMouseOver={[Function]}
1520
- >
1521
- <a
1522
- aria-current={null}
1523
- className="pf-c-nav__link"
1524
- href="#link4"
1525
- onClick={[Function]}
1526
- tabIndex={null}
1527
- >
1528
- Link 4
1529
- </a>
1530
- </li>
1531
- </NavItem>
1532
- </ul>
1533
- </NavList>
1534
- </ul>
1535
- </section>
1536
- </NavGroup>
1537
- </nav>
1538
- </Nav>
1539
- `;
1540
-
1541
- exports[`Nav List with custom item nodes 1`] = `
1542
- <Nav
1543
- onSelect={[Function]}
1544
- onToggle={[Function]}
1545
- ouiaSafe={true}
1546
- theme="dark"
1547
- variant="tertiary"
1548
- >
1549
- <nav
1550
- aria-label="Local"
1551
- className="pf-c-nav pf-m-horizontal pf-m-tertiary"
1552
- data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
1553
- data-ouia-component-type="PF4/Nav"
1554
- data-ouia-safe={true}
1555
- >
1556
- <NavList
1557
- ariaLeftScroll="Scroll left"
1558
- ariaRightScroll="Scroll right"
1559
- >
1560
- <button
1561
- aria-label="Scroll left"
1562
- className="pf-c-nav__scroll-button"
1563
- disabled={true}
1564
- onClick={[Function]}
1565
- tabIndex={null}
705
+ Link 1
706
+ </a>
707
+ </li>
708
+ <li
709
+ class="pf-c-nav__item"
710
+ data-ouia-component-id="OUIA-Generated-NavItem-38"
711
+ data-ouia-component-type="PF4/NavItem"
712
+ data-ouia-safe="true"
1566
713
  >
1567
- <AngleLeftIcon
1568
- color="currentColor"
1569
- noVerticalAlign={false}
1570
- size="sm"
714
+ <a
715
+ class="pf-c-nav__link"
716
+ href="#link2"
1571
717
  >
1572
- <svg
1573
- aria-hidden={true}
1574
- aria-labelledby={null}
1575
- fill="currentColor"
1576
- height="1em"
1577
- role="img"
1578
- style={
1579
- Object {
1580
- "verticalAlign": "-0.125em",
1581
- }
1582
- }
1583
- viewBox="0 0 256 512"
1584
- width="1em"
1585
- >
1586
- <path
1587
- 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"
1588
- />
1589
- </svg>
1590
- </AngleLeftIcon>
1591
- </button>
1592
- <ul
1593
- className="pf-c-nav__list"
1594
- onScroll={[Function]}
718
+ Link 2
719
+ </a>
720
+ </li>
721
+ <li
722
+ class="pf-c-nav__item"
723
+ data-ouia-component-id="OUIA-Generated-NavItem-39"
724
+ data-ouia-component-type="PF4/NavItem"
725
+ data-ouia-safe="true"
1595
726
  >
1596
- <NavItem
1597
- className="test-nav-item-class"
1598
- to="/components/nav#link1"
727
+ <a
728
+ class="pf-c-nav__link"
729
+ href="#link3"
1599
730
  >
1600
- <li
1601
- className="pf-c-nav__item test-nav-item-class"
1602
- data-ouia-component-id="OUIA-Generated-NavItem-45"
1603
- data-ouia-component-type="PF4/NavItem"
1604
- data-ouia-safe={true}
1605
- onMouseOver={[Function]}
1606
- >
1607
- <div
1608
- aria-current={null}
1609
- className="pf-c-nav__link my-custom-node"
1610
- onClick={[Function]}
1611
- tabIndex={null}
1612
- >
1613
- My custom node
1614
- </div>
1615
- </li>
1616
- </NavItem>
1617
- </ul>
1618
- <button
1619
- aria-label="Scroll right"
1620
- className="pf-c-nav__scroll-button"
1621
- disabled={true}
1622
- onClick={[Function]}
1623
- tabIndex={null}
731
+ Link 3
732
+ </a>
733
+ </li>
734
+ <li
735
+ class="pf-c-nav__item"
736
+ data-ouia-component-id="OUIA-Generated-NavItem-40"
737
+ data-ouia-component-type="PF4/NavItem"
738
+ data-ouia-safe="true"
1624
739
  >
1625
- <AngleRightIcon
1626
- color="currentColor"
1627
- noVerticalAlign={false}
1628
- size="sm"
740
+ <a
741
+ class="pf-c-nav__link"
742
+ href="#link4"
1629
743
  >
1630
- <svg
1631
- aria-hidden={true}
1632
- aria-labelledby={null}
1633
- fill="currentColor"
1634
- height="1em"
1635
- role="img"
1636
- style={
1637
- Object {
1638
- "verticalAlign": "-0.125em",
1639
- }
1640
- }
1641
- viewBox="0 0 256 512"
1642
- width="1em"
1643
- >
1644
- <path
1645
- 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"
1646
- />
1647
- </svg>
1648
- </AngleRightIcon>
1649
- </button>
1650
- </NavList>
744
+ Link 4
745
+ </a>
746
+ </li>
747
+ </ul>
748
+ <button
749
+ aria-label="Scroll right"
750
+ class="pf-c-nav__scroll-button"
751
+ disabled=""
752
+ >
753
+ <svg
754
+ aria-hidden="true"
755
+ fill="currentColor"
756
+ height="1em"
757
+ role="img"
758
+ style="vertical-align: -0.125em;"
759
+ viewBox="0 0 256 512"
760
+ width="1em"
761
+ >
762
+ <path
763
+ 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"
764
+ />
765
+ </svg>
766
+ </button>
1651
767
  </nav>
1652
- </Nav>
768
+ </DocumentFragment>
1653
769
  `;
1654
770
 
1655
- exports[`Simple Nav List 1`] = `
1656
- <Nav
1657
- onSelect={[Function]}
1658
- onToggle={[Function]}
1659
- ouiaSafe={true}
1660
- theme="dark"
1661
- >
771
+ exports[`Nav Nav Grouped List 1`] = `
772
+ <DocumentFragment>
1662
773
  <nav
1663
774
  aria-label="Global"
1664
- className="pf-c-nav"
1665
- data-ouia-component-id="OUIA-Generated-Nav-3"
775
+ class="pf-c-nav"
776
+ data-ouia-component-id="OUIA-Generated-Nav-7"
1666
777
  data-ouia-component-type="PF4/Nav"
1667
- data-ouia-safe={true}
778
+ data-ouia-safe="true"
1668
779
  >
1669
- <NavList
1670
- ariaLeftScroll="Scroll left"
1671
- ariaRightScroll="Scroll right"
780
+ <section
781
+ aria-labelledby="grp-1"
782
+ class="pf-c-nav__section"
1672
783
  >
784
+ <h2
785
+ class="pf-c-nav__section-title"
786
+ id="grp-1"
787
+ >
788
+ Section 1
789
+ </h2>
1673
790
  <ul
1674
- className="pf-c-nav__list"
1675
- onScroll={[Function]}
791
+ class="pf-c-nav__list"
1676
792
  >
1677
- <NavItem
1678
- key="#link1"
1679
- to="#link1"
793
+ <ul
794
+ class="pf-c-nav__list"
1680
795
  >
1681
796
  <li
1682
- className="pf-c-nav__item"
1683
- data-ouia-component-id="OUIA-Generated-NavItem-9"
797
+ class="pf-c-nav__item"
798
+ data-ouia-component-id="OUIA-Generated-NavItem-25"
1684
799
  data-ouia-component-type="PF4/NavItem"
1685
- data-ouia-safe={true}
1686
- onMouseOver={[Function]}
800
+ data-ouia-safe="true"
1687
801
  >
1688
802
  <a
1689
- aria-current={null}
1690
- className="pf-c-nav__link"
803
+ class="pf-c-nav__link"
1691
804
  href="#link1"
1692
- onClick={[Function]}
1693
- tabIndex={null}
1694
805
  >
1695
806
  Link 1
1696
807
  </a>
1697
808
  </li>
1698
- </NavItem>
1699
- <NavItem
1700
- key="#link2"
1701
- to="#link2"
1702
- >
1703
809
  <li
1704
- className="pf-c-nav__item"
1705
- data-ouia-component-id="OUIA-Generated-NavItem-10"
810
+ class="pf-c-nav__item"
811
+ data-ouia-component-id="OUIA-Generated-NavItem-26"
1706
812
  data-ouia-component-type="PF4/NavItem"
1707
- data-ouia-safe={true}
1708
- onMouseOver={[Function]}
813
+ data-ouia-safe="true"
1709
814
  >
1710
815
  <a
1711
- aria-current={null}
1712
- className="pf-c-nav__link"
816
+ class="pf-c-nav__link"
1713
817
  href="#link2"
1714
- onClick={[Function]}
1715
- tabIndex={null}
1716
818
  >
1717
819
  Link 2
1718
820
  </a>
1719
821
  </li>
1720
- </NavItem>
1721
- <NavItem
1722
- key="#link3"
1723
- to="#link3"
1724
- >
1725
822
  <li
1726
- className="pf-c-nav__item"
1727
- data-ouia-component-id="OUIA-Generated-NavItem-11"
823
+ class="pf-c-nav__item"
824
+ data-ouia-component-id="OUIA-Generated-NavItem-27"
1728
825
  data-ouia-component-type="PF4/NavItem"
1729
- data-ouia-safe={true}
1730
- onMouseOver={[Function]}
826
+ data-ouia-safe="true"
1731
827
  >
1732
828
  <a
1733
- aria-current={null}
1734
- className="pf-c-nav__link"
829
+ class="pf-c-nav__link"
1735
830
  href="#link3"
1736
- onClick={[Function]}
1737
- tabIndex={null}
1738
831
  >
1739
832
  Link 3
1740
833
  </a>
1741
834
  </li>
1742
- </NavItem>
1743
- <NavItem
1744
- key="#link4"
1745
- to="#link4"
1746
- >
1747
835
  <li
1748
- className="pf-c-nav__item"
1749
- data-ouia-component-id="OUIA-Generated-NavItem-12"
836
+ class="pf-c-nav__item"
837
+ data-ouia-component-id="OUIA-Generated-NavItem-28"
1750
838
  data-ouia-component-type="PF4/NavItem"
1751
- data-ouia-safe={true}
1752
- onMouseOver={[Function]}
839
+ data-ouia-safe="true"
1753
840
  >
1754
841
  <a
1755
- aria-current={null}
1756
- className="pf-c-nav__link"
842
+ class="pf-c-nav__link"
1757
843
  href="#link4"
1758
- onClick={[Function]}
1759
- tabIndex={null}
1760
844
  >
1761
845
  Link 4
1762
846
  </a>
1763
847
  </li>
1764
- </NavItem>
848
+ </ul>
1765
849
  </ul>
1766
- </NavList>
1767
- </nav>
1768
- </Nav>
1769
- `;
1770
-
1771
- exports[`Tertiary Nav List 1`] = `
1772
- <Nav
1773
- onSelect={[Function]}
1774
- onToggle={[Function]}
1775
- ouiaSafe={true}
1776
- theme="dark"
1777
- variant="tertiary"
1778
- >
1779
- <nav
1780
- aria-label="Local"
1781
- className="pf-c-nav pf-m-horizontal pf-m-tertiary"
1782
- data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
1783
- data-ouia-component-type="PF4/Nav"
1784
- data-ouia-safe={true}
1785
- >
1786
- <NavList
1787
- ariaLeftScroll="Scroll left"
1788
- ariaRightScroll="Scroll right"
850
+ </section>
851
+ <section
852
+ aria-labelledby="grp-2"
853
+ class="pf-c-nav__section"
1789
854
  >
1790
- <button
1791
- aria-label="Scroll left"
1792
- className="pf-c-nav__scroll-button"
1793
- disabled={true}
1794
- onClick={[Function]}
1795
- tabIndex={null}
855
+ <h2
856
+ class="pf-c-nav__section-title"
857
+ id="grp-2"
1796
858
  >
1797
- <AngleLeftIcon
1798
- color="currentColor"
1799
- noVerticalAlign={false}
1800
- size="sm"
1801
- >
1802
- <svg
1803
- aria-hidden={true}
1804
- aria-labelledby={null}
1805
- fill="currentColor"
1806
- height="1em"
1807
- role="img"
1808
- style={
1809
- Object {
1810
- "verticalAlign": "-0.125em",
1811
- }
1812
- }
1813
- viewBox="0 0 256 512"
1814
- width="1em"
1815
- >
1816
- <path
1817
- 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"
1818
- />
1819
- </svg>
1820
- </AngleLeftIcon>
1821
- </button>
859
+ Section 2
860
+ </h2>
1822
861
  <ul
1823
- className="pf-c-nav__list"
1824
- onScroll={[Function]}
862
+ class="pf-c-nav__list"
1825
863
  >
1826
- <NavItem
1827
- key="#link1"
1828
- to="#link1"
864
+ <ul
865
+ class="pf-c-nav__list"
1829
866
  >
1830
867
  <li
1831
- className="pf-c-nav__item"
1832
- data-ouia-component-id="OUIA-Generated-NavItem-41"
868
+ class="pf-c-nav__item"
869
+ data-ouia-component-id="OUIA-Generated-NavItem-29"
1833
870
  data-ouia-component-type="PF4/NavItem"
1834
- data-ouia-safe={true}
1835
- onMouseOver={[Function]}
871
+ data-ouia-safe="true"
1836
872
  >
1837
873
  <a
1838
- aria-current={null}
1839
- className="pf-c-nav__link"
874
+ class="pf-c-nav__link"
1840
875
  href="#link1"
1841
- onClick={[Function]}
1842
- tabIndex={null}
1843
876
  >
1844
877
  Link 1
1845
878
  </a>
1846
879
  </li>
1847
- </NavItem>
1848
- <NavItem
1849
- key="#link2"
1850
- to="#link2"
1851
- >
1852
880
  <li
1853
- className="pf-c-nav__item"
1854
- data-ouia-component-id="OUIA-Generated-NavItem-42"
881
+ class="pf-c-nav__item"
882
+ data-ouia-component-id="OUIA-Generated-NavItem-30"
1855
883
  data-ouia-component-type="PF4/NavItem"
1856
- data-ouia-safe={true}
1857
- onMouseOver={[Function]}
884
+ data-ouia-safe="true"
1858
885
  >
1859
886
  <a
1860
- aria-current={null}
1861
- className="pf-c-nav__link"
887
+ class="pf-c-nav__link"
1862
888
  href="#link2"
1863
- onClick={[Function]}
1864
- tabIndex={null}
1865
889
  >
1866
890
  Link 2
1867
891
  </a>
1868
892
  </li>
1869
- </NavItem>
1870
- <NavItem
1871
- key="#link3"
1872
- to="#link3"
1873
- >
1874
893
  <li
1875
- className="pf-c-nav__item"
1876
- data-ouia-component-id="OUIA-Generated-NavItem-43"
894
+ class="pf-c-nav__item"
895
+ data-ouia-component-id="OUIA-Generated-NavItem-31"
1877
896
  data-ouia-component-type="PF4/NavItem"
1878
- data-ouia-safe={true}
1879
- onMouseOver={[Function]}
897
+ data-ouia-safe="true"
1880
898
  >
1881
899
  <a
1882
- aria-current={null}
1883
- className="pf-c-nav__link"
900
+ class="pf-c-nav__link"
1884
901
  href="#link3"
1885
- onClick={[Function]}
1886
- tabIndex={null}
1887
902
  >
1888
903
  Link 3
1889
904
  </a>
1890
905
  </li>
1891
- </NavItem>
1892
- <NavItem
1893
- key="#link4"
1894
- to="#link4"
1895
- >
1896
906
  <li
1897
- className="pf-c-nav__item"
1898
- data-ouia-component-id="OUIA-Generated-NavItem-44"
907
+ class="pf-c-nav__item"
908
+ data-ouia-component-id="OUIA-Generated-NavItem-32"
1899
909
  data-ouia-component-type="PF4/NavItem"
1900
- data-ouia-safe={true}
1901
- onMouseOver={[Function]}
910
+ data-ouia-safe="true"
1902
911
  >
1903
912
  <a
1904
- aria-current={null}
1905
- className="pf-c-nav__link"
913
+ class="pf-c-nav__link"
1906
914
  href="#link4"
1907
- onClick={[Function]}
1908
- tabIndex={null}
1909
915
  >
1910
916
  Link 4
1911
917
  </a>
1912
918
  </li>
1913
- </NavItem>
919
+ </ul>
1914
920
  </ul>
1915
- <button
1916
- aria-label="Scroll right"
1917
- className="pf-c-nav__scroll-button"
1918
- disabled={true}
1919
- onClick={[Function]}
1920
- tabIndex={null}
921
+ </section>
922
+ </nav>
923
+ </DocumentFragment>
924
+ `;
925
+
926
+ exports[`Nav Nav List with custom item nodes 1`] = `
927
+ <DocumentFragment>
928
+ <nav
929
+ aria-label="Local"
930
+ class="pf-c-nav pf-m-horizontal pf-m-tertiary"
931
+ data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
932
+ data-ouia-component-type="PF4/Nav"
933
+ data-ouia-safe="true"
934
+ >
935
+ <button
936
+ aria-label="Scroll left"
937
+ class="pf-c-nav__scroll-button"
938
+ disabled=""
939
+ >
940
+ <svg
941
+ aria-hidden="true"
942
+ fill="currentColor"
943
+ height="1em"
944
+ role="img"
945
+ style="vertical-align: -0.125em;"
946
+ viewBox="0 0 256 512"
947
+ width="1em"
948
+ >
949
+ <path
950
+ 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"
951
+ />
952
+ </svg>
953
+ </button>
954
+ <ul
955
+ class="pf-c-nav__list"
956
+ >
957
+ <li
958
+ class="pf-c-nav__item test-nav-item-class"
959
+ data-ouia-component-id="OUIA-Generated-NavItem-45"
960
+ data-ouia-component-type="PF4/NavItem"
961
+ data-ouia-safe="true"
1921
962
  >
1922
- <AngleRightIcon
1923
- color="currentColor"
1924
- noVerticalAlign={false}
1925
- size="sm"
963
+ <div
964
+ class="pf-c-nav__link my-custom-node"
1926
965
  >
1927
- <svg
1928
- aria-hidden={true}
1929
- aria-labelledby={null}
1930
- fill="currentColor"
1931
- height="1em"
1932
- role="img"
1933
- style={
1934
- Object {
1935
- "verticalAlign": "-0.125em",
1936
- }
1937
- }
1938
- viewBox="0 0 256 512"
1939
- width="1em"
1940
- >
1941
- <path
1942
- 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"
1943
- />
1944
- </svg>
1945
- </AngleRightIcon>
1946
- </button>
1947
- </NavList>
966
+ My custom node
967
+ </div>
968
+ </li>
969
+ </ul>
970
+ <button
971
+ aria-label="Scroll right"
972
+ class="pf-c-nav__scroll-button"
973
+ disabled=""
974
+ >
975
+ <svg
976
+ aria-hidden="true"
977
+ fill="currentColor"
978
+ height="1em"
979
+ role="img"
980
+ style="vertical-align: -0.125em;"
981
+ viewBox="0 0 256 512"
982
+ width="1em"
983
+ >
984
+ <path
985
+ 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"
986
+ />
987
+ </svg>
988
+ </button>
989
+ </nav>
990
+ </DocumentFragment>
991
+ `;
992
+
993
+ exports[`Nav Tertiary Nav List 1`] = `
994
+ <DocumentFragment>
995
+ <nav
996
+ aria-label="Local"
997
+ class="pf-c-nav pf-m-horizontal pf-m-tertiary"
998
+ data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
999
+ data-ouia-component-type="PF4/Nav"
1000
+ data-ouia-safe="true"
1001
+ >
1002
+ <button
1003
+ aria-label="Scroll left"
1004
+ class="pf-c-nav__scroll-button"
1005
+ disabled=""
1006
+ >
1007
+ <svg
1008
+ aria-hidden="true"
1009
+ fill="currentColor"
1010
+ height="1em"
1011
+ role="img"
1012
+ style="vertical-align: -0.125em;"
1013
+ viewBox="0 0 256 512"
1014
+ width="1em"
1015
+ >
1016
+ <path
1017
+ 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"
1018
+ />
1019
+ </svg>
1020
+ </button>
1021
+ <ul
1022
+ class="pf-c-nav__list"
1023
+ >
1024
+ <li
1025
+ class="pf-c-nav__item"
1026
+ data-ouia-component-id="OUIA-Generated-NavItem-41"
1027
+ data-ouia-component-type="PF4/NavItem"
1028
+ data-ouia-safe="true"
1029
+ >
1030
+ <a
1031
+ class="pf-c-nav__link"
1032
+ href="#link1"
1033
+ >
1034
+ Link 1
1035
+ </a>
1036
+ </li>
1037
+ <li
1038
+ class="pf-c-nav__item"
1039
+ data-ouia-component-id="OUIA-Generated-NavItem-42"
1040
+ data-ouia-component-type="PF4/NavItem"
1041
+ data-ouia-safe="true"
1042
+ >
1043
+ <a
1044
+ class="pf-c-nav__link"
1045
+ href="#link2"
1046
+ >
1047
+ Link 2
1048
+ </a>
1049
+ </li>
1050
+ <li
1051
+ class="pf-c-nav__item"
1052
+ data-ouia-component-id="OUIA-Generated-NavItem-43"
1053
+ data-ouia-component-type="PF4/NavItem"
1054
+ data-ouia-safe="true"
1055
+ >
1056
+ <a
1057
+ class="pf-c-nav__link"
1058
+ href="#link3"
1059
+ >
1060
+ Link 3
1061
+ </a>
1062
+ </li>
1063
+ <li
1064
+ class="pf-c-nav__item"
1065
+ data-ouia-component-id="OUIA-Generated-NavItem-44"
1066
+ data-ouia-component-type="PF4/NavItem"
1067
+ data-ouia-safe="true"
1068
+ >
1069
+ <a
1070
+ class="pf-c-nav__link"
1071
+ href="#link4"
1072
+ >
1073
+ Link 4
1074
+ </a>
1075
+ </li>
1076
+ </ul>
1077
+ <button
1078
+ aria-label="Scroll right"
1079
+ class="pf-c-nav__scroll-button"
1080
+ disabled=""
1081
+ >
1082
+ <svg
1083
+ aria-hidden="true"
1084
+ fill="currentColor"
1085
+ height="1em"
1086
+ role="img"
1087
+ style="vertical-align: -0.125em;"
1088
+ viewBox="0 0 256 512"
1089
+ width="1em"
1090
+ >
1091
+ <path
1092
+ 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"
1093
+ />
1094
+ </svg>
1095
+ </button>
1948
1096
  </nav>
1949
- </Nav>
1097
+ </DocumentFragment>
1950
1098
  `;