Skip to content

Add OpenShift MultiContentCard (GettingStarted) #112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fhlavac merged 7 commits into from
Feb 29, 2024
Merged

Add OpenShift MultiContentCard (GettingStarted) #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
00221e5
feat(mcc): Add MultiContentCard
fhlavac Feb 26, 2024
09074cb
Add examples
fhlavac Feb 26, 2024
38997b0
Add MultiContentCard docs
fhlavac Feb 26, 2024
0405f86
feat(mcc): Add unit tests for MultiContentCard
fhlavac Feb 26, 2024
19120f6
Fix a11y issues
fhlavac Feb 26, 2024
bc162a7
Update styling in the examples
fhlavac Feb 26, 2024
9436eea
Clean the classNames in example cards
fhlavac Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions ...ntent/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
section: extensions
subsection: Component groups
id: Multi content card
source: react
propComponents: ['MultiContentCard']
sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md
---

import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons';

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`.

## Examples

### Basic multi content card

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.

```js file="./MultiContentCardExample.tsx"

```

### Expandable multi content card

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.

```js file="./MultiContentCardExpandableExample.tsx"

```

### Expandable multi content card with actions

Actions can be displayed in the multi content card heading using `actions` property.

```js file="./MultiContentCardExpandableActionsExample.tsx"

```

### Expandable multi content card with left border and header border

Left border can be displayed using `leftBorderVariant`. To display a border under the multi content card's heading, use `withHeaderBorder` flag.

```js file="./MultiContentCardExpandableBorderExample.tsx"

```

### Expandable multi content card with dividers

Dividers between cards in the content can be shown using `withDividers` flag.

```js file="./MultiContentCardExpandableDividerExample.tsx"

```
99 changes: 99 additions & 0 deletions ...content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React from 'react';
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { Button, Card, CardHeader, CardBody, Text, TextContent, TextVariants, Icon, TextList, TextListItem, CardFooter } from '@patternfly/react-core';
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';

const cards = [
<Card isFullHeight isPlain key="card-1">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Getting Started</Text>
</TextContent>
</CardHeader>
<CardBody>
<TextContent>
<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">
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
<CogIcon />
</Icon>
Configure application
</Text>
<Text className="pf-v5-u-font-size-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</CardBody>
<CardFooter>
<TextContent>
<TextList className="pf-v5-u-font-size-sm pf-v5-u-link-color pf-v5-u-ml-0">
<TextListItem>
<Button variant="link" isInline>First link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Second link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Another link</Button>
</TextListItem>
</TextList>
</TextContent>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-2">
<CardBody className="pf-v5-u-pt-3xl-on-md">
<TextContent>
<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">
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
<LockIcon />
</Icon>
Configure access
</Text>
<Text className="pf-v5-u-font-size-sm">
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.
</Text>
</TextContent>
</CardBody>
<CardFooter>
<Text>
<Button variant="link" isInline>
Learn more
<Icon className="pf-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-3">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Next Steps</Text>
</TextContent>
</CardHeader>
<CardBody>
<TextContent>
<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">
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
<BellIcon />
</Icon>
Configure notifications
</Text>
<Text className="pf-v5-u-font-size-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</CardBody>
<CardFooter>
<Text>
<Button variant="link" isInline>
Learn more
<Icon className="pf-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</CardFooter>
</Card>
];

export const BasicExample: React.FunctionComponent = () => <MultiContentCard cards={cards} />;
145 changes: 145 additions & 0 deletions ...s/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
import React from 'react';
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { EllipsisVIcon } from '@patternfly/react-icons';
import { Button, Card, CardHeader, CardBody, CardFooter, Text, TextContent, TextVariants, Icon, TextList, TextListItem, Divider, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';

const cards = [
<Card isFullHeight isPlain key="card-1">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Getting Started</Text>
</TextContent>
</CardHeader>
<CardBody>
<TextContent>
<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">
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
<CogIcon />
</Icon>
Configure application
</Text>
<Text className="pf-v5-u-font-size-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</CardBody>
<CardFooter>
<TextContent>
<TextList className="pf-v5-u-font-size-sm pf-v5-u-link-color pf-v5-u-ml-0">
<TextListItem>
<Button variant="link" isInline>First link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Second link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Another link</Button>
</TextListItem>
</TextList>
</TextContent>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-2">
<CardBody className="pf-v5-u-pt-3xl-on-md">
<TextContent>
<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">
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
<LockIcon />
</Icon>
Configure access
</Text>
<Text className="pf-v5-u-font-size-sm">
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.
</Text>
</TextContent>
</CardBody>
<CardFooter>
<Text>
<Button variant="link" isInline>
Learn more
<Icon className="pf-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-3">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Next Steps</Text>
</TextContent>
</CardHeader>
<CardBody>
<TextContent>
<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">
<Icon size="md" className="pf-v5-u-pl-sm pf-v5-u-pr-md">
<BellIcon />
</Icon>
Configure notifications
</Text>
<Text className="pf-v5-u-font-size-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</CardBody>
<CardFooter>
<Text>
<Button variant="link" isInline>
Learn more
<Icon className="pf-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</CardFooter>
</Card>
];

export const BasicExample: React.FunctionComponent = () => {
const [ isMenuOpen, setMenuOpen ] = React.useState(false)

const onToggleClick = () => {
setMenuOpen(!isMenuOpen);
};
return (
<MultiContentCard
isExpandable
toggleText='Card with actions toggle text'
cards={cards}
actions={
<Dropdown
isOpen={isMenuOpen}
onSelect={() => null}
onOpenChange={(isMenuOpen: boolean) => setMenuOpen(isMenuOpen)}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
aria-label="kebab dropdown toggle"
variant="plain"
onClick={onToggleClick}
isExpanded={isMenuOpen}
>
<EllipsisVIcon />
</MenuToggle>
)}
shouldFocusToggleOnSelect
>
<DropdownList>
<DropdownItem value={0} key="action">
Action
</DropdownItem>
<DropdownItem value={1} isDisabled key="disabled action">
Disabled Action
</DropdownItem>
<Divider component="li" key="separator" />
<DropdownItem value={2} key="separated action">
Separated Action
</DropdownItem>
</DropdownList>
</Dropdown>
}
/>
)
};
Loading