Skip to content

Commit 535f504

Browse files
author
Eric Olkowski
committed
chore(DescriptionList): added in drawer demo
1 parent acad1a9 commit 535f504

File tree

2 files changed

+170
-1
lines changed

2 files changed

+170
-1
lines changed

‎packages/react-core/src/demos/DescriptionList/DescriptionList.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,17 @@ section: components
44
---
55

66
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
7+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
78
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
89

910
## Demos
1011

1112
### Basic
1213

1314
```js file='./examples/DescriptionListBasic.tsx' isFullscreen
14-
```
15+
```
16+
17+
### In drawer
18+
19+
```js file='./examples/DescriptionListInDrawer.tsx' isFullscreen
20+
```

‎packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import React from 'react';
2+
import {
3+
Gallery,
4+
Content,
5+
PageSection,
6+
GalleryItem,
7+
Card,
8+
CardBody,
9+
DrawerHead,
10+
DrawerActions,
11+
DrawerCloseButton,
12+
PageSectionVariants,
13+
DrawerPanelBody,
14+
DescriptionList,
15+
DescriptionListTerm,
16+
DescriptionListGroup,
17+
DescriptionListDescription,
18+
Button,
19+
Title
20+
} from '@patternfly/react-core';
21+
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
22+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
23+
24+
export const DescriptionListInDrawer: React.FunctionComponent = () => {
25+
const drawerRef = React.useRef<HTMLDivElement>(null);
26+
const btnRef = React.useRef<HTMLDivElement>(null);
27+
const [isExpanded, setIsExpanded] = React.useState(true);
28+
29+
const onExpand = () => {
30+
drawerRef.current && drawerRef.current.focus();
31+
};
32+
33+
const onCloseClick = () => {
34+
setIsExpanded(false);
35+
btnRef.current && btnRef.current.focus();
36+
};
37+
38+
const onOpenDrawer = () => {
39+
setIsExpanded(true);
40+
};
41+
42+
const panelContent = (
43+
<>
44+
<DrawerHead>
45+
<Title headingLevel="h2">
46+
<span ref={drawerRef} tabIndex={isExpanded ? 0 : -1}>
47+
test
48+
</span>
49+
</Title>
50+
<DrawerActions>
51+
<DrawerCloseButton onClick={onCloseClick} />
52+
</DrawerActions>
53+
</DrawerHead>
54+
<DrawerPanelBody>
55+
<DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
56+
<DescriptionListGroup>
57+
<DescriptionListTerm>Name</DescriptionListTerm>
58+
<DescriptionListDescription>test</DescriptionListDescription>
59+
</DescriptionListGroup>
60+
<DescriptionListGroup>
61+
<DescriptionListTerm>Namespace</DescriptionListTerm>
62+
<DescriptionListDescription>
63+
<a href="#">mary-test</a>
64+
</DescriptionListDescription>
65+
</DescriptionListGroup>
66+
<DescriptionListGroup>
67+
<DescriptionListTerm>Labels</DescriptionListTerm>
68+
<DescriptionListDescription>app=test</DescriptionListDescription>
69+
</DescriptionListGroup>
70+
<DescriptionListGroup>
71+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
72+
<DescriptionListDescription>Node selector is not available at this time</DescriptionListDescription>
73+
</DescriptionListGroup>
74+
<DescriptionListGroup>
75+
<DescriptionListTerm>Tolerations</DescriptionListTerm>
76+
<DescriptionListDescription>No tolerations</DescriptionListDescription>
77+
</DescriptionListGroup>
78+
<DescriptionListGroup>
79+
<DescriptionListTerm>Annotations</DescriptionListTerm>
80+
<DescriptionListDescription>No annotaions</DescriptionListDescription>
81+
</DescriptionListGroup>
82+
<DescriptionListGroup>
83+
<DescriptionListTerm>Status</DescriptionListTerm>
84+
<DescriptionListDescription>Active</DescriptionListDescription>
85+
</DescriptionListGroup>
86+
<DescriptionListGroup>
87+
<DescriptionListTerm>Created at:</DescriptionListTerm>
88+
<DescriptionListDescription>3 minutes agot</DescriptionListDescription>
89+
</DescriptionListGroup>
90+
<DescriptionListGroup>
91+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
92+
<DescriptionListDescription>
93+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
94+
app=MyApp
95+
</Button>
96+
</DescriptionListDescription>
97+
</DescriptionListGroup>
98+
<DescriptionListGroup>
99+
<DescriptionListTerm>Session affinity</DescriptionListTerm>
100+
<DescriptionListDescription>None</DescriptionListDescription>
101+
</DescriptionListGroup>
102+
<DescriptionListGroup>
103+
<DescriptionListTerm>Latest version</DescriptionListTerm>
104+
<DescriptionListDescription>1.0</DescriptionListDescription>
105+
</DescriptionListGroup>
106+
<DescriptionListGroup>
107+
<DescriptionListTerm>Update strategy</DescriptionListTerm>
108+
<DescriptionListDescription>Rolling</DescriptionListDescription>
109+
</DescriptionListGroup>
110+
<DescriptionListGroup>
111+
<DescriptionListTerm>Timeout</DescriptionListTerm>
112+
<DescriptionListDescription>600 seconds</DescriptionListDescription>
113+
</DescriptionListGroup>
114+
<DescriptionListGroup>
115+
<DescriptionListTerm>Max available</DescriptionListTerm>
116+
<DescriptionListDescription>25% of 1 pod</DescriptionListDescription>
117+
</DescriptionListGroup>
118+
<DescriptionListGroup>
119+
<DescriptionListTerm>Max surge</DescriptionListTerm>
120+
<DescriptionListDescription>25% greater than 1 pod</DescriptionListDescription>
121+
</DescriptionListGroup>
122+
</DescriptionList>
123+
</DrawerPanelBody>
124+
</>
125+
);
126+
127+
const drawerContent = (
128+
<Gallery hasGutter>
129+
<GalleryItem key={0}>
130+
<Card>
131+
<CardBody>
132+
<Button variant="link" isInline onClick={onOpenDrawer} ref={btnRef}>
133+
Open drawer
134+
</Button>
135+
</CardBody>
136+
</Card>
137+
</GalleryItem>
138+
{Array.from({ length: 30 }).map((_value, index) => (
139+
<GalleryItem key={index + 1}>
140+
<Card>
141+
<CardBody>{`Card-${index + 1}`}</CardBody>
142+
</Card>
143+
</GalleryItem>
144+
))}
145+
</Gallery>
146+
);
147+
148+
return (
149+
<DashboardWrapper
150+
notificationDrawer={panelContent}
151+
isNotificationDrawerExpanded={isExpanded}
152+
onNotificationDrawerExpand={onExpand}
153+
>
154+
<PageSection variant={PageSectionVariants.secondary}>
155+
<Content>
156+
<Content component="h1">Main title</Content>
157+
<Content component="p">This is a full page demo.</Content>
158+
</Content>
159+
</PageSection>
160+
<PageSection>{drawerContent}</PageSection>
161+
</DashboardWrapper>
162+
);
163+
};

0 commit comments

Comments
 (0)