@patternfly/react-core 6.0.0-alpha.30 → 6.0.0-alpha.32

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.29","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.31","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.29","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.31","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.29","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.31","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.30",
+  "version": "6.0.0-alpha.32",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "a0d48218e63cd489c8b59556e59989559ba8ba65"
+  "gitHead": "c496543a1dc5cbdfdee8b12841e603f7eac7bf01"
 }

package/src/components/ActionList/ActionList.tsx

@@ -14,7 +14,7 @@ export interface ActionListProps extends React.HTMLProps<HTMLDivElement> {
 export const ActionList: React.FunctionComponent<ActionListProps> = ({
   children,
   isIconList,
-  className = '',
+  className,
   ...props
 }: ActionListProps) => (
   <div className={css(styles.actionList, isIconList && styles.modifiers.icons, className)} {...props}>

package/src/components/ActionList/ActionListGroup.tsx

@@ -7,14 +7,17 @@ export interface ActionListGroupProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the action list group */
   className?: string;
+  /** Flag indicating the action list group contains multiple icons and item padding should be removed */
+  isIconGroup?: boolean;
 }
 
 export const ActionListGroup: React.FunctionComponent<ActionListGroupProps> = ({
   children,
-  className = '',
+  className,
+  isIconGroup,
   ...props
 }: ActionListGroupProps) => (
-  <div className={css(styles.actionListGroup, className)} {...props}>
+  <div className={css(styles.actionListGroup, isIconGroup && styles.modifiers.icons, className)} {...props}>
     {children}
   </div>
 );

package/src/components/ActionList/ActionListItem.tsx

@@ -11,7 +11,7 @@ export interface ActionListItemProps extends React.HTMLProps<HTMLDivElement> {
 
 export const ActionListItem: React.FunctionComponent<ActionListItemProps> = ({
   children,
-  className = '',
+  className,
   ...props
 }: ActionListItemProps) => (
   <div className={css(`${styles.actionList}__item`, className)} {...props}>

package/src/components/ActionList/__tests__/ActionListGroup.test.tsx

@@ -14,10 +14,16 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test(`Renders with class ${styles.actionListGroup}`, () => {
+test(`Renders with only class ${styles.actionListGroup} by default`, () => {
   render(<ActionListGroup>Test</ActionListGroup>);
 
-  expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup);
+  expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.icons} when isIconGroup is true`, () => {
+  render(<ActionListGroup isIconGroup>Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
 });
 
 test('Renders with custom class names provided via prop', () => {

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   ActionList,
+  ActionListGroup,
   ActionListItem,
   Button,
   Dropdown,
@@ -46,50 +47,54 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <ActionList>
-        <ActionListItem>
-          <Button variant="primary" id="single-group-next-button">
-            Next
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Button variant="secondary" id="single-group-back-button">
-            Back
-          </Button>
-        </ActionListItem>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="primary" id="single-group-next-button">
+              Next
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button variant="secondary" id="single-group-back-button">
+              Back
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
       </ActionList>
       <br />
       With kebab
       <ActionList>
-        <ActionListItem>
-          <Button variant="primary" id="single-group-next-button2">
-            Next
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Button variant="secondary" id="single-group-back-button2">
-            Back
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Dropdown
-            onSelect={onSelect}
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                ref={toggleRef}
-                onClick={onToggle}
-                variant="plain"
-                isExpanded={isOpen}
-                aria-label="Action list single group kebab"
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
-            )}
-            isOpen={isOpen}
-            onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
-          >
-            <DropdownList>{dropdownItems}</DropdownList>
-          </Dropdown>
-        </ActionListItem>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="primary" id="single-group-next-button2">
+              Next
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button variant="secondary" id="single-group-back-button2">
+              Back
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Dropdown
+              onSelect={onSelect}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onToggle}
+                  variant="plain"
+                  isExpanded={isOpen}
+                  aria-label="Action list single group kebab"
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
+              isOpen={isOpen}
+              onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+            >
+              <DropdownList>{dropdownItems}</DropdownList>
+            </Dropdown>
+          </ActionListItem>
+        </ActionListGroup>
       </ActionList>
     </React.Fragment>
   );

package/src/components/ActionList/examples/ActionListWithCancelButton.tsx

@@ -5,16 +5,18 @@ export const ActionListWithCancelButton: React.FunctionComponent = () => (
   <React.Fragment>
     In modals, forms, data lists
     <ActionList>
-      <ActionListItem>
-        <Button variant="primary" id="with-cancel-save-button">
-          Save
-        </Button>
-      </ActionListItem>
-      <ActionListItem>
-        <Button variant="link" id="with-cancel-cancel-button">
-          Cancel
-        </Button>
-      </ActionListItem>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button variant="primary" id="with-cancel-save-button">
+            Save
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="link" id="with-cancel-cancel-button">
+            Cancel
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
     </ActionList>
     <br />
     In wizards

package/src/components/ActionList/examples/ActionListWithIcons.tsx

@@ -1,19 +1,50 @@
 import React from 'react';
-import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
+import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 
 export const ActionListWithIcons: React.FunctionComponent = () => (
-  <ActionList isIconList>
-    <ActionListItem>
-      <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
-        <TimesIcon />
-      </Button>
-    </ActionListItem>
-    <ActionListItem>
-      <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
-        <CheckIcon />
-      </Button>
-    </ActionListItem>
-  </ActionList>
+  <>
+    <h4>With list icons wrapper</h4>
+    <ActionList isIconList>
+      <ActionListItem>
+        <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
+          <TimesIcon />
+        </Button>
+      </ActionListItem>
+      <ActionListItem>
+        <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
+          <CheckIcon />
+        </Button>
+      </ActionListItem>
+    </ActionList>
+    <br />
+    <h4>With group icons wrapper</h4>
+    <ActionList>
+      <ActionListGroup isIconGroup>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-list-times-button" aria-label="times icon button">
+            <TimesIcon />
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-list-check-button" aria-label="check icon button">
+            <CheckIcon />
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+      <ActionListGroup isIconGroup>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-group-times-button" aria-label="times icon button">
+            <TimesIcon />
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-group-check-button" aria-label="check icon button">
+            <CheckIcon />
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+    </ActionList>
+  </>
 );

package/src/components/Card/Card.tsx

@@ -16,20 +16,12 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isCompact?: boolean;
   /** Modifies the card to include selectable styling */
   isSelectable?: boolean;
-  /** @deprecated Specifies the card is selectable, and applies raised styling on hover and select */
-  isSelectableRaised?: boolean;
   /** Modifies the card to include selected styling */
   isSelected?: boolean;
   /** Modifies the card to include clickable styling */
   isClickable?: boolean;
   /** Modifies a clickable or selectable card to have disabled styling. */
   isDisabled?: boolean;
-  /** @deprecated Modifies a raised selectable card to have disabled styling */
-  isDisabledRaised?: boolean;
-  /** Modifies the card to include flat styling */
-  isFlat?: boolean;
-  /** Modifies the card to include rounded styling */
-  isRounded?: boolean;
   /** Modifies the card to be large. Should not be used with isCompact. */
   isLarge?: boolean;
   /** Cause component to consume the available height of its container */
@@ -38,12 +30,8 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isPlain?: boolean;
   /** Flag indicating if a card is expanded. Modifies the card to be expandable. */
   isExpanded?: boolean;
-  /** @deprecated Flag indicating that the card should render a hidden input to make it selectable */
-  hasSelectableInput?: boolean;
-  /** @deprecated Aria label to apply to the selectable input if one is rendered */
-  selectableInputAriaLabel?: string;
-  /** @deprecated Callback that executes when the selectable input is changed */
-  onSelectableInputChange?: (event: React.FormEvent<HTMLInputElement>, labelledBy: string) => void;
+  /** Card background color variant */
+  variant?: 'default' | 'secondary';
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -52,23 +40,14 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
 
 interface CardContextProps {
   cardId: string;
-  registerTitleId: (id: string) => void;
   isExpanded: boolean;
   isClickable: boolean;
   isSelectable: boolean;
   isDisabled: boolean;
-  // TODO: Remove hasSelectableInput when deprecated prop is removed
-  hasSelectableInput: boolean;
-}
-
-interface AriaProps {
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
 }
 
 export const CardContext = React.createContext<Partial<CardContextProps>>({
   cardId: '',
-  registerTitleId: () => {},
   isExpanded: false,
   isClickable: false,
   isSelectable: false,
@@ -84,28 +63,19 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isSelectable = false,
   isClickable = false,
   isDisabled = false,
-  isSelectableRaised = false,
   isSelected = false,
-  isDisabledRaised = false,
-  // TODO: Update with issue #9991
-  // isFlat = false,
   isExpanded = false,
-  // TODO: Update with issue #9991
-  // isRounded = false,
   isLarge = false,
   isFullHeight = false,
   isPlain = false,
+  variant = 'default',
   ouiaId,
   ouiaSafe = true,
-  hasSelectableInput = false,
-  selectableInputAriaLabel,
-  onSelectableInputChange = () => {},
+
   ...props
 }: CardProps) => {
   const Component = component as any;
   const ouiaProps = useOUIAProps(Card.displayName, ouiaId, ouiaSafe);
-  const [titleId, setTitleId] = React.useState('');
-  const [ariaProps, setAriaProps] = React.useState<AriaProps>();
 
   if (isCompact && isLarge) {
     // eslint-disable-next-line no-console
@@ -114,13 +84,6 @@ export const Card: React.FunctionComponent<CardProps> = ({
   }
 
   const getSelectableModifiers = () => {
-    // TODO: Update with issue #9991
-    // if (isDisabledRaised) {
-    //   return css(styles.modifiers.nonSelectableRaised);
-    // }
-    // if (isSelectableRaised) {
-    //   return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
-    // }
     if (isSelectable && isClickable) {
       return css(styles.modifiers.selectable, styles.modifiers.clickable, isSelected && styles.modifiers.current);
     }
@@ -136,69 +99,30 @@ export const Card: React.FunctionComponent<CardProps> = ({
     return '';
   };
 
-  const containsCardTitleChildRef = React.useRef(false);
-
-  const registerTitleId = (id: string) => {
-    setTitleId(id);
-    containsCardTitleChildRef.current = !!id;
-  };
-
-  React.useEffect(() => {
-    if (selectableInputAriaLabel) {
-      setAriaProps({ 'aria-label': selectableInputAriaLabel });
-    } else if (titleId) {
-      setAriaProps({ 'aria-labelledby': titleId });
-    } else if (hasSelectableInput && !containsCardTitleChildRef.current) {
-      setAriaProps({});
-      // eslint-disable-next-line no-console
-      console.warn(
-        'If no CardTitle component is passed as a child of Card the selectableInputAriaLabel prop must be passed'
-      );
-    }
-  }, [hasSelectableInput, selectableInputAriaLabel, titleId]);
-
   return (
     <CardContext.Provider
       value={{
         cardId: id,
-        registerTitleId,
         isExpanded,
         isClickable,
         isSelectable,
-        isDisabled,
-        // TODO: Remove hasSelectableInput when deprecated prop is removed
-        hasSelectableInput
+        isDisabled
       }}
     >
-      {hasSelectableInput && (
-        <input
-          className="pf-v5-screen-reader"
-          id={`${id}-input`}
-          {...ariaProps}
-          type="checkbox"
-          checked={isSelected}
-          onChange={(event) => onSelectableInputChange(event, id)}
-          disabled={isDisabledRaised}
-          tabIndex={-1}
-        />
-      )}
       <Component
         id={id}
         className={css(
           styles.card,
           isCompact && styles.modifiers.compact,
           isExpanded && styles.modifiers.expanded,
-          // TODO: Update with issue #9991
-          // isFlat && styles.modifiers.flat,
-          // isRounded && styles.modifiers.rounded,
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,
+          variant === 'secondary' && styles.modifiers.secondary,
           getSelectableModifiers(),
           isDisabled && styles.modifiers.disabled,
           className
         )}
-        tabIndex={isSelectableRaised ? '0' : undefined}
         {...props}
         {...ouiaProps}
       >

package/src/components/Card/CardHeader.tsx

@@ -79,8 +79,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {/* TODO: Remove hasSelectableInput when deprecated props are removed */}
-    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled, hasSelectableInput }) => {
+    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -99,10 +98,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
       );
 
       const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-      // TODO: Remove following variable and update if block when deprecated prop is removed
-      // We don't want to throw a warning for the deprecated card
-      const isDeprecatedSelectableCard = hasSelectableInput;
-      if (actions?.actions && isClickableOrSelectableOnly && !isDeprecatedSelectableCard) {
+      if (actions?.actions && isClickableOrSelectableOnly) {
         // eslint-disable-next-line no-console
         console.warn(
           `${

package/src/components/Card/CardTitle.tsx

@@ -18,16 +18,10 @@ export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
   component = 'div',
   ...props
 }: CardTitleProps) => {
-  const { cardId, registerTitleId } = React.useContext(CardContext);
+  const { cardId } = React.useContext(CardContext);
   const Component = component as any;
   const titleId = cardId ? `${cardId}-title` : '';
 
-  React.useEffect(() => {
-    registerTitleId(titleId);
-
-    return () => registerTitleId('');
-  }, [registerTitleId, titleId]);
-
   return (
     <div className={css(styles.cardTitle)}>
       <Component className={css(styles.cardTitleText, className)} id={titleId || undefined} {...props}>

package/src/components/Card/__tests__/Card.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { Card, CardContext } from '../Card';
+import { Card } from '../Card';
 
 describe('Card', () => {
   test('renders with PatternFly Core styles', () => {
@@ -69,52 +69,11 @@ describe('Card', () => {
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
-  // TODO: Update with issue #9991
-  xtest('card with isDisabledRaised applied', () => {
-    render(<Card isDisabledRaised>disabled raised card</Card>);
-    expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised');
-  });
-
-  // TODO: Update with issue #9991
-  xtest('card with isSelectableRaised applied - not change', () => {
-    render(<Card isSelectableRaised>raised selectable card</Card>);
-
-    const card = screen.getByText('raised selectable card');
-    expect(card).toHaveClass('pf-m-selectable-raised');
-    expect(card).toHaveAttribute('tabindex', '0');
-  });
-
-  // TODO: Update with issue #9991
-  xtest('card with isSelectableRaised and isSelected applied ', () => {
-    render(
-      <Card isSelected isSelectableRaised>
-        raised selected card
-      </Card>
-    );
-
-    const card = screen.getByText('raised selected card');
-    expect(card).toHaveClass('pf-m-selectable-raised');
-    expect(card).toHaveClass('pf-m-selected-raised');
-    expect(card).toHaveAttribute('tabindex', '0');
-  });
-
-  // TODO: Update with issue #9991
-  xtest('card with isFlat applied', () => {
-    render(<Card isFlat>flat card</Card>);
-    expect(screen.getByText('flat card')).toHaveClass('pf-m-flat');
-  });
-
   test('card with isExpanded applied', () => {
     render(<Card isExpanded>expanded card</Card>);
     expect(screen.getByText('expanded card')).toHaveClass('pf-m-expanded');
   });
 
-  // TODO: Update with issue #9991
-  xtest('card with isRounded applied', () => {
-    render(<Card isRounded>rounded card</Card>);
-    expect(screen.getByText('rounded card')).toHaveClass('pf-m-rounded');
-  });
-
   test('card with isLarge applied', () => {
     render(<Card isLarge>large card</Card>);
     expect(screen.getByText('large card')).toHaveClass('pf-m-display-lg');
@@ -128,87 +87,10 @@ describe('Card', () => {
     expect(consoleWarnMock).toHaveBeenCalled();
   });
 
-  test('card renders with a hidden input to improve a11y when hasSelectableInput is passed', () => {
-    render(<Card isSelectable hasSelectableInput />);
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).toBeInTheDocument();
-  });
-
-  test('card does not render the hidden input when hasSelectableInput is not passed', () => {
-    render(<Card isSelectable />);
-
-    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).not.toBeInTheDocument();
-  });
-
-  test('card warns when hasSelectableInput is passed without selectableInputAriaLabel or a card title', () => {
-    const consoleWarnMock = jest.fn();
-    global.console = { warn: consoleWarnMock } as any;
-
-    render(<Card isSelectable hasSelectableInput />);
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(consoleWarnMock).toBeCalled();
-    expect(selectableInput).toHaveAccessibleName('');
-  });
-
-  test('card applies selectableInputAriaLabel to the hidden input', () => {
-    render(<Card isSelectable hasSelectableInput selectableInputAriaLabel="Input label test" />);
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).toHaveAccessibleName('Input label test');
-  });
-
-  test('card applies the supplied card title as the aria label of the hidden input', () => {
-    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
-    const MockCardTitle = ({ children }) => {
-      const { registerTitleId } = React.useContext(CardContext);
-      const id = 'card-title-id';
-
-      React.useEffect(() => {
-        registerTitleId(id);
-      });
-
-      return <div id={id}>{children}</div>;
-    };
-
-    render(
-      <Card id="card" isSelectable hasSelectableInput>
-        <MockCardTitle>Card title from title component</MockCardTitle>
-      </Card>
-    );
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).toHaveAccessibleName('Card title from title component');
-  });
-
-  test('card prioritizes selectableInputAriaLabel over card title labelling via card title', () => {
-    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
-    const MockCardTitle = ({ children }) => {
-      const { registerTitleId } = React.useContext(CardContext);
-      const id = 'card-title-id';
-
-      React.useEffect(() => {
-        registerTitleId(id);
-      });
-
-      return <div id={id}>{children}</div>;
-    };
-
-    render(
-      <Card id="card" isSelectable hasSelectableInput selectableInputAriaLabel="Input label test">
-        <MockCardTitle>Card title from title component</MockCardTitle>
-      </Card>
-    );
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+  test('card with variant set to secondary ', () => {
+    render(<Card variant="secondary">secondary card</Card>);
 
-    expect(selectableInput).toHaveAccessibleName('Input label test');
+    const card = screen.getByText('secondary card');
+    expect(card).toHaveClass('pf-m-secondary');
   });
 });