feat: CardRoot

Author: adrienzheng-cb

packages/mobile/src/cards/CardMedia.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import {
   defaultMediaDimension,
   defaultMediaSize,
@@ -11,8 +11,7 @@ import type {
 } from '@coinbase/cds-common/types';
 
 import { Pictogram, SpotSquare } from '../illustrations';
-
-import { CardRemoteImage } from './CardRemoteImage';
+import { getSource, RemoteImage } from '../media/RemoteImage';
 
 export type CardMediaProps = CommonCardMediaProps;
 
@@ -50,8 +49,10 @@ export const CardMedia = memo(function CardMedia({ placement = 'end', ...props }
       );
     case 'image':
       return (
-        <CardRemoteImage
+        <RemoteImage
           alt={props.alt ?? ''}
+          resizeMode="cover"
+          source={getSource(props.src)}
           src={props.src}
           testID={props.testID}
           {...imageProps[placement]}

packages/mobile/src/cards/CardRemoteImage.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, memo } from 'react';
+import type { StyleProp, View, ViewStyle } from 'react-native';
+
+import { HStack } from '../layout/HStack';
+import { Pressable, type PressableProps } from '../system/Pressable';
+
+export type CardRootBaseProps = {
+  children: React.ReactNode;
+  /** If true, the CardRoot will be rendered as a Pressable component. */
+  renderAsPressable?: boolean;
+};
+
+export type CardRootProps = CardRootBaseProps &
+  Omit<PressableProps, 'style'> & {
+    style?: StyleProp<ViewStyle>;
+  };
+
+export const CardRoot = memo(
+  forwardRef<View, CardRootProps>(({ children, style, renderAsPressable, ...props }, ref) => {
+    const Component = renderAsPressable ? Pressable : HStack;
+    return (
+      <Component ref={ref} {...props}>
+        {children}
+      </Component>
+    );
+  }),
+);
+
+CardRoot.displayName = 'CardRoot';

packages/mobile/src/cards/CardRoot.tsx

@@ -4,6 +4,7 @@ export * from './CardFooter';
 export * from './CardGroup';
 export * from './CardHeader';
 export * from './CardMedia';
+export * from './CardRoot';
 // Card variants
 export * from './AnnouncementCard';
 export * from './FeatureEntryCard';

packages/mobile/src/cards/index.ts

@@ -0,0 +1,51 @@
+import React, { forwardRef, memo } from 'react';
+
+import type { Polymorphic } from '../core/polymorphism';
+import { HStack } from '../layout/HStack';
+import { Pressable, type PressableBaseProps } from '../system/Pressable';
+
+export type CardRootBaseProps = Polymorphic.ExtendableProps<
+  PressableBaseProps,
+  {
+    children?: React.ReactNode;
+    /** If true, the CardRoot will be rendered as a Pressable component. */
+    renderAsPressable?: boolean;
+  }
+>;
+
+export type CardRootProps<AsComponent extends React.ElementType = 'article'> = Polymorphic.Props<
+  AsComponent,
+  CardRootBaseProps
+>;
+
+type CardRootComponent = (<AsComponent extends React.ElementType = 'article'>(
+  props: Polymorphic.Props<AsComponent, CardRootBaseProps>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
+
+export const CardRoot: CardRootComponent = memo(
+  forwardRef<React.ReactElement<CardRootBaseProps>, CardRootBaseProps>(
+    <AsComponent extends React.ElementType>(
+      { renderAsPressable, children, ...props }: CardRootProps<AsComponent>,
+      ref?: Polymorphic.Ref<AsComponent>,
+    ) => {
+      if (renderAsPressable) {
+        const { as, ...pressableRestProps } = props;
+        return (
+          <Pressable ref={ref} as={as ?? 'button'} {...(pressableRestProps as any)}>
+            {children}
+          </Pressable>
+        );
+      } else {
+        const { as, ...hstackRestProps } = props;
+        return (
+          <HStack ref={ref} as={as ?? 'article'} {...(hstackRestProps as any)}>
+            {children}
+          </HStack>
+        );
+      }
+    },
+  ),
+);
+
+CardRoot.displayName = 'CardRoot';

packages/web/src/cards/CardRemoteImage.tsx

@@ -4,6 +4,7 @@ export * from './CardFooter';
 export * from './CardGroup';
 export * from './CardHeader';
 export * from './CardMedia';
+export * from './CardRoot';
 // Card variants
 export * from './AnnouncementCard';
 export * from './FeatureEntryCard';