feat: ContentCard

Author: adrienzheng-cb

apps/mobile-app/scripts/utils/routes.mjs

@@ -38,6 +38,12 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default,
   },
+  {
+    key: 'AlphaContentCard',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/content-card/__stories__/AlphaContentCard.stories')
+        .default,
+  },
   {
     key: 'AlphaSelect',
     getComponent: () =>

apps/mobile-app/src/routes.ts

@@ -38,6 +38,12 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default,
   },
+  {
+    key: 'AlphaContentCard',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/content-card/__stories__/AlphaContentCard.stories')
+        .default,
+  },
   {
     key: 'AlphaSelect',
     getComponent: () =>

packages/mobile/src/alpha/content-card/ContentCard.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef, memo } from 'react';
+import type { View } from 'react-native';
+
+import { VStack } from '../../layout';
+import { Pressable, type PressableProps } from '../../system';
+
+export type ContentCardBaseProps = {
+  children: React.ReactNode;
+  renderAsPressable?: boolean;
+};
+
+export type ContentCardProps = ContentCardBaseProps & PressableProps;
+
+export const ContentCard = memo(
+  forwardRef<View, ContentCardProps>(({ children, renderAsPressable, ...props }, ref) => {
+    const Component = renderAsPressable ? Pressable : VStack;
+    return (
+      <Component ref={ref} borderRadius={500} {...props}>
+        {children}
+      </Component>
+    );
+  }),
+);
+
+ContentCard.displayName = 'ContentCard';

packages/mobile/src/alpha/content-card/ContentCardBody.tsx

@@ -0,0 +1,101 @@
+import React, { forwardRef, memo, useMemo } from 'react';
+import type { StyleProp, View, ViewStyle } from 'react-native';
+
+import { HStack } from '../../layout';
+import { Box, type BoxBaseProps } from '../../layout/Box';
+import { VStack, type VStackProps } from '../../layout/VStack';
+import { Text } from '../../typography';
+
+export type ContentCardBodyBaseProps = BoxBaseProps & {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  media?: React.ReactNode;
+  mediaPlacement?: 'top' | 'bottom' | 'start' | 'end';
+  styles?: {
+    root: StyleProp<ViewStyle>;
+    contentContainer: StyleProp<ViewStyle>;
+    mediaContainer: StyleProp<ViewStyle>;
+  };
+};
+
+export type ContentCardBodyProps = ContentCardBodyBaseProps;
+
+export const ContentCardBody = memo(
+  forwardRef<View, ContentCardBodyProps>(
+    (
+      { title, description, media, mediaPlacement = 'top', style, styles, padding = 2, ...props },
+      ref,
+    ) => {
+      const hasMedia = !!media;
+      const isHorizontal = hasMedia && (mediaPlacement === 'start' || mediaPlacement === 'end');
+      const isMediaFirst = hasMedia && (mediaPlacement === 'top' || mediaPlacement === 'start');
+
+      const titleNode = useMemo(() => {
+        if (typeof title === 'string') {
+          return (
+            <Text font="headline" numberOfLines={2}>
+              {title}
+            </Text>
+          );
+        }
+        return title;
+      }, [title]);
+
+      const descriptionNode = useMemo(() => {
+        if (typeof description === 'string') {
+          return (
+            <Text color="fgMuted" font="label2" numberOfLines={3}>
+              {description}
+            </Text>
+          );
+        }
+        return description;
+      }, [description]);
+
+      const contentNode = useMemo(() => {
+        return (
+          <VStack
+            flexGrow={1}
+            flexShrink={1}
+            gap={isHorizontal ? 1 : 0}
+            style={styles?.contentContainer}
+          >
+            {titleNode}
+            {descriptionNode}
+          </VStack>
+        );
+      }, [isHorizontal, styles?.contentContainer, titleNode, descriptionNode]);
+
+      const mediaNode = useMemo(() => {
+        if (!hasMedia) return null;
+        return (
+          <HStack
+            borderRadius={500}
+            flexShrink={0}
+            overflow="hidden"
+            style={styles?.mediaContainer}
+          >
+            {media}
+          </HStack>
+        );
+      }, [hasMedia, media, styles?.mediaContainer]);
+
+      return (
+        <Box
+          ref={ref}
+          alignItems="flex-start"
+          flexDirection={isHorizontal ? 'row' : 'column'}
+          gap={isHorizontal ? 2 : 1}
+          padding={padding}
+          style={[styles?.root, style]}
+          {...props}
+        >
+          {isMediaFirst ? mediaNode : contentNode}
+          {isMediaFirst ? contentNode : mediaNode}
+        </Box>
+      );
+    },
+  ),
+);
+
+ContentCardBody.displayName = 'ContentCardBody';

