From 00221e525197fe7701ddfdb6960b36e0373ebaae Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Mon, 26 Feb 2024 12:06:28 +0100 Subject: [PATCH 1/7] feat(mcc): Add MultiContentCard --- packages/module/src/LogSnippet/LogSnippet.tsx | 4 +- .../src/MultiContentCard/MultiContentCard.tsx | 110 ++++++++++++++++++ packages/module/src/MultiContentCard/index.ts | 2 + packages/module/src/index.ts | 3 + 4 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 packages/module/src/MultiContentCard/MultiContentCard.tsx create mode 100644 packages/module/src/MultiContentCard/index.ts diff --git a/packages/module/src/LogSnippet/LogSnippet.tsx b/packages/module/src/LogSnippet/LogSnippet.tsx index da251aec..742a4e4e 100644 --- a/packages/module/src/LogSnippet/LogSnippet.tsx +++ b/packages/module/src/LogSnippet/LogSnippet.tsx @@ -3,7 +3,7 @@ import { CodeBlock, CodeBlockCode, Flex, FlexItem, FlexProps, Text, TextVariants import clsx from 'clsx'; import { createUseStyles } from 'react-jss' -export type BorderVariant = 'danger' | 'success' | 'info' | 'warning'; +export type LogSnippetBorderVariant = 'danger' | 'success' | 'info' | 'warning'; export interface LogSnippetProps extends FlexProps { /** Log snippet or code to be displayed */ @@ -11,7 +11,7 @@ export interface LogSnippetProps extends FlexProps { /** Message to appear above the log snippet */ message: string | React.ReactNode; /** Custom color for left border */ - leftBorderVariant?: BorderVariant; + leftBorderVariant?: LogSnippetBorderVariant; } const useStyles = createUseStyles({ diff --git a/packages/module/src/MultiContentCard/MultiContentCard.tsx b/packages/module/src/MultiContentCard/MultiContentCard.tsx new file mode 100644 index 00000000..42968bd0 --- /dev/null +++ b/packages/module/src/MultiContentCard/MultiContentCard.tsx @@ -0,0 +1,110 @@ +import React from 'react'; +import { + Card, + CardExpandableContent, + CardHeader, + CardProps, + CardTitle, + Divider, + Flex, + FlexItem, + Title, +} from '@patternfly/react-core'; +import { createUseStyles } from 'react-jss'; +import clsx from 'clsx'; + +export type MultiContentCardBorderVariant = 'primary' | 'danger' | 'success' | 'info' | 'warning' | 'hidden'; + +export interface MultiContentCardProps extends Omit { + /** Cards to be displayed as a content */ + cards?: React.ReactElement[]; + /** Actions to be displayed in the expandable section */ + actions?: React.ReactElement; + /** Toggle text for the expandable section */ + toggleText?: string; + /** Toggle content for the expandable section */ + toggleContent?: React.ReactElement; + /** Left border variant for the containing card */ + leftBorderVariant?: MultiContentCardBorderVariant; + /** Indicates whether the content is separated by dividers */ + withDividers?: boolean; + /** Indicates whether the card is expandable */ + isExpandable?: boolean; + /** Indicates whether the card is expanded by default */ + defaultExpanded?: boolean; + /** Indicates whether the actions toggle is right aligned */ + isToggleRightAligned?: boolean; + /** Indicates whether the card header has a bottom border */ + withHeaderBorder?: boolean +} + +const useStyles = createUseStyles({ + multiContentCardHeadingBorder: { + borderBottom: 'var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--disabled-color--200)', + }, + multiContentCardLeftBorder: (leftBorderVariant: MultiContentCardBorderVariant) => ({ + borderLeft: `var(--pf-v5-global--BorderWidth--lg) solid var(--pf-v5-global--${leftBorderVariant}-color--100)` + }) +}) + +const MultiContentCard: React.FunctionComponent = ({ + cards = [], + isToggleRightAligned = false, + actions, + toggleText, + toggleContent, + withDividers = false, + leftBorderVariant = 'hidden', + isExpandable = false, + defaultExpanded = true, + withHeaderBorder = false, + ...rest +}: MultiContentCardProps) => { + const classes = useStyles(leftBorderVariant); + const [ isExpanded, setIsExpanded ] = React.useState(defaultExpanded); + const onExpand = () => { + setIsExpanded(!isExpanded); + }; + + const renderCards = (cards: React.ReactElement[], withDividers?: boolean) => ( + + {cards.map((card, index) => ( + <> + + {card} + + {(index + 1 < cards.length && withDividers) && ( + + )} + + ))} + + ); + + return( + + {isExpandable && ( + + {toggleText ? {toggleText} : toggleContent} + + )} + {isExpandable ? {renderCards(cards, withDividers)} : renderCards(cards, withDividers)} + + );} + + +export default MultiContentCard; diff --git a/packages/module/src/MultiContentCard/index.ts b/packages/module/src/MultiContentCard/index.ts new file mode 100644 index 00000000..ca5de327 --- /dev/null +++ b/packages/module/src/MultiContentCard/index.ts @@ -0,0 +1,2 @@ +export { default } from './MultiContentCard' +export * from './MultiContentCard' diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index 8dd9f102..93071ff6 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -39,6 +39,9 @@ export * from './InvalidObject'; export { default as LogSnippet } from './LogSnippet'; export * from './LogSnippet'; +export { default as MultiContentCard } from './MultiContentCard'; +export * from './MultiContentCard'; + export { default as NotAuthorized } from './NotAuthorized'; export * from './NotAuthorized'; From 09074cbf93f74afd52022b668a68e66547c1b5bd Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Mon, 26 Feb 2024 12:08:08 +0100 Subject: [PATCH 2/7] Add examples --- .../MultiContentCardExample.tsx | 124 +++++++++++++ ...ltiContentCardExpandableActionsExample.tsx | 168 ++++++++++++++++++ ...ultiContentCardExpandableBorderExample.tsx | 124 +++++++++++++ ...ltiContentCardExpandableDividerExample.tsx | 124 +++++++++++++ .../MultiContentCardExpandableExample.tsx | 128 +++++++++++++ 5 files changed, 668 insertions(+) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableBorderExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx new file mode 100644 index 00000000..e6136f08 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx @@ -0,0 +1,124 @@ +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 = [ + + + + Getting Started + + + + + + + + + Configure application + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + + , + + + + + + + + Configure access + + + 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. + + + + + + + + + , + + + + Next Steps + + + + + + + + + Configure notifications + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + +]; + +export const BasicExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx new file mode 100644 index 00000000..5fe16bbe --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx @@ -0,0 +1,168 @@ +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 = [ + + + + Getting Started + + + + + + + + + Configure application + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + + , + + + + + + + + Configure access + + + 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. + + + + + + + + + , + + + + Next Steps + + + + + + + + + Configure notifications + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + +]; + +export const BasicExample: React.FunctionComponent = () => { + const [ isMenuOpen, setMenuOpen ] = React.useState(false) + + const onToggleClick = () => { + setMenuOpen(!isMenuOpen); + }; + return ( + null} + onOpenChange={(isMenuOpen: boolean) => setMenuOpen(isMenuOpen)} + toggle={(toggleRef: React.Ref) => ( + + + + )} + shouldFocusToggleOnSelect + > + + + Action + + + Disabled Action + + + + Separated Action + + + + } + /> + ) +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableBorderExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableBorderExample.tsx new file mode 100644 index 00000000..4574282d --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableBorderExample.tsx @@ -0,0 +1,124 @@ +import React from 'react'; +import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; +import { Button, Card, CardHeader, CardBody, CardFooter, Text, TextContent, TextVariants, Icon, TextList, TextListItem } from '@patternfly/react-core'; +import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons'; + +const cards = [ + + + + Getting Started + + + + + + + + + Configure application + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + + , + + + + + + + + Configure access + + + 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. + + + + + + + + + , + + + + Next Steps + + + + + + + + + Configure notifications + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + +]; + +export const BasicExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx new file mode 100644 index 00000000..d32070ec --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx @@ -0,0 +1,124 @@ +import React from 'react'; +import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; +import { Button, Card, CardHeader, CardBody, CardFooter, Text, TextContent, TextVariants, Icon, TextList, TextListItem } from '@patternfly/react-core'; +import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons'; + +const cards = [ + + + + Getting Started + + + + + + + + + Configure application + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + + , + + + + + + + + Configure access + + + 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. + + + + + + + + + , + + + + Next Steps + + + + + + + + + Configure notifications + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + +]; + +export const BasicExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx new file mode 100644 index 00000000..84133c0d --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx @@ -0,0 +1,128 @@ +import React from 'react'; +import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; +import { Button, Card, CardHeader, CardBody, CardFooter, Text, TextContent, TextVariants, Icon, TextList, TextListItem } from '@patternfly/react-core'; +import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons'; + +const cards = [ + + + + Getting Started + + + + + + + + + Configure application + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + + , + + + + + + + + Configure access + + + 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. + + + + + + + + + , + + + + Next Steps + + + + + + + + + Configure notifications + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + +]; + +export const BasicExample: React.FunctionComponent = () => ( + +); From 38997b03805351ba6f1dd83abb16d77adf923f58 Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Mon, 26 Feb 2024 12:08:24 +0100 Subject: [PATCH 3/7] Add MultiContentCard docs --- .../MultiContentCard/MultiContentCard.md | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md new file mode 100644 index 00000000..fbc54dbe --- /dev/null +++ b/packages/module/patternfly-docs/content/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" + +``` From 0405f86773489520a7277b06177b2fd3891653c5 Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Mon, 26 Feb 2024 12:08:42 +0100 Subject: [PATCH 4/7] feat(mcc): Add unit tests for MultiContentCard --- .../MultiContentCard.test.tsx | 217 +++ .../MultiContentCard.test.tsx.snap | 1403 +++++++++++++++++ 2 files changed, 1620 insertions(+) create mode 100644 packages/module/src/MultiContentCard/MultiContentCard.test.tsx create mode 100644 packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap diff --git a/packages/module/src/MultiContentCard/MultiContentCard.test.tsx b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx new file mode 100644 index 00000000..c80a891e --- /dev/null +++ b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx @@ -0,0 +1,217 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import { Button, Card, CardHeader, CardBody, Text, TextContent, TextVariants, Icon, TextList, TextListItem, CardFooter, Dropdown, MenuToggle, DropdownList, DropdownItem, MenuToggleElement } from '@patternfly/react-core'; +import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons'; +import MultiContentCard from './MultiContentCard'; + +const cards = [ + + + + Getting Started + + + + + + + + + Configure application + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + + , + + + + + + + + Configure access + + + 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. + + + + + + + + + , + + + + Next Steps + + + + + + + + + Configure notifications + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + +] + +describe('MultiContentCard component', () => { + it('should render basic multi content card', () => { + const { container } = render(); + expect(screen.getByText('Getting Started')).toBeInTheDocument(); + expect(screen.getByText('Next Steps')).toBeInTheDocument(); + expect(screen.getByText('Configure application')).toBeInTheDocument(); + expect(screen.getByText('Configure access')).toBeInTheDocument(); + expect(screen.getByText('Configure notifications')).toBeInTheDocument(); + expect(screen.getAllByText('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')).toHaveLength(2); + expect(screen.getByText('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.')).toBeInTheDocument(); + expect(screen.getByText('First link')).toBeInTheDocument(); + expect(screen.getByText('Second link')).toBeInTheDocument(); + expect(screen.getByText('Another link')).toBeInTheDocument(); + expect(screen.getAllByText('Learn more')).toHaveLength(2); + + expect(container.firstChild).toMatchSnapshot(); + }); + + it('should render expandable multi content card - expanded', () => { + const { container } = render( + + ); + expect(screen.getByText('Expandable card toggle text')).toBeInTheDocument(); + expect(screen.getByText('Getting Started')).toBeInTheDocument(); + + expect(container.firstChild).toMatchSnapshot(); + }); + + it('should render expandable multi content card - collapsed', () => { + const { container } = render( + + ); + expect(screen.getByText('Expandable card toggle text')).toBeInTheDocument(); + expect(screen.queryByText('Getting Started')).toBe(null); + + expect(container.firstChild).toMatchSnapshot(); + }); + + it('should render expandable multi content card - with actions', () => { + const { container } = render( + null} + onOpenChange={() => null} + toggle={(toggleRef: React.Ref) => ( + null} + isExpanded + > + + + )} + shouldFocusToggleOnSelect + > + + + Action item + + + + } + /> + ); + expect(screen.getByText('Action item')).toBeInTheDocument(); + + expect(container.firstChild).toMatchSnapshot(); + }); + + it('should render multi content card with dividers', () => { + const { container } = render(); + + expect(screen.getAllByRole('separator')).toHaveLength(2); + + expect(container.firstChild).toMatchSnapshot(); + }); + +}); \ No newline at end of file diff --git a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap new file mode 100644 index 00000000..59a437fb --- /dev/null +++ b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap @@ -0,0 +1,1403 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MultiContentCard component should render basic multi content card 1`] = ` +
+
+
+
+
+
+
+

