Skip to content

Commit 8d4477f

Browse files
wise-king-sullymanwise-king-sullyman
authored
Merge branch 'patternfly:main' into main
2 parents 1adc7a9 + 38d5dc3 commit 8d4477f

19 files changed

+2549
-4
lines changed

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
# Sidenav top-level section
3+
# should be the same for all markdown files
4+
section: extensions
5+
subsection: Component groups
6+
# Sidenav secondary level section
7+
# should be the same for all markdown files
8+
id: Log snippet
9+
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
10+
source: react
11+
# If you use typescript, the name of the interface to display props for
12+
# These are found through the sourceProps function provided in patternfly-docs.source.js
13+
propComponents: ['LogSnippet']
14+
sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md
15+
---
16+
17+
import LogSnippet from '@patternfly/react-component-groups/dist/dynamic/LogSnippet';
18+
19+
A **log snippet** component provides a way to display a log snippet or code along with a message
20+
21+
## Examples
22+
23+
### Basic log snippet
24+
25+
```js file="./LogSnippetExample.tsx"
26+
27+
```

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippetExample.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import LogSnippet from '@patternfly/react-component-groups/dist/dynamic/LogSnippet';
3+
4+
export const BasicExample: React.FunctionComponent = () => {
5+
const code = `apiVersion: helm.openshift.io/v1beta1/
6+
kind: HelmChartRepository
7+
metadata:
8+
name: azure-sample-repo
9+
spec:
10+
connectionConfig:
11+
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
12+
13+
return <LogSnippet message='Failure - check logs for details' logSnippet={code} />;
14+
}

‎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)