@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

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 (341) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +1005 -856
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +319 -290
  25. package/base/tokens/_tokens-default.scss +485 -329
  26. package/base/tokens/_tokens-font.scss +122 -58
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +27 -16
  52. package/components/Breadcrumb/breadcrumb.scss +27 -18
  53. package/components/Button/button.css +398 -354
  54. package/components/Button/button.scss +455 -477
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +54 -51
  84. package/components/DualListSelector/dual-list-selector.scss +55 -54
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +66 -116
  92. package/components/Form/form.scss +63 -128
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +378 -355
  110. package/components/Label/label.scss +431 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +68 -112
  114. package/components/Login/login.scss +54 -82
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +388 -417
  118. package/components/Menu/menu.scss +370 -525
  119. package/components/MenuToggle/menu-toggle.css +223 -276
  120. package/components/MenuToggle/menu-toggle.scss +322 -390
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +4 -4
  128. package/components/NotificationBadge/notification-badge.scss +4 -4
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +32 -52
  152. package/components/SimpleList/simple-list.scss +37 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +31 -47
  166. package/components/Table/table-grid.scss +42 -55
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +81 -74
  170. package/components/Table/table-tree-view.scss +53 -39
  171. package/components/Table/table.css +159 -264
  172. package/components/Table/table.scss +216 -351
  173. package/components/Tabs/tabs.css +142 -175
  174. package/components/Tabs/tabs.scss +158 -218
  175. package/components/TextInputGroup/text-input-group.css +0 -14
  176. package/components/TextInputGroup/text-input-group.scss +3 -16
  177. package/components/Tile/tile.css +40 -81
  178. package/components/Tile/tile.scss +38 -84
  179. package/components/Timestamp/timestamp.css +12 -9
  180. package/components/Timestamp/timestamp.scss +11 -10
  181. package/components/Title/title.css +70 -19
  182. package/components/Title/title.scss +90 -20
  183. package/components/ToggleGroup/toggle-group.css +54 -48
  184. package/components/ToggleGroup/toggle-group.scss +62 -50
  185. package/components/Toolbar/toolbar.css +2527 -1031
  186. package/components/Toolbar/toolbar.scss +233 -520
  187. package/components/Tooltip/tooltip.css +16 -18
  188. package/components/Tooltip/tooltip.scss +20 -24
  189. package/components/TreeView/tree-view.css +76 -97
  190. package/components/TreeView/tree-view.scss +82 -113
  191. package/components/Truncate/truncate.css +4 -0
  192. package/components/Truncate/truncate.scss +3 -0
  193. package/components/Wizard/wizard.css +122 -205
  194. package/components/Wizard/wizard.scss +121 -181
  195. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  196. package/docs/components/Accordion/examples/Accordion.md +614 -416
  197. package/docs/components/ActionList/examples/ActionList.md +73 -22
  198. package/docs/components/Alert/examples/Alert.md +3 -3
  199. package/docs/components/Avatar/examples/Avatar.md +5 -19
  200. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  201. package/docs/components/Badge/examples/Badge.md +21 -0
  202. package/docs/components/Banner/examples/Banner.md +48 -25
  203. package/docs/components/Brand/examples/Brand.css +12 -0
  204. package/docs/components/Brand/examples/Brand.md +51 -32
  205. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  206. package/docs/components/Button/examples/Button.css +4 -0
  207. package/docs/components/Button/examples/Button.md +1439 -113
  208. package/docs/components/CalendarMonth/examples/CalendarMonth.md +44 -220
  209. package/docs/components/Card/examples/Card.md +550 -133
  210. package/docs/components/Check/examples/Check.md +1 -0
  211. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  212. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  213. package/docs/components/Content/examples/Content.md +5 -5
  214. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  215. package/docs/components/Divider/examples/Divider.css +3 -1
  216. package/docs/components/Divider/examples/Divider.md +30 -5
  217. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  218. package/docs/components/Drawer/examples/Drawer.md +294 -256
  219. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  220. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  221. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  222. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  223. package/docs/components/Form/examples/Form.md +134 -89
  224. package/docs/components/Icon/examples/Icon.md +82 -11
  225. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  226. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  227. package/docs/components/Label/examples/Label.css +4 -0
  228. package/docs/components/Label/examples/Label.md +3090 -703
  229. package/docs/components/LogViewer/examples/LogViewer.md +100 -80
  230. package/docs/components/Login/examples/Login.md +160 -105
  231. package/docs/components/Masthead/examples/masthead.md +443 -65
  232. package/docs/components/Menu/examples/Menu.css +7 -11
  233. package/docs/components/Menu/examples/Menu.md +213 -486
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +253 -224
  235. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  236. package/docs/components/Nav/examples/Navigation.css +1 -23
  237. package/docs/components/Nav/examples/Navigation.md +69 -243
  238. package/docs/components/Page/examples/Page.css +0 -8
  239. package/docs/components/Page/examples/Page.md +22 -21
  240. package/docs/components/Pagination/examples/Pagination.md +663 -637
  241. package/docs/components/Panel/examples/Panel.md +12 -0
  242. package/docs/components/Popover/examples/Popover.md +1 -1
  243. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  244. package/docs/components/Radio/examples/Radio.md +1 -1
  245. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  246. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  247. package/docs/components/TabContent/examples/TabContent.md +10 -10
  248. package/docs/components/Table/examples/Table.md +8 -8
  249. package/docs/components/Tabs/examples/Tabs.css +1 -1
  250. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  251. package/docs/components/Tile/examples/Tile.md +264 -144
  252. package/docs/components/Title/examples/Title.md +18 -0
  253. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/docs/components/Toolbar/examples/Toolbar.md +985 -3341
  255. package/docs/components/TreeView/examples/TreeView.md +7 -57
  256. package/docs/components/Truncate/examples/Truncate.css +2 -2
  257. package/docs/components/Wizard/examples/Wizard.md +31 -7
  258. package/docs/demos/AboutModal/examples/AboutModal.md +116 -35
  259. package/docs/demos/Alert/examples/Alert.md +366 -99
  260. package/docs/demos/BackToTop/examples/BackToTop.md +114 -33
  261. package/docs/demos/Banner/examples/Banner.md +235 -68
  262. package/docs/demos/Button/examples/Button.md +1 -1
  263. package/docs/demos/Card/examples/Card.md +2 -2
  264. package/docs/demos/CardView/examples/CardView.md +256 -192
  265. package/docs/demos/ContextSelector/examples/ContextSelector.md +414 -107
  266. package/docs/demos/Dashboard/examples/Dashboard.md +114 -33
  267. package/docs/demos/DataList/examples/DataList.md +1049 -950
  268. package/docs/demos/DescriptionList/examples/DescriptionList.md +342 -99
  269. package/docs/demos/Drawer/examples/Drawer.md +700 -271
  270. package/docs/demos/Form/examples/BasicForms.md +138 -84
  271. package/docs/demos/JumpLinks/examples/JumpLinks.md +989 -409
  272. package/docs/demos/Masthead/examples/Masthead.md +833 -357
  273. package/docs/demos/Modal/examples/Modal.md +717 -222
  274. package/docs/demos/Nav/examples/Nav.md +763 -926
  275. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +575 -165
  276. package/docs/demos/Page/examples/Page.md +1050 -309
  277. package/docs/demos/Page/examples/Penta.md +73 -31
  278. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +20 -16
  279. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  280. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1276 -861
  281. package/docs/demos/Skeleton/examples/Skeleton.md +114 -33
  282. package/docs/demos/Table/examples/Table.md +4002 -3503
  283. package/docs/demos/Tabs/examples/Tabs.md +711 -219
  284. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  285. package/docs/demos/Toolbar/examples/Toolbar.md +1350 -1480
  286. package/docs/demos/Wizard/examples/Wizard.md +1134 -315
  287. package/docs/layouts/Flex/examples/Flex.md +11 -11
  288. package/package.json +32 -32
  289. package/patternfly-base-no-globals-theme-dark-unversioned.css +1021 -868
  290. package/patternfly-base-no-globals.css +1021 -868
  291. package/patternfly-base-theme-dark-unversioned.css +1027 -873
  292. package/patternfly-base.css +1027 -873
  293. package/patternfly-no-globals.css +9048 -8979
  294. package/patternfly-theme-dark-unversioned.css +9051 -8981
  295. package/patternfly.css +9051 -8981
  296. package/patternfly.min.css +1 -1
  297. package/patternfly.min.css.map +1 -1
  298. package/sass-utilities/mixins.scss +18 -0
  299. package/base/themes/dark/_variables.scss +0 -102
  300. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  301. package/components/Accordion/themes/dark/accordion.scss +0 -9
  302. package/components/Alert/themes/dark/alert.scss +0 -17
  303. package/components/Badge/themes/dark/badge.scss +0 -9
  304. package/components/Banner/themes/dark/banner.scss +0 -14
  305. package/components/Button/themes/dark/button.scss +0 -51
  306. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  307. package/components/Card/themes/dark/card.scss +0 -20
  308. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  309. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  310. package/components/DataList/themes/dark/data-list.scss +0 -10
  311. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  312. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  313. package/components/Drawer/themes/dark/drawer.scss +0 -13
  314. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  315. package/components/Form/themes/dark/form.scss +0 -7
  316. package/components/FormControl/themes/dark/form-control.scss +0 -24
  317. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  318. package/components/Hint/themes/dark/hint.scss +0 -8
  319. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  320. package/components/Label/themes/dark/label.scss +0 -53
  321. package/components/Login/themes/dark/login.scss +0 -12
  322. package/components/Masthead/themes/dark/masthead.scss +0 -14
  323. package/components/MenuToggle/themes/dark/menu-toggle.scss +0 -27
  324. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  325. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  326. package/components/Page/themes/dark/page.scss +0 -69
  327. package/components/Pagination/themes/dark/pagination.scss +0 -7
  328. package/components/Panel/themes/dark/panel.scss +0 -7
  329. package/components/Popover/themes/dark/popover.scss +0 -11
  330. package/components/Progress/themes/dark/progress.scss +0 -9
  331. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  332. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  333. package/components/Switch/themes/dark/switch.scss +0 -11
  334. package/components/Tabs/themes/dark/tabs.scss +0 -10
  335. package/components/TextInputGroup/themes/dark/text-input-group.scss +0 -11
  336. package/components/Tile/themes/dark/tile.scss +0 -10
  337. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  338. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  339. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  340. package/components/Wizard/themes/dark/wizard.scss +0 -12
  341. package/docs/components/Avatar/examples/Avatar.css +0 -3