packages/mobile/src/alpha/content-card/ContentCardFooter.tsx

@@ -0,0 +1,16 @@
+import React, { forwardRef, memo } from 'react';
+import type { View } from 'react-native';
+
+import { HStack, type HStackProps } from '../../layout/HStack';
+
+export type ContentCardFooterBaseProps = HStackProps;
+
+export type ContentCardFooterProps = ContentCardFooterBaseProps;
+
+export const ContentCardFooter = memo(
+  forwardRef<View, ContentCardFooterProps>(({ paddingX = 2, paddingBottom = 2, ...props }, ref) => {
+    return <HStack ref={ref} paddingBottom={paddingBottom} paddingX={paddingX} {...props} />;
+  }),
+);
+
+ContentCardFooter.displayName = 'ContentCardFooter';

packages/mobile/src/alpha/content-card/ContentCardHeader.tsx

@@ -0,0 +1,88 @@
+import React, { forwardRef, memo, useMemo } from 'react';
+import type { StyleProp, View, ViewStyle } from 'react-native';
+
+import { type BoxBaseProps } from '../../layout/Box';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography';
+
+export type ContentCardHeaderBaseProps = BoxBaseProps & {
+  title: React.ReactNode;
+  subtitle: React.ReactNode;
+  thumbnail: React.ReactNode;
+  action: React.ReactNode;
+  styles?: {
+    root: StyleProp<ViewStyle>;
+    contentContainer: StyleProp<ViewStyle>;
+  };
+};
+
+export type ContentCardHeaderProps = ContentCardHeaderBaseProps;
+
+export const ContentCardHeader = memo(
+  forwardRef<View, ContentCardHeaderProps>(
+    (
+      {
+        title,
+        subtitle,
+        thumbnail,
+        styles,
+        action,
+        gap = 1.5,
+        paddingX = 2,
+        paddingTop = 2,
+        style,
+        ...props
+      },
+      ref,
+    ) => {
+      const titleNode = useMemo(() => {
+        if (typeof title === 'string') {
+          return (
+            <Text font="label1" numberOfLines={1}>
+              {title}
+            </Text>
+          );
+        }
+        return title;
+      }, [title]);
+
+      const subtitleNode = useMemo(() => {
+        if (typeof subtitle === 'string') {
+          return (
+            <Text color="fgMuted" font="legal" numberOfLines={1}>
+              {subtitle}
+            </Text>
+          );
+        }
+        return subtitle;
+      }, [subtitle]);
+
+      return (
+        <HStack
+          ref={ref}
+          alignItems="center"
+          gap={gap}
+          paddingTop={paddingTop}
+          paddingX={paddingX}
+          style={[styles?.root, style]}
+          {...props}
+        >
+          {thumbnail}
+          <VStack
+            flexGrow={1}
+            flexShrink={1}
+            justifyContent="flex-start"
+            style={styles?.contentContainer}
+          >
+            {titleNode}
+            {subtitleNode}
+          </VStack>
+          {action}
+        </HStack>
+      );
+    },
+  ),
+);
+
+ContentCardHeader.displayName = 'ContentCardHeader';