chore!: make CardAction a react component (#1710)

.changeset/nervous-spiders-sell.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: CardAction is now a react component

docs/stories/Card.stories.tsx

@@ -36,7 +36,6 @@ export const Base = {
     >
       <CardHeader>
         <CardCheckbox value />
-        {/* @ts-expect-error – fix this */}
         <CardAction position="end">
           <IconButton label="Edit the thing" icon={<Pencil />} />
         </CardAction>

docs/stories/getting started/migration guides/migration-v1-v2.mdx

@@ -131,7 +131,7 @@ const MyLink = () => {
 }
 ```
 
-#### Box, Flex, Grid & Typography are now all react components
+#### Box, Flex, Grid, CardAction & Typography are now all react components
 
 These components are no longer styled-components. This means that users can not directly reference them in other styled
 components:

packages/design-system/src/components/Card/CardAction.tsx

@@ -0,0 +1,36 @@
+import { styled } from 'styled-components';
+
+import { PropsToTransientProps } from '../../types';
+import { Flex, FlexComponent, FlexProps } from '../Flex';
+
+type CardActionPosition = 'end' | 'start';
+
+type CardActionProps = Omit<FlexProps<'div'>, 'direction' | 'gap' | 'position'> & {
+  position: CardActionPosition;
+};
+
+const CardActionImpl = ({ position, ...restProps }: CardActionProps) => {
+  return <CardAction $position={position} {...restProps} direction="row" gap={2} />;
+};
+
+const CardAction = styled<FlexComponent>(Flex)<PropsToTransientProps<CardActionProps>>`
+  position: absolute;
+  top: ${({ theme }) => theme.spaces[3]};
+  right: ${({ $position, theme }) => {
+    if ($position === 'end') {
+      return theme.spaces[3];
+    }
+
+    return undefined;
+  }};
+  left: ${({ $position, theme }) => {
+    if ($position === 'start') {
+      return theme.spaces[3];
+    }
+
+    return undefined;
+  }};
+`;
+
+export { CardActionImpl as CardAction };
+export type { CardActionProps, CardActionPosition };

packages/design-system/src/components/Card/CardCheckbox.tsx

@@ -9,7 +9,7 @@ export const CardCheckbox = (props: CardCheckboxProps) => {
   const { id } = useCard();
 
   return (
-    <CardAction $position="start">
+    <CardAction position="start">
       <BaseCheckbox aria-labelledby={`${id}-title`} {...props} />
     </CardAction>
   );