Merge pull request #112 from fhlavac/mcc

patternfly · Feb 29, 2024 · 38d5dc3 · 38d5dc3
2 parents 8b452e1 + 9436eea
commit 38d5dc3
Show file tree

Hide file tree

Showing 12 changed files with 2,300 additions and 2 deletions.
diff --git a/...ntent/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md b/...ntent/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md
@@ -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"
+
+```
diff --git a/...content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx b/...content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx
@@ -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} />;
diff --git a/...s/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx b/...s/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx
@@ -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>
+      }
+    />
+  )
+};