@coinbase/cds-mobile 9.6.7 → 9.6.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dts/cards/MediaCard/MediaCard.d.ts +28 -0
- package/dts/cards/MediaCard/MediaCard.d.ts.map +1 -0
- package/dts/cards/MediaCard/index.d.ts +2 -27
- package/dts/cards/MediaCard/index.d.ts.map +1 -1
- package/dts/cards/MessagingCard/MessagingCard.d.ts +34 -0
- package/dts/cards/MessagingCard/MessagingCard.d.ts.map +1 -0
- package/dts/cards/MessagingCard/index.d.ts +2 -33
- package/dts/cards/MessagingCard/index.d.ts.map +1 -1
- package/esm/cards/MediaCard/MediaCard.js +46 -0
- package/esm/cards/MediaCard/index.js +2 -46
- package/esm/cards/MessagingCard/MessagingCard.js +59 -0
- package/esm/cards/MessagingCard/index.js +2 -59
- package/esm/coachmark/__stories__/Coachmark.stories.js +6 -0
- package/package.json +14 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.6.9 (7/22/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🐞 Fixes
|
|
14
|
+
|
|
15
|
+
- Fix: adjust messaging card imports. [[#800](https://github.com/coinbase/cds/pull/800)]
|
|
16
|
+
|
|
17
|
+
## 9.6.8 ((7/22/2026, 06:23 AM PST))
|
|
18
|
+
|
|
19
|
+
This is an artificial version bump with no new change.
|
|
20
|
+
|
|
11
21
|
## 9.6.7 (7/20/2026 PST)
|
|
12
22
|
|
|
13
23
|
#### 🐞 Fixes
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { StyleProp, View, ViewStyle } from 'react-native';
|
|
2
|
+
import { type CardRootProps } from '../CardRoot';
|
|
3
|
+
import { type MediaCardLayoutProps } from './MediaCardLayout';
|
|
4
|
+
export type MediaCardBaseProps = MediaCardLayoutProps;
|
|
5
|
+
export type MediaCardProps = MediaCardBaseProps &
|
|
6
|
+
Omit<CardRootProps, 'children'> & {
|
|
7
|
+
styles?: {
|
|
8
|
+
/** Root element */
|
|
9
|
+
root?: StyleProp<ViewStyle>;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare const MediaCard: import('react').MemoExoticComponent<
|
|
13
|
+
({
|
|
14
|
+
ref,
|
|
15
|
+
title,
|
|
16
|
+
subtitle,
|
|
17
|
+
description,
|
|
18
|
+
thumbnail,
|
|
19
|
+
media,
|
|
20
|
+
mediaPlacement,
|
|
21
|
+
style,
|
|
22
|
+
styles: { root: rootStyle, ...layoutStyles },
|
|
23
|
+
...props
|
|
24
|
+
}: MediaCardProps & {
|
|
25
|
+
ref?: React.Ref<View>;
|
|
26
|
+
}) => import('react/jsx-runtime').JSX.Element
|
|
27
|
+
>;
|
|
28
|
+
//# sourceMappingURL=MediaCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaCard.d.ts","sourceRoot":"","sources":["../../../src/cards/MediaCard/MediaCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8B,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG3F,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,GAAG;IAChC,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAQJ,eAAO,MAAM,SAAS,+KAYjB,cAAc,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CAeF,CAAC"}
|
|
@@ -1,28 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { type MediaCardLayoutProps } from './MediaCardLayout';
|
|
4
|
-
export type MediaCardBaseProps = MediaCardLayoutProps;
|
|
5
|
-
export type MediaCardProps = MediaCardBaseProps &
|
|
6
|
-
Omit<CardRootProps, 'children'> & {
|
|
7
|
-
styles?: {
|
|
8
|
-
/** Root element */
|
|
9
|
-
root?: StyleProp<ViewStyle>;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
export declare const MediaCard: import('react').MemoExoticComponent<
|
|
13
|
-
({
|
|
14
|
-
ref,
|
|
15
|
-
title,
|
|
16
|
-
subtitle,
|
|
17
|
-
description,
|
|
18
|
-
thumbnail,
|
|
19
|
-
media,
|
|
20
|
-
mediaPlacement,
|
|
21
|
-
style,
|
|
22
|
-
styles: { root: rootStyle, ...layoutStyles },
|
|
23
|
-
...props
|
|
24
|
-
}: MediaCardProps & {
|
|
25
|
-
ref?: React.Ref<View>;
|
|
26
|
-
}) => import('react/jsx-runtime').JSX.Element
|
|
27
|
-
>;
|
|
1
|
+
export * from './MediaCard';
|
|
2
|
+
export * from './MediaCardLayout';
|
|
28
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MediaCard/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MediaCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { StyleProp, View, ViewStyle } from 'react-native';
|
|
2
|
+
import { type CardRootProps } from '../CardRoot';
|
|
3
|
+
import { type MessagingCardLayoutProps } from './MessagingCardLayout';
|
|
4
|
+
export type MessagingCardBaseProps = MessagingCardLayoutProps;
|
|
5
|
+
export type MessagingCardProps = MessagingCardBaseProps &
|
|
6
|
+
Omit<CardRootProps, 'children'> & {
|
|
7
|
+
styles?: {
|
|
8
|
+
/** Root element */
|
|
9
|
+
root?: StyleProp<ViewStyle>;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare const MessagingCard: import('react').MemoExoticComponent<
|
|
13
|
+
({
|
|
14
|
+
ref,
|
|
15
|
+
type,
|
|
16
|
+
title,
|
|
17
|
+
description,
|
|
18
|
+
tag,
|
|
19
|
+
action,
|
|
20
|
+
onActionButtonPress,
|
|
21
|
+
actionButtonAccessibilityLabel,
|
|
22
|
+
dismissButton,
|
|
23
|
+
onDismissButtonPress,
|
|
24
|
+
dismissButtonAccessibilityLabel,
|
|
25
|
+
mediaPlacement,
|
|
26
|
+
media,
|
|
27
|
+
style,
|
|
28
|
+
styles: { root: rootStyle, ...layoutStyles },
|
|
29
|
+
...props
|
|
30
|
+
}: MessagingCardProps & {
|
|
31
|
+
ref?: React.Ref<View>;
|
|
32
|
+
}) => import('react/jsx-runtime').JSX.Element
|
|
33
|
+
>;
|
|
34
|
+
//# sourceMappingURL=MessagingCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessagingCard.d.ts","sourceRoot":"","sources":["../../../src/cards/MessagingCard/MessagingCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,MAAM,MAAM,sBAAsB,GAAG,wBAAwB,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,GAAG;IAChC,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAOJ,eAAO,MAAM,aAAa,wSAkBrB,kBAAkB,GAAG;IACtB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA6BF,CAAC"}
|
|
@@ -1,34 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { type MessagingCardLayoutProps } from './MessagingCardLayout';
|
|
4
|
-
export type MessagingCardBaseProps = MessagingCardLayoutProps;
|
|
5
|
-
export type MessagingCardProps = MessagingCardBaseProps &
|
|
6
|
-
Omit<CardRootProps, 'children'> & {
|
|
7
|
-
styles?: {
|
|
8
|
-
/** Root element */
|
|
9
|
-
root?: StyleProp<ViewStyle>;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
export declare const MessagingCard: import('react').MemoExoticComponent<
|
|
13
|
-
({
|
|
14
|
-
ref,
|
|
15
|
-
type,
|
|
16
|
-
title,
|
|
17
|
-
description,
|
|
18
|
-
tag,
|
|
19
|
-
action,
|
|
20
|
-
onActionButtonPress,
|
|
21
|
-
actionButtonAccessibilityLabel,
|
|
22
|
-
dismissButton,
|
|
23
|
-
onDismissButtonPress,
|
|
24
|
-
dismissButtonAccessibilityLabel,
|
|
25
|
-
mediaPlacement,
|
|
26
|
-
media,
|
|
27
|
-
style,
|
|
28
|
-
styles: { root: rootStyle, ...layoutStyles },
|
|
29
|
-
...props
|
|
30
|
-
}: MessagingCardProps & {
|
|
31
|
-
ref?: React.Ref<View>;
|
|
32
|
-
}) => import('react/jsx-runtime').JSX.Element
|
|
33
|
-
>;
|
|
1
|
+
export * from './MessagingCard';
|
|
2
|
+
export * from './MessagingCardLayout';
|
|
34
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MessagingCard/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MessagingCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
const _excluded = ["root"],
|
|
2
|
+
_excluded2 = ["ref", "title", "subtitle", "description", "thumbnail", "media", "mediaPlacement", "style", "styles"];
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
import { memo } from 'react';
|
|
6
|
+
import { CardRoot } from '../CardRoot';
|
|
7
|
+
import { MediaCardLayout } from './MediaCardLayout';
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
const mediaCardContainerProps = {
|
|
10
|
+
borderRadius: 500,
|
|
11
|
+
background: 'bgAlternate',
|
|
12
|
+
overflow: 'hidden'
|
|
13
|
+
};
|
|
14
|
+
export const MediaCard = /*#__PURE__*/memo(_ref => {
|
|
15
|
+
let {
|
|
16
|
+
ref,
|
|
17
|
+
title,
|
|
18
|
+
subtitle,
|
|
19
|
+
description,
|
|
20
|
+
thumbnail,
|
|
21
|
+
media,
|
|
22
|
+
mediaPlacement = 'end',
|
|
23
|
+
style,
|
|
24
|
+
styles: {
|
|
25
|
+
root: rootStyle
|
|
26
|
+
} = {}
|
|
27
|
+
} = _ref,
|
|
28
|
+
layoutStyles = _objectWithoutPropertiesLoose(_ref.styles, _excluded),
|
|
29
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded2);
|
|
30
|
+
return /*#__PURE__*/_jsx(CardRoot, _extends({
|
|
31
|
+
ref: ref
|
|
32
|
+
}, mediaCardContainerProps, {
|
|
33
|
+
style: [style, rootStyle]
|
|
34
|
+
}, props, {
|
|
35
|
+
children: /*#__PURE__*/_jsx(MediaCardLayout, {
|
|
36
|
+
description: description,
|
|
37
|
+
media: media,
|
|
38
|
+
mediaPlacement: mediaPlacement,
|
|
39
|
+
styles: layoutStyles,
|
|
40
|
+
subtitle: subtitle,
|
|
41
|
+
thumbnail: thumbnail,
|
|
42
|
+
title: title
|
|
43
|
+
})
|
|
44
|
+
}));
|
|
45
|
+
});
|
|
46
|
+
MediaCard.displayName = 'MediaCard';
|
|
@@ -1,46 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
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); }
|
|
4
|
-
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; }
|
|
5
|
-
import { memo } from 'react';
|
|
6
|
-
import { CardRoot } from '../CardRoot';
|
|
7
|
-
import { MediaCardLayout } from './MediaCardLayout';
|
|
8
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
const mediaCardContainerProps = {
|
|
10
|
-
borderRadius: 500,
|
|
11
|
-
background: 'bgAlternate',
|
|
12
|
-
overflow: 'hidden'
|
|
13
|
-
};
|
|
14
|
-
export const MediaCard = /*#__PURE__*/memo(_ref => {
|
|
15
|
-
let {
|
|
16
|
-
ref,
|
|
17
|
-
title,
|
|
18
|
-
subtitle,
|
|
19
|
-
description,
|
|
20
|
-
thumbnail,
|
|
21
|
-
media,
|
|
22
|
-
mediaPlacement = 'end',
|
|
23
|
-
style,
|
|
24
|
-
styles: {
|
|
25
|
-
root: rootStyle
|
|
26
|
-
} = {}
|
|
27
|
-
} = _ref,
|
|
28
|
-
layoutStyles = _objectWithoutPropertiesLoose(_ref.styles, _excluded),
|
|
29
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded2);
|
|
30
|
-
return /*#__PURE__*/_jsx(CardRoot, _extends({
|
|
31
|
-
ref: ref
|
|
32
|
-
}, mediaCardContainerProps, {
|
|
33
|
-
style: [style, rootStyle]
|
|
34
|
-
}, props, {
|
|
35
|
-
children: /*#__PURE__*/_jsx(MediaCardLayout, {
|
|
36
|
-
description: description,
|
|
37
|
-
media: media,
|
|
38
|
-
mediaPlacement: mediaPlacement,
|
|
39
|
-
styles: layoutStyles,
|
|
40
|
-
subtitle: subtitle,
|
|
41
|
-
thumbnail: thumbnail,
|
|
42
|
-
title: title
|
|
43
|
-
})
|
|
44
|
-
}));
|
|
45
|
-
});
|
|
46
|
-
MediaCard.displayName = 'MediaCard';
|
|
1
|
+
export * from './MediaCard';
|
|
2
|
+
export * from './MediaCardLayout';
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
const _excluded = ["root"],
|
|
2
|
+
_excluded2 = ["ref", "type", "title", "description", "tag", "action", "onActionButtonPress", "actionButtonAccessibilityLabel", "dismissButton", "onDismissButtonPress", "dismissButtonAccessibilityLabel", "mediaPlacement", "media", "style", "styles"];
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
import { memo } from 'react';
|
|
6
|
+
import { CardRoot } from '../CardRoot';
|
|
7
|
+
import { MessagingCardLayout } from './MessagingCardLayout';
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
const messagingCardContainerProps = {
|
|
10
|
+
borderRadius: 500,
|
|
11
|
+
overflow: 'hidden'
|
|
12
|
+
};
|
|
13
|
+
export const MessagingCard = /*#__PURE__*/memo(_ref => {
|
|
14
|
+
let {
|
|
15
|
+
ref,
|
|
16
|
+
type,
|
|
17
|
+
title,
|
|
18
|
+
description,
|
|
19
|
+
tag,
|
|
20
|
+
action,
|
|
21
|
+
onActionButtonPress,
|
|
22
|
+
actionButtonAccessibilityLabel,
|
|
23
|
+
dismissButton,
|
|
24
|
+
onDismissButtonPress,
|
|
25
|
+
dismissButtonAccessibilityLabel,
|
|
26
|
+
mediaPlacement,
|
|
27
|
+
media,
|
|
28
|
+
style,
|
|
29
|
+
styles: {
|
|
30
|
+
root: rootStyle
|
|
31
|
+
} = {}
|
|
32
|
+
} = _ref,
|
|
33
|
+
layoutStyles = _objectWithoutPropertiesLoose(_ref.styles, _excluded),
|
|
34
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded2);
|
|
35
|
+
const background = type === 'upsell' ? 'bgPrimary' : 'bgAlternate';
|
|
36
|
+
return /*#__PURE__*/_jsx(CardRoot, _extends({
|
|
37
|
+
ref: ref,
|
|
38
|
+
background: background,
|
|
39
|
+
borderWidth: 0,
|
|
40
|
+
style: [style, rootStyle]
|
|
41
|
+
}, messagingCardContainerProps, props, {
|
|
42
|
+
children: /*#__PURE__*/_jsx(MessagingCardLayout, {
|
|
43
|
+
action: action,
|
|
44
|
+
actionButtonAccessibilityLabel: actionButtonAccessibilityLabel,
|
|
45
|
+
description: description,
|
|
46
|
+
dismissButton: dismissButton,
|
|
47
|
+
dismissButtonAccessibilityLabel: dismissButtonAccessibilityLabel,
|
|
48
|
+
media: media,
|
|
49
|
+
mediaPlacement: mediaPlacement,
|
|
50
|
+
onActionButtonPress: onActionButtonPress,
|
|
51
|
+
onDismissButtonPress: onDismissButtonPress,
|
|
52
|
+
styles: layoutStyles,
|
|
53
|
+
tag: tag,
|
|
54
|
+
title: title,
|
|
55
|
+
type: type
|
|
56
|
+
})
|
|
57
|
+
}));
|
|
58
|
+
});
|
|
59
|
+
MessagingCard.displayName = 'MessagingCard';
|
|
@@ -1,59 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
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); }
|
|
4
|
-
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; }
|
|
5
|
-
import { memo } from 'react';
|
|
6
|
-
import { CardRoot } from '../CardRoot';
|
|
7
|
-
import { MessagingCardLayout } from './MessagingCardLayout';
|
|
8
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
const messagingCardContainerProps = {
|
|
10
|
-
borderRadius: 500,
|
|
11
|
-
overflow: 'hidden'
|
|
12
|
-
};
|
|
13
|
-
export const MessagingCard = /*#__PURE__*/memo(_ref => {
|
|
14
|
-
let {
|
|
15
|
-
ref,
|
|
16
|
-
type,
|
|
17
|
-
title,
|
|
18
|
-
description,
|
|
19
|
-
tag,
|
|
20
|
-
action,
|
|
21
|
-
onActionButtonPress,
|
|
22
|
-
actionButtonAccessibilityLabel,
|
|
23
|
-
dismissButton,
|
|
24
|
-
onDismissButtonPress,
|
|
25
|
-
dismissButtonAccessibilityLabel,
|
|
26
|
-
mediaPlacement,
|
|
27
|
-
media,
|
|
28
|
-
style,
|
|
29
|
-
styles: {
|
|
30
|
-
root: rootStyle
|
|
31
|
-
} = {}
|
|
32
|
-
} = _ref,
|
|
33
|
-
layoutStyles = _objectWithoutPropertiesLoose(_ref.styles, _excluded),
|
|
34
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded2);
|
|
35
|
-
const background = type === 'upsell' ? 'bgPrimary' : 'bgAlternate';
|
|
36
|
-
return /*#__PURE__*/_jsx(CardRoot, _extends({
|
|
37
|
-
ref: ref,
|
|
38
|
-
background: background,
|
|
39
|
-
borderWidth: 0,
|
|
40
|
-
style: [style, rootStyle]
|
|
41
|
-
}, messagingCardContainerProps, props, {
|
|
42
|
-
children: /*#__PURE__*/_jsx(MessagingCardLayout, {
|
|
43
|
-
action: action,
|
|
44
|
-
actionButtonAccessibilityLabel: actionButtonAccessibilityLabel,
|
|
45
|
-
description: description,
|
|
46
|
-
dismissButton: dismissButton,
|
|
47
|
-
dismissButtonAccessibilityLabel: dismissButtonAccessibilityLabel,
|
|
48
|
-
media: media,
|
|
49
|
-
mediaPlacement: mediaPlacement,
|
|
50
|
-
onActionButtonPress: onActionButtonPress,
|
|
51
|
-
onDismissButtonPress: onDismissButtonPress,
|
|
52
|
-
styles: layoutStyles,
|
|
53
|
-
tag: tag,
|
|
54
|
-
title: title,
|
|
55
|
-
type: type
|
|
56
|
-
})
|
|
57
|
-
}));
|
|
58
|
-
});
|
|
59
|
-
MessagingCard.displayName = 'MessagingCard';
|
|
1
|
+
export * from './MessagingCard';
|
|
2
|
+
export * from './MessagingCardLayout';
|
|
@@ -18,12 +18,14 @@ const CoachmarkExamples = () => {
|
|
|
18
18
|
gap: 3,
|
|
19
19
|
children: [/*#__PURE__*/_jsx(Coachmark, {
|
|
20
20
|
action: /*#__PURE__*/_jsx(Button, {
|
|
21
|
+
variant: "secondary",
|
|
21
22
|
children: "Next"
|
|
22
23
|
}),
|
|
23
24
|
content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
|
|
24
25
|
title: "Basic"
|
|
25
26
|
}), /*#__PURE__*/_jsx(Coachmark, {
|
|
26
27
|
action: /*#__PURE__*/_jsx(Button, {
|
|
28
|
+
variant: "secondary",
|
|
27
29
|
children: "Next"
|
|
28
30
|
}),
|
|
29
31
|
checkbox: /*#__PURE__*/_jsx(Checkbox, {
|
|
@@ -35,6 +37,7 @@ const CoachmarkExamples = () => {
|
|
|
35
37
|
title: "With checkbox"
|
|
36
38
|
}), /*#__PURE__*/_jsx(Coachmark, {
|
|
37
39
|
action: /*#__PURE__*/_jsx(Button, {
|
|
40
|
+
variant: "secondary",
|
|
38
41
|
children: "Next"
|
|
39
42
|
}),
|
|
40
43
|
closeButtonAccessibilityLabel: "Close",
|
|
@@ -43,6 +46,7 @@ const CoachmarkExamples = () => {
|
|
|
43
46
|
title: "Dismissible"
|
|
44
47
|
}), /*#__PURE__*/_jsx(Coachmark, {
|
|
45
48
|
action: /*#__PURE__*/_jsx(Button, {
|
|
49
|
+
variant: "secondary",
|
|
46
50
|
children: "Next"
|
|
47
51
|
}),
|
|
48
52
|
closeButtonAccessibilityLabel: "Close",
|
|
@@ -73,6 +77,7 @@ const CoachmarkExamples = () => {
|
|
|
73
77
|
title: "Rich Content"
|
|
74
78
|
}), /*#__PURE__*/_jsx(Coachmark, {
|
|
75
79
|
action: /*#__PURE__*/_jsx(Button, {
|
|
80
|
+
variant: "secondary",
|
|
76
81
|
children: "Next"
|
|
77
82
|
}),
|
|
78
83
|
content: "This SpotRectangle is in a Box with bgPrimary background.",
|
|
@@ -88,6 +93,7 @@ const CoachmarkExamples = () => {
|
|
|
88
93
|
title: "With a SpotRectangle"
|
|
89
94
|
}), /*#__PURE__*/_jsx(Coachmark, {
|
|
90
95
|
action: /*#__PURE__*/_jsx(Button, {
|
|
96
|
+
variant: "secondary",
|
|
91
97
|
children: "Done"
|
|
92
98
|
}),
|
|
93
99
|
content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.9",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -29,6 +29,10 @@
|
|
|
29
29
|
"types": "./dts/alpha/combobox/index.d.ts",
|
|
30
30
|
"default": "./esm/alpha/combobox/index.js"
|
|
31
31
|
},
|
|
32
|
+
"./alpha/data-card": {
|
|
33
|
+
"types": "./dts/alpha/data-card/index.d.ts",
|
|
34
|
+
"default": "./esm/alpha/data-card/index.js"
|
|
35
|
+
},
|
|
32
36
|
"./alpha/select": {
|
|
33
37
|
"types": "./dts/alpha/select/index.d.ts",
|
|
34
38
|
"default": "./esm/alpha/select/index.js"
|
|
@@ -61,6 +65,14 @@
|
|
|
61
65
|
"types": "./dts/cards/ContentCard/index.d.ts",
|
|
62
66
|
"default": "./esm/cards/ContentCard/index.js"
|
|
63
67
|
},
|
|
68
|
+
"./cards/MediaCard": {
|
|
69
|
+
"types": "./dts/cards/MediaCard/index.d.ts",
|
|
70
|
+
"default": "./esm/cards/MediaCard/index.js"
|
|
71
|
+
},
|
|
72
|
+
"./cards/MessagingCard": {
|
|
73
|
+
"types": "./dts/cards/MessagingCard/index.d.ts",
|
|
74
|
+
"default": "./esm/cards/MessagingCard/index.js"
|
|
75
|
+
},
|
|
64
76
|
"./carousel": {
|
|
65
77
|
"types": "./dts/carousel/index.d.ts",
|
|
66
78
|
"default": "./esm/carousel/index.js"
|
|
@@ -206,7 +218,7 @@
|
|
|
206
218
|
"react-native-worklets": "0.5.2"
|
|
207
219
|
},
|
|
208
220
|
"dependencies": {
|
|
209
|
-
"@coinbase/cds-common": "^9.6.
|
|
221
|
+
"@coinbase/cds-common": "^9.6.9",
|
|
210
222
|
"@coinbase/cds-icons": "^5.21.0",
|
|
211
223
|
"@coinbase/cds-illustrations": "^4.44.0",
|
|
212
224
|
"@coinbase/cds-lottie-files": "^3.3.4",
|