package/docs/demos/Wizard/examples/Wizard.md CHANGED
@@ -26,23 +26,117 @@ wrapperTag: div
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <img
30
- class="pf-v5-c-brand"
31
- src="/assets/images/pf-logo.svg"
32
- alt="PatternFly logo"
33
- style="--pf-v5-c-brand--Height:36px"
34
- />
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
31
+ <defs>
32
+ <linearGradient
33
+ x1="68%"
34
+ y1="2.25860997e-13%"
35
+ x2="32%"
36
+ y2="100%"
37
+ id="linearGradient-wizard-basic-example-masthead"
38
+ >
39
+ <stop stop-color="#2B9AF3" offset="0%" />
40
+ <stop
41
+ stop-color="#73BCF7"
42
+ stop-opacity="0.502212631"
43
+ offset="100%"
44
+ />
45
+ </linearGradient>
46
+ </defs>
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
48
+ <g
49
+ transform="translate(206.000000, 45.750000)"
50
+ fill="var(--pf-t--global--text--color--regular)"
51
+ fill-rule="nonzero"
52
+ >
53
+ <path
54
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
55
+ />
56
+ <path
57
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
58
+ />
59
+ <path
60
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
61
+ />
62
+ <path
63
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
64
+ />
65
+ <path
66
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
67
+ />
68
+ <path
69
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
70
+ />
71
+ <path
72
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
73
+ />
74
+ <polygon
75
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
76
+ />
77
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
78
+ <path
79
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
80
+ />
81
+ </g>
82
+ <g transform="translate(0.000000, 0.000000)">
83
+ <path
84
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
85
+ fill="#0066CC"
86
+ />
87
+ <path
88
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
89
+ fill="url(#linearGradient-wizard-basic-example-masthead)"
90
+ />
91
+ <path
92
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
93
+ fill="url(#linearGradient-wizard-basic-example-masthead)"
94
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
95
+ />
96
+ </g>
97
+ </g>
98
+ </svg>
35
99
  </a>
36
100
  </div>
37
101
  <div class="pf-v5-c-masthead__content">
38
102
  <div
39
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
103
+ class="pf-v5-c-toolbar pf-m-static"
40
104
  id="wizard-basic-example-masthead-toolbar"
41
105
  >
42
106
  <div class="pf-v5-c-toolbar__content">
43
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
44
138
  <div
45
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
139
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
46
140
  >
47
141
  <div
48
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -54,7 +148,9 @@ wrapperTag: div
54
148
  aria-expanded="false"
55
149
  aria-label="Application launcher"
56
150
  >
57
- <i class="fas fa-th" aria-hidden="true"></i>
151
+ <span class="pf-v5-c-menu-toggle__icon">
152
+ <i class="fas fa-th" aria-hidden="true"></i>
153
+ </span>
58
154
  </button>
59
155
  </div>
60
156
  <div class="pf-v5-c-toolbar__item">
@@ -64,7 +160,9 @@ wrapperTag: div
64
160
  aria-expanded="false"
65
161
  aria-label="Settings"
66
162
  >
67
- <i class="fas fa-cog" aria-hidden="true"></i>
163
+ <span class="pf-v5-c-menu-toggle__icon">
164
+ <i class="fas fa-cog" aria-hidden="true"></i>
165
+ </span>
68
166
  </button>
69
167
  </div>
70
168
  <div class="pf-v5-c-toolbar__item">
@@ -74,7 +172,9 @@ wrapperTag: div
74
172
  aria-expanded="false"
75
173
  aria-label="Help"
76
174
  >
77
- <i class="fas fa-question-circle" aria-hidden="true"></i>
175
+ <span class="pf-v5-c-menu-toggle__icon">
176
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
177
+ </span>
78
178
  </button>
79
179
  </div>
80
180
  </div>
@@ -85,31 +185,12 @@ wrapperTag: div
85
185
  aria-expanded="false"
86
186
  aria-label="Actions"
87
187
  >
88
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
188
+ <span class="pf-v5-c-menu-toggle__icon">
189
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
190
+ </span>
89
191
  </button>
90
192
  </div>
91
193
  </div>
92
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
93
- <button
94
- class="pf-v5-c-menu-toggle pf-m-full-height"
95
- type="button"
96
- aria-expanded="false"
97
- >
98
- <span class="pf-v5-c-menu-toggle__icon">
99
- <img
100
- class="pf-v5-c-avatar"
101
- alt="Avatar image"
102
- src="/assets/images/img_avatar-light.svg"
103
- />
104
- </span>
105
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
106
- <span class="pf-v5-c-menu-toggle__controls">
107
- <span class="pf-v5-c-menu-toggle__toggle-icon">
108
- <i class="fas fa-angle-down" aria-hidden="true"></i>
109
- </span>
110
- </span>
111
- </button>
112
- </div>
113
194
  </div>
114
195
  </div>
115
196
  </div>
@@ -289,11 +370,21 @@ wrapperTag: div
289
370
  type="button"
290
371
  >Information</button>
291
372
  </li>
292
- <li class="pf-v5-c-wizard__nav-item">
373
+ <li
374
+ class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded"
375
+ >
293
376
  <button
294
377
  class="pf-v5-c-wizard__nav-link pf-m-current"
295
378
  type="button"
296
- >Configuration</button>
379
+ aria-expanded="true"
380
+ >
381
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
382
+ <span class="pf-v5-c-wizard__nav-link-toggle">
383
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
384
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
385
+ </span>
386
+ </span>
387
+ </button>
297
388
  <ol class="pf-v5-c-wizard__nav-list" role="list">
298
389
  <li class="pf-v5-c-wizard__nav-item">
299
390
  <button
@@ -516,23 +607,117 @@ wrapperTag: div
516
607
  </span>
517
608
  <div class="pf-v5-c-masthead__main">
518
609
  <a class="pf-v5-c-masthead__brand" href="#">
519
- <img
520
- class="pf-v5-c-brand"
521
- src="/assets/images/pf-logo.svg"
522
- alt="PatternFly logo"
523
- style="--pf-v5-c-brand--Height:36px"
524
- />
610
+ <svg height="40px" viewBox="0 0 679 158">
611
+ <title>PF-HorizontalLogo-Color</title>
612
+ <defs>
613
+ <linearGradient
614
+ x1="68%"
615
+ y1="2.25860997e-13%"
616
+ x2="32%"
617
+ y2="100%"
618
+ id="linearGradient-wizard-nav-expanded-example-masthead"
619
+ >
620
+ <stop stop-color="#2B9AF3" offset="0%" />
621
+ <stop
622
+ stop-color="#73BCF7"
623
+ stop-opacity="0.502212631"
624
+ offset="100%"
625
+ />
626
+ </linearGradient>
627
+ </defs>
628
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
629
+ <g
630
+ transform="translate(206.000000, 45.750000)"
631
+ fill="var(--pf-t--global--text--color--regular)"
632
+ fill-rule="nonzero"
633
+ >
634
+ <path
635
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
636
+ />
637
+ <path
638
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
639
+ />
640
+ <path
641
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
642
+ />
643
+ <path
644
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
645
+ />
646
+ <path
647
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
648
+ />
649
+ <path
650
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
651
+ />
652
+ <path
653
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
654
+ />
655
+ <polygon
656
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
657
+ />
658
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
659
+ <path
660
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
661
+ />
662
+ </g>
663
+ <g transform="translate(0.000000, 0.000000)">
664
+ <path
665
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
666
+ fill="#0066CC"
667
+ />
668
+ <path
669
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
670
+ fill="url(#linearGradient-wizard-nav-expanded-example-masthead)"
671
+ />
672
+ <path
673
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
674
+ fill="url(#linearGradient-wizard-nav-expanded-example-masthead)"
675
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
676
+ />
677
+ </g>
678
+ </g>
679
+ </svg>
525
680
  </a>
