@coinbase/cds-mobile 8.40.2 → 8.42.0

package/esm/cards/MediaCard/MediaCardLayout.js

@@ -0,0 +1,68 @@
+import React, { memo, useMemo } from 'react';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MediaCardLayout = /*#__PURE__*/memo(_ref => {
+  let {
+    title,
+    subtitle,
+    description,
+    thumbnail,
+    media,
+    mediaPlacement = 'end',
+    styles = {}
+  } = _ref;
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const subtitleNode = useMemo(() => typeof subtitle === 'string' ? /*#__PURE__*/_jsx(Text, {
+    color: "fgMuted",
+    font: "legal",
+    numberOfLines: 1,
+    children: subtitle
+  }) : subtitle, [subtitle]);
+  const headerNode = useMemo(() => /*#__PURE__*/_jsxs(VStack, {
+    style: styles == null ? void 0 : styles.headerContainer,
+    children: [subtitleNode, titleNode]
+  }), [subtitleNode, titleNode, styles == null ? void 0 : styles.headerContainer]);
+  const descriptionNode = useMemo(() => typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+    color: "fgMuted",
+    font: "label2",
+    numberOfLines: 2,
+    children: description
+  }) : description, [description]);
+  const contentNode = useMemo(() => /*#__PURE__*/_jsxs(VStack, {
+    flexBasis: "50%",
+    gap: 4,
+    justifyContent: "space-between",
+    padding: 2,
+    style: styles == null ? void 0 : styles.contentContainer,
+    children: [thumbnail, /*#__PURE__*/_jsxs(VStack, {
+      style: styles == null ? void 0 : styles.textContainer,
+      children: [headerNode, descriptionNode]
+    })]
+  }), [styles == null ? void 0 : styles.contentContainer, styles == null ? void 0 : styles.textContainer, thumbnail, headerNode, descriptionNode]);
+  const mediaNode = useMemo(() => {
+    if (media) {
+      return /*#__PURE__*/_jsx(HStack, {
+        flexBasis: "50%",
+        style: styles == null ? void 0 : styles.mediaContainer,
+        children: media
+      });
+    }
+  }, [media, styles == null ? void 0 : styles.mediaContainer]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    flexGrow: 1,
+    style: styles == null ? void 0 : styles.layoutContainer,
+    children: [mediaPlacement === 'start' ? mediaNode : contentNode, mediaPlacement === 'end' ? mediaNode : contentNode]
+  });
+});
+export { MediaCardLayout };

package/esm/cards/MediaCard/__figma__/MediaCard.figma.js

@@ -0,0 +1,41 @@
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+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 React from 'react';
+import { figma } from '@figma/code-connect';
+import { Avatar } from '../../../media';
+import { MediaCard } from '../';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(MediaCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-18302&m=dev', {
+  imports: ["import { MediaCard } from '@coinbase/cds-mobile/cards/MediaCard'", "import { Avatar } from '@coinbase/cds-mobile/media/Avatar'"],
+  props: {
+    title: figma.string('title'),
+    subtitle: figma.boolean('show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    description: figma.boolean('show subdetail', {
+      true: figma.instance('↳ subdetail'),
+      false: undefined
+    }),
+    media: figma.boolean('show media', {
+      true: figma.instance('↳ media'),
+      false: undefined
+    }),
+    mediaPlacement: figma.enum('media placement', {
+      left: 'start',
+      right: 'end',
+      none: undefined
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(MediaCard, _extends({
+      thumbnail: /*#__PURE__*/_jsx(Avatar, {
+        accessibilityLabel: "",
+        shape: "circle",
+        size: "l",
+        src: ""
+      })
+    }, props));
+  }
+});

package/esm/cards/MediaCard/index.js

