@coinbase/cds-mobile 8.41.0 → 8.42.0

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

@@ -0,0 +1,189 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { useRef } from 'react';
+import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
+import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Carousel } from '../../carousel/Carousel';
+import { CarouselItem } from '../../carousel/CarouselItem';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { RemoteImage } from '../../media/RemoteImage';
+import { TextHeadline, TextLabel2, TextTitle3 } from '../../typography';
+import { Text } from '../../typography/Text';
+import { MediaCard } from '../MediaCard';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const exampleProps = {
+  title: 'Title',
+  subtitle: 'Subtitle',
+  description: 'Description'
+};
+const exampleThumbnail = /*#__PURE__*/_jsx(RemoteImage, {
+  accessibilityLabel: "Ethereum thumbnail",
+  shape: "circle",
+  size: "l",
+  source: ethBackground,
+  testID: "thumbnail"
+});
+const exampleMedia = /*#__PURE__*/_jsx(RemoteImage, {
+  accessibilityLabel: "Ethereum media",
+  height: "100%",
+  resizeMode: "cover",
+  shape: "rectangle",
+  source: ethBackground,
+  width: "100%"
+});
+const MediaCardScreen = () => {
+  const ref = useRef(null);
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Default",
+      children: /*#__PURE__*/_jsx(MediaCard, _extends({
+        ref: ref
+      }, exampleProps, {
+        thumbnail: exampleThumbnail
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Media",
+      children: /*#__PURE__*/_jsx(MediaCard, _extends({}, exampleProps, {
+        media: exampleMedia,
+        thumbnail: exampleThumbnail
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Media Placement Start",
+      children: /*#__PURE__*/_jsx(MediaCard, _extends({}, exampleProps, {
+        media: exampleMedia,
+        mediaPlacement: "start",
+        thumbnail: exampleThumbnail
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Media Placement End",
+      children: /*#__PURE__*/_jsx(MediaCard, _extends({}, exampleProps, {
+        media: exampleMedia,
+        mediaPlacement: "end",
+        thumbnail: exampleThumbnail
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Long Text",
+      children: /*#__PURE__*/_jsx(MediaCard, {
+        description: "This is a very long description text that demonstrates how the card handles longer content",
+        media: exampleMedia,
+        subtitle: "This is a very long subtitle text that will get truncated",
+        thumbnail: exampleThumbnail,
+        title: "This is a very long title text that will get truncated"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Content",
+      children: /*#__PURE__*/_jsx(MediaCard, {
+        description: /*#__PURE__*/_jsxs(TextLabel2, {
+          children: ["Custom description with ", /*#__PURE__*/_jsx(Text, {
+            font: "headline",
+            children: "bold text"
+          }), " and", ' ', /*#__PURE__*/_jsx(Text, {
+            font: "label1",
+            children: "italic text"
+          })]
+        }),
+        media: exampleMedia,
+        subtitle: /*#__PURE__*/_jsx(TextHeadline, {
+          color: "fgPositive",
+          children: "Custom Subtitle"
+        }),
+        thumbnail: exampleThumbnail,
+        title: /*#__PURE__*/_jsx(TextTitle3, {
+          children: "Custom Title"
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Layout Overrides",
+      children: /*#__PURE__*/_jsx(MediaCard, _extends({}, exampleProps, {
+        media: exampleMedia,
+        styles: {
+          layoutContainer: {
+            gap: 3
+          },
+          contentContainer: {
+            padding: 3,
+            gap: 2
+          },
+          textContainer: {
+            gap: 1
+          },
+          headerContainer: {
+            gap: 1
+          },
+          mediaContainer: {
+            borderRadius: 300
+          }
+        },
+        thumbnail: exampleThumbnail
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Root Style Override",
+      children: /*#__PURE__*/_jsx(MediaCard, _extends({}, exampleProps, {
+        media: exampleMedia,
+        styles: {
+          root: {
+            borderWidth: 2,
+            borderColor: 'blue'
+          }
+        },
+        thumbnail: exampleThumbnail
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Interactive with onPress",
+      children: /*#__PURE__*/_jsx(MediaCard, {
+        renderAsPressable: true,
+        accessibilityLabel: "View interactive card details",
+        description: "Clickable card with onPress handler",
+        media: exampleMedia,
+        onPress: () => console.log('Card clicked!'),
+        subtitle: "Button",
+        thumbnail: exampleThumbnail,
+        title: "Interactive Card"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multiple Cards",
+      children: /*#__PURE__*/_jsxs(Carousel, {
+        styles: {
+          carousel: {
+            gap: 16
+          }
+        },
+        children: [/*#__PURE__*/_jsx(CarouselItem, {
+          id: "card1",
+          children: /*#__PURE__*/_jsx(MediaCard, _extends({}, exampleProps, {
+            media: exampleMedia,
+            thumbnail: exampleThumbnail
+          }))
+        }), /*#__PURE__*/_jsx(CarouselItem, {
+          id: "card2",
+          children: /*#__PURE__*/_jsx(MediaCard, {
+            renderAsPressable: true,
+            accessibilityLabel: "View Bitcoin details",
+            description: "Another card with different content",
+            media: exampleMedia,
+            onPress: NoopFn,
+            subtitle: "BTC",
+            thumbnail: /*#__PURE__*/_jsx(RemoteImage, {
+              accessibilityLabel: "Bitcoin thumbnail",
+              shape: "circle",
+              size: "l",
+              source: assets.btc.imageUrl
+            }),
+            title: "Bitcoin"
+          })
+        }), /*#__PURE__*/_jsx(CarouselItem, {
+          id: "card3",
+          children: /*#__PURE__*/_jsx(MediaCard, {
+            renderAsPressable: true,
+            accessibilityLabel: "View Ethereum details",
+            description: "Card with onPress handler",
+            onPress: NoopFn,
+            subtitle: "ETH",
+            thumbnail: exampleThumbnail,
+            title: "Ethereum"
+          })
+        })]
+      })
+    })]
+  });
+};
+export default MediaCardScreen;