526
681
  </div>
527
682
  <div class="pf-v5-c-masthead__content">
528
683
  <div
529
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
684
+ class="pf-v5-c-toolbar pf-m-static"
530
685
  id="wizard-nav-expanded-example-masthead-toolbar"
531
686
  >
532
687
  <div class="pf-v5-c-toolbar__content">
533
688
  <div class="pf-v5-c-toolbar__content-section">
689
+ <div class="pf-v5-c-toolbar__item">
690
+ <button
691
+ class="pf-v5-c-menu-toggle"
692
+ type="button"
693
+ aria-expanded="false"
694
+ >
695
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
696
+ <span class="pf-v5-c-menu-toggle__controls">
697
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
698
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
699
+ </span>
700
+ </span>
701
+ </button>
702
+ </div>
703
+
704
+ <div class="pf-v5-c-toolbar__item">
705
+ <button
706
+ class="pf-v5-c-menu-toggle"
707
+ type="button"
708
+ aria-expanded="false"
709
+ >
710
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
711
+ <span class="pf-v5-c-menu-toggle__controls">
712
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
713
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
714
+ </span>
715
+ </span>
716
+ </button>
717
+ </div>
718
+
534
719
  <div
535
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
720
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
536
721
  >
537
722
  <div
538
723
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -544,7 +729,9 @@ wrapperTag: div
544
729
  aria-expanded="false"
545
730
  aria-label="Application launcher"
546
731
  >
547
- <i class="fas fa-th" aria-hidden="true"></i>
732
+ <span class="pf-v5-c-menu-toggle__icon">
733
+ <i class="fas fa-th" aria-hidden="true"></i>
734
+ </span>
548
735
  </button>
549
736
  </div>
550
737
  <div class="pf-v5-c-toolbar__item">
@@ -554,7 +741,9 @@ wrapperTag: div
554
741
  aria-expanded="false"
555
742
  aria-label="Settings"
556
743
  >
557
- <i class="fas fa-cog" aria-hidden="true"></i>
744
+ <span class="pf-v5-c-menu-toggle__icon">
745
+ <i class="fas fa-cog" aria-hidden="true"></i>
746
+ </span>
558
747
  </button>
559
748
  </div>
560
749
  <div class="pf-v5-c-toolbar__item">
@@ -564,7 +753,9 @@ wrapperTag: div
564
753
  aria-expanded="false"
565
754
  aria-label="Help"
566
755
  >
567
- <i class="fas fa-question-circle" aria-hidden="true"></i>
756
+ <span class="pf-v5-c-menu-toggle__icon">
757
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
758
+ </span>
568
759
  </button>
569
760
  </div>
570
761
  </div>
@@ -575,31 +766,12 @@ wrapperTag: div
575
766
  aria-expanded="false"
576
767
  aria-label="Actions"
577
768
  >
578
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
769
+ <span class="pf-v5-c-menu-toggle__icon">
770
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
771
+ </span>
579
772
  </button>
580
773
  </div>
581
774
  </div>
582
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
583
- <button
584
- class="pf-v5-c-menu-toggle pf-m-full-height"
585
- type="button"
586
- aria-expanded="false"
587
- >
588
- <span class="pf-v5-c-menu-toggle__icon">
589
- <img
590
- class="pf-v5-c-avatar"
591
- alt="Avatar image"
592
- src="/assets/images/img_avatar-light.svg"
593
- />
594
- </span>
595
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
596
- <span class="pf-v5-c-menu-toggle__controls">
597
- <span class="pf-v5-c-menu-toggle__toggle-icon">
598
- <i class="fas fa-angle-down" aria-hidden="true"></i>
599
- </span>
600
- </span>
601
- </button>
602
- </div>
603
775
  </div>
604
776
  </div>
605
777
  </div>
@@ -779,11 +951,21 @@ wrapperTag: div
779
951
  type="button"
780
952
  >Information</button>
781
953
  </li>
782
- <li class="pf-v5-c-wizard__nav-item">
954
+ <li
955
+ class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded"
956
+ >
783
957
  <button
784
958
  class="pf-v5-c-wizard__nav-link pf-m-current"
785
959
  type="button"
786
- >Configuration</button>
960
+ aria-expanded="true"
961
+ >
962
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
963
+ <span class="pf-v5-c-wizard__nav-link-toggle">
964
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
965
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
966
+ </span>
967
+ </span>
968
+ </button>
787
969
  <ol class="pf-v5-c-wizard__nav-list" role="list">
788
970
  <li class="pf-v5-c-wizard__nav-item">
789
971
  <button
@@ -988,23 +1170,117 @@ wrapperTag: div
988
1170
  </span>
989
1171
  <div class="pf-v5-c-masthead__main">
990
1172
  <a class="pf-v5-c-masthead__brand" href="#">
991
- <img
992
- class="pf-v5-c-brand"
993
- src="/assets/images/pf-logo.svg"
994
- alt="PatternFly logo"
995
- style="--pf-v5-c-brand--Height:36px"
996
- />
1173
+ <svg height="40px" viewBox="0 0 679 158">
1174
+ <title>PF-HorizontalLogo-Color</title>
1175
+ <defs>
1176
+ <linearGradient
1177
+ x1="68%"
1178
+ y1="2.25860997e-13%"
1179
+ x2="32%"
1180
+ y2="100%"
1181
+ id="linearGradient-wizard-with-drawer-closed-example-masthead"
1182
+ >
1183
+ <stop stop-color="#2B9AF3" offset="0%" />
1184
+ <stop
1185
+ stop-color="#73BCF7"
1186
+ stop-opacity="0.502212631"
1187
+ offset="100%"
1188
+ />
1189
+ </linearGradient>
1190
+ </defs>
1191
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1192
+ <g
1193
+ transform="translate(206.000000, 45.750000)"
1194
+ fill="var(--pf-t--global--text--color--regular)"
1195
+ fill-rule="nonzero"
1196
+ >
1197
+ <path
1198
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1199
+ />
1200
+ <path
1201
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1202
+ />
1203
+ <path
1204
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1205
+ />
1206
+ <path
1207
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1208
+ />
1209
+ <path
1210
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1211
+ />
1212
+ <path
1213
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1214
+ />
1215
+ <path
1216
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1217
+ />
1218
+ <polygon
1219
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1220
+ />
1221
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1222
+ <path
1223
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1224
+ />
1225
+ </g>
1226
+ <g transform="translate(0.000000, 0.000000)">
1227
+ <path
1228
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1229
+ fill="#0066CC"
1230
+ />
1231
+ <path
1232
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1233
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-masthead)"
1234
+ />
1235
+ <path
1236
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1237
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-masthead)"
1238
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1239
+ />
1240
+ </g>
1241
+ </g>
1242
+ </svg>
997
1243
  </a>
998
1244
  </div>
999
1245
  <div class="pf-v5-c-masthead__content">
1000
1246
  <div
1001
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1247
+ class="pf-v5-c-toolbar pf-m-static"
1002
1248
  id="wizard-with-drawer-closed-example-masthead-toolbar"
1003
1249
  >
1004
1250
  <div class="pf-v5-c-toolbar__content">
1005
1251
  <div class="pf-v5-c-toolbar__content-section">
1252
+ <div class="pf-v5-c-toolbar__item">
1253
+ <button
1254
+ class="pf-v5-c-menu-toggle"
1255
+ type="button"
1256
+ aria-expanded="false"
1257
+ >
1258
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1259
+ <span class="pf-v5-c-menu-toggle__controls">
1260
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1261
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1262
+ </span>
1263
+ </span>
1264
+ </button>
1265
+ </div>
1266
+
1267
+ <div class="pf-v5-c-toolbar__item">
1268
+ <button
1269
+ class="pf-v5-c-menu-toggle"
1270
+ type="button"
1271
+ aria-expanded="false"
1272
+ >
1273
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1274
+ <span class="pf-v5-c-menu-toggle__controls">
1275
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1276
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1277
+ </span>
1278
+ </span>
1279
+ </button>
1280
+ </div>
1281
+
1006
1282
  <div
1007
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1283
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1008
1284
  >
1009
1285
  <div
1010
1286
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1016,7 +1292,9 @@ wrapperTag: div
1016
1292
  aria-expanded="false"
1017
1293
  aria-label="Application launcher"
1018
1294
  >
1019
- <i class="fas fa-th" aria-hidden="true"></i>
1295
+ <span class="pf-v5-c-menu-toggle__icon">
1296
+ <i class="fas fa-th" aria-hidden="true"></i>
1297
+ </span>
1020
1298
  </button>
1021
1299
  </div>
1022
1300
  <div class="pf-v5-c-toolbar__item">
@@ -1026,7 +1304,9 @@ wrapperTag: div
1026
1304
  aria-expanded="false"