@@ -0,0 +1,45 @@
+const _excluded = ["root"],
+  _excluded2 = ["title", "subtitle", "description", "thumbnail", "media", "mediaPlacement", "style", "styles"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo } from 'react';
+import { CardRoot } from '../CardRoot';
+import { MediaCardLayout } from './MediaCardLayout';
+import { jsx as _jsx } from "react/jsx-runtime";
+const mediaCardContainerProps = {
+  borderRadius: 500,
+  background: 'bgAlternate',
+  overflow: 'hidden'
+};
+export const MediaCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      title,
+      subtitle,
+      description,
+      thumbnail,
+      media,
+      mediaPlacement = 'end',
+      style,
+      styles: {
+        root: rootStyle
+      } = {}
+    } = _ref,
+    layoutStyles = _objectWithoutPropertiesLoose(_ref.styles, _excluded),
+    props = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  return /*#__PURE__*/_jsx(CardRoot, _extends({
+    ref: ref
+  }, mediaCardContainerProps, {
+    style: [style, rootStyle]
+  }, props, {
+    children: /*#__PURE__*/_jsx(MediaCardLayout, {
+      description: description,
+      media: media,
+      mediaPlacement: mediaPlacement,
+      styles: layoutStyles,
+      subtitle: subtitle,
+      thumbnail: thumbnail,
+      title: title
+    })
+  }));
+}));
+MediaCard.displayName = 'MediaCard';

package/esm/cards/MessagingCard/MessagingCardLayout.js

