@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

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,47 +69,11 @@ describe('Card', () => {
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
-  test('card with isDisabledRaised applied', () => {
-    render(<Card isDisabledRaised>disabled raised card</Card>);
-    expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised');
-  });
-
-  test('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');
-  });
-
-  test('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');
-  });
-
-  test('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');
   });
 
-  test('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');
@@ -123,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');
   });
 });

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardTitle } from '../CardTitle';
-import { CardContext } from '../Card';
 
 describe('CardTitle', () => {
   test('renders with PatternFly Core styles', () => {
@@ -20,16 +19,4 @@ describe('CardTitle', () => {
     render(<CardTitle data-testid={testId} />);
     expect(screen.getByTestId(testId)).toBeInTheDocument();
   });
-
-  test('calls the registerTitleId function provided by the CardContext with the generated title id', () => {
-    const mockRegisterTitleId = jest.fn();
-
-    render(
-      <CardContext.Provider value={{ cardId: 'card', registerTitleId: mockRegisterTitleId }}>
-        <CardTitle>text</CardTitle>
-      </CardContext.Provider>
-    );
-
-    expect(mockRegisterTitleId).toHaveBeenCalledWith('card-title');
-  });
 });

package/src/components/Card/examples/Card.md

@@ -16,8 +16,8 @@ propComponents:
 ouia: true
 ---
 
-import pfLogo from '../../assets/pfLogo.svg';
-import pfLogoSmall from '../../assets/pf-c-brand--logo-on-sm.svg';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+import pfLogoSmall from '../../assets/PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
@@ -30,6 +30,14 @@ Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You
 
 ```
 
+### Secondary cards
+
+You can apply secondary background color styling to a card by setting the `variant` property to `secondary`.
+
+```ts file='./CardSecondary.tsx'
+
+```
+
 ### Modifiers
 
 You can further modify the styling of the card's content by using the properties outlined below. In this example, you can enable each modifier by selecting its respective checkbox.
@@ -43,8 +51,6 @@ Most modifiers can be used in combination with each other, except for `isCompact
 | Modifier     | Description                                                                          |
 | ------------ | ------------------------------------------------------------------------------------ |
 | isCompact    | Modifies the card to include compact styling. Should not be used with isLarge.       |
-| isFlat       | Modifies the card to include flat styling.                                           |
-| isRounded    | Modifies the card to include rounded border styling.                                 |
 | isLarge      | Modifies the card to be large. Should not be used with isCompact.                    |
 | isFullHeight | Modifies the card so that it fills the total available height of its container.      |
 | isPlain      | Modifies the card to include plain styling, which removes the border and background. |
@@ -145,36 +151,6 @@ When passing interactive content to a clickable and selectable card that is disa
 
 ```
 
-### Selectable cards (deprecated)
-
-The following example shows a deprecated implementation of selectable cards. This example uses the `isSelectable` property instead of `isSelectableRaised`, which is the current recommendation for implementation. `isSelectable` applies selectable styling, but does not apply raised styling on hover and selection as `isSelectableRaised` does.
-
-A `tabIndex={0}` is also manually passed to allow the card to be focused and clicked via keyboard.
-
-```ts file='./CardDeprecatedSelectable.tsx' isDeprecated
-
-```
-
-### Selectable card accessibility features (deprecated)
-
-Note: the following example uses deprecated properties. We recommend using the new `selectableActions` property for the `CardHeader` instead.
-
-The following cards demonstrate how the `hasSelectableInput` and `onSelectableInputChange` properties improve accessibility for selectable cards.
-
-The first card sets `hasSelectableInput` to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, also communicates the current selection state.
-
-By default, this input will have an aria-label that corresponds to the `<CardTitle>`. If this isn't defined, then you must pass a custom aria-label using the `selectableInputAriaLabel` property.
-
-The first card passes an onChange callback to `onSelectableInputChange` to enable the selection/deselection of the associated card via checkbox input.
-
-The second card does not set `hasSelectableInput` to true, so neither the input nor the selection state is communicated to users of assistive technologies.
-
-We recommend navigating this example using a screen reader to best understand both cards.
-
-```ts file='./CardDeprecatedSelectableA11yHighlight.tsx' isDeprecated
-
-```
-
 ### Expandable cards
 
 A card can be made expandable using the `isExpanded` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content.
@@ -192,3 +168,10 @@ An image can be placed in the card header to show users an icon beside the expan
 ```ts file='./CardExpandableWithIcon.tsx'
 
 ```
+
+### Card with dividers
+Dividers can be placed between sections of the card.
+
+```ts file='./CardWithDividers.tsx'
+
+```

package/src/components/Card/examples/CardClickable.tsx

@@ -1,54 +1,72 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const CardClickable: React.FunctionComponent = () => {
+  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
+
   const id1 = 'clickable-card-input-1';
   const id2 = 'clickable-card-input-2';
   const id3 = 'clickable-card-input-3';
 
+  const toggleVariant = (checked: boolean) => {
+    setIsSecondary(checked);
+  };
+
   return (
-    <React.Fragment>
-      <Card id="clickable-card-example-1" isClickable>
-        <CardHeader
-          selectableActions={{
-            // eslint-disable-next-line no-console
-            onClickAction: () => console.log(`${id1} clicked`),
-            selectableActionId: id1,
-            selectableActionAriaLabelledby: 'clickable-card-example-1',
-            name: 'clickable-card-example'
-          }}
-        >
-          <CardTitle>First card</CardTitle>
-        </CardHeader>
-        <CardBody>This card performs an action on click.</CardBody>
-      </Card>
-      <Card id="clickable-card-example-2" isClickable>
-        <CardHeader
-          selectableActions={{
-            to: '#',
-            selectableActionId: id2,
-            selectableActionAriaLabelledby: 'clickable-card-example-2',
-            name: 'clickable-card-example'
-          }}
-        >
-          <CardTitle>Second card</CardTitle>
-        </CardHeader>
-        <CardBody>This card can navigate to a link on click.</CardBody>
-      </Card>
-      <Card id="clickable-card-example-3" isClickable isDisabled>
-        <CardHeader
-          selectableActions={{
-            // eslint-disable-next-line no-console
-            onClickAction: () => console.log(`${id3} clicked`),
-            selectableActionId: id3,
-            selectableActionAriaLabelledby: 'clickable-card-example-3',
-            name: 'clickable-card-example'
-          }}
-        >
-          <CardTitle>Third card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is clickable but disabled.</CardBody>
-      </Card>
-    </React.Fragment>
+    <>
+      <Checkbox
+        label="secondary styling"
+        isChecked={isSecondary}
+        onChange={(_event, checked) => toggleVariant(checked)}
+        aria-label="add secondary styling"
+        id="toggle-variant-clickable"
+        name="toggle-variant"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Gallery hasGutter>
+          <Card id="clickable-card-example-1" isClickable variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                // eslint-disable-next-line no-console
+                onClickAction: () => console.log(`${id1} clicked`),
+                selectableActionId: id1,
+                selectableActionAriaLabelledby: 'clickable-card-example-1',
+                name: 'clickable-card-example'
+              }}
+            >
+              <CardTitle>First card</CardTitle>
+            </CardHeader>
+            <CardBody>This card performs an action on click.</CardBody>
+          </Card>
+          <Card id="clickable-card-example-2" isClickable variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                to: '#',
+                selectableActionId: id2,
+                selectableActionAriaLabelledby: 'clickable-card-example-2',
+                name: 'clickable-card-example'
+              }}
+            >
+              <CardTitle>Second card</CardTitle>
+            </CardHeader>
+            <CardBody>This card can navigate to a link on click.</CardBody>
+          </Card>
+          <Card id="clickable-card-example-3" isClickable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                // eslint-disable-next-line no-console
+                onClickAction: () => console.log(`${id3} clicked`),
+                selectableActionId: id3,
+                selectableActionAriaLabelledby: 'clickable-card-example-3',
+                name: 'clickable-card-example'
+              }}
+            >
+              <CardTitle>Third card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is clickable but disabled.</CardBody>
+          </Card>
+        </Gallery>
+      </div>
+    </>
   );
 };

package/src/components/Card/examples/CardClickableSelectable.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody, Button } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Button, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const CardClickable: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
   const [isSelected1, setIsSelected1] = React.useState(false);
+  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
 
   const id1 = 'clickable-selectable-card-input-1';
   const id2 = 'clickable-selectable-card-input-2';
@@ -31,64 +32,97 @@ export const CardClickable: React.FunctionComponent = () => {
     }
   };
 
+  const toggleVariant = (checked: boolean) => {
+    setIsSecondary(checked);
+  };
+
   return (
-    <React.Fragment>
-      <Card id="clickable-selectable-card-example-1" isClickable isSelectable isSelected={isSelected1}>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id1,
-            selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
-            name: id1,
-            isChecked: isChecked1,
-            onChange
-          }}
-        >
-          <CardTitle>
-            <Button variant="link" isInline onClick={onClick}>
-              First card
-            </Button>
-          </CardTitle>
-        </CardHeader>
-        <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
-      </Card>
-      <Card id="clickable-selectable-card-example-2" isClickable isSelectable>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id2,
-            selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
-            name: id2,
-            isChecked: isChecked2,
-            onChange
-          }}
-        >
-          <CardTitle>Second Card</CardTitle>
-        </CardHeader>
-        <CardBody>
-          This card is selectable and has a link in the card body that navigates to{' '}
-          <Button variant="link" isInline component="a" href="#">
-            Patternfly
-          </Button>
-          .
-        </CardBody>
-      </Card>
-      <Card id="clickable-selectable-card-example-3" isClickable isSelectable isDisabled>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id3,
-            selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
-            name: id3,
-            isChecked: isChecked3,
-            onChange
-          }}
-        >
-          <CardTitle>
-            <Button isDisabled variant="link" isInline component="a" href="https://www.patternfly.org/">
-              Third card
-            </Button>
-          </CardTitle>
-        </CardHeader>
-        <CardBody>This card is clickable and selectable, but disabled.</CardBody>
-      </Card>
-    </React.Fragment>
+    <>
+      <Checkbox
+        label="secondary styling"
+        isChecked={isSecondary}
+        onChange={(_event, checked) => toggleVariant(checked)}
+        aria-label="add secondary styling"
+        id="toggle-variant-clickable-selectable"
+        name="toggle-variant"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Gallery hasGutter>
+          <Card
+            id="clickable-selectable-card-example-1"
+            isClickable
+            isSelectable
+            isSelected={isSelected1}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id1,
+                selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
+                name: id1,
+                isChecked: isChecked1,
+                onChange
+              }}
+            >
+              <CardTitle>
+                <Button variant="link" isInline onClick={onClick}>
+                  First card
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
+          </Card>
+          <Card
+            id="clickable-selectable-card-example-2"
+            isClickable
+            isSelectable
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id2,
+                selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
+                name: id2,
+                isChecked: isChecked2,
+                onChange
+              }}
+            >
+              <CardTitle>Second Card</CardTitle>
+            </CardHeader>
+            <CardBody>
+              This card is selectable and has a link in the card body that navigates to{' '}
+              <Button variant="link" isInline component="a" href="#">
+                Patternfly
+              </Button>
+              .
+            </CardBody>
+          </Card>
+          <Card
+            id="clickable-selectable-card-example-3"
+            isClickable
+            isSelectable
+            isDisabled
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id3,
+                selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
+                name: id3,
+                isChecked: isChecked3,
+                onChange
+              }}
+            >
+              <CardTitle>
+                <Button isDisabled variant="link" isInline component="a" href="https://www.patternfly.org/">
+                  Third card
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardBody>This card is clickable and selectable, but disabled.</CardBody>
+          </Card>
+        </Gallery>
+      </div>
+    </>
   );
 };

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -13,7 +13,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import pfLogoSmall from '../../assets/pf-c-brand--logo-on-sm.svg';
+import pfLogoSmall from '../../PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {

package/src/components/Card/examples/CardSecondary.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardSecondary: React.FunctionComponent = () => (
+  <Card ouiaId="SecondaryCard" variant="secondary">
+    <CardTitle>Title</CardTitle>
+    <CardBody>Body</CardBody>
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);