1027
1305
  aria-label="Settings"
1028
1306
  >
1029
- <i class="fas fa-cog" aria-hidden="true"></i>
1307
+ <span class="pf-v5-c-menu-toggle__icon">
1308
+ <i class="fas fa-cog" aria-hidden="true"></i>
1309
+ </span>
1030
1310
  </button>
1031
1311
  </div>
1032
1312
  <div class="pf-v5-c-toolbar__item">
@@ -1036,7 +1316,9 @@ wrapperTag: div
1036
1316
  aria-expanded="false"
1037
1317
  aria-label="Help"
1038
1318
  >
1039
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1319
+ <span class="pf-v5-c-menu-toggle__icon">
1320
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1321
+ </span>
1040
1322
  </button>
1041
1323
  </div>
1042
1324
  </div>
@@ -1047,31 +1329,12 @@ wrapperTag: div
1047
1329
  aria-expanded="false"
1048
1330
  aria-label="Actions"
1049
1331
  >
1050
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1332
+ <span class="pf-v5-c-menu-toggle__icon">
1333
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1334
+ </span>
1051
1335
  </button>
1052
1336
  </div>
1053
1337
  </div>
1054
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1055
- <button
1056
- class="pf-v5-c-menu-toggle pf-m-full-height"
1057
- type="button"
1058
- aria-expanded="false"
1059
- >
1060
- <span class="pf-v5-c-menu-toggle__icon">
1061
- <img
1062
- class="pf-v5-c-avatar"
1063
- alt="Avatar image"
1064
- src="/assets/images/img_avatar-light.svg"
1065
- />
1066
- </span>
1067
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1068
- <span class="pf-v5-c-menu-toggle__controls">
1069
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1070
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1071
- </span>
1072
- </span>
1073
- </button>
1074
- </div>
1075
1338
  </div>
1076
1339
  </div>
1077
1340
  </div>
@@ -1251,11 +1514,21 @@ wrapperTag: div
1251
1514
  type="button"
1252
1515
  >Information</button>
1253
1516
  </li>
1254
- <li class="pf-v5-c-wizard__nav-item">
1517
+ <li
1518
+ class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded"
1519
+ >
1255
1520
  <button
1256
1521
  class="pf-v5-c-wizard__nav-link pf-m-current"
1257
1522
  type="button"
1258
- >Configuration</button>
1523
+ aria-expanded="true"
1524
+ >
1525
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
1526
+ <span class="pf-v5-c-wizard__nav-link-toggle">
1527
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
1528
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1529
+ </span>
1530
+ </span>
1531
+ </button>
1259
1532
  <ol class="pf-v5-c-wizard__nav-list" role="list">
1260
1533
  <li class="pf-v5-c-wizard__nav-item">
1261
1534
  <button
@@ -1544,23 +1817,117 @@ wrapperTag: div
1544
1817
  </span>
1545
1818
  <div class="pf-v5-c-masthead__main">
1546
1819
  <a class="pf-v5-c-masthead__brand" href="#">
1547
- <img
1548
- class="pf-v5-c-brand"
1549
- src="/assets/images/pf-logo.svg"
1550
- alt="PatternFly logo"
1551
- style="--pf-v5-c-brand--Height:36px"
1552
- />
1820
+ <svg height="40px" viewBox="0 0 679 158">
1821
+ <title>PF-HorizontalLogo-Color</title>
1822
+ <defs>
1823
+ <linearGradient
1824
+ x1="68%"
1825
+ y1="2.25860997e-13%"
1826
+ x2="32%"
1827
+ y2="100%"
1828
+ id="linearGradient-wizard-with-drawer-expanded-example-masthead"
1829
+ >
1830
+ <stop stop-color="#2B9AF3" offset="0%" />
1831
+ <stop
1832
+ stop-color="#73BCF7"
1833
+ stop-opacity="0.502212631"
1834
+ offset="100%"
1835
+ />
1836
+ </linearGradient>
1837
+ </defs>
1838
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1839
+ <g
1840
+ transform="translate(206.000000, 45.750000)"
1841
+ fill="var(--pf-t--global--text--color--regular)"
1842
+ fill-rule="nonzero"
1843
+ >
1844
+ <path
1845
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1846
+ />
1847
+ <path
1848
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1849
+ />
1850
+ <path
1851
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1852
+ />
1853
+ <path
1854
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1855
+ />
1856
+ <path
1857
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1858
+ />
1859
+ <path
1860
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1861
+ />
1862
+ <path
1863
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1864
+ />
1865
+ <polygon
1866
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1867
+ />
1868
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1869
+ <path
1870
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1871
+ />
1872
+ </g>
1873
+ <g transform="translate(0.000000, 0.000000)">
1874
+ <path
1875
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1876
+ fill="#0066CC"
1877
+ />
1878
+ <path
1879
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1880
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-masthead)"
1881
+ />
1882
+ <path
1883
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1884
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-masthead)"
1885
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1886
+ />
1887
+ </g>
1888
+ </g>
1889
+ </svg>
1553
1890
  </a>
1554
1891
  </div>
1555
1892
  <div class="pf-v5-c-masthead__content">
1556
1893
  <div
1557
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1894
+ class="pf-v5-c-toolbar pf-m-static"
1558
1895
  id="wizard-with-drawer-expanded-example-masthead-toolbar"
1559
1896
  >
1560
1897
  <div class="pf-v5-c-toolbar__content">
1561
1898
  <div class="pf-v5-c-toolbar__content-section">
1899
+ <div class="pf-v5-c-toolbar__item">
1900
+ <button
1901
+ class="pf-v5-c-menu-toggle"
1902
+ type="button"
1903
+ aria-expanded="false"
1904
+ >
1905
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1906
+ <span class="pf-v5-c-menu-toggle__controls">
1907
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1908
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1909
+ </span>
1910
+ </span>
1911
+ </button>
1912
+ </div>
1913
+
1914
+ <div class="pf-v5-c-toolbar__item">
1915
+ <button
1916
+ class="pf-v5-c-menu-toggle"
1917
+ type="button"
1918
+ aria-expanded="false"
1919
+ >
1920
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1921
+ <span class="pf-v5-c-menu-toggle__controls">
1922
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1923
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1924
+ </span>
1925
+ </span>
1926
+ </button>
1927
+ </div>
1928
+
1562
1929
  <div
1563
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1930
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1564
1931
  >
1565
1932
  <div
1566
1933
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1572,7 +1939,9 @@ wrapperTag: div
1572
1939
  aria-expanded="false"
1573
1940
  aria-label="Application launcher"
1574
1941
  >
1575
- <i class="fas fa-th" aria-hidden="true"></i>
1942
+ <span class="pf-v5-c-menu-toggle__icon">
1943
+ <i class="fas fa-th" aria-hidden="true"></i>
1944
+ </span>
1576
1945
  </button>
1577
1946
  </div>
1578
1947
  <div class="pf-v5-c-toolbar__item">
@@ -1582,7 +1951,9 @@ wrapperTag: div
1582
1951
  aria-expanded="false"
1583
1952
  aria-label="Settings"
1584
1953
  >
1585
- <i class="fas fa-cog" aria-hidden="true"></i>
1954
+ <span class="pf-v5-c-menu-toggle__icon">
1955
+ <i class="fas fa-cog" aria-hidden="true"></i>
1956
+ </span>
1586
1957
  </button>
1587
1958
  </div>
1588
1959
  <div class="pf-v5-c-toolbar__item">
@@ -1592,7 +1963,9 @@ wrapperTag: div
1592
1963
  aria-expanded="false"
1593
1964
  aria-label="Help"
1594
1965
  >
1595
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1966
+ <span class="pf-v5-c-menu-toggle__icon">
1967
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1968
+ </span>
1596
1969
  </button>
1597
1970
  </div>
1598
1971
  </div>
@@ -1603,31 +1976,12 @@ wrapperTag: div
1603
1976
  aria-expanded="false"
1604
1977
  aria-label="Actions"
1605
1978
  >
1606
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1979
+ <span class="pf-v5-c-menu-toggle__icon">
1980
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1981
+ </span>
1607
1982
  </button>
1608
1983
  </div>
1609
1984
  </div>
1610
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1611
- <button
1612
- class="pf-v5-c-menu-toggle pf-m-full-height"
1613
- type="button"
1614
- aria-expanded="false"
1615
- >
1616
- <span class="pf-v5-c-menu-toggle__icon">
1617
- <img
1618
- class="pf-v5-c-avatar"
1619
- alt="Avatar image"
1620
- src="/assets/images/img_avatar-light.svg"
1621
- />
1622
- </span>
1623
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1624
- <span class="pf-v5-c-menu-toggle__controls">
1625
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1626
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1627
- </span>
1628
- </span>
1629
- </button>
1630
- </div>
1631
1985
  </div>
1632
1986
  </div>
1633
1987
  </div>
@@ -1807,11 +2161,21 @@ wrapperTag: div
1807
2161
  type="button"
1808
2162
  >Information</button>
1809
2163
  </li>