@@ -0,0 +1,175 @@
+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 React, { memo, useMemo } from 'react';
+import { Button } from '../../buttons/Button';
+import { IconButton } from '../../buttons/IconButton';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Pressable } from '../../system/Pressable';
+import { Tag } from '../../tag/Tag';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MessagingCardLayout = /*#__PURE__*/memo(_ref => {
+  let {
+    type,
+    title,
+    description,
+    tag,
+    action,
+    onActionButtonPress,
+    actionButtonAccessibilityLabel,
+    onDismissButtonPress,
+    dismissButtonAccessibilityLabel,
+    mediaPlacement = 'end',
+    media,
+    styles = {},
+    dismissButton
+  } = _ref;
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        color: type === 'upsell' ? 'fgInverse' : 'fg',
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title, type]);
+  const descriptionNode = useMemo(() => {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        color: type === 'upsell' ? 'fgInverse' : 'fg',
+        font: "label2",
+        numberOfLines: 3,
+        children: description
+      });
+    }
+    return description;
+  }, [description, type]);
+  const tagNode = useMemo(() => {
+    if (typeof tag === 'string') {
+      return /*#__PURE__*/_jsx(Tag, {
+        children: tag
+      });
+    }
+    return tag;
+  }, [tag]);
+  const actionButtonNode = useMemo(() => {
+    if (!action) return null;
+
+    // If action is a string, render in a default button
+    if (typeof action === 'string') {
+      if (type === 'upsell') {
+        return /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          accessibilityLabel: actionButtonAccessibilityLabel != null ? actionButtonAccessibilityLabel : action,
+          onPress: onActionButtonPress,
+          variant: "secondary",
+          children: action
+        });
+      }
+      return /*#__PURE__*/_jsx(Pressable, {
+        accessibilityLabel: actionButtonAccessibilityLabel != null ? actionButtonAccessibilityLabel : action,
+        onPress: onActionButtonPress,
+        paddingY: 1,
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgPrimary",
+          font: "headline",
+          children: action
+        })
+      });
+    }
+
+    // Otherwise, render action as-is (custom React element)
+    return action;
+  }, [action, actionButtonAccessibilityLabel, onActionButtonPress, type]);
+  const computedDismissButtonAccessibilityLabel = useMemo(() => {
+    if (dismissButtonAccessibilityLabel) return dismissButtonAccessibilityLabel;
+    if (typeof title === 'string') return "Dismiss " + title;
+    return 'Dismiss card';
+  }, [dismissButtonAccessibilityLabel, title]);
+  const dismissButtonNode = useMemo(() => {
+    if (dismissButton) {
+      return dismissButton;
+    }
+    if (onDismissButtonPress) {
+      return /*#__PURE__*/_jsx(HStack, {
+        paddingEnd: 1,
+        paddingTop: 1,
+        position: "absolute",
+        right: 0,
+        style: styles == null ? void 0 : styles.dismissButtonContainer,
+        top: 0,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          compact: true,
+          accessibilityLabel: computedDismissButtonAccessibilityLabel,
+          name: "close",
+          onPress: onDismissButtonPress,
+          variant: "secondary"
+        })
+      });
+    }
+    return null;
+  }, [computedDismissButtonAccessibilityLabel, dismissButton, onDismissButtonPress, styles == null ? void 0 : styles.dismissButtonContainer]);
+  const contentContainerPaddingProps = useMemo(() => {
+    if (mediaPlacement === 'start' && dismissButtonNode) {
+      // needs to add additional padding to the end of the content area when media is placed at the start and there is a dismiss button
+      // this is to avoid dismiss button from overlapping with the content area
+      return {
+        paddingY: 2,
+        paddingStart: 2,
+        paddingEnd: 6
+      };
+    }
+    return {
+      padding: 2
+    };
+  }, [dismissButtonNode, mediaPlacement]);
+  const mediaContainerPaddingProps = useMemo(() => {
+    if (type === 'upsell') return;
+    if (mediaPlacement === 'start') {
+      return {
+        paddingStart: 3,
+        paddingEnd: 1
+      };
+    }
+    // when media is placed at the end, we need to add additional padding to the end of the media container
+    // this is to avoid the dismiss button from overlapping with the media
+    return dismissButtonNode ? {
+      paddingStart: 1,
+      paddingEnd: 6
+    } : {
+      paddingStart: 1,
+      paddingEnd: 3
+    };
+  }, [dismissButtonNode, mediaPlacement, type]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    flexDirection: mediaPlacement === 'start' ? 'row-reverse' : 'row',
+    flexGrow: 1,
+    position: "relative",
+    style: styles == null ? void 0 : styles.layoutContainer,
+    children: [/*#__PURE__*/_jsxs(VStack, _extends({
+      alignItems: "flex-start",
+      flexBasis: 0,
+      flexGrow: 1,
+      flexShrink: 1,
+      gap: 2,
+      justifyContent: "space-between"
+    }, contentContainerPaddingProps, {
+      style: styles == null ? void 0 : styles.contentContainer,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-start",
+        gap: 0.5,
+        style: styles == null ? void 0 : styles.textContainer,
+        children: [tagNode, titleNode, descriptionNode]
+      }), actionButtonNode]
+    })), media && /*#__PURE__*/_jsx(HStack, _extends({
+      alignItems: "center",
+      flexShrink: 0,
+      style: styles == null ? void 0 : styles.mediaContainer
+    }, mediaContainerPaddingProps, {
+      children: media
+    })), dismissButtonNode]
+  });
+});
+MessagingCardLayout.displayName = 'MessagingCardLayout';

package/esm/cards/MessagingCard/__figma__/MessagingCard.figma.js

@@ -0,0 +1,44 @@
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+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 React from 'react';
+import { figma } from '@figma/code-connect';
+import { MessagingCard } from '../';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(MessagingCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-20711&m=dev', {
+  imports: ["import { MessagingCard } from '@coinbase/cds-mobile/cards/MessagingCard'"],
+  props: {
+    type: figma.enum('type', {
+      upsell: 'upsell',
+      nudge: 'nudge'
+    }),
+    title: figma.boolean('show title', {
+      true: figma.string('↳ title'),
+      false: undefined
+    }),
+    description: figma.boolean('show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    tag: figma.boolean('show tag', {
+      true: figma.instance('↳ tag'),
+      false: undefined
+    }),
+    action: figma.boolean('show cta', {
+      true: figma.instance('↳ cta'),
+      false: undefined
+    }),
+    media: figma.instance('media'),
+    mediaPlacement: figma.enum('media placement', {
+      left: 'start',
+      right: 'end'
+    }),
+    onDismissButtonPress: figma.boolean('show dismiss', {
+      true: () => {},
+      false: undefined
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(MessagingCard, _extends({}, props));
+  }
+});