+ Getting Started +

+
+
+
+
+
+

+ + + + + + Configure application +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+
+
+
+

+ + + + + + Configure access +

+

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

+
+
+
+

+ +

+
+
+
+
+
+
+
+
+

+ Next Steps +

+
+
+
+
+
+

+ + + + + + Configure notifications +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+

+ +

+
+
+
+
+
+`; + +exports[`MultiContentCard component should render expandable multi content card - collapsed 1`] = ` +
+
+
+ +
+
+
+
+
+

+ Expandable card toggle text +

+
+
+
+
+
+`; + +exports[`MultiContentCard component should render expandable multi content card - expanded 1`] = ` +
+
+
+ +
+
+
+
+
+

+ Expandable card toggle text +

+
+
+
+
+
+
+
+
+
+
+
+

+ Getting Started +

+
+
+
+
+
+

+ + + + + + Configure application +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+
+
+
+

+ + + + + + Configure access +

+

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

+
+
+
+

+ +

+
+
+
+
+
+
+
+
+

+ Next Steps +

+
+
+
+
+
+

+ + + + + + Configure notifications +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+

+ +

+
+
+
+
+
+
+`; + +exports[`MultiContentCard component should render expandable multi content card - with actions 1`] = ` +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+

+ Expandable card toggle text +