1810
- <li class="pf-v5-c-wizard__nav-item">
2164
+ <li
2165
+ class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded"
2166
+ >
1811
2167
  <button
1812
2168
  class="pf-v5-c-wizard__nav-link pf-m-current"
1813
2169
  type="button"
1814
- >Configuration</button>
2170
+ aria-expanded="true"
2171
+ >
2172
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
2173
+ <span class="pf-v5-c-wizard__nav-link-toggle">
2174
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
2175
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2176
+ </span>
2177
+ </span>
2178
+ </button>
1815
2179
  <ol class="pf-v5-c-wizard__nav-list" role="list">
1816
2180
  <li class="pf-v5-c-wizard__nav-item">
1817
2181
  <button
@@ -2099,23 +2463,117 @@ wrapperTag: div
2099
2463
  </span>
2100
2464
  <div class="pf-v5-c-masthead__main">
2101
2465
  <a class="pf-v5-c-masthead__brand" href="#">
2102
- <img
2103
- class="pf-v5-c-brand"
2104
- src="/assets/images/pf-logo.svg"
2105
- alt="PatternFly logo"
2106
- style="--pf-v5-c-brand--Height:36px"
2107
- />
2466
+ <svg height="40px" viewBox="0 0 679 158">
2467
+ <title>PF-HorizontalLogo-Color</title>
2468
+ <defs>
2469
+ <linearGradient
2470
+ x1="68%"
2471
+ y1="2.25860997e-13%"
2472
+ x2="32%"
2473
+ y2="100%"
2474
+ id="linearGradient-wizard-with-drawer-info-example-masthead"
2475
+ >
2476
+ <stop stop-color="#2B9AF3" offset="0%" />
2477
+ <stop
2478
+ stop-color="#73BCF7"
2479
+ stop-opacity="0.502212631"
2480
+ offset="100%"
2481
+ />
2482
+ </linearGradient>
2483
+ </defs>
2484
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2485
+ <g
2486
+ transform="translate(206.000000, 45.750000)"
2487
+ fill="var(--pf-t--global--text--color--regular)"
2488
+ fill-rule="nonzero"
2489
+ >
2490
+ <path
2491
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
2492
+ />
2493
+ <path
2494
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2495
+ />
2496
+ <path
2497
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2498
+ />
2499
+ <path
2500
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2501
+ />
2502
+ <path
2503
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2504
+ />
2505
+ <path
2506
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2507
+ />
2508
+ <path
2509
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2510
+ />
2511
+ <polygon
2512
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2513
+ />
2514
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2515
+ <path
2516
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2517
+ />
2518
+ </g>
2519
+ <g transform="translate(0.000000, 0.000000)">
2520
+ <path
2521
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2522
+ fill="#0066CC"
2523
+ />
2524
+ <path
2525
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2526
+ fill="url(#linearGradient-wizard-with-drawer-info-example-masthead)"
2527
+ />
2528
+ <path
2529
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2530
+ fill="url(#linearGradient-wizard-with-drawer-info-example-masthead)"
2531
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2532
+ />
2533
+ </g>
2534
+ </g>
2535
+ </svg>
2108
2536
  </a>
2109
2537
  </div>
2110
2538
  <div class="pf-v5-c-masthead__content">
2111
2539
  <div
2112
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2540
+ class="pf-v5-c-toolbar pf-m-static"
2113
2541
  id="wizard-with-drawer-info-example-masthead-toolbar"
2114
2542
  >
2115
2543
  <div class="pf-v5-c-toolbar__content">
2116
2544
  <div class="pf-v5-c-toolbar__content-section">
2545
+ <div class="pf-v5-c-toolbar__item">
2546
+ <button
2547
+ class="pf-v5-c-menu-toggle"
2548
+ type="button"
2549
+ aria-expanded="false"
2550
+ >
2551
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2552
+ <span class="pf-v5-c-menu-toggle__controls">
2553
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2554
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2555
+ </span>
2556
+ </span>
2557
+ </button>
2558
+ </div>
2559
+
2560
+ <div class="pf-v5-c-toolbar__item">
2561
+ <button
2562
+ class="pf-v5-c-menu-toggle"
2563
+ type="button"
2564
+ aria-expanded="false"
2565
+ >
2566
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2567
+ <span class="pf-v5-c-menu-toggle__controls">
2568
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2569
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2570
+ </span>
2571
+ </span>
2572
+ </button>
2573
+ </div>
2574
+
2117
2575
  <div
2118
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2576
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
2119
2577
  >
2120
2578
  <div
2121
2579
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2127,7 +2585,9 @@ wrapperTag: div
2127
2585
  aria-expanded="false"
2128
2586
  aria-label="Application launcher"
2129
2587
  >
2130
- <i class="fas fa-th" aria-hidden="true"></i>
2588
+ <span class="pf-v5-c-menu-toggle__icon">
2589
+ <i class="fas fa-th" aria-hidden="true"></i>
2590
+ </span>
2131
2591
  </button>
2132
2592
  </div>
2133
2593
  <div class="pf-v5-c-toolbar__item">
@@ -2137,7 +2597,9 @@ wrapperTag: div
2137
2597
  aria-expanded="false"
2138
2598
  aria-label="Settings"
2139
2599
  >
2140
- <i class="fas fa-cog" aria-hidden="true"></i>
2600
+ <span class="pf-v5-c-menu-toggle__icon">
2601
+ <i class="fas fa-cog" aria-hidden="true"></i>
2602
+ </span>
2141
2603
  </button>
2142
2604
  </div>
2143
2605
  <div class="pf-v5-c-toolbar__item">
@@ -2147,7 +2609,9 @@ wrapperTag: div
2147
2609
  aria-expanded="false"
2148
2610
  aria-label="Help"
2149
2611
  >
2150
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2612
+ <span class="pf-v5-c-menu-toggle__icon">
2613
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2614
+ </span>
2151
2615
  </button>
2152
2616
  </div>
2153
2617
  </div>
@@ -2158,31 +2622,12 @@ wrapperTag: div
2158
2622
  aria-expanded="false"
2159
2623
  aria-label="Actions"
2160
2624
  >
2161
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2625
+ <span class="pf-v5-c-menu-toggle__icon">
2626
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2627
+ </span>
2162
2628
  </button>
2163
2629
  </div>
2164
2630
  </div>
2165
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2166
- <button
2167
- class="pf-v5-c-menu-toggle pf-m-full-height"
2168
- type="button"
2169
- aria-expanded="false"
2170
- >
2171
- <span class="pf-v5-c-menu-toggle__icon">
2172
- <img
2173
- class="pf-v5-c-avatar"
2174
- alt="Avatar image"
2175
- src="/assets/images/img_avatar-light.svg"
2176
- />
2177
- </span>
2178
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2179
- <span class="pf-v5-c-menu-toggle__controls">
2180
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2181
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2182
- </span>
2183
- </span>
2184
- </button>
2185
- </div>
2186
2631
  </div>
2187
2632
  </div>
2188
2633
  </div>
@@ -2362,11 +2807,21 @@ wrapperTag: div
2362
2807
  type="button"
2363
2808
  >Information</button>
2364
2809
  </li>
2365
- <li class="pf-v5-c-wizard__nav-item">
2810
+ <li
2811
+ class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded"
2812
+ >
2366
2813
  <button
2367
2814
  class="pf-v5-c-wizard__nav-link pf-m-current"
2368
2815
  type="button"
2369
- >Configuration</button>
2816
+ aria-expanded="true"
2817
+ >
2818
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
2819
+ <span class="pf-v5-c-wizard__nav-link-toggle">
2820
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
2821
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2822
+ </span>
2823
+ </span>
2824
+ </button>
2370
2825
  <ol class="pf-v5-c-wizard__nav-list" role="list">
2371
2826
  <li class="pf-v5-c-wizard__nav-item">
2372
2827
  <button
@@ -2522,23 +2977,117 @@ wrapperTag: div
2522
2977
  </span>
2523
2978
  <div class="pf-v5-c-masthead__main">
2524
2979
  <a class="pf-v5-c-masthead__brand" href="#">