package/esm/cards/MessagingCard/index.js

@@ -0,0 +1,58 @@
+const _excluded = ["root"],
+  _excluded2 = ["type", "title", "description", "tag", "action", "onActionButtonPress", "actionButtonAccessibilityLabel", "dismissButton", "onDismissButtonPress", "dismissButtonAccessibilityLabel", "mediaPlacement", "media", "style", "styles"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo } from 'react';
+import { CardRoot } from '../CardRoot';
+import { MessagingCardLayout } from './MessagingCardLayout';
+import { jsx as _jsx } from "react/jsx-runtime";
+const messagingCardContainerProps = {
+  borderRadius: 500,
+  overflow: 'hidden'
+};
+export const MessagingCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      type,
+      title,
+      description,
+      tag,
+      action,
+      onActionButtonPress,
+      actionButtonAccessibilityLabel,
+      dismissButton,
+      onDismissButtonPress,
+      dismissButtonAccessibilityLabel,
+      mediaPlacement,
+      media,
+      style,
+      styles: {
+        root: rootStyle
+      } = {}
+    } = _ref,
+    layoutStyles = _objectWithoutPropertiesLoose(_ref.styles, _excluded),
+    props = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  const background = type === 'upsell' ? 'bgPrimary' : 'bgAlternate';
+  return /*#__PURE__*/_jsx(CardRoot, _extends({
+    ref: ref,
+    background: background,
+    borderWidth: 0,
+    style: [style, rootStyle]
+  }, messagingCardContainerProps, props, {
+    children: /*#__PURE__*/_jsx(MessagingCardLayout, {
+      action: action,
+      actionButtonAccessibilityLabel: actionButtonAccessibilityLabel,
+      description: description,
+      dismissButton: dismissButton,
+      dismissButtonAccessibilityLabel: dismissButtonAccessibilityLabel,
+      media: media,
+      mediaPlacement: mediaPlacement,
+      onActionButtonPress: onActionButtonPress,
+      onDismissButtonPress: onDismissButtonPress,
+      styles: layoutStyles,
+      tag: tag,
+      title: title,
+      type: type
+    })
+  }));
+}));
+MessagingCard.displayName = 'MessagingCard';

package/esm/cards/NudgeCard.js

@@ -9,6 +9,33 @@ import { Box, HStack, VStack } from '../layout';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Use `MessagingCard` with `type="nudge"` instead. NudgeCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <NudgeCard
+ *   title="Title"
+ *   description="Description"
+ *   pictogram="addToWatchlist"
+ *   action="Learn more"
+ *   onActionPress={handleAction}
+ *   onDismissPress={handleDismiss}
+ * />
+ *
+ * // After
+ * <MessagingCard
+ *   type="nudge"
+ *   title="Title"
+ *   description="Description"
+ *   media={<Pictogram dimension="48x48" name="addToWatchlist" />}
+ *   actions={<Button compact variant="secondary">Learn more</Button>}
+ *   onDismiss={handleDismiss}
+ *   mediaPlacement="end"
+ * />
+ * ```
+ */
 export const NudgeCard = /*#__PURE__*/memo(_ref => {
   let {
       title,

package/esm/cards/UpsellCard.js

@@ -5,6 +5,33 @@ import { HStack, VStack } from '../layout';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Use `MessagingCard` with `type="upsell"` instead. UpsellCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <UpsellCard
+ *   title="Title"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ *   action="Get Started"
+ *   onActionPress={handleAction}
+ *   onDismissPress={handleDismiss}
+ * />
+ *
+ * // After
+ * <MessagingCard
+ *   type="upsell"
+ *   title="Title"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ *   actions={<Button compact variant="secondary">Get Started</Button>}
+ *   onDismiss={handleDismiss}
+ *   mediaPlacement="end"
+ * />
+ * ```
+ */
 export const UpsellCard = /*#__PURE__*/memo(_ref => {
   let {
     title,