@patternfly/react-core 4.247.0 → 4.247.1

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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-core.min.css +2199 -2199
  3. package/package.json +2 -2
  4. package/src/demos/Page.md +47 -0
  5. package/src/demos/examples/DashboardWrapper.js +3 -1
  6. package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx +305 -0
  7. package/src/demos/examples/Page/PageStickySectionGroup.tsx +306 -0
  8. package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx +301 -0
  9. package/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx +293 -0
  10. package/src/demos/Page/Page.md +0 -1184
  11. package/src/demos/Page/imgAvatar.svg +0 -33
  12. package/src/demos/Page/imgBrand.svg +0 -1
package/src/demos/Page/Page.md DELETED
@@ -1,1184 +0,0 @@
1
- ---
2
- id: Page
3
- section: components
4
- ---
5
-
6
- import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
7
- import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
8
- import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
9
- import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
10
- import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
11
- import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
12
- import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
13
- import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
14
-
15
- - All but the last example set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
16
-
17
- 1. Add an onNavToggle callback to PageHeader
18
- 1. Pass a boolean into the isNavOpen prop to PageSidebar
19
-
20
- The last example demonstrates this.
21
-
22
- - To make the page take up the full height, it is recommended to set the height of all ancestor elements up to the page component to `100%`
23
-
24
- ## Layouts
25
-
26
- This demonstrates a variety of navigation patterns in the context of a full page layout. These can be used as a basis for choosing the most appropriate page template for your application.
27
-
28
- ### Sticky section group
29
-
30
- ```js isFullscreen
31
- import React from 'react';
32
- import {
33
- Avatar,
34
- Brand,
35
- Breadcrumb,
36
- BreadcrumbItem,
37
- Button,
38
- ButtonVariant,
39
- Card,
40
- CardBody,
41
- Divider,
42
- Dropdown,
43
- DropdownGroup,
44
- DropdownToggle,
45
- DropdownItem,
46
- Gallery,
47
- GalleryItem,
48
- KebabToggle,
49
- Masthead,
50
- MastheadBrand,
51
- MastheadContent,
52
- MastheadMain,
53
- MastheadToggle,
54
- Nav,
55
- NavItem,
56
- NavList,
57
- Page,
58
- PageSection,
59
- PageSectionVariants,
60
- PageSidebar,
61
- PageToggleButton,
62
- SkipToContent,
63
- TextContent,
64
- Text,
65
- Toolbar,
66
- ToolbarContent,
67
- ToolbarGroup,
68
- ToolbarItem,
69
- Drawer,
70
- DrawerPanelContent,
71
- DrawerContent,
72
- DrawerContentBody,
73
- DrawerHead,
74
- DrawerActions,
75
- DrawerCloseButton,
76
- } from '@patternfly/react-core';
77
- import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
78
- import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
79
- import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
80
- import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
81
- import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
82
- import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
83
- import imgBrand from './imgBrand.svg';
84
- import imgAvatar from './imgAvatar.svg';
85
-
86
- class PageLayoutGrouped extends React.Component {
87
- constructor(props) {
88
- super(props);
89
- this.state = {
90
- isDropdownOpen: false,
91
- isKebabDropdownOpen: false,
92
- isFullKebabDropdownOpen: false,
93
- activeItem: 0,
94
- isDrawerExpanded: false
95
- };
96
- this.onDropdownToggle = isDropdownOpen => {
97
- this.setState({
98
- isDropdownOpen
99
- });
100
- };
101
-
102
- this.onDropdownSelect = event => {
103
- this.setState({
104
- isDropdownOpen: !this.state.isDropdownOpen
105
- });
106
- };
107
-
108
- this.onKebabDropdownToggle = isKebabDropdownOpen => {
109
- this.setState({
110
- isKebabDropdownOpen
111
- });
112
- };
113
-
114
- this.onKebabDropdownSelect = event => {
115
- this.setState({
116
- isKebabDropdownOpen: !this.state.isKebabDropdownOpen
117
- });
118
- };
119
-
120
- this.onNavSelect = result => {
121
- this.setState({
122
- activeItem: result.itemId
123
- });
124
- };
125
-
126
- this.onFullKebabToggle = isFullKebabDropdownOpen => {
127
- this.setState({
128
- isFullKebabDropdownOpen
129
- });
130
- };
131
-
132
- this.onFullKebabSelect = () => {
133
- this.setState({
134
- isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen
135
- });
136
- };
137
-
138
- this.onDrawerToggle = () => {
139
- const isDrawerExpanded = !this.state.isDrawerExpanded;
140
- this.setState({
141
- isDrawerExpanded
142
- });
143
- };
144
-
145
- this.onDrawerClose = () => {
146
- this.setState({
147
- isDrawerExpanded: false
148
- });
149
- };
150
- }
151
-
152
- render() {
153
- const { isDropdownOpen, isKebabDropdownOpen, activeItem, isFullKebabDropdownOpen, isDrawerExpanded } = this.state;
154
-
155
- const PageNav = (
156
- <Nav variant="tertiary" onSelect={this.onNavSelect} aria-label="Nav">
157
- <NavList>
158
- <NavItem href="#" itemId={0} isActive={activeItem === 0}>
159
- System panel
160
- </NavItem>
161
- <NavItem href="#" itemId={1} isActive={activeItem === 1}>
162
- Policy
163
- </NavItem>
164
- <NavItem href="#" itemId={2} isActive={activeItem === 2}>
165
- Authentication
166
- </NavItem>
167
- <NavItem href="#" itemId={3} isActive={activeItem === 3}>
168
- Network services
169
- </NavItem>
170
- <NavItem href="#" itemId={4} isActive={activeItem === 4}>
171
- Server
172
- </NavItem>
173
- </NavList>
174
- </Nav>
175
- );
176
-
177
- const kebabDropdownItems = [
178
- <DropdownItem key="settings">
179
- <CogIcon /> Settings
180
- </DropdownItem>,
181
- <DropdownItem key="help">
182
- <HelpIcon /> Help
183
- </DropdownItem>
184
- ];
185
-
186
- const userDropdownItems = [
187
- <DropdownGroup key="group 2">
188
- <DropdownItem key="group 2 profile">My profile</DropdownItem>
189
- <DropdownItem key="group 2 user" component="button">
190
- User management
191
- </DropdownItem>
192
- <DropdownItem key="group 2 logout">Logout</DropdownItem>
193
- </DropdownGroup>
194
- ];
195
-
196
- const fullKebabItems = [
197
- <DropdownGroup key="group 2">
198
- <DropdownItem key="group 2 profile">My profile</DropdownItem>
199
- <DropdownItem key="group 2 user" component="button">
200
- User management
201
- </DropdownItem>
202
- <DropdownItem key="group 2 logout">Logout</DropdownItem>
203
- </DropdownGroup>,
204
- <Divider key="divider" />,
205
- <DropdownItem key="kebab-1">
206
- <CogIcon /> Settings
207
- </DropdownItem>,
208
- <DropdownItem key="kebab-2">
209
- <HelpIcon /> Help
210
- </DropdownItem>
211
- ];
212
-
213
- const headerToolbar = (
214
- <Toolbar id="toolbar" isFullHeight isStatic>
215
- <ToolbarContent>
216
- <ToolbarGroup
217
- variant="icon-button-group"
218
- alignment={{ default: 'alignRight' }}
219
- spacer={{ default: 'spacerNone', md: 'spacerMd' }}
220
- >
221
- <ToolbarItem>
222
- <Button aria-label="Toggle drawer" variant={ButtonVariant.plain} onClick={this.onDrawerToggle}>
223
- <LightbulbIcon color={isDrawerExpanded ? 'yellow' : 'currentColor'} />
224
- </Button>
225
- </ToolbarItem>
226
- <ToolbarItem>
227
- <Button aria-label="Notifications" variant={ButtonVariant.plain}>
228
- <AttentionBellIcon />
229
- </Button>
230
- </ToolbarItem>
231
- <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
232
- <ToolbarItem>
233
- <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
234
- <CogIcon />
235
- </Button>
236
- </ToolbarItem>
237
- <ToolbarItem>
238
- <Button aria-label="Help actions" variant={ButtonVariant.plain}>
239
- <QuestionCircleIcon />
240
- </Button>
241
- </ToolbarItem>
242
- </ToolbarGroup>
243
- <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
244
- <Dropdown
245
- isPlain
246
- position="right"
247
- onSelect={this.onKebabDropdownSelect}
248
- toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
249
- isOpen={isKebabDropdownOpen}
250
- dropdownItems={kebabDropdownItems}
251
- />
252
- </ToolbarItem>
253
- <ToolbarItem visibility={{ default: 'visible', md: 'hidden', lg: 'hidden', xl: 'hidden', '2xl': 'hidden' }}>
254
- <Dropdown
255
- isPlain
256
- position="right"
257
- onSelect={this.onFullKebabSelect}
258
- toggle={<KebabToggle onToggle={this.onFullKebabToggle} />}
259
- isOpen={isFullKebabDropdownOpen}
260
- dropdownItems={fullKebabItems}
261
- />
262
- </ToolbarItem>
263
- </ToolbarGroup>
264
- <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
265
- <Dropdown
266
- position="right"
267
- onSelect={this.onDropdownSelect}
268
- isOpen={isDropdownOpen}
269
- toggle={
270
- <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
271
- John Smith
272
- </DropdownToggle>
273
- }
274
- dropdownItems={userDropdownItems}
275
- />
276
- </ToolbarItem>
277
- </ToolbarContent>
278
- </Toolbar>
279
- );
280
-
281
- const Header = (
282
- <Masthead>
283
- <MastheadToggle>
284
- <PageToggleButton variant="plain" aria-label="Global navigation">
285
- <BarsIcon />
286
- </PageToggleButton>
287
- </MastheadToggle>
288
- <MastheadMain>
289
- <MastheadBrand>
290
- <Brand src={imgBrand} alt="Patternfly Logo" />
291
- </MastheadBrand>
292
- </MastheadMain>
293
- <MastheadContent>{headerToolbar}</MastheadContent>
294
- </Masthead>
295
- );
296
-
297
- const pageId = 'main-content-page-layout-tertiary-nav';
298
- const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
299
-
300
- const PageBreadcrumb = (
301
- <Breadcrumb>
302
- <BreadcrumbItem>Section home</BreadcrumbItem>
303
- <BreadcrumbItem to="#">Section title</BreadcrumbItem>
304
- <BreadcrumbItem to="#">Section title</BreadcrumbItem>
305
- <BreadcrumbItem to="#" isActive>
306
- Section landing
307
- </BreadcrumbItem>
308
- </Breadcrumb>
309
- );
310
-
311
- const panelContent = (
312
- <DrawerPanelContent isResizable>
313
- <DrawerHead>
314
- <span tabIndex={isDrawerExpanded ? 0 : -1}>
315
- drawer-panel
316
- </span>
317
- <DrawerActions>
318
- <DrawerCloseButton onClick={this.onDrawerClose} />
319
- </DrawerActions>
320
- </DrawerHead>
321
- </DrawerPanelContent>
322
- );
323
-
324
- const Sidebar = <PageSidebar nav="Navigation" />;
325
-
326
- return (
327
- <Drawer isExpanded={isDrawerExpanded} isInline onExpand={this.onExpand}>
328
- <DrawerContent panelContent={panelContent}>
329
- <DrawerContentBody>
330
- <Page
331
- header={Header}
332
- breadcrumb={PageBreadcrumb}
333
- sidebar={Sidebar}
334
- tertiaryNav={PageNav}
335
- isManagedSidebar
336
- isTertiaryNavWidthLimited
337
- isBreadcrumbWidthLimited
338
- skipToContent={PageSkipToContent}
339
- mainContainerId={pageId}
340
- isTertiaryNavGrouped
341
- isBreadcrumbGrouped
342
- additionalGroupedContent={
343
- <PageSection variant={PageSectionVariants.light}>
344
- <TextContent>
345
- <Text component="h1">Main title</Text>
346
- <Text component="p">
347
- Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
348
- of its relative line height of 1.5.
349
- </Text>
350
- </TextContent>
351
- </PageSection>
352
- }
353
- groupProps={{
354
- stickyOnBreakpoint: { default: 'top' }
355
- }}
356
- >
357
- <PageSection>
358
- <Gallery hasGutter>
359
- {Array.apply(0, Array(20)).map((x, i) => (
360
- <GalleryItem key={i}>
361
- <Card>
362
- <CardBody>This is a card</CardBody>
363
- </Card>
364
- </GalleryItem>
365
- ))}
366
- </Gallery>
367
- </PageSection>
368
- </Page>
369
- </DrawerContentBody>
370
- </DrawerContent>
371
- </Drawer>
372
- );
373
- }
374
- }
375
- ```
376
-
377
- ### Sticky section group (using PageHeader)
378
-
379
- This demo is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.
380
-
381
- ```js isFullscreen
382
- import React from 'react';
383
- import {
384
- Avatar,
385
- Brand,
386
- Breadcrumb,
387
- BreadcrumbItem,
388
- Button,
389
- ButtonVariant,
390
- Card,
391
- CardBody,
392
- Dropdown,
393
- DropdownGroup,
394
- DropdownToggle,
395
- DropdownItem,
396
- Gallery,
397
- GalleryItem,
398
- KebabToggle,
399
- Nav,
400
- NavItem,
401
- NavList,
402
- Page,
403
- PageHeader,
404
- PageSection,
405
- PageSectionVariants,
406
- SkipToContent,
407
- TextContent,
408
- Text,
409
- PageHeaderTools,
410
- PageHeaderToolsGroup,
411
- PageHeaderToolsItem
412
- } from '@patternfly/react-core';
413
- import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
414
- import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
415
- import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
416
- import imgBrand from './imgBrand.svg';
417
- import imgAvatar from './imgAvatar.svg';
418
-
419
- class PageLayoutGrouped extends React.Component {
420
- constructor(props) {
421
- super(props);
422
- this.state = {
423
- isDropdownOpen: false,
424
- isKebabDropdownOpen: false,
425
- activeItem: 0
426
- };
427
- this.onDropdownToggle = isDropdownOpen => {
428
- this.setState({
429
- isDropdownOpen
430
- });
431
- };
432
-
433
- this.onDropdownSelect = event => {
434
- this.setState({
435
- isDropdownOpen: !this.state.isDropdownOpen
436
- });
437
- };
438
-
439
- this.onKebabDropdownToggle = isKebabDropdownOpen => {
440
- this.setState({
441
- isKebabDropdownOpen
442
- });
443
- };
444
-
445
- this.onKebabDropdownSelect = event => {
446
- this.setState({
447
- isKebabDropdownOpen: !this.state.isKebabDropdownOpen
448
- });
449
- };
450
-
451
- this.onNavSelect = result => {
452
- this.setState({
453
- activeItem: result.itemId
454
- });
455
- };
456
- }
457
-
458
- render() {
459
- const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;
460
-
461
- const PageNav = (
462
- <Nav variant="tertiary" onSelect={this.onNavSelect} aria-label="Nav">
463
- <NavList>
464
- <NavItem href="#" itemId={0} isActive={activeItem === 0}>
465
- System panel
466
- </NavItem>
467
- <NavItem href="#" itemId={1} isActive={activeItem === 1}>
468
- Policy
469
- </NavItem>
470
- <NavItem href="#" itemId={2} isActive={activeItem === 2}>
471
- Authentication
472
- </NavItem>
473
- <NavItem href="#" itemId={3} isActive={activeItem === 3}>
474
- Network services
475
- </NavItem>
476
- <NavItem href="#" itemId={4} isActive={activeItem === 4}>
477
- Server
478
- </NavItem>
479
- </NavList>
480
- </Nav>
481
- );
482
- const kebabDropdownItems = [
483
- <DropdownItem key="settings">
484
- <CogIcon /> Settings
485
- </DropdownItem>,
486
- <DropdownItem key="help">
487
- <HelpIcon /> Help
488
- </DropdownItem>
489
- ];
490
- const userDropdownItems = [
491
- <DropdownGroup key="group 2">
492
- <DropdownItem key="group 2 profile">My profile</DropdownItem>
493
- <DropdownItem key="group 2 user" component="button">
494
- User management
495
- </DropdownItem>
496
- <DropdownItem key="group 2 logout">Logout</DropdownItem>
497
- </DropdownGroup>
498
- ];
499
- const headerTools = (
500
- <PageHeaderTools>
501
- <PageHeaderToolsGroup
502
- visibility={{
503
- default: 'hidden',
504
- lg: 'visible'
505
- }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
506
- >
507
- <PageHeaderToolsItem>
508
- <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
509
- <CogIcon />
510
- </Button>
511
- </PageHeaderToolsItem>
512
- <PageHeaderToolsItem>
513
- <Button aria-label="Help actions" variant={ButtonVariant.plain}>
514
- <QuestionCircleIcon />
515
- </Button>
516
- </PageHeaderToolsItem>
517
- </PageHeaderToolsGroup>
518
- <PageHeaderToolsGroup>
519
- <PageHeaderToolsItem
520
- visibility={{
521
- lg: 'hidden'
522
- }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
523
- >
524
- <Dropdown
525
- isPlain
526
- position="right"
527
- onSelect={this.onKebabDropdownSelect}
528
- toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
529
- isOpen={isKebabDropdownOpen}
530
- dropdownItems={kebabDropdownItems}
531
- />
532
- </PageHeaderToolsItem>
533
- <PageHeaderToolsItem
534
- visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
535
- >
536
- <Dropdown
537
- isPlain
538
- position="right"
539
- onSelect={this.onDropdownSelect}
540
- isOpen={isDropdownOpen}
541
- toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
542
- dropdownItems={userDropdownItems}
543
- />
544
- </PageHeaderToolsItem>
545
- </PageHeaderToolsGroup>
546
- <Avatar src={imgAvatar} alt="Avatar image" />
547
- </PageHeaderTools>
548
- );
549
-
550
- const Header = (
551
- <PageHeader logo={<Brand src={imgBrand} alt="Patternfly Logo" />} headerTools={headerTools} showNavToggle />
552
- );
553
- const pageId = 'main-content-page-layout-tertiary-nav';
554
- const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
555
-
556
- const PageBreadcrumb = (
557
- <Breadcrumb>
558
- <BreadcrumbItem>Section home</BreadcrumbItem>
559
- <BreadcrumbItem to="#">Section title</BreadcrumbItem>
560
- <BreadcrumbItem to="#">Section title</BreadcrumbItem>
561
- <BreadcrumbItem to="#" isActive>
562
- Section landing
563
- </BreadcrumbItem>
564
- </Breadcrumb>
565
- );
566
-
567
- return (
568
- <React.Fragment>
569
- <Page
570
- header={Header}
571
- breadcrumb={PageBreadcrumb}
572
- tertiaryNav={PageNav}
573
- isManagedSidebar
574
- isTertiaryNavWidthLimited
575
- isBreadcrumbWidthLimited
576
- skipToContent={PageSkipToContent}
577
- mainContainerId={pageId}
578
- isTertiaryNavGrouped
579
- isBreadcrumbGrouped
580
- additionalGroupedContent={
581
- <PageSection variant={PageSectionVariants.light}>
582
- <TextContent>
583
- <Text component="h1">Main title</Text>
584
- <Text component="p">
585
- Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
586
- of its relative line height of 1.5.
587
- </Text>
588
- </TextContent>
589
- </PageSection>
590
- }
591
- groupProps={{
592
- stickyOnBreakpoint: {
593
- default: 'top'
594
- }
595
- }}
596
- >
597
- <PageSection>
598
- <Gallery hasGutter>
599
- {Array.apply(0, Array(20)).map((x, i) => (
600
- <GalleryItem key={i}>
601
- <Card>
602
- <CardBody>This is a card</CardBody>
603
- </Card>
604
- </GalleryItem>
605
- ))}
606
- </Gallery>
607
- </PageSection>
608
- </Page>
609
- </React.Fragment>
610
- );
611
- }
612
- }
613
- ```
614
-
615
- ### Sticky section group (alternate syntax and using PageHeader)
616
-
617
- Please see <a href="#sticky-section-group-using-pageheader">this</a> note regarding PageHeader.
618
-
619
- ```js isFullscreen
620
- import React from 'react';
621
- import {
622
- Avatar,
623
- Brand,
624
- Breadcrumb,
625
- BreadcrumbItem,
626
- Button,
627
- ButtonVariant,
628
- Card,
629
- CardBody,
630
- Dropdown,
631
- DropdownGroup,
632
- DropdownToggle,
633
- DropdownItem,
634
- Gallery,
635
- GalleryItem,
636
- KebabToggle,
637
- Nav,
638
- NavItem,
639
- NavList,
640
- Page,
641
- PageHeader,
642
- PageSection,
643
- PageSectionVariants,
644
- PageGroup,
645
- PageBreadcrumb,
646
- PageNavigation,
647
- SkipToContent,
648
- TextContent,
649
- Text,
650
- PageHeaderTools,
651
- PageHeaderToolsGroup,
652
- PageHeaderToolsItem
653
- } from '@patternfly/react-core';
654
- import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
655
- import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
656
- import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
657
- import imgBrand from './imgBrand.svg';
658
- import imgAvatar from './imgAvatar.svg';
659
-
660
- class PageLayoutGroupedAlt extends React.Component {
661
- constructor(props) {
662
- super(props);
663
- this.state = {
664
- isDropdownOpen: false,
665
- isKebabDropdownOpen: false,
666
- activeItem: 0
667
- };
668
- this.onDropdownToggle = isDropdownOpen => {
669
- this.setState({
670
- isDropdownOpen
671
- });
672
- };
673
-
674
- this.onDropdownSelect = event => {
675
- this.setState({
676
- isDropdownOpen: !this.state.isDropdownOpen
677
- });
678
- };
679
-
680
- this.onKebabDropdownToggle = isKebabDropdownOpen => {
681
- this.setState({
682
- isKebabDropdownOpen
683
- });
684
- };
685
-
686
- this.onKebabDropdownSelect = event => {
687
- this.setState({
688
- isKebabDropdownOpen: !this.state.isKebabDropdownOpen
689
- });
690
- };
691
-
692
- this.onNavSelect = result => {
693
- this.setState({
694
- activeItem: result.itemId
695
- });
696
- };
697
- }
698
-
699
- render() {
700
- const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;
701
-
702
- const kebabDropdownItems = [
703
- <DropdownItem key="settings">
704
- <CogIcon /> Settings
705
- </DropdownItem>,
706
- <DropdownItem key="help">
707
- <HelpIcon /> Help
708
- </DropdownItem>
709
- ];
710
- const userDropdownItems = [
711
- <DropdownGroup key="group 2">
712
- <DropdownItem key="group 2 profile">My profile</DropdownItem>
713
- <DropdownItem key="group 2 user" component="button">
714
- User management
715
- </DropdownItem>
716
- <DropdownItem key="group 2 logout">Logout</DropdownItem>
717
- </DropdownGroup>
718
- ];
719
- const headerTools = (
720
- <PageHeaderTools>
721
- <PageHeaderToolsGroup
722
- visibility={{
723
- default: 'hidden',
724
- lg: 'visible'
725
- }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
726
- >
727
- <PageHeaderToolsItem>
728
- <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
729
- <CogIcon />
730
- </Button>
731
- </PageHeaderToolsItem>
732
- <PageHeaderToolsItem>
733
- <Button aria-label="Help actions" variant={ButtonVariant.plain}>
734
- <QuestionCircleIcon />
735
- </Button>
736
- </PageHeaderToolsItem>
737
- </PageHeaderToolsGroup>
738
- <PageHeaderToolsGroup>
739
- <PageHeaderToolsItem
740
- visibility={{
741
- lg: 'hidden'
742
- }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
743
- >
744
- <Dropdown
745
- isPlain
746
- position="right"
747
- onSelect={this.onKebabDropdownSelect}
748
- toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
749
- isOpen={isKebabDropdownOpen}
750
- dropdownItems={kebabDropdownItems}
751
- />
752
- </PageHeaderToolsItem>
753
- <PageHeaderToolsItem
754
- visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
755
- >
756
- <Dropdown
757
- isPlain
758
- position="right"
759
- onSelect={this.onDropdownSelect}
760
- isOpen={isDropdownOpen}
761
- toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
762
- dropdownItems={userDropdownItems}
763
- />
764
- </PageHeaderToolsItem>
765
- </PageHeaderToolsGroup>
766
- <Avatar src={imgAvatar} alt="Avatar image" />
767
- </PageHeaderTools>
768
- );
769
-
770
- const Header = (
771
- <PageHeader logo={<Brand src={imgBrand} alt="Patternfly Logo" />} headerTools={headerTools} showNavToggle />
772
- );
773
- const pageId = 'main-content-page-layout-tertiary-nav';
774
- const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
775
-
776
- return (
777
- <React.Fragment>
778
- <Page header={Header} isManagedSidebar skipToContent={PageSkipToContent} mainContainerId={pageId}>
779
- <PageGroup stickyOnBreakpoint={{ default: 'top' }}>
780
- <PageNavigation isWidthLimited>
781
- <Nav variant="tertiary" onSelect={this.onNavSelect} aria-label="Nav">
782
- <NavList>
783
- <NavItem href="#" itemId={0} isActive={activeItem === 0}>
784
- System panel
785
- </NavItem>
786
- <NavItem href="#" itemId={1} isActive={activeItem === 1}>
787
- Policy
788
- </NavItem>
789
- <NavItem href="#" itemId={2} isActive={activeItem === 2}>
790
- Authentication
791
- </NavItem>
792
- <NavItem href="#" itemId={3} isActive={activeItem === 3}>
793
- Network services
794
- </NavItem>
795
- <NavItem href="#" itemId={4} isActive={activeItem === 4}>
796
- Server
797
- </NavItem>
798
- </NavList>
799
- </Nav>
800
- </PageNavigation>
801
- <PageBreadcrumb>
802
- <Breadcrumb>
803
- <BreadcrumbItem>Section home</BreadcrumbItem>
804
- <BreadcrumbItem to="#">Section title</BreadcrumbItem>
805
- <BreadcrumbItem to="#">Section title</BreadcrumbItem>
806
- <BreadcrumbItem to="#" isActive>
807
- Section landing
808
- </BreadcrumbItem>
809
- </Breadcrumb>
810
- </PageBreadcrumb>
811
- <PageSection variant={PageSectionVariants.light}>
812
- <TextContent>
813
- <Text component="h1">Main title</Text>
814
- <Text component="p">
815
- Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
816
- of its relative line height of 1.5.
817
- </Text>
818
- </TextContent>
819
- </PageSection>{' '}
820
- </PageGroup>
821
- <PageSection>
822
- <Gallery hasGutter>
823
- {Array.apply(0, Array(20)).map((x, i) => (
824
- <GalleryItem key={i}>
825
- <Card>
826
- <CardBody>This is a card</CardBody>
827
- </Card>
828
- </GalleryItem>
829
- ))}
830
- </Gallery>
831
- </PageSection>
832
- </Page>
833
- </React.Fragment>
834
- );
835
- }
836
- }
837
- ```
838
-
839
- ### Sticky section breadcrumb (with breakpoints)
840
-
841
- ```js isFullscreen
842
- import React from 'react';
843
- import {
844
- Avatar,
845
- Brand,
846
- Breadcrumb,
847
- BreadcrumbItem,
848
- Button,
849
- ButtonVariant,
850
- Card,
851
- CardBody,
852
- Divider,
853
- Dropdown,
854
- DropdownGroup,
855
- DropdownToggle,
856
- DropdownItem,
857
- Gallery,
858
- GalleryItem,
859
- KebabToggle,
860
- Masthead,
861
- MastheadBrand,
862
- MastheadContent,
863
- MastheadMain,
864
- MastheadToggle,
865
- Nav,
866
- NavItem,
867
- NavList,
868
- Page,
869
- PageSection,
870
- PageSectionVariants,
871
- PageToggleButton,
872
- PageSidebar,
873
- SkipToContent,
874
- TextContent,
875
- Text,
876
- Toolbar,
877
- ToolbarContent,
878
- ToolbarGroup,
879
- ToolbarItem,
880
- Drawer,
881
- DrawerPanelContent,
882
- DrawerContent,
883
- DrawerContentBody,
884
- DrawerHead,
885
- DrawerActions,
886
- DrawerCloseButton,
887
- } from '@patternfly/react-core';
888
- import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
889
- import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
890
- import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
891
- import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
892
- import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
893
- import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
894
- import imgBrand from './imgBrand.svg';
895
- import imgAvatar from './imgAvatar.svg';
896
-
897
- class PageLayoutGrouped extends React.Component {
898
- constructor(props) {
899
- super(props);
900
- this.state = {
901
- isDropdownOpen: false,
902
- isKebabDropdownOpen: false,
903
- isFullKebabDropdownOpen: false,
904
- activeItem: 0,
905
- isDrawerExpanded: false
906
- };
907
- this.onDropdownToggle = isDropdownOpen => {
908
- this.setState({
909
- isDropdownOpen
910
- });
911
- };
912
-
913
- this.onDropdownSelect = event => {
914
- this.setState({
915
- isDropdownOpen: !this.state.isDropdownOpen
916
- });
917
- };
918
-
919
- this.onKebabDropdownToggle = isKebabDropdownOpen => {
920
- this.setState({
921
- isKebabDropdownOpen
922
- });
923
- };
924
-
925
- this.onKebabDropdownSelect = event => {
926
- this.setState({
927
- isKebabDropdownOpen: !this.state.isKebabDropdownOpen
928
- });
929
- };
930
-
931
- this.onNavSelect = result => {
932
- this.setState({
933
- activeItem: result.itemId
934
- });
935
- };
936
-
937
- this.onFullKebabToggle = isFullKebabDropdownOpen => {
938
- this.setState({
939
- isFullKebabDropdownOpen
940
- });
941
- };
942
-
943
- this.onFullKebabSelect = () => {
944
- this.setState({
945
- isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen
946
- });
947
- };
948
-
949
- this.onDrawerToggle = () => {
950
- const isDrawerExpanded = !this.state.isDrawerExpanded;
951
- this.setState({
952
- isDrawerExpanded
953
- });
954
- };
955
-
956
- this.onDrawerClose = () => {
957
- this.setState({
958
- isDrawerExpanded: false
959
- });
960
- };
961
- }
962
-
963
- render() {
964
- const { isDropdownOpen, isKebabDropdownOpen, activeItem, isFullKebabDropdownOpen, isDrawerExpanded } = this.state;
965
-
966
- const PageNav = (
967
- <Nav onSelect={this.onNavSelect} aria-label="Nav">
968
- <NavList>
969
- <NavItem href="#" itemId={0} isActive={activeItem === 0}>
970
- System panel
971
- </NavItem>
972
- <NavItem href="#" itemId={1} isActive={activeItem === 1}>
973
- Policy
974
- </NavItem>
975
- <NavItem href="#" itemId={2} isActive={activeItem === 2}>
976
- Authentication
977
- </NavItem>
978
- <NavItem href="#" itemId={3} isActive={activeItem === 3}>
979
- Network services
980
- </NavItem>
981
- <NavItem href="#" itemId={4} isActive={activeItem === 4}>
982
- Server
983
- </NavItem>
984
- </NavList>
985
- </Nav>
986
- );
987
-
988
- const kebabDropdownItems = [
989
- <DropdownItem key="settings">
990
- <CogIcon /> Settings
991
- </DropdownItem>,
992
- <DropdownItem key="help">
993
- <HelpIcon /> Help
994
- </DropdownItem>
995
- ];
996
-
997
- const userDropdownItems = [
998
- <DropdownGroup key="group 2">
999
- <DropdownItem key="group 2 profile">My profile</DropdownItem>
1000
- <DropdownItem key="group 2 user" component="button">
1001
- User management
1002
- </DropdownItem>
1003
- <DropdownItem key="group 2 logout">Logout</DropdownItem>
1004
- </DropdownGroup>
1005
- ];
1006
-
1007
- const fullKebabItems = [
1008
- <DropdownGroup key="group 2">
1009
- <DropdownItem key="group 2 profile">My profile</DropdownItem>
1010
- <DropdownItem key="group 2 user" component="button">
1011
- User management
1012
- </DropdownItem>
1013
- <DropdownItem key="group 2 logout">Logout</DropdownItem>
1014
- </DropdownGroup>,
1015
- <Divider key="divider" />,
1016
- <DropdownItem key="kebab-1">
1017
- <CogIcon /> Settings
1018
- </DropdownItem>,
1019
- <DropdownItem key="kebab-2">
1020
- <HelpIcon /> Help
1021
- </DropdownItem>
1022
- ];
1023
-
1024
- const headerToolbar = (
1025
- <Toolbar id="toolbar" isFullHeight isStatic>
1026
- <ToolbarContent>
1027
- <ToolbarGroup
1028
- variant="icon-button-group"
1029
- alignment={{ default: 'alignRight' }}
1030
- spacer={{ default: 'spacerNone', md: 'spacerMd' }}
1031
- >
1032
- <ToolbarItem>
1033
- <Button aria-label="Toggle drawer" variant={ButtonVariant.plain} onClick={this.onDrawerToggle}>
1034
- <LightbulbIcon color={isDrawerExpanded ? 'yellow' : 'currentColor'} />
1035
- </Button>
1036
- </ToolbarItem>
1037
- <ToolbarItem>
1038
- <Button aria-label="Notifications" variant={ButtonVariant.plain}>
1039
- <AttentionBellIcon />
1040
- </Button>
1041
- </ToolbarItem>
1042
- <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
1043
- <ToolbarItem>
1044
- <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
1045
- <CogIcon />
1046
- </Button>
1047
- </ToolbarItem>
1048
- <ToolbarItem>
1049
- <Button aria-label="Help actions" variant={ButtonVariant.plain}>
1050
- <QuestionCircleIcon />
1051
- </Button>
1052
- </ToolbarItem>
1053
- </ToolbarGroup>
1054
- <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
1055
- <Dropdown
1056
- isPlain
1057
- position="right"
1058
- onSelect={this.onKebabDropdownSelect}
1059
- toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
1060
- isOpen={isKebabDropdownOpen}
1061
- dropdownItems={kebabDropdownItems}
1062
- />
1063
- </ToolbarItem>
1064
- <ToolbarItem visibility={{ default: 'visible', md: 'hidden', lg: 'hidden', xl: 'hidden', '2xl': 'hidden' }}>
1065
- <Dropdown
1066
- isPlain
1067
- position="right"
1068
- onSelect={this.onFullKebabSelect}
1069
- toggle={<KebabToggle onToggle={this.onFullKebabToggle} />}
1070
- isOpen={isFullKebabDropdownOpen}
1071
- dropdownItems={fullKebabItems}
1072
- />
1073
- </ToolbarItem>
1074
- </ToolbarGroup>
1075
- <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
1076
- <Dropdown
1077
- position="right"
1078
- onSelect={this.onDropdownSelect}
1079
- isOpen={isDropdownOpen}
1080
- toggle={
1081
- <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
1082
- John Smith
1083
- </DropdownToggle>
1084
- }
1085
- dropdownItems={userDropdownItems}
1086
- />
1087
- </ToolbarItem>
1088
- </ToolbarContent>
1089
- </Toolbar>
1090
- );
1091
-
1092
- const Header = (
1093
- <Masthead>
1094
- <MastheadToggle>
1095
- <PageToggleButton variant="plain" aria-label="Global navigation">
1096
- <BarsIcon />
1097
- </PageToggleButton>
1098
- </MastheadToggle>
1099
- <MastheadMain>
1100
- <MastheadBrand>
1101
- <Brand src={imgBrand} alt="Patternfly Logo" />
1102
- </MastheadBrand>
1103
- </MastheadMain>
1104
- <MastheadContent>{headerToolbar}</MastheadContent>
1105
- </Masthead>
1106
- );
1107
-
1108
- const pageId = 'main-content-page-layout-tertiary-nav';
1109
- const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
1110
-
1111
- const PageBreadcrumb = (
1112
- <Breadcrumb>
1113
- <BreadcrumbItem>Section home</BreadcrumbItem>
1114
- <BreadcrumbItem to="#">Section title</BreadcrumbItem>
1115
- <BreadcrumbItem to="#">Section title</BreadcrumbItem>
1116
- <BreadcrumbItem to="#" isActive>
1117
- Section landing
1118
- </BreadcrumbItem>
1119
- </Breadcrumb>
1120
- );
1121
-
1122
- const panelContent = (
1123
- <DrawerPanelContent isResizable>
1124
- <DrawerHead>
1125
- <span tabIndex={isDrawerExpanded ? 0 : -1}>
1126
- drawer-panel
1127
- </span>
1128
- <DrawerActions>
1129
- <DrawerCloseButton onClick={this.onDrawerClose} />
1130
- </DrawerActions>
1131
- </DrawerHead>
1132
- </DrawerPanelContent>
1133
- );
1134
-
1135
- const Sidebar = <PageSidebar nav={PageNav} />;
1136
-
1137
- return (
1138
- <Drawer isExpanded={isDrawerExpanded} isInline onExpand={this.onExpand}>
1139
- <DrawerContent panelContent={panelContent}>
1140
- <DrawerContentBody>
1141
- <Page
1142
- header={Header}
1143
- breadcrumb={PageBreadcrumb}
1144
- sidebar={Sidebar}
1145
- isManagedSidebar
1146
- isTertiaryNavWidthLimited
1147
- isBreadcrumbWidthLimited
1148
- skipToContent={PageSkipToContent}
1149
- mainContainerId={pageId}
1150
- isTertiaryNavGrouped
1151
- breadcrumbProps={{
1152
- stickyOnBreakpoint: {
1153
- md: 'top'
1154
- }
1155
- }}
1156
- >
1157
- <PageSection variant={PageSectionVariants.light}>
1158
- <TextContent>
1159
- <Text component="h1">Main title</Text>
1160
- <Text component="p">
1161
- Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
1162
- of its relative line height of 1.5.
1163
- </Text>
1164
- </TextContent>
1165
- </PageSection>
1166
- <PageSection isWidthLimited>
1167
- <Gallery hasGutter>
1168
- {Array.apply(0, Array(50)).map((x, i) => (
1169
- <GalleryItem key={i}>
1170
- <Card>
1171
- <CardBody>This is a card</CardBody>
1172
- </Card>
1173
- </GalleryItem>
1174
- ))}
1175
- </Gallery>
1176
- </PageSection>
1177
- </Page>
1178
- </DrawerContentBody>
1179
- </DrawerContent>
1180
- </Drawer>
1181
- );
1182
- }
1183
- }
1184
- ```