@coinbase/cds-mobile 8.40.2 → 8.42.0

package/esm/cards/__stories__/ContentCard.stories.js

@@ -6,6 +6,7 @@ import { TextInput } from '../../controls';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { HStack, VStack } from '../../layout';
 import { Carousel, RemoteImage, RemoteImageGroup } from '../../media';
+import { Pressable } from '../../system/Pressable';
 import { Text } from '../../typography/Text';
 import { ContentCard, ContentCardBody, ContentCardFooter, ContentCardHeader } from '../ContentCard';
 import { LikeButton } from '../LikeButton';
@@ -20,10 +21,15 @@ const styles = StyleSheet.create({
 });
 const exampleProps = {
   contentHeaderProps: {
-    avatar: assets.eth.imageUrl,
+    thumbnail: /*#__PURE__*/_jsx(RemoteImage, {
+      accessibilityLabel: "Ethereum thumbnail",
+      shape: "circle",
+      size: "l",
+      source: ethBackground
+    }),
     title: 'CoinDesk',
-    meta: 'News',
-    end: /*#__PURE__*/_jsxs(HStack, {
+    subtitle: 'News',
+    actions: /*#__PURE__*/_jsxs(HStack, {
       gap: 0,
       children: [/*#__PURE__*/_jsx(IconButton, {
         transparent: true,
@@ -39,30 +45,17 @@ const exampleProps = {
     })
   },
   contentBodyProps: {
-    body: 'Ethereum Network Shatters Records With Hashrate Climbing to 464 EH/s',
-    label: /*#__PURE__*/_jsxs(HStack, {
-      alignItems: "flex-end",
-      flexWrap: "wrap",
-      gap: 0.5,
-      children: [/*#__PURE__*/_jsx(Text, {
-        color: "fgMuted",
-        font: "label2",
-        numberOfLines: 1,
-        children: "$9,9081.01"
-      }), /*#__PURE__*/_jsx(Text, {
-        color: "fgPositive",
-        font: "label2",
-        children: "\u2197 6.37%"
-      })]
-    }),
-    media: /*#__PURE__*/_jsx(Image, {
-      accessibilityIgnoresInvertColors: true,
+    title: 'Ethereum Network Shatters Records With Hashrate Climbing to 464 EH/s',
+    description: 'This is a description of the Ethereum Network Shatters Records With Hashrate Climbing to 464 EH/s, marking a significant milestone for the blockchain.',
+    media: /*#__PURE__*/_jsx(RemoteImage, {
+      accessibilityLabel: "Ethereum background",
+      resizeMode: "cover",
       source: {
         uri: ethBackground
       },
-      style: styles.media
+      width: "100%"
     }),
-    mediaPosition: 'top'
+    mediaPlacement: 'top'
   },
   contentFooterProps: {
     children: /*#__PURE__*/_jsxs(_Fragment, {
@@ -70,12 +63,16 @@ const exampleProps = {
         shape: "circle",
         size: 32,
         children: [/*#__PURE__*/_jsx(RemoteImage, {
+          accessibilityLabel: "Ethereum",
           source: assets.eth.imageUrl
         }), /*#__PURE__*/_jsx(RemoteImage, {
+          accessibilityLabel: "Polygon",
           source: assets.polygon.imageUrl
         }), /*#__PURE__*/_jsx(RemoteImage, {
+          accessibilityLabel: "Uniswap",
           source: assets.uni.imageUrl
         }), /*#__PURE__*/_jsx(RemoteImage, {
+          accessibilityLabel: "Sushi",
           source: assets.sushi.imageUrl
         })]
       }), /*#__PURE__*/_jsx(Button, {
@@ -90,6 +87,7 @@ const CarouselItem = () => /*#__PURE__*/_jsxs(VStack, {
   position: "relative",
   children: [/*#__PURE__*/_jsx(Image, {
     accessibilityIgnoresInvertColors: true,
+    accessibilityLabel: "Ethereum background",
     source: {
       uri: ethBackground
     },
@@ -121,7 +119,6 @@ const ContentCardScreen = () => {
       paddingX: 0,
       children: [/*#__PURE__*/_jsx(Text, {
         font: "title3",
-        paddingX: 3,
         children: "Full Example"
       }), /*#__PURE__*/_jsxs(ContentCard, {
         children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps)), /*#__PURE__*/_jsx(ContentCardFooter, _extends({}, exampleProps.contentFooterProps))]
@@ -130,23 +127,22 @@ const ContentCardScreen = () => {
       paddingX: 0,
       children: [/*#__PURE__*/_jsx(Text, {
         font: "title3",
-        paddingX: 3,
-        children: "Full Example with mediaPosition bottom"
+        children: "Full Example with mediaPlacement bottom"
       }), /*#__PURE__*/_jsxs(ContentCard, {
         children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
-          mediaPosition: "bottom"
+          mediaPlacement: "bottom"
         })), /*#__PURE__*/_jsx(ContentCardFooter, _extends({}, exampleProps.contentFooterProps))]
       })]
     }), /*#__PURE__*/_jsxs(Example, {
       paddingX: 0,
       children: [/*#__PURE__*/_jsx(Text, {
         font: "title3",
-        paddingX: 3,
-        children: "Full Example with mediaPosition right"
+        children: "Full Example with mediaPlacement end"
       }), /*#__PURE__*/_jsxs(ContentCard, {
         children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
           media: /*#__PURE__*/_jsx(Image, {
             accessibilityIgnoresInvertColors: true,
+            accessibilityLabel: "Ethereum media",
             source: {
               uri: ethBackground
             },
@@ -154,19 +150,19 @@ const ContentCardScreen = () => {
               height: 96
             })
           }),
-          mediaPosition: "right"
+          mediaPlacement: "end"
         })), /*#__PURE__*/_jsx(ContentCardFooter, _extends({}, exampleProps.contentFooterProps))]
       })]
     }), /*#__PURE__*/_jsxs(Example, {
       paddingX: 0,
       children: [/*#__PURE__*/_jsx(Text, {
         font: "title3",
-        paddingX: 3,
-        children: "Full Example with mediaPosition left"
+        children: "Full Example with mediaPlacement start"
       }), /*#__PURE__*/_jsxs(ContentCard, {
         children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
           media: /*#__PURE__*/_jsx(Image, {
             accessibilityIgnoresInvertColors: true,
+            accessibilityLabel: "Ethereum media",
             source: {
               uri: ethBackground
             },
@@ -174,14 +170,13 @@ const ContentCardScreen = () => {
               height: 96
             })
           }),
-          mediaPosition: "left"
+          mediaPlacement: "start"
         })), /*#__PURE__*/_jsx(ContentCardFooter, _extends({}, exampleProps.contentFooterProps))]
       })]
     }), /*#__PURE__*/_jsxs(Example, {
       paddingX: 0,
       children: [/*#__PURE__*/_jsx(Text, {
         font: "title3",
-        paddingX: 3,
         children: "Full Example with no media"
       }), /*#__PURE__*/_jsxs(ContentCard, {
         children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
@@ -192,11 +187,9 @@ const ContentCardScreen = () => {
       paddingX: 0,
       children: [/*#__PURE__*/_jsx(Text, {
         font: "title3",
-        paddingX: 3,
         children: "Full Example with product component"
       }), /*#__PURE__*/_jsxs(ContentCard, {
         children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
-          label: null,
           media: null,
           children: /*#__PURE__*/_jsx(TextInput, {
             accessibilityLabel: "Text input field",
@@ -225,27 +218,24 @@ const ContentCardScreen = () => {
       paddingX: 0,
       children: [/*#__PURE__*/_jsx(Text, {
         font: "title3",
-        paddingX: 3,
         children: "Full Example with product component - Custom Media"
       }), /*#__PURE__*/_jsxs(ContentCard, {
         children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps, {
-          avatar: null,
-          end: /*#__PURE__*/_jsx(Text, {
+          actions: /*#__PURE__*/_jsx(Text, {
             color: "fgMuted",
             font: "legal",
             children: "Updated 1hr ago"
           }),
-          meta: null,
           title: /*#__PURE__*/_jsx(Text, {
             font: "title3",
             children: "Today's briefing"
           })
         })), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
-          label: null,
           media: /*#__PURE__*/_jsxs(HStack, {
             position: "relative",
             children: [/*#__PURE__*/_jsx(Image, {
               accessibilityIgnoresInvertColors: true,
+              accessibilityLabel: "Ethereum media",
               source: {
                 uri: ethBackground
               },
@@ -279,19 +269,17 @@ const ContentCardScreen = () => {
       paddingX: 0,
       children: [/*#__PURE__*/_jsx(Text, {
         font: "title3",
-        paddingX: 3,
         children: "Full Example with product component - Carousel"
       }), /*#__PURE__*/_jsxs(ContentCard, {
         children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps, {
-          avatar: null,
-          end: null,
-          meta: null,
+          actions: null,
+          subtitle: null,
+          thumbnail: null,
           title: /*#__PURE__*/_jsx(Text, {
             font: "title3",
             children: "Crypto moves money forward"
           })
         })), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
-          label: null,
           media: null,
           children: /*#__PURE__*/_jsx(Carousel, {
             gap: 1.5,
@@ -303,7 +291,6 @@ const ContentCardScreen = () => {
       paddingX: 0,
       children: [/*#__PURE__*/_jsx(Text, {
         font: "title3",
-        paddingX: 3,
         children: "Full Example with IconCounterButton"
       }), /*#__PURE__*/_jsxs(ContentCard, {
         children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
@@ -314,18 +301,359 @@ const ContentCardScreen = () => {
             justifyContent: "space-between",
             paddingTop: 0.5,
             children: [/*#__PURE__*/_jsx(IconCounterButton, {
+              accessibilityLabel: "like, 99 likes",
               count: 99,
               icon: "heart"
             }), /*#__PURE__*/_jsx(IconCounterButton, {
+              accessibilityLabel: "comment, 4200 comments",
               count: 4200,
               icon: "comment"
             }), /*#__PURE__*/_jsx(IconCounterButton, {
+              accessibilityLabel: "share, 9900000 shares",
               count: 9900000,
               icon: "arrowsHorizontal"
             })]
           })
         })]
       })]
+    }), /*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsx(Text, {
+        font: "title2",
+        children: "With Background"
+      })
+    }), /*#__PURE__*/_jsxs(Example, {
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: "Full Example with background"
+      }), /*#__PURE__*/_jsxs(ContentCard, {
+        background: "bgAlternate",
+        children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps)), /*#__PURE__*/_jsxs(ContentCardFooter, {
+          children: [/*#__PURE__*/_jsxs(RemoteImageGroup, {
+            shape: "circle",
+            size: 32,
+            children: [/*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Ethereum",
+              source: assets.eth.imageUrl
+            }), /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Polygon",
+              source: assets.polygon.imageUrl
+            }), /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Uniswap",
+              source: assets.uni.imageUrl
+            }), /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Sushi",
+              source: assets.sushi.imageUrl
+            })]
+          }), /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "tertiary",
+            children: "Share"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: "mediaPlacement end with background"
+      }), /*#__PURE__*/_jsxs(ContentCard, {
+        background: "bgAlternate",
+        children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
+          media: /*#__PURE__*/_jsx(Image, {
+            accessibilityIgnoresInvertColors: true,
+            accessibilityLabel: "Ethereum media",
+            source: {
+              uri: ethBackground
+            },
+            style: _extends({}, styles.media, {
+              height: 96
+            })
+          }),
+          mediaPlacement: "end"
+        })), /*#__PURE__*/_jsxs(ContentCardFooter, {
+          children: [/*#__PURE__*/_jsxs(RemoteImageGroup, {
+            shape: "circle",
+            size: 32,
+            children: [/*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Ethereum",
+              source: assets.eth.imageUrl
+            }), /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Polygon",
+              source: assets.polygon.imageUrl
+            }), /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Uniswap",
+              source: assets.uni.imageUrl
+            }), /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Sushi",
+              source: assets.sushi.imageUrl
+            })]
+          }), /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "tertiary",
+            children: "Share"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: "No media with background"
+      }), /*#__PURE__*/_jsxs(ContentCard, {
+        background: "bgAlternate",
+        children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
+          media: null
+        })), /*#__PURE__*/_jsxs(ContentCardFooter, {
+          children: [/*#__PURE__*/_jsxs(RemoteImageGroup, {
+            shape: "circle",
+            size: 32,
+            children: [/*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Ethereum",
+              source: assets.eth.imageUrl
+            }), /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Polygon",
+              source: assets.polygon.imageUrl
+            }), /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Uniswap",
+              source: assets.uni.imageUrl
+            }), /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Sushi",
+              source: assets.sushi.imageUrl
+            })]
+          }), /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "tertiary",
+            children: "Share"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: "IconCounterButton with background"
+      }), /*#__PURE__*/_jsxs(ContentCard, {
+        background: "bgAlternate",
+        children: [/*#__PURE__*/_jsx(ContentCardHeader, _extends({}, exampleProps.contentHeaderProps)), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
+          media: null
+        })), /*#__PURE__*/_jsxs(ContentCardFooter, {
+          gap: 4,
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/_jsx(IconCounterButton, {
+            accessibilityLabel: "like, 99 likes",
+            count: 99,
+            icon: "heart"
+          }), /*#__PURE__*/_jsx(IconCounterButton, {
+            accessibilityLabel: "comment, 4200 comments",
+            count: 4200,
+            icon: "comment"
+          }), /*#__PURE__*/_jsx(IconCounterButton, {
+            accessibilityLabel: "share, 9900000 shares",
+            count: 9900000,
+            icon: "arrowsHorizontal"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title2",
+        children: "Accessible Pressable Cards"
+      }), /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "body",
+        children: "Uses accessible false with an internal button for VoiceOver access."
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: "Accessible pressable card"
+      }), /*#__PURE__*/_jsx(Pressable, {
+        accessible: false,
+        background: "bg",
+        borderRadius: 500,
+        onPress: () => {},
+        children: /*#__PURE__*/_jsxs(ContentCard, {
+          children: [/*#__PURE__*/_jsx(ContentCardHeader, {
+            subtitle: "News",
+            thumbnail: /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Ethereum thumbnail",
+              shape: "circle",
+              size: "l",
+              source: ethBackground
+            }),
+            title: "CoinDesk"
+          }), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps)), /*#__PURE__*/_jsxs(ContentCardFooter, {
+            children: [/*#__PURE__*/_jsxs(RemoteImageGroup, {
+              shape: "circle",
+              size: 32,
+              children: [/*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Ethereum",
+                source: assets.eth.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Polygon",
+                source: assets.polygon.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Uniswap",
+                source: assets.uni.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Sushi",
+                source: assets.sushi.imageUrl
+              })]
+            }), /*#__PURE__*/_jsx(Button, {
+              compact: true,
+              onPress: () => {},
+              variant: "secondary",
+              children: "View Details"
+            })]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: "Accessible pressable card with background"
+      }), /*#__PURE__*/_jsx(Pressable, {
+        accessible: false,
+        background: "bgAlternate",
+        borderRadius: 500,
+        onPress: () => {},
+        children: /*#__PURE__*/_jsxs(ContentCard, {
+          children: [/*#__PURE__*/_jsx(ContentCardHeader, {
+            subtitle: "News",
+            thumbnail: /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Ethereum thumbnail",
+              shape: "circle",
+              size: "l",
+              source: ethBackground
+            }),
+            title: "CoinDesk"
+          }), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps)), /*#__PURE__*/_jsxs(ContentCardFooter, {
+            children: [/*#__PURE__*/_jsxs(RemoteImageGroup, {
+              shape: "circle",
+              size: 32,
+              children: [/*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Ethereum",
+                source: assets.eth.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Polygon",
+                source: assets.polygon.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Uniswap",
+                source: assets.uni.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Sushi",
+                source: assets.sushi.imageUrl
+              })]
+            }), /*#__PURE__*/_jsx(Button, {
+              compact: true,
+              onPress: () => {},
+              variant: "tertiary",
+              children: "View Details"
+            })]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: "Accessible pressable card (no media)"
+      }), /*#__PURE__*/_jsx(Pressable, {
+        accessible: false,
+        background: "bgAlternate",
+        borderRadius: 500,
+        onPress: () => {},
+        children: /*#__PURE__*/_jsxs(ContentCard, {
+          children: [/*#__PURE__*/_jsx(ContentCardHeader, {
+            subtitle: "News",
+            thumbnail: /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Ethereum thumbnail",
+              shape: "circle",
+              size: "l",
+              source: ethBackground
+            }),
+            title: "CoinDesk"
+          }), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
+            media: null
+          })), /*#__PURE__*/_jsxs(ContentCardFooter, {
+            children: [/*#__PURE__*/_jsxs(RemoteImageGroup, {
+              shape: "circle",
+              size: 32,
+              children: [/*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Ethereum",
+                source: assets.eth.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Polygon",
+                source: assets.polygon.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Uniswap",
+                source: assets.uni.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Sushi",
+                source: assets.sushi.imageUrl
+              })]
+            }), /*#__PURE__*/_jsx(Button, {
+              compact: true,
+              onPress: () => {},
+              variant: "tertiary",
+              children: "View Details"
+            })]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: "Accessible pressable card (disabled)"
+      }), /*#__PURE__*/_jsx(Pressable, {
+        disabled: true,
+        accessible: false,
+        background: "bgAlternate",
+        borderRadius: 500,
+        children: /*#__PURE__*/_jsxs(ContentCard, {
+          children: [/*#__PURE__*/_jsx(ContentCardHeader, {
+            subtitle: "News",
+            thumbnail: /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Ethereum thumbnail",
+              shape: "circle",
+              size: "l",
+              source: ethBackground
+            }),
+            title: "CoinDesk"
+          }), /*#__PURE__*/_jsx(ContentCardBody, _extends({}, exampleProps.contentBodyProps, {
+            media: null
+          })), /*#__PURE__*/_jsxs(ContentCardFooter, {
+            children: [/*#__PURE__*/_jsxs(RemoteImageGroup, {
+              shape: "circle",
+              size: 32,
+              children: [/*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Ethereum",
+                source: assets.eth.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Polygon",
+                source: assets.polygon.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Uniswap",
+                source: assets.uni.imageUrl
+              }), /*#__PURE__*/_jsx(RemoteImage, {
+                accessibilityLabel: "Sushi",
+                source: assets.sushi.imageUrl
+              })]
+            }), /*#__PURE__*/_jsx(Button, {
+              compact: true,
+              disabled: true,
+              variant: "tertiary",
+              children: "View Details"
+            })]
+          })]
+        })
+      })]
     })]
   });
 };