2525
- <img
2526
- class="pf-v5-c-brand"
2527
- src="/assets/images/pf-logo.svg"
2528
- alt="PatternFly logo"
2529
- style="--pf-v5-c-brand--Height:36px"
2530
- />
2980
+ <svg height="40px" viewBox="0 0 679 158">
2981
+ <title>PF-HorizontalLogo-Color</title>
2982
+ <defs>
2983
+ <linearGradient
2984
+ x1="68%"
2985
+ y1="2.25860997e-13%"
2986
+ x2="32%"
2987
+ y2="100%"
2988
+ id="linearGradient-wizard-in-page-example-masthead"
2989
+ >
2990
+ <stop stop-color="#2B9AF3" offset="0%" />
2991
+ <stop
2992
+ stop-color="#73BCF7"
2993
+ stop-opacity="0.502212631"
2994
+ offset="100%"
2995
+ />
2996
+ </linearGradient>
2997
+ </defs>
2998
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2999
+ <g
3000
+ transform="translate(206.000000, 45.750000)"
3001
+ fill="var(--pf-t--global--text--color--regular)"
3002
+ fill-rule="nonzero"
3003
+ >
3004
+ <path
3005
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
3006
+ />
3007
+ <path
3008
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
3009
+ />
3010
+ <path
3011
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
3012
+ />
3013
+ <path
3014
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
3015
+ />
3016
+ <path
3017
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
3018
+ />
3019
+ <path
3020
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
3021
+ />
3022
+ <path
3023
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
3024
+ />
3025
+ <polygon
3026
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
3027
+ />
3028
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3029
+ <path
3030
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3031
+ />
3032
+ </g>
3033
+ <g transform="translate(0.000000, 0.000000)">
3034
+ <path
3035
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3036
+ fill="#0066CC"
3037
+ />
3038
+ <path
3039
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3040
+ fill="url(#linearGradient-wizard-in-page-example-masthead)"
3041
+ />
3042
+ <path
3043
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3044
+ fill="url(#linearGradient-wizard-in-page-example-masthead)"
3045
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3046
+ />
3047
+ </g>
3048
+ </g>
3049
+ </svg>
2531
3050
  </a>
2532
3051
  </div>
2533
3052
  <div class="pf-v5-c-masthead__content">
2534
3053
  <div
2535
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
3054
+ class="pf-v5-c-toolbar pf-m-static"
2536
3055
  id="wizard-in-page-example-masthead-toolbar"
2537
3056
  >
2538
3057
  <div class="pf-v5-c-toolbar__content">
2539
3058
  <div class="pf-v5-c-toolbar__content-section">
3059
+ <div class="pf-v5-c-toolbar__item">
3060
+ <button
3061
+ class="pf-v5-c-menu-toggle"
3062
+ type="button"
3063
+ aria-expanded="false"
3064
+ >
3065
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3066
+ <span class="pf-v5-c-menu-toggle__controls">
3067
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3068
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3069
+ </span>
3070
+ </span>
3071
+ </button>
3072
+ </div>
3073
+
3074
+ <div class="pf-v5-c-toolbar__item">
3075
+ <button
3076
+ class="pf-v5-c-menu-toggle"
3077
+ type="button"
3078
+ aria-expanded="false"
3079
+ >
3080
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3081
+ <span class="pf-v5-c-menu-toggle__controls">
3082
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3083
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3084
+ </span>
3085
+ </span>
3086
+ </button>
3087
+ </div>
3088
+
2540
3089
  <div
2541
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3090
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
2542
3091
  >
2543
3092
  <div
2544
3093
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2550,7 +3099,9 @@ wrapperTag: div
2550
3099
  aria-expanded="false"
2551
3100
  aria-label="Application launcher"
2552
3101
  >
2553
- <i class="fas fa-th" aria-hidden="true"></i>
3102
+ <span class="pf-v5-c-menu-toggle__icon">
3103
+ <i class="fas fa-th" aria-hidden="true"></i>
3104
+ </span>
2554
3105
  </button>
2555
3106
  </div>
2556
3107
  <div class="pf-v5-c-toolbar__item">
@@ -2560,7 +3111,9 @@ wrapperTag: div
2560
3111
  aria-expanded="false"
2561
3112
  aria-label="Settings"
2562
3113
  >
2563
- <i class="fas fa-cog" aria-hidden="true"></i>
3114
+ <span class="pf-v5-c-menu-toggle__icon">
3115
+ <i class="fas fa-cog" aria-hidden="true"></i>
3116
+ </span>
2564
3117
  </button>
2565
3118
  </div>
2566
3119
  <div class="pf-v5-c-toolbar__item">
@@ -2570,7 +3123,9 @@ wrapperTag: div
2570
3123
  aria-expanded="false"
2571
3124
  aria-label="Help"
2572
3125
  >
2573
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3126
+ <span class="pf-v5-c-menu-toggle__icon">
3127
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3128
+ </span>
2574
3129
  </button>
2575
3130
  </div>
2576
3131
  </div>
@@ -2581,31 +3136,12 @@ wrapperTag: div
2581
3136
  aria-expanded="false"
2582
3137
  aria-label="Actions"
2583
3138
  >
2584
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3139
+ <span class="pf-v5-c-menu-toggle__icon">
3140
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3141
+ </span>
2585
3142
  </button>
2586
3143
  </div>
2587
3144
  </div>
2588
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2589
- <button
2590
- class="pf-v5-c-menu-toggle pf-m-full-height"
2591
- type="button"
2592
- aria-expanded="false"
2593
- >
2594
- <span class="pf-v5-c-menu-toggle__icon">
2595
- <img
2596
- class="pf-v5-c-avatar"
2597
- alt="Avatar image"
2598
- src="/assets/images/img_avatar-light.svg"
2599
- />
2600
- </span>
2601
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2602
- <span class="pf-v5-c-menu-toggle__controls">
2603
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2604
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2605
- </span>
2606
- </span>
2607
- </button>
2608
- </div>
2609
3145
  </div>
2610
3146
  </div>
2611
3147
  </div>
@@ -2723,11 +3259,21 @@ wrapperTag: div
2723
3259
  type="button"
2724
3260
  >Information</button>
2725
3261
  </li>
2726
- <li class="pf-v5-c-wizard__nav-item">
3262
+ <li
3263
+ class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded"
3264
+ >
2727
3265
  <button
2728
3266
  class="pf-v5-c-wizard__nav-link pf-m-current"
2729
3267
  type="button"
2730
- >Configuration</button>
3268
+ aria-expanded="true"
3269
+ >
3270
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
3271
+ <span class="pf-v5-c-wizard__nav-link-toggle">
3272
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
3273
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3274
+ </span>
3275
+ </span>
3276
+ </button>
2731
3277
  <ol class="pf-v5-c-wizard__nav-list" role="list">
2732
3278
  <li class="pf-v5-c-wizard__nav-item">
2733
3279
  <button
@@ -2950,23 +3496,117 @@ wrapperTag: div
2950
3496
  </span>
2951
3497
  <div class="pf-v5-c-masthead__main">
2952
3498
  <a class="pf-v5-c-masthead__brand" href="#">
2953
- <img
2954
- class="pf-v5-c-brand"
2955
- src="/assets/images/pf-logo.svg"
2956
- alt="PatternFly logo"
2957
- style="--pf-v5-c-brand--Height:36px"
2958
- />
3499
+ <svg height="40px" viewBox="0 0 679 158">
3500
+ <title>PF-HorizontalLogo-Color</title>
3501
+ <defs>
3502
+ <linearGradient
3503
+ x1="68%"
3504
+ y1="2.25860997e-13%"
3505
+ x2="32%"
3506
+ y2="100%"
3507
+ id="linearGradient-in-page-nav-expanded-example-masthead"
3508
+ >
3509
+ <stop stop-color="#2B9AF3" offset="0%" />
3510
+ <stop
3511
+ stop-color="#73BCF7"
3512
+ stop-opacity="0.502212631"
3513
+ offset="100%"
3514
+ />
3515
+ </linearGradient>
3516
+ </defs>
3517
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3518
+ <g
3519
+ transform="translate(206.000000, 45.750000)"
3520
+ fill="var(--pf-t--global--text--color--regular)"
3521
+ fill-rule="nonzero"
3522
+ >
3523
+ <path
3524
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
3525
+ />
3526
+ <path
3527
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
3528
+ />
3529
+ <path
3530
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
3531
+ />
3532
+ <path
3533
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
3534
+ />
3535
+ <path
3536
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
3537
+ />
3538
+ <path
3539
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
3540
+ />
3541
+ <path
3542
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
3543
+ />
3544
+ <polygon
3545
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
3546
+ />
3547
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3548
+ <path
3549
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3550
+ />
3551
+ </g>
3552
+ <g transform="translate(0.000000, 0.000000)">
3553
+ <path
3554
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3555
+ fill="#0066CC"
3556
+ />
3557
+ <path
3558
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3559
+ fill="url(#linearGradient-in-page-nav-expanded-example-masthead)"
3560
+ />
3561
+ <path
3562
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3563
+ fill="url(#linearGradient-in-page-nav-expanded-example-masthead)"
3564
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3565
+ />
3566
+ </g>
3567
+ </g>
3568
+ </svg>
2959
3569
  </a>
2960
3570
  </div>
2961
3571
  <div class="pf-v5-c-masthead__content">
2962
3572
  <div
2963
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
3573
+ class="pf-v5-c-toolbar pf-m-static"
2964
3574
  id="in-page-nav-expanded-example-masthead-toolbar"
2965
3575
  >
2966
3576
  <div class="pf-v5-c-toolbar__content">
2967
3577
  <div class="pf-v5-c-toolbar__content-section">
