reworked the logic using actions

Author: Mash707

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

@@ -1,25 +1,25 @@
-import { Card, CardBody, CardHeader, Button, CardTitle, Flex, FlexItem } from '@patternfly/react-core';
+import { Card, CardBody, CardHeader, Button, CardTitle } from '@patternfly/react-core';
 
 export const CardBasic: React.FunctionComponent = () => (
   <Card ouiaId="BasicCard">
-    <CardHeader hasWrap>
-      {' '}
-      <Flex columnGap={{ default: 'columnGapXl' }} justifyContent={{ default: 'justifyContentSpaceBetween' }}>
-        <FlexItem>
-          <CardTitle>This is a longer card title that takes up more space</CardTitle>
-        </FlexItem>
-        <FlexItem>
-          <Button variant="primary" ouiaId="Primary">
+    <CardHeader
+      hasWrap
+      actions={{
+        hasNoOffset: true,
+        actions: [
+          <Button variant="primary" ouiaId="Primary" key="primary">
             Primary action
-          </Button>
-          <Button variant="secondary" ouiaId="Secondary">
+          </Button>,
+          <Button variant="secondary" ouiaId="Secondary" key="secondary">
             Secondary action
-          </Button>
-          <Button variant="tertiary" ouiaId="Tertiary">
+          </Button>,
+          <Button variant="tertiary" ouiaId="Tertiary" key="tertiary">
             Tertiary action
           </Button>
-        </FlexItem>
-      </Flex>
+        ]
+      }}
+    >
+      <CardTitle>This is a longer card title that takes up more space</CardTitle>
     </CardHeader>
     <CardBody>This is the card body</CardBody>
   </Card>