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

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>
+);

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

@@ -1,10 +1,11 @@
 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 SelectableCard: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
+  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
 
   const id1 = 'selectable-card-input-1';
   const id2 = 'selectable-card-input-2';
@@ -26,50 +27,66 @@ export const SelectableCard: React.FunctionComponent = () => {
     }
   };
 
+  const toggleVariant = (checked: boolean) => {
+    setIsSecondary(checked);
+  };
+
   return (
-    <React.Fragment>
-      <Card id="selectable-card-example-1" isSelectable>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id1,
-            selectableActionAriaLabelledby: 'selectable-card-example-1',
-            name: id1,
-            isChecked: isChecked1,
-            onChange
-          }}
-        >
-          <CardTitle>First card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is selectable.</CardBody>
-      </Card>
-      <Card id="selectable-card-example-2" isSelectable>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id2,
-            selectableActionAriaLabelledby: 'selectable-card-example-2',
-            name: id2,
-            isChecked: isChecked2,
-            onChange
-          }}
-        >
-          <CardTitle>Second card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is selectable.</CardBody>
-      </Card>
-      <Card id="selectable-card-example-3" isSelectable isDisabled>
-        <CardHeader
-          selectableActions={{
-            selectableActionId: id3,
-            selectableActionAriaLabelledby: 'selectable-card-example-3',
-            name: id3,
-            isChecked: isChecked3,
-            onChange
-          }}
-        >
-          <CardTitle>Third card</CardTitle>
-        </CardHeader>
-        <CardBody>This card is 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-selectable"
+        name="toggle-variant"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Gallery hasGutter>
+          <Card id="selectable-card-example-1" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id1,
+                selectableActionAriaLabelledby: 'selectable-card-example-1',
+                name: id1,
+                isChecked: isChecked1,
+                onChange
+              }}
+            >
+              <CardTitle>First card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is selectable.</CardBody>
+          </Card>
+          <Card id="selectable-card-example-2" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id2,
+                selectableActionAriaLabelledby: 'selectable-card-example-2',
+                name: id2,
+                isChecked: isChecked2,
+                onChange
+              }}
+            >
+              <CardTitle>Second card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is selectable.</CardBody>
+          </Card>
+          <Card id="selectable-card-example-3" isSelectable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
+            <CardHeader
+              selectableActions={{
+                selectableActionId: id3,
+                selectableActionAriaLabelledby: 'selectable-card-example-3',
+                name: id3,
+                isChecked: isChecked3,
+                onChange
+              }}
+            >
+              <CardTitle>Third card</CardTitle>
+            </CardHeader>
+            <CardBody>This card is selectable but disabled.</CardBody>
+          </Card>
+        </Gallery>
+      </div>
+    </>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody, Gallery } from '@patternfly/react-core';
 
 export const SingleSelectableCard: React.FunctionComponent = () => {
   const id1 = 'single-selectable-card-input-1';
@@ -7,7 +7,7 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
   const id3 = 'single-selectable-card-input-3';
 
   return (
-    <React.Fragment>
+    <Gallery hasGutter>
       <Card id="single-selectable-card-example-1" isSelectable>
         <CardHeader
           selectableActions={{
@@ -47,6 +47,6 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
         </CardHeader>
         <CardBody>This card is single selectable but disabled.</CardBody>
       </Card>
-    </React.Fragment>
+    </Gallery>
   );
 };

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

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

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

@@ -15,7 +15,7 @@ import {
   Divider
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import pfLogo from '../../assets/pfLogo.svg';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -85,23 +85,23 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
 
   return (
     <>
-      <Card>
-        <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
-          <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
-        </CardHeader>
-        <CardTitle>Title</CardTitle>
-        <CardBody>Body</CardBody>
-        <CardFooter>Footer</CardFooter>
-      </Card>
-      <div style={{ marginTop: '20px' }}>
-        <Checkbox
-          label="actions hasNoOffset"
-          isChecked={hasNoOffset}
-          onChange={(_event, checked) => toggleOffset(checked)}
-          aria-label="remove actions offset"
-          id="toggle-actions-offset"
-          name="toggle-actions-offset"
-        />
+      <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>Title</CardTitle>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </Card>
       </div>
     </>
   );

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
 export const CardWithModifiers: React.FunctionComponent = () => {
-  // TODO: Update with issue #9991 removed isFlat and isRounded
   const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];
   const [modifiers, setModifiers] = React.useState({});
 

package/src/demos/examples/Card/CardHorizontalSplit.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '@patternfly/react-core';
 
 export const CardHorizontalSplitDemo: React.FunctionComponent = () => (
-  <Card id="card-demo-horizontal-split-example" isFlat>
+  <Card id="card-demo-horizontal-split-example">
     <Grid md={6}>
       <GridItem
         style={{

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -70,20 +70,20 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
                 </TextContent>
               </GridItem>
               <Grid md={6} xl2={3} hasGutter>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Check system requirements</CardTitle>
                   <CardBody>
                     Your physical or virtual machine should meet the <a href="#">system requirement</a>.
                   </CardBody>
                 </Card>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Download an installation ISO image</CardTitle>
                   <CardBody>
                     {' '}
                     <a href="#">Download</a> the binary DVD ISO.
                   </CardBody>
                 </Card>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Create a bootable installation media</CardTitle>
                   <CardBody>
                     {' '}

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

@@ -1,127 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownList,
-  DropdownItem,
-  MenuToggle,
-  MenuToggleElement,
-  Divider
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-export const CardLegacySelectable: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string>('');
-  const [isKebabOpen, setIsKebabOpen] = React.useState<boolean>(false);
-
-  const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    if (['Enter', ' '].includes(event.key)) {
-      event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
-
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
-
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  const onToggle = (event: React.MouseEvent) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  const onSelect = (event: React.MouseEvent | undefined) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  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={isKebabOpen}
-            onClick={onToggle}
-            variant="plain"
-            aria-label="Card legacy selectable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
-        )}
-        isOpen={isKebabOpen}
-        onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
-      >
-        <DropdownList>{dropdownItems}</DropdownList>
-      </Dropdown>
-    </>
-  );
-
-  return (
-    <>
-      <Card
-        id="legacy-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        onSelectableInputChange={onChange}
-        isSelectable
-        isSelected={selected === 'legacy-first-card'}
-        hasSelectableInput
-        tabIndex={0}
-      >
-        <CardHeader actions={{ actions: headerActions }} />
-        <CardTitle>First legacy selectable card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-      </Card>
-      <br />
-      <Card
-        id="legacy-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        onSelectableInputChange={onChange}
-        isSelectable
-        isSelected={selected === 'legacy-second-card'}
-        hasSelectableInput
-        tabIndex={0}
-      >
-        <CardTitle>Second legacy selectable card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-      </Card>
-    </>
-  );
-};

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

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Card, CardTitle, CardBody } from '@patternfly/react-core';
-
-export const CardLegacySelectableA11yHighlight: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string>('');
-
-  const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    if ([' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
-
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
-
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  return (
-    <React.Fragment>
-      <Card
-        id="a11y-selectable-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        hasSelectableInput
-        onSelectableInputChange={onChange}
-        isSelectableRaised
-        isSelected={selected === 'a11y-selectable-first-card'}
-      >
-        <CardTitle>Selectable card with proper accessibility considerations</CardTitle>
-        <CardBody>
-          When using a screen reader a checkbox will become navigable that indicates this card is selectable and
-          communicate if it is currently selected.
-        </CardBody>
-      </Card>
-      <br />
-      <Card
-        id="a11y-selectable-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        isSelectableRaised
-        isSelected={selected === 'a11y-selectable-second-card'}
-      >
-        <CardTitle>Selectable card without proper accessibility considerations</CardTitle>
-        <CardBody>
-          When using a screen reader there are no indications that this card is selectable or if it is currently
-          selected.
-        </CardBody>
-      </Card>
-    </React.Fragment>
-  );
-};