3578
+ <div class="pf-v5-c-toolbar__item">
3579
+ <button
3580
+ class="pf-v5-c-menu-toggle"
3581
+ type="button"
3582
+ aria-expanded="false"
3583
+ >
3584
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3585
+ <span class="pf-v5-c-menu-toggle__controls">
3586
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3587
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3588
+ </span>
3589
+ </span>
3590
+ </button>
3591
+ </div>
3592
+
3593
+ <div class="pf-v5-c-toolbar__item">
3594
+ <button
3595
+ class="pf-v5-c-menu-toggle"
3596
+ type="button"
3597
+ aria-expanded="false"
3598
+ >
3599
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3600
+ <span class="pf-v5-c-menu-toggle__controls">
3601
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3602
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3603
+ </span>
3604
+ </span>
3605
+ </button>
3606
+ </div>
3607
+
2968
3608
  <div
2969
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3609
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
2970
3610
  >
2971
3611
  <div
2972
3612
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2978,7 +3618,9 @@ wrapperTag: div
2978
3618
  aria-expanded="false"
2979
3619
  aria-label="Application launcher"
2980
3620
  >
2981
- <i class="fas fa-th" aria-hidden="true"></i>
3621
+ <span class="pf-v5-c-menu-toggle__icon">
3622
+ <i class="fas fa-th" aria-hidden="true"></i>
3623
+ </span>
2982
3624
  </button>
2983
3625
  </div>
2984
3626
  <div class="pf-v5-c-toolbar__item">
@@ -2988,7 +3630,9 @@ wrapperTag: div
2988
3630
  aria-expanded="false"
2989
3631
  aria-label="Settings"
2990
3632
  >
2991
- <i class="fas fa-cog" aria-hidden="true"></i>
3633
+ <span class="pf-v5-c-menu-toggle__icon">
3634
+ <i class="fas fa-cog" aria-hidden="true"></i>
3635
+ </span>
2992
3636
  </button>
2993
3637
  </div>
2994
3638
  <div class="pf-v5-c-toolbar__item">
@@ -2998,7 +3642,9 @@ wrapperTag: div
2998
3642
  aria-expanded="false"
2999
3643
  aria-label="Help"
3000
3644
  >
3001
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3645
+ <span class="pf-v5-c-menu-toggle__icon">
3646
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3647
+ </span>
3002
3648
  </button>
3003
3649
  </div>
3004
3650
  </div>
@@ -3009,31 +3655,12 @@ wrapperTag: div
3009
3655
  aria-expanded="false"
3010
3656
  aria-label="Actions"
3011
3657
  >
3012
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3658
+ <span class="pf-v5-c-menu-toggle__icon">
3659
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3660
+ </span>
3013
3661
  </button>
3014
3662
  </div>
3015
3663
  </div>
3016
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3017
- <button
3018
- class="pf-v5-c-menu-toggle pf-m-full-height"
3019
- type="button"
3020
- aria-expanded="false"
3021
- >
3022
- <span class="pf-v5-c-menu-toggle__icon">
3023
- <img
3024
- class="pf-v5-c-avatar"
3025
- alt="Avatar image"
3026
- src="/assets/images/img_avatar-light.svg"
3027
- />
3028
- </span>
3029
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3030
- <span class="pf-v5-c-menu-toggle__controls">
3031
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3032
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3033
- </span>
3034
- </span>
3035
- </button>
3036
- </div>
3037
3664
  </div>
3038
3665
  </div>
3039
3666
  </div>
@@ -3151,11 +3778,21 @@ wrapperTag: div
3151
3778
  type="button"
3152
3779
  >Information</button>
3153
3780
  </li>
3154
- <li class="pf-v5-c-wizard__nav-item">
3781
+ <li
3782
+ class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded"
3783
+ >
3155
3784
  <button
3156
3785
  class="pf-v5-c-wizard__nav-link pf-m-current"
3157
3786
  type="button"
3158
- >Configuration</button>
3787
+ aria-expanded="true"
3788
+ >
3789
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
3790
+ <span class="pf-v5-c-wizard__nav-link-toggle">
3791
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
3792
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3793
+ </span>
3794
+ </span>
3795
+ </button>
3159
3796
  <ol class="pf-v5-c-wizard__nav-list" role="list">
3160
3797
  <li class="pf-v5-c-wizard__nav-item">
3161
3798
  <button
@@ -3360,23 +3997,117 @@ wrapperTag: div
3360
3997
  </span>
3361
3998
  <div class="pf-v5-c-masthead__main">
3362
3999
  <a class="pf-v5-c-masthead__brand" href="#">
3363
- <img
3364
- class="pf-v5-c-brand"
3365
- src="/assets/images/pf-logo.svg"
3366
- alt="PatternFly logo"
3367
- style="--pf-v5-c-brand--Height:36px"
3368
- />
4000
+ <svg height="40px" viewBox="0 0 679 158">
4001
+ <title>PF-HorizontalLogo-Color</title>
4002
+ <defs>
4003
+ <linearGradient
4004
+ x1="68%"
4005
+ y1="2.25860997e-13%"
4006
+ x2="32%"
4007
+ y2="100%"
4008
+ id="linearGradient-wizard-with-drawer-in-page-example-masthead"
4009
+ >
4010
+ <stop stop-color="#2B9AF3" offset="0%" />
4011
+ <stop
4012
+ stop-color="#73BCF7"
4013
+ stop-opacity="0.502212631"
4014
+ offset="100%"
4015
+ />
4016
+ </linearGradient>
4017
+ </defs>
4018
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4019
+ <g
4020
+ transform="translate(206.000000, 45.750000)"
4021
+ fill="var(--pf-t--global--text--color--regular)"
4022
+ fill-rule="nonzero"
4023
+ >
4024
+ <path
4025
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
4026
+ />
4027
+ <path
4028
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
4029
+ />
4030
+ <path
4031
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
4032
+ />
4033
+ <path
4034
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
4035
+ />
4036
+ <path
4037
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
4038
+ />
4039
+ <path
4040
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
4041
+ />
4042
+ <path
4043
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
4044
+ />
4045
+ <polygon
4046
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
4047
+ />
4048
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
4049
+ <path
4050
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
4051
+ />
4052
+ </g>
4053
+ <g transform="translate(0.000000, 0.000000)">
4054
+ <path
4055
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
4056
+ fill="#0066CC"
4057
+ />
4058
+ <path
4059
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4060
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-masthead)"
4061
+ />
4062
+ <path
4063
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4064
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-masthead)"
4065
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4066
+ />
4067
+ </g>
4068
+ </g>
4069
+ </svg>
3369
4070
  </a>
3370
4071
  </div>
3371
4072
  <div class="pf-v5-c-masthead__content">
3372
4073
  <div
3373
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
4074
+ class="pf-v5-c-toolbar pf-m-static"
3374
4075
  id="wizard-with-drawer-in-page-example-masthead-toolbar"
3375
4076
  >
3376
4077
  <div class="pf-v5-c-toolbar__content">
3377
4078
  <div class="pf-v5-c-toolbar__content-section">
4079
+ <div class="pf-v5-c-toolbar__item">
4080
+ <button
4081
+ class="pf-v5-c-menu-toggle"
4082
+ type="button"
4083
+ aria-expanded="false"
4084
+ >
4085
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
4086
+ <span class="pf-v5-c-menu-toggle__controls">
4087
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4088
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4089
+ </span>
4090
+ </span>
4091
+ </button>
4092
+ </div>
4093
+
4094
+ <div class="pf-v5-c-toolbar__item">
4095
+ <button
4096
+ class="pf-v5-c-menu-toggle"
4097
+ type="button"
4098
+ aria-expanded="false"
4099
+ >
4100
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
4101
+ <span class="pf-v5-c-menu-toggle__controls">
4102
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4103
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4104
+ </span>
4105
+ </span>
4106
+ </button>
4107
+ </div>
4108
+
3378
4109
  <div
3379
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
4110
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3380
4111
  >
3381
4112
  <div
3382
4113
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3388,7 +4119,9 @@ wrapperTag: div
3388
4119
  aria-expanded="false"
3389
4120
  aria-label="Application launcher"
3390
4121
  >
3391
- <i class="fas fa-th" aria-hidden="true"></i>
4122
+ <span class="pf-v5-c-menu-toggle__icon">
4123
+ <i class="fas fa-th" aria-hidden="true"></i>
4124
+ </span>
3392
4125
  </button>
3393
4126
  </div>
3394
4127
  <div class="pf-v5-c-toolbar__item">
@@ -3398,7 +4131,9 @@ wrapperTag: div
3398
4131
  aria-expanded="false"
3399
4132
  aria-label="Settings"
3400
4133
  >
3401
- <i class="fas fa-cog" aria-hidden="true"></i>
4134
+ <span class="pf-v5-c-menu-toggle__icon">
4135
+ <i class="fas fa-cog" aria-hidden="true"></i>
4136
+ </span>
3402
4137
  </button>
3403
4138
  </div>
3404
4139
  <div class="pf-v5-c-toolbar__item">
@@ -3408,7 +4143,9 @@ wrapperTag: div
3408
4143
  aria-expanded="false"
3409
4144
  aria-label="Help"
3410
4145
  >
3411
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4146
+ <span class="pf-v5-c-menu-toggle__icon">
4147
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
4148
+ </span>
3412
4149
  </button>
3413
4150
  </div>
3414
4151
  </div>
