Skip to content

Commit 38d5dc3

Browse files
fhlavacfhlavac
authored
Merge pull request patternfly#112 from fhlavac/mcc
2 parents 8b452e1 + 9436eea commit 38d5dc3

File tree

12 files changed

+2300
-2
lines changed

12 files changed

+2300
-2
lines changed

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
section: extensions
3+
subsection: Component groups
4+
id: Multi content card
5+
source: react
6+
propComponents: ['MultiContentCard']
7+
sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md
8+
---
9+
10+
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
11+
import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons';
12+
13+
A **multi content card** component allows to display multiple card components in a single layout. To further customize this layout, you can also utilize all properties of the [card component](/components/card), with the exception of `children` and `title`.
14+
15+
## Examples
16+
17+
### Basic multi content card
18+
19+
To display a basic multi content an array of content cards has to be passed using the `cards` property. It is recommended to use regular [card components](/components/card) in the content.
20+
21+
```js file="./MultiContentCardExample.tsx"
22+
23+
```
24+
25+
### Expandable multi content card
26+
27+
To make the multi content card expandable, pass `isExpandable` flag together with `toggleText` or `toggleContent` property. Default expansion state can be adjusted using `defaultExpanded` property.
28+
29+
```js file="./MultiContentCardExpandableExample.tsx"
30+
31+
```
32+
33+
### Expandable multi content card with actions
34+
35+
Actions can be displayed in the multi content card heading using `actions` property.
36+
37+
```js file="./MultiContentCardExpandableActionsExample.tsx"
38+
39+
```
40+
41+
### Expandable multi content card with left border and header border
42+
43+
Left border can be displayed using `leftBorderVariant`. To display a border under the multi content card's heading, use `withHeaderBorder` flag.
44+
45+
```js file="./MultiContentCardExpandableBorderExample.tsx"
46+
47+
```
48+
49+
### Expandable multi content card with dividers
50+
51+
Dividers between cards in the content can be shown using `withDividers` flag.
52+
53+
```js file="./MultiContentCardExpandableDividerExample.tsx"
54+
55+
```

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from 'react';
2+
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
3+
import { Button, Card, CardHeader, CardBody, Text, TextContent, TextVariants, Icon, TextList, TextListItem, CardFooter } from '@patternfly/react-core';
4+
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
5+
6+
const cards = [
7+
<Card isFullHeight isPlain key="card-1">
8+
<CardHeader>
9+
<TextContent>
10+
<Text component={TextVariants.h4}>Getting Started</Text>
11+
</TextContent>
12+
</CardHeader>
13+
<CardBody>
14+
<TextContent>
15+
<Text className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold pf-v5-u-mb-sm pf-v5-u-link-color-hover">
16+
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
17+
<CogIcon />
18+
</Icon>
19+
Configure application
20+
</Text>
21+
<Text className="pf-v5-u-font-size-sm">
22+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
23+
</Text>
24+
</TextContent>
25+
</CardBody>
26+
<CardFooter>
27+
<TextContent>
28+
<TextList className="pf-v5-u-font-size-sm pf-v5-u-link-color pf-v5-u-ml-0">
29+
<TextListItem>
30+
<Button variant="link" isInline>First link</Button>
31+
</TextListItem>
32+
<TextListItem>
33+
<Button variant="link" isInline>Second link</Button>
34+
</TextListItem>
35+
<TextListItem>
36+
<Button variant="link" isInline>Another link</Button>
37+
</TextListItem>
38+
</TextList>
39+
</TextContent>
40+
</CardFooter>
41+
</Card>,
42+
<Card isFullHeight isPlain key="card-2">
43+
<CardBody className="pf-v5-u-pt-3xl-on-md">
44+
<TextContent>
45+
<Text className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold pf-v5-u-mb-sm pf-v5-u-link-color-hover">
46+
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
47+
<LockIcon />
48+
</Icon>
49+
Configure access
50+
</Text>
51+
<Text className="pf-v5-u-font-size-sm">
52+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
53+
</Text>
54+
</TextContent>
55+
</CardBody>
56+
<CardFooter>
57+
<Text>
58+
<Button variant="link" isInline>
59+
Learn more
60+
<Icon className="pf-u-ml-sm" isInline>
61+
<ArrowRightIcon />
62+
</Icon>
63+
</Button>
64+
</Text>
65+
</CardFooter>
66+
</Card>,
67+
<Card isFullHeight isPlain key="card-3">
68+
<CardHeader>
69+
<TextContent>
70+
<Text component={TextVariants.h4}>Next Steps</Text>
71+
</TextContent>
72+
</CardHeader>
73+
<CardBody>
74+
<TextContent>
75+
<Text className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold pf-v5-u-mb-sm pf-v5-u-link-color-hover">
76+
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
77+
<BellIcon />
78+
</Icon>
79+
Configure notifications
80+
</Text>
81+
<Text className="pf-v5-u-font-size-sm">
82+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
83+
</Text>
84+
</TextContent>
85+
</CardBody>
86+
<CardFooter>
87+
<Text>
88+
<Button variant="link" isInline>
89+
Learn more
90+
<Icon className="pf-u-ml-sm" isInline>
91+
<ArrowRightIcon />
92+
</Icon>
93+
</Button>
94+
</Text>
95+
</CardFooter>
96+
</Card>
97+
];
98+
99+
export const BasicExample: React.FunctionComponent = () => <MultiContentCard cards={cards} />;

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import React from 'react';
2+
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
3+
import { EllipsisVIcon } from '@patternfly/react-icons';
4+
import { Button, Card, CardHeader, CardBody, CardFooter, Text, TextContent, TextVariants, Icon, TextList, TextListItem, Divider, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
5+
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
6+
7+
const cards = [
8+
<Card isFullHeight isPlain key="card-1">
9+
<CardHeader>
10+
<TextContent>
11+
<Text component={TextVariants.h4}>Getting Started</Text>
12+
</TextContent>
13+
</CardHeader>
14+
<CardBody>
15+
<TextContent>
16+
<Text className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold pf-v5-u-mb-sm pf-v5-u-link-color-hover">
17+
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
18+
<CogIcon />
19+
</Icon>
20+
Configure application
21+
</Text>
22+
<Text className="pf-v5-u-font-size-sm">
23+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
24+
</Text>
25+
</TextContent>
26+
</CardBody>
27+
<CardFooter>
28+
<TextContent>
29+
<TextList className="pf-v5-u-font-size-sm pf-v5-u-link-color pf-v5-u-ml-0">
30+
<TextListItem>
31+
<Button variant="link" isInline>First link</Button>
32+
</TextListItem>
33+
<TextListItem>
34+
<Button variant="link" isInline>Second link</Button>
35+
</TextListItem>
36+
<TextListItem>
37+
<Button variant="link" isInline>Another link</Button>
38+
</TextListItem>
39+
</TextList>
40+
</TextContent>
41+
</CardFooter>
42+
</Card>,
43+
<Card isFullHeight isPlain key="card-2">
44+
<CardBody className="pf-v5-u-pt-3xl-on-md">
45+
<TextContent>
46+
<Text className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold pf-v5-u-mb-sm pf-v5-u-link-color-hover">
47+
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
48+
<LockIcon />
49+
</Icon>
50+
Configure access
51+
</Text>
52+
<Text className="pf-v5-u-font-size-sm">
53+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
54+
</Text>
55+
</TextContent>
56+
</CardBody>
57+
<CardFooter>
58+
<Text>
59+
<Button variant="link" isInline>
60+
Learn more
61+
<Icon className="pf-u-ml-sm" isInline>
62+
<ArrowRightIcon />
63+
</Icon>
64+
</Button>
65+
</Text>
66+
</CardFooter>
67+
</Card>,
68+
<Card isFullHeight isPlain key="card-3">
69+
<CardHeader>
70+
<TextContent>
71+
<Text component={TextVariants.h4}>Next Steps</Text>
72+
</TextContent>
73+
</CardHeader>
74+
<CardBody>
75+
<TextContent>
76+
<Text className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold pf-v5-u-mb-sm pf-v5-u-link-color-hover">
77+
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
78+
<BellIcon />
79+
</Icon>
80+
Configure notifications
81+
</Text>
82+
<Text className="pf-v5-u-font-size-sm">
83+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
84+
</Text>
85+
</TextContent>
86+
</CardBody>
87+
<CardFooter>
88+
<Text>
89+
<Button variant="link" isInline>
90+
Learn more
91+
<Icon className="pf-u-ml-sm" isInline>
92+
<ArrowRightIcon />
93+
</Icon>
94+
</Button>
95+
</Text>
96+
</CardFooter>
97+
</Card>
98+
];
99+
100+
export const BasicExample: React.FunctionComponent = () => {
101+
const [ isMenuOpen, setMenuOpen ] = React.useState(false)
102+
103+
const onToggleClick = () => {
104+
setMenuOpen(!isMenuOpen);
105+
};
106+
return (
107+
<MultiContentCard
108+
isExpandable
109+
toggleText='Card with actions toggle text'
110+
cards={cards}
111+
actions={
112+
<Dropdown
113+
isOpen={isMenuOpen}
114+
onSelect={() => null}
115+
onOpenChange={(isMenuOpen: boolean) => setMenuOpen(isMenuOpen)}
116+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
117+
<MenuToggle
118+
ref={toggleRef}
119+
aria-label="kebab dropdown toggle"
120+
variant="plain"
121+
onClick={onToggleClick}
122+
isExpanded={isMenuOpen}
123+
>
124+
<EllipsisVIcon />
125+
</MenuToggle>
126+
)}
127+
shouldFocusToggleOnSelect
128+
>
129+
<DropdownList>
130+
<DropdownItem value={0} key="action">
131+
Action
132+
</DropdownItem>
133+
<DropdownItem value={1} isDisabled key="disabled action">
134+
Disabled Action
135+
</DropdownItem>
136+
<Divider component="li" key="separator" />
137+
<DropdownItem value={2} key="separated action">
138+
Separated Action
139+
</DropdownItem>
140+
</DropdownList>
141+
</Dropdown>
142+
}
143+
/>
144+
)
145+
};

0 commit comments

Comments
 (0)