Removed Card class test.

Author: dlabaj

packages/react-core/src/components/Card/__tests__/CardSubtitle.test.tsx

@@ -7,11 +7,6 @@ describe('CardSubtitle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('className is added to the root element', () => {
-    render(<CardSubtitle className="extra-class">text</CardSubtitle>);
-    expect(screen.getByText('text')).toHaveClass('extra-class');
-  });
-
   test('extra props are spread to the root element', () => {
     const testId = 'card-subtitle';
 

packages/react-core/src/components/Card/examples/Card.md

@@ -37,6 +37,12 @@ A basic card that also has a subtitle
 
 ```ts file='./CardSubtitle.tsx'
 
+```
+### Card with subtitle and Actions
+This card demonstrates having an image, action, and subtitle in a single card.
+
+```ts file='./CardSubtitleActions.tsx'
+
 ```
 
 ### Secondary cards
@@ -78,6 +84,8 @@ Select the "actions hasNoOffset" checkbox in the example below to illustrate thi
 
 ```
 
+
+
 ### Title inline with images and actions
 
 Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any images or actions.

packages/react-core/src/components/Card/examples/CardSubtitleActions.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import {
+  Brand,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Checkbox,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+
+export const CardWithImageAndActions: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [hasNoOffset, setHasNoOffset] = useState<boolean>(false);
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+  const onClick = (checked: boolean) => {
+    setIsChecked(checked);
+  };
+  const toggleOffset = (checked: boolean) => {
+    setHasNoOffset(checked);
+  };
+
+  const dropdownItems = (
+    <>
+      <DropdownItem key="action">Action</DropdownItem>
+      {/* Prevent default onClick functionality for example purposes */}
+      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Separated Link
+      </DropdownItem>
+    </>
+  );
+
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isOpen}
+            onClick={() => setIsOpen(!isOpen)}
+            variant="plain"
+            aria-label="Card header images and actions example kebab toggle"
+            icon={<EllipsisVIcon />}
+          />
+        )}
+        isOpen={isOpen}
+        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-1"
+        name="check1"
+      />
+    </>
+  );
+
+  return (
+    <>
+      <Checkbox
+        label="actions hasNoOffset"
+        isChecked={hasNoOffset}
+        onChange={(_event, checked) => toggleOffset(checked)}
+        aria-label="remove actions offset"
+        id="toggle-actions-offset"
+        name="toggle-actions-offset"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Card>
+          <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
+            <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
+          </CardHeader>
+          <CardTitle subtitle="Subtitle">Title</CardTitle>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </Card>
+      </div>
+    </>
+  );
+};