@@ -3419,31 +4156,12 @@ wrapperTag: div
3419
4156
  aria-expanded="false"
3420
4157
  aria-label="Actions"
3421
4158
  >
3422
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4159
+ <span class="pf-v5-c-menu-toggle__icon">
4160
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4161
+ </span>
3423
4162
  </button>
3424
4163
  </div>
3425
4164
  </div>
3426
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3427
- <button
3428
- class="pf-v5-c-menu-toggle pf-m-full-height"
3429
- type="button"
3430
- aria-expanded="false"
3431
- >
3432
- <span class="pf-v5-c-menu-toggle__icon">
3433
- <img
3434
- class="pf-v5-c-avatar"
3435
- alt="Avatar image"
3436
- src="/assets/images/img_avatar-light.svg"
3437
- />
3438
- </span>
3439
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3440
- <span class="pf-v5-c-menu-toggle__controls">
3441
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3442
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3443
- </span>
3444
- </span>
3445
- </button>
3446
- </div>
3447
4165
  </div>
3448
4166
  </div>
3449
4167
  </div>
@@ -3561,11 +4279,21 @@ wrapperTag: div
3561
4279
  type="button"
3562
4280
  >Information</button>
3563
4281
  </li>
3564
- <li class="pf-v5-c-wizard__nav-item">
4282
+ <li
4283
+ class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded"
4284
+ >
3565
4285
  <button
3566
4286
  class="pf-v5-c-wizard__nav-link pf-m-current"
3567
4287
  type="button"
3568
- >Configuration</button>
4288
+ aria-expanded="true"
4289
+ >
4290
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
4291
+ <span class="pf-v5-c-wizard__nav-link-toggle">
4292
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
4293
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4294
+ </span>
4295
+ </span>
4296
+ </button>
3569
4297
  <ol class="pf-v5-c-wizard__nav-list" role="list">
3570
4298
  <li class="pf-v5-c-wizard__nav-item">
3571
4299
  <button
@@ -3842,23 +4570,117 @@ wrapperTag: div
3842
4570
  </span>
3843
4571
  <div class="pf-v5-c-masthead__main">
3844
4572
  <a class="pf-v5-c-masthead__brand" href="#">
3845
- <img
3846
- class="pf-v5-c-brand"
3847
- src="/assets/images/pf-logo.svg"
3848
- alt="PatternFly logo"
3849
- style="--pf-v5-c-brand--Height:36px"
3850
- />
4573
+ <svg height="40px" viewBox="0 0 679 158">
4574
+ <title>PF-HorizontalLogo-Color</title>
4575
+ <defs>
4576
+ <linearGradient
4577
+ x1="68%"
4578
+ y1="2.25860997e-13%"
4579
+ x2="32%"
4580
+ y2="100%"
4581
+ id="linearGradient-wizard-with-drawer-in-page-expanded-example-masthead"
4582
+ >
4583
+ <stop stop-color="#2B9AF3" offset="0%" />
4584
+ <stop
4585
+ stop-color="#73BCF7"
4586
+ stop-opacity="0.502212631"
4587
+ offset="100%"
4588
+ />
4589
+ </linearGradient>
4590
+ </defs>
4591
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4592
+ <g
4593
+ transform="translate(206.000000, 45.750000)"
4594
+ fill="var(--pf-t--global--text--color--regular)"
4595
+ fill-rule="nonzero"
4596
+ >
4597
+ <path
4598
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
4599
+ />
4600
+ <path
4601
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
4602
+ />
4603
+ <path
4604
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
4605
+ />
4606
+ <path
4607
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
4608
+ />
4609
+ <path
4610
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
4611
+ />
4612
+ <path
4613
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
4614
+ />
4615
+ <path
4616
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
4617
+ />
4618
+ <polygon
4619
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
4620
+ />
4621
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
4622
+ <path
4623
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
4624
+ />
4625
+ </g>
4626
+ <g transform="translate(0.000000, 0.000000)">
4627
+ <path
4628
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
4629
+ fill="#0066CC"
4630
+ />
4631
+ <path
4632
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4633
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-masthead)"
4634
+ />
4635
+ <path
4636
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4637
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-masthead)"
4638
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4639
+ />
4640
+ </g>
4641
+ </g>
4642
+ </svg>
3851
4643
  </a>
3852
4644
  </div>
3853
4645
  <div class="pf-v5-c-masthead__content">
3854
4646
  <div
3855
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
4647
+ class="pf-v5-c-toolbar pf-m-static"
3856
4648
  id="wizard-with-drawer-in-page-expanded-example-masthead-toolbar"
3857
4649
  >
3858
4650
  <div class="pf-v5-c-toolbar__content">
3859
4651
  <div class="pf-v5-c-toolbar__content-section">
4652
+ <div class="pf-v5-c-toolbar__item">
4653
+ <button
4654
+ class="pf-v5-c-menu-toggle"
4655
+ type="button"
4656
+ aria-expanded="false"
4657
+ >
4658
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
4659
+ <span class="pf-v5-c-menu-toggle__controls">
4660
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4661
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4662
+ </span>
4663
+ </span>
4664
+ </button>
4665
+ </div>
4666
+
4667
+ <div class="pf-v5-c-toolbar__item">
4668
+ <button
4669
+ class="pf-v5-c-menu-toggle"
4670
+ type="button"
4671
+ aria-expanded="false"
4672
+ >
4673
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
4674
+ <span class="pf-v5-c-menu-toggle__controls">
4675
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4676
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4677
+ </span>
4678
+ </span>
4679
+ </button>
4680
+ </div>
4681
+
3860
4682
  <div
3861
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
4683
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3862
4684
  >
3863
4685
  <div
3864
4686
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3870,7 +4692,9 @@ wrapperTag: div
3870
4692
  aria-expanded="false"
3871
4693
  aria-label="Application launcher"
3872
4694
  >
3873
- <i class="fas fa-th" aria-hidden="true"></i>
4695
+ <span class="pf-v5-c-menu-toggle__icon">
4696
+ <i class="fas fa-th" aria-hidden="true"></i>
4697
+ </span>
3874
4698
  </button>
3875
4699
  </div>
3876
4700
  <div class="pf-v5-c-toolbar__item">
@@ -3880,7 +4704,9 @@ wrapperTag: div
3880
4704
  aria-expanded="false"
3881
4705
  aria-label="Settings"
3882
4706
  >
3883
- <i class="fas fa-cog" aria-hidden="true"></i>
4707
+ <span class="pf-v5-c-menu-toggle__icon">
4708
+ <i class="fas fa-cog" aria-hidden="true"></i>
4709
+ </span>
3884
4710
  </button>
3885
4711
  </div>
3886
4712
  <div class="pf-v5-c-toolbar__item">
@@ -3890,7 +4716,9 @@ wrapperTag: div
3890
4716
  aria-expanded="false"
3891
4717
  aria-label="Help"
3892
4718
  >
3893
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4719
+ <span class="pf-v5-c-menu-toggle__icon">
4720
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
4721
+ </span>
3894
4722
  </button>
3895
4723
  </div>
3896
4724
  </div>
@@ -3901,31 +4729,12 @@ wrapperTag: div
3901
4729
  aria-expanded="false"
3902
4730
  aria-label="Actions"
3903
4731
  >
3904
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4732
+ <span class="pf-v5-c-menu-toggle__icon">
4733
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4734
+ </span>
3905
4735
  </button>
3906
4736
  </div>
3907
4737
  </div>
3908
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3909
- <button
3910
- class="pf-v5-c-menu-toggle pf-m-full-height"
3911
- type="button"
3912
- aria-expanded="false"
3913
- >
3914
- <span class="pf-v5-c-menu-toggle__icon">
3915
- <img
3916
- class="pf-v5-c-avatar"
3917
- alt="Avatar image"
3918
- src="/assets/images/img_avatar-light.svg"
3919
- />
3920
- </span>
3921
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3922
- <span class="pf-v5-c-menu-toggle__controls">
3923
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3924
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3925
- </span>
3926
- </span>
3927
- </button>
3928
- </div>
3929
4738
  </div>
3930
4739
  </div>
3931
4740
  </div>
@@ -4043,11 +4852,21 @@ wrapperTag: div
4043
4852
  type="button"
4044
4853
  >Information</button>
4045
4854
  </li>
4046
- <li class="pf-v5-c-wizard__nav-item">
4855
+ <li
4856
+ class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded"
4857
+ >
4047
4858
  <button
4048
4859
  class="pf-v5-c-wizard__nav-link pf-m-current"
4049
4860
  type="button"
4050
- >Configuration</button>
4861
+ aria-expanded="true"
4862
+ >
4863
+ <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
4864
+ <span class="pf-v5-c-wizard__nav-link-toggle">
4865
+ <span class="pf-v5-c-wizard__nav-link-toggle-icon">
4866
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4867
+ </span>
4868
+ </span>
4869
+ </button>
4051
4870
  <ol class="pf-v5-c-wizard__nav-list" role="list">
4052
4871
  <li class="pf-v5-c-wizard__nav-item">
4053
4872
  <button