+
+
+
+
+
+`; + +exports[`MultiContentCard component should render multi content card with dividers 1`] = ` +
+
+
+
+
+
+
+

+ Getting Started +

+
+
+
+
+
+

+ + + + + + Configure application +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+
+
+
+
+

+ + + + + + Configure access +

+

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

+
+
+
+

+ +

+
+
+
+
+
+
+
+
+
+

+ Next Steps +

+
+
+
+
+
+

+ + + + + + Configure notifications +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
+

+ +

+
+
+
+
+
+`; From 19120f689564724df41a2afe9dab129d20cf14fc Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Mon, 26 Feb 2024 12:30:21 +0100 Subject: [PATCH 5/7] Fix a11y issues --- .../module/src/MultiContentCard/MultiContentCard.tsx | 4 +--- .../__snapshots__/MultiContentCard.test.tsx.snap | 9 --------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/module/src/MultiContentCard/MultiContentCard.tsx b/packages/module/src/MultiContentCard/MultiContentCard.tsx index 42968bd0..28ce0273 100644 --- a/packages/module/src/MultiContentCard/MultiContentCard.tsx +++ b/packages/module/src/MultiContentCard/MultiContentCard.tsx @@ -92,14 +92,12 @@ const MultiContentCard: React.FunctionComponent = ({ onExpand={onExpand} isToggleRightAligned={isToggleRightAligned} toggleButtonProps={{ - id: 'multi-content-card-toggle-button', 'aria-label': 'Details', - 'aria-labelledby': 'multi-content-card-title toggle-button', 'aria-expanded': isExpanded }} actions={{ actions }} > - {toggleText ? {toggleText} : toggleContent} + {toggleText ? {toggleText} : toggleContent} )} {isExpandable ? {renderCards(cards, withDividers)} : renderCards(cards, withDividers)} diff --git a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap index 59a437fb..b2b7c542 100644 --- a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap +++ b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap @@ -392,12 +392,10 @@ exports[`MultiContentCard component should render expandable multi content card aria-disabled="false" aria-expanded="false" aria-label="Details" - aria-labelledby="multi-content-card-title toggle-button" class="pf-v5-c-button pf-m-plain" data-ouia-component-id="OUIA-Generated-Button-plain-2" data-ouia-component-type="PF5/Button" data-ouia-safe="true" - id="multi-content-card-toggle-button" type="button" >