Skip to content

Commit 07cf3d4

Browse files
ajaypratap003ajaypratap003
authored
Add description list basic demo (#10184)
* add description list basic demo * fix DashboardWrapper not found issue * implement review comments * add divider and size * update content * fixed layout issues
1 parent c81dfb2 commit 07cf3d4

2 files changed

Lines changed: 100 additions & 0 deletions

File tree

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
id: Description list
3+
section: components
4+
---
5+
6+
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
7+
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
8+
9+
## Demos
10+
11+
### Basic
12+
13+
```js file='./examples/DescriptionListBasic.tsx' isFullscreen
14+
```

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
import {
3+
DescriptionList,
4+
DescriptionListTerm,
5+
DescriptionListGroup,
6+
DescriptionListDescription,
7+
PageSection,
8+
PageSectionVariants,
9+
Card,
10+
CardBody,
11+
CardHeader,
12+
TextContent,
13+
Text,
14+
Title,
15+
Divider,
16+
Flex,
17+
FlexItem
18+
} from '@patternfly/react-core';
19+
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
20+
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
21+
22+
export const DescriptionListBasic: React.FunctionComponent = () => (
23+
<DashboardWrapper>
24+
<PageSection variant={PageSectionVariants.light}>
25+
<TextContent>
26+
<Title headingLevel="h1">Projects</Title>
27+
<Text component="p">This is a full page demo</Text>
28+
</TextContent>
29+
</PageSection>
30+
<PageSection>
31+
<Card>
32+
<CardHeader>
33+
<Title headingLevel="h2" size="lg">
34+
Details
35+
</Title>
36+
</CardHeader>
37+
<Divider />
38+
<CardBody>
39+
<DescriptionList isAutoFit>
40+
<DescriptionListGroup>
41+
<DescriptionListTerm>Name</DescriptionListTerm>
42+
<DescriptionListDescription>mary-test</DescriptionListDescription>
43+
</DescriptionListGroup>
44+
<DescriptionListGroup>
45+
<DescriptionListTerm>Status</DescriptionListTerm>
46+
<DescriptionListDescription>
47+
<Flex>
48+
<FlexItem spacer={{ lg: 'spacerSm' }}>
49+
<CheckCircleIcon color="green" />
50+
</FlexItem>
51+
<FlexItem>Active</FlexItem>
52+
</Flex>
53+
</DescriptionListDescription>
54+
</DescriptionListGroup>
55+
<DescriptionListGroup>
56+
<DescriptionListTerm>Default pull secret</DescriptionListTerm>
57+
<DescriptionListDescription>Not configured</DescriptionListDescription>
58+
</DescriptionListGroup>
59+
<DescriptionListGroup>
60+
<DescriptionListTerm>Tolerations</DescriptionListTerm>
61+
<DescriptionListDescription>6 Tolerations</DescriptionListDescription>
62+
</DescriptionListGroup>
63+
<DescriptionListGroup>
64+
<DescriptionListTerm>Network Policies</DescriptionListTerm>
65+
<DescriptionListDescription>
66+
<a href="#">Network Policies</a>
67+
</DescriptionListDescription>
68+
</DescriptionListGroup>
69+
<DescriptionListGroup>
70+
<DescriptionListTerm>Display name</DescriptionListTerm>
71+
<DescriptionListDescription>mary</DescriptionListDescription>
72+
</DescriptionListGroup>
73+
<DescriptionListGroup>
74+
<DescriptionListTerm>Requester</DescriptionListTerm>
75+
<DescriptionListDescription>kube:admin</DescriptionListDescription>
76+
</DescriptionListGroup>
77+
<DescriptionListGroup>
78+
<DescriptionListTerm>Created at:</DescriptionListTerm>
79+
<DescriptionListDescription>3 minutes ago</DescriptionListDescription>
80+
</DescriptionListGroup>
81+
</DescriptionList>
82+
</CardBody>
83+
</Card>
84+
</PageSection>
85+
</DashboardWrapper>
86+
);

0 commit comments

Comments
 (0)