@coinbase/cds-web 8.42.0 → 8.43.0
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 +6 -0
- package/dts/carousel/Carousel.d.ts +77 -9
- package/dts/carousel/Carousel.d.ts.map +1 -1
- package/dts/carousel/CarouselContext.d.ts +18 -0
- package/dts/carousel/CarouselContext.d.ts.map +1 -1
- package/dts/carousel/CarouselItem.d.ts +2 -0
- package/dts/carousel/CarouselItem.d.ts.map +1 -1
- package/dts/carousel/DefaultCarouselNavigation.d.ts +20 -0
- package/dts/carousel/DefaultCarouselNavigation.d.ts.map +1 -1
- package/dts/carousel/DefaultCarouselPagination.d.ts.map +1 -1
- package/dts/carousel/__figma__/Carousel.figma.d.ts +2 -0
- package/dts/carousel/__figma__/Carousel.figma.d.ts.map +1 -0
- package/esm/cards/MediaCard/__figma__/MediaCard.figma.js +20 -16
- package/esm/cards/MessagingCard/__figma__/MessagingCard.figma.js +3 -10
- package/esm/carousel/Carousel.css +2 -1
- package/esm/carousel/Carousel.js +301 -91
- package/esm/carousel/CarouselContext.js +8 -0
- package/esm/carousel/CarouselItem.css +1 -0
- package/esm/carousel/CarouselItem.js +15 -8
- package/esm/carousel/DefaultCarouselNavigation.js +18 -2
- package/esm/carousel/DefaultCarouselPagination.css +3 -2
- package/esm/carousel/DefaultCarouselPagination.js +138 -86
- package/esm/carousel/__figma__/Carousel.figma.js +15 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.43.0 (2/6/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Carousel autoplay. [[#361](https://github.com/coinbase/cds/pull/361)]
|
|
16
|
+
|
|
11
17
|
## 8.42.0 (2/4/2026 PST)
|
|
12
18
|
|
|
13
19
|
#### 🚀 Updates
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
|
|
3
3
|
import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
CarouselAutoplayContext,
|
|
6
|
+
type CarouselAutoplayContextValue,
|
|
7
|
+
CarouselContext,
|
|
8
|
+
type CarouselContextValue,
|
|
9
|
+
useCarouselAutoplayContext,
|
|
10
|
+
useCarouselContext,
|
|
11
|
+
} from './CarouselContext';
|
|
5
12
|
export type CarouselItemRenderChildren = React.FC<{
|
|
6
13
|
isVisible: boolean;
|
|
7
14
|
}>;
|
|
@@ -15,14 +22,26 @@ export type CarouselItemBaseProps = Omit<BoxBaseProps, 'children'> & {
|
|
|
15
22
|
* Can be a React node or a function that receives the visibility state.
|
|
16
23
|
*/
|
|
17
24
|
children?: CarouselItemRenderChildren | React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* @internal Used by Carousel to mark clone items for looping.
|
|
27
|
+
* Clone items are non-interactive and excluded from tab order.
|
|
28
|
+
*/
|
|
29
|
+
isClone?: boolean;
|
|
18
30
|
};
|
|
19
31
|
export type CarouselItemProps = Omit<BoxProps<BoxDefaultElement>, 'children'> &
|
|
20
32
|
CarouselItemBaseProps;
|
|
21
33
|
export type CarouselItemComponent = React.FC<CarouselItemProps>;
|
|
22
34
|
export type CarouselItemElement = React.ReactElement<CarouselItemProps, CarouselItemComponent>;
|
|
23
|
-
export { CarouselContext, useCarouselContext };
|
|
24
|
-
export type { CarouselContextValue };
|
|
25
|
-
export type CarouselNavigationComponentBaseProps =
|
|
35
|
+
export { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext };
|
|
36
|
+
export type { CarouselAutoplayContextValue, CarouselContextValue };
|
|
37
|
+
export type CarouselNavigationComponentBaseProps = Pick<
|
|
38
|
+
CarouselBaseProps,
|
|
39
|
+
| 'autoplay'
|
|
40
|
+
| 'nextPageAccessibilityLabel'
|
|
41
|
+
| 'previousPageAccessibilityLabel'
|
|
42
|
+
| 'startAutoplayAccessibilityLabel'
|
|
43
|
+
| 'stopAutoplayAccessibilityLabel'
|
|
44
|
+
> & {
|
|
26
45
|
/**
|
|
27
46
|
* Callback for when the previous button is pressed.
|
|
28
47
|
*/
|
|
@@ -40,13 +59,13 @@ export type CarouselNavigationComponentBaseProps = {
|
|
|
40
59
|
*/
|
|
41
60
|
disableGoNext?: boolean;
|
|
42
61
|
/**
|
|
43
|
-
*
|
|
62
|
+
* Whether autoplay is currently stopped.
|
|
44
63
|
*/
|
|
45
|
-
|
|
64
|
+
isAutoplayStopped?: boolean;
|
|
46
65
|
/**
|
|
47
|
-
*
|
|
66
|
+
* Callback fired when the autoplay button is clicked.
|
|
48
67
|
*/
|
|
49
|
-
|
|
68
|
+
onToggleAutoplay?: () => void;
|
|
50
69
|
};
|
|
51
70
|
export type CarouselNavigationComponentProps = CarouselNavigationComponentBaseProps & {
|
|
52
71
|
/**
|
|
@@ -76,6 +95,14 @@ export type CarouselPaginationComponentBaseProps = {
|
|
|
76
95
|
* Accessibility label for the go to page button. You can optionally pass a function that will receive the pageIndex as an argument, and return an accessibility label string.
|
|
77
96
|
*/
|
|
78
97
|
paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
|
|
98
|
+
/**
|
|
99
|
+
* Visual variant for the pagination indicators.
|
|
100
|
+
* - 'pill': All indicators are pill-shaped (default)
|
|
101
|
+
* - 'dot': Inactive indicators are small dots, active indicator expands to a pill
|
|
102
|
+
* @default 'pill'
|
|
103
|
+
* @note 'pill' variant is deprecated, use 'dot' instead
|
|
104
|
+
*/
|
|
105
|
+
variant?: 'pill' | 'dot';
|
|
79
106
|
};
|
|
80
107
|
export type CarouselPaginationComponentProps = CarouselPaginationComponentBaseProps & {
|
|
81
108
|
/**
|
|
@@ -128,7 +155,10 @@ export type CarouselBaseProps = SharedProps &
|
|
|
128
155
|
*/
|
|
129
156
|
snapMode?: 'item' | 'page';
|
|
130
157
|
/**
|
|
131
|
-
* Hides the navigation arrows (previous/next buttons).
|
|
158
|
+
* Hides the navigation arrows (previous/next buttons and autoplay control).
|
|
159
|
+
*
|
|
160
|
+
* @note If you hide navigation with autoplay, you must provide
|
|
161
|
+
* an alternative mechanism for users to pause the carousel.
|
|
132
162
|
*/
|
|
133
163
|
hideNavigation?: boolean;
|
|
134
164
|
/**
|
|
@@ -154,16 +184,37 @@ export type CarouselBaseProps = SharedProps &
|
|
|
154
184
|
title?: React.ReactNode;
|
|
155
185
|
/**
|
|
156
186
|
* Accessibility label for the next page button.
|
|
187
|
+
* @default 'Next page'
|
|
157
188
|
*/
|
|
158
189
|
nextPageAccessibilityLabel?: string;
|
|
159
190
|
/**
|
|
160
191
|
* Accessibility label for the previous page button.
|
|
192
|
+
* @default 'Previous page'
|
|
161
193
|
*/
|
|
162
194
|
previousPageAccessibilityLabel?: string;
|
|
163
195
|
/**
|
|
164
196
|
* Accessibility label for the go to page button.
|
|
197
|
+
* When a string is provided, it is used as-is for all indicators.
|
|
198
|
+
* When a function is provided, it receives the page index and returns a label.
|
|
199
|
+
* @default `Go to page X`
|
|
165
200
|
*/
|
|
166
201
|
paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
|
|
202
|
+
/**
|
|
203
|
+
* Accessibility label for starting autoplay.
|
|
204
|
+
* @default 'Play Carousel'
|
|
205
|
+
*/
|
|
206
|
+
startAutoplayAccessibilityLabel?: string;
|
|
207
|
+
/**
|
|
208
|
+
* Accessibility label for stopping autoplay.
|
|
209
|
+
* @default 'Pause Carousel'
|
|
210
|
+
*/
|
|
211
|
+
stopAutoplayAccessibilityLabel?: string;
|
|
212
|
+
/**
|
|
213
|
+
* Accessibility label announced by screen readers when the page changes.
|
|
214
|
+
* Receives the current page index (0-based) and total pages.
|
|
215
|
+
* @default `Page X of Y`
|
|
216
|
+
*/
|
|
217
|
+
pageChangeAccessibilityLabel?: (activePageIndex: number, totalPages: number) => string;
|
|
167
218
|
/**
|
|
168
219
|
* Callback fired when the carousel page changes.
|
|
169
220
|
*/
|
|
@@ -182,6 +233,23 @@ export type CarouselBaseProps = SharedProps &
|
|
|
182
233
|
* @note Requires at least 2 pages worth of content to function.
|
|
183
234
|
*/
|
|
184
235
|
loop?: boolean;
|
|
236
|
+
/**
|
|
237
|
+
* Whether autoplay is enabled for the carousel.
|
|
238
|
+
*/
|
|
239
|
+
autoplay?: boolean;
|
|
240
|
+
/**
|
|
241
|
+
* The interval in milliseconds for autoplay.
|
|
242
|
+
* @default 3000 (3 seconds)
|
|
243
|
+
*/
|
|
244
|
+
autoplayInterval?: number;
|
|
245
|
+
/**
|
|
246
|
+
* Visual variant for the pagination indicators.
|
|
247
|
+
* - 'pill': All indicators are pill-shaped (default)
|
|
248
|
+
* - 'dot': Inactive indicators are small dots, active indicator expands to a pill
|
|
249
|
+
* @default 'pill'
|
|
250
|
+
* @note 'pill' variant is deprecated, use 'dot' instead
|
|
251
|
+
*/
|
|
252
|
+
paginationVariant?: CarouselPaginationComponentBaseProps['variant'];
|
|
185
253
|
};
|
|
186
254
|
export type CarouselProps = Omit<BoxProps<BoxDefaultElement>, 'title'> &
|
|
187
255
|
CarouselBaseProps & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/Carousel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { CarouselAutoplay } from '@coinbase/cds-common';
|
|
2
3
|
export type CarouselContextValue = {
|
|
3
4
|
/**
|
|
4
5
|
* Set of item IDs that are currently visible in the carousel viewport.
|
|
@@ -7,4 +8,21 @@ export type CarouselContextValue = {
|
|
|
7
8
|
};
|
|
8
9
|
export declare const CarouselContext: React.Context<CarouselContextValue | undefined>;
|
|
9
10
|
export declare const useCarouselContext: () => CarouselContextValue;
|
|
11
|
+
export type CarouselAutoplayContextValue = Omit<
|
|
12
|
+
CarouselAutoplay,
|
|
13
|
+
'remainingTime' | 'addCompletionListener'
|
|
14
|
+
> & {
|
|
15
|
+
/**
|
|
16
|
+
* Whether autoplay is enabled via props.
|
|
17
|
+
*/
|
|
18
|
+
isEnabled: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* The autoplay interval duration in milliseconds.
|
|
21
|
+
*/
|
|
22
|
+
interval: number;
|
|
23
|
+
};
|
|
24
|
+
export declare const CarouselAutoplayContext: React.Context<
|
|
25
|
+
CarouselAutoplayContextValue | undefined
|
|
26
|
+
>;
|
|
27
|
+
export declare const useCarouselAutoplayContext: () => CarouselAutoplayContextValue;
|
|
10
28
|
//# sourceMappingURL=CarouselContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselContext.d.ts","sourceRoot":"","sources":["../../src/carousel/CarouselContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CarouselContext.d.ts","sourceRoot":"","sources":["../../src/carousel/CarouselContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,eAAe,iDAAmE,CAAC;AAEhG,eAAO,MAAM,kBAAkB,QAAO,oBAMrC,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,IAAI,CAC7C,gBAAgB,EAChB,eAAe,GAAG,uBAAuB,CAC1C,GAAG;IACF;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,uBAAuB,yDAExB,CAAC;AAEb,eAAO,MAAM,0BAA0B,QAAO,4BAM7C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselItem.d.ts","sourceRoot":"","sources":["../../src/carousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CarouselItem.d.ts","sourceRoot":"","sources":["../../src/carousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAOpD;;GAEG;AACH,eAAO,MAAM,YAAY,4FACyC,iBAAiB,6CAgClF,CAAC"}
|
|
@@ -15,6 +15,10 @@ export type DefaultCarouselNavigationProps = CarouselNavigationComponentProps &
|
|
|
15
15
|
* Test ID for the next button.
|
|
16
16
|
*/
|
|
17
17
|
nextButton?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Test ID for the autoplay button.
|
|
20
|
+
*/
|
|
21
|
+
autoplayButton?: string;
|
|
18
22
|
};
|
|
19
23
|
/**
|
|
20
24
|
* Icon to use for the previous button.
|
|
@@ -24,6 +28,14 @@ export type DefaultCarouselNavigationProps = CarouselNavigationComponentProps &
|
|
|
24
28
|
* Icon to use for the next button.
|
|
25
29
|
*/
|
|
26
30
|
nextIcon?: IconName;
|
|
31
|
+
/**
|
|
32
|
+
* Icon to use for the start autoplay button.
|
|
33
|
+
*/
|
|
34
|
+
startIcon?: IconName;
|
|
35
|
+
/**
|
|
36
|
+
* Icon to use for the stop autoplay button.
|
|
37
|
+
*/
|
|
38
|
+
stopIcon?: IconName;
|
|
27
39
|
/**
|
|
28
40
|
* Variant of the icon button.
|
|
29
41
|
*/
|
|
@@ -52,6 +64,10 @@ export type DefaultCarouselNavigationProps = CarouselNavigationComponentProps &
|
|
|
52
64
|
* Custom class name for the next button.
|
|
53
65
|
*/
|
|
54
66
|
nextButton?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Custom class name for the autoplay button.
|
|
69
|
+
*/
|
|
70
|
+
autoplayButton?: string;
|
|
55
71
|
};
|
|
56
72
|
/**
|
|
57
73
|
* Custom styles for the component.
|
|
@@ -69,6 +85,10 @@ export type DefaultCarouselNavigationProps = CarouselNavigationComponentProps &
|
|
|
69
85
|
* Custom styles for the next button.
|
|
70
86
|
*/
|
|
71
87
|
nextButton?: React.CSSProperties;
|
|
88
|
+
/**
|
|
89
|
+
* Custom styles for the autoplay button.
|
|
90
|
+
*/
|
|
91
|
+
autoplayButton?: React.CSSProperties;
|
|
72
92
|
};
|
|
73
93
|
};
|
|
74
94
|
export declare const DefaultCarouselNavigation: React.NamedExoticComponent<DefaultCarouselNavigationProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultCarouselNavigation.d.ts","sourceRoot":"","sources":["../../src/carousel/DefaultCarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAOpE,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAgBnE,MAAM,MAAM,8BAA8B,GAAG,gCAAgC,GAAG;IAC9E;;OAEG;IACH,SAAS,CAAC,EAAE;QACV;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"DefaultCarouselNavigation.d.ts","sourceRoot":"","sources":["../../src/carousel/DefaultCarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAOpE,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAgBnE,MAAM,MAAM,8BAA8B,GAAG,gCAAgC,GAAG;IAC9E;;OAEG;IACH,SAAS,CAAC,EAAE;QACV;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC;;WAEG;QACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACjC;;WAEG;QACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KACtC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,4DAsEpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultCarouselPagination.d.ts","sourceRoot":"","sources":["../../src/carousel/DefaultCarouselPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"DefaultCarouselPagination.d.ts","sourceRoot":"","sources":["../../src/carousel/DefaultCarouselPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQ9D,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAiCnE,MAAM,MAAM,8BAA8B,GAAG,gCAAgC,GAC3E,WAAW,GAAG;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC3B,CAAC;CACH,CAAC;AAsGJ,eAAO,MAAM,yBAAyB,4DAqEpC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Carousel.figma.d.ts","sourceRoot":"","sources":["../../../src/carousel/__figma__/Carousel.figma.tsx"],"names":[],"mappings":""}
|
|
@@ -3,11 +3,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
3
3
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
4
4
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
5
5
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
6
|
-
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
|
|
7
|
-
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); }
|
|
8
6
|
import React from 'react';
|
|
7
|
+
import { ethBackground } from '@coinbase/cds-common/internal/data/assets';
|
|
9
8
|
import { figma } from '@figma/code-connect';
|
|
10
|
-
import {
|
|
9
|
+
import { RemoteImage } from '../../../media';
|
|
11
10
|
import { MediaCard } from '../';
|
|
12
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
12
|
figma.connect(MediaCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-18302&m=dev', {
|
|
@@ -22,25 +21,30 @@ figma.connect(MediaCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
|
|
|
22
21
|
true: figma.instance('↳ subdetail'),
|
|
23
22
|
false: undefined
|
|
24
23
|
}),
|
|
25
|
-
|
|
24
|
+
thumbnail: figma.boolean('show media', {
|
|
26
25
|
true: figma.instance('↳ media'),
|
|
27
26
|
false: undefined
|
|
28
27
|
}),
|
|
29
|
-
mediaPlacement: figma.enum('
|
|
28
|
+
mediaPlacement: figma.enum('image placement', {
|
|
30
29
|
left: 'start',
|
|
31
30
|
right: 'end',
|
|
32
31
|
none: undefined
|
|
32
|
+
}),
|
|
33
|
+
media: figma.enum('image placement', {
|
|
34
|
+
left: /*#__PURE__*/_jsx(RemoteImage, {
|
|
35
|
+
alt: "Media",
|
|
36
|
+
shape: "rectangle",
|
|
37
|
+
source: ethBackground,
|
|
38
|
+
width: "100%"
|
|
39
|
+
}),
|
|
40
|
+
right: /*#__PURE__*/_jsx(RemoteImage, {
|
|
41
|
+
alt: "Media",
|
|
42
|
+
shape: "rectangle",
|
|
43
|
+
source: ethBackground,
|
|
44
|
+
width: "100%"
|
|
45
|
+
}),
|
|
46
|
+
none: undefined
|
|
33
47
|
})
|
|
34
48
|
},
|
|
35
|
-
example:
|
|
36
|
-
let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
37
|
-
return /*#__PURE__*/_jsx(MediaCard, _objectSpread({
|
|
38
|
-
thumbnail: /*#__PURE__*/_jsx(Avatar, {
|
|
39
|
-
alt: "",
|
|
40
|
-
shape: "circle",
|
|
41
|
-
size: "l",
|
|
42
|
-
src: ""
|
|
43
|
-
})
|
|
44
|
-
}, props));
|
|
45
|
-
}
|
|
49
|
+
example: props => /*#__PURE__*/_jsx(MediaCard, _objectSpread({}, props))
|
|
46
50
|
});
|
|
@@ -3,8 +3,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
3
3
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
4
4
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
5
5
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
6
|
-
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
|
|
7
|
-
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); }
|
|
8
6
|
import React from 'react';
|
|
9
7
|
import { figma } from '@figma/code-connect';
|
|
10
8
|
import { MessagingCard } from '../';
|
|
@@ -28,10 +26,6 @@ figma.connect(MessagingCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2
|
|
|
28
26
|
true: figma.instance('↳ tag'),
|
|
29
27
|
false: undefined
|
|
30
28
|
}),
|
|
31
|
-
action: figma.boolean('show cta', {
|
|
32
|
-
true: figma.instance('↳ cta'),
|
|
33
|
-
false: undefined
|
|
34
|
-
}),
|
|
35
29
|
media: figma.instance('media'),
|
|
36
30
|
mediaPlacement: figma.enum('media placement', {
|
|
37
31
|
left: 'start',
|
|
@@ -42,8 +36,7 @@ figma.connect(MessagingCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2
|
|
|
42
36
|
false: undefined
|
|
43
37
|
})
|
|
44
38
|
},
|
|
45
|
-
example:
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
39
|
+
example: props => /*#__PURE__*/_jsx(MessagingCard, _objectSpread({
|
|
40
|
+
action: "Button"
|
|
41
|
+
}, props))
|
|
49
42
|
});
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
@layer cds{.defaultCarouselCss-d3is9f4 img{pointer-events:none;}
|
|
1
|
+
@layer cds{.defaultCarouselCss-d3is9f4 img{pointer-events:none;}
|
|
2
|
+
.screenReaderOnlyCss-shdwk7s{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);white-space:nowrap;border:0;}}
|