@contentful/f36-card 4.17.0 → 4.19.1

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/dist/module.js DELETED
@@ -1,637 +0,0 @@
1
- import {cx as $5DxI1$cx, css as $5DxI1$css} from "emotion";
2
- import $5DxI1$react, {useState as $5DxI1$useState, useCallback as $5DxI1$useCallback, forwardRef as $5DxI1$forwardRef} from "react";
3
- import {Flex as $5DxI1$Flex, Box as $5DxI1$Box, getEntityStatusStyles as $5DxI1$getEntityStatusStyles} from "@contentful/f36-core";
4
- import {EntityStatusBadge as $5DxI1$EntityStatusBadge} from "@contentful/f36-badge";
5
- import {Asset as $5DxI1$Asset} from "@contentful/f36-asset";
6
- import {Skeleton as $5DxI1$Skeleton} from "@contentful/f36-skeleton";
7
- import {DragHandle as $5DxI1$DragHandle} from "@contentful/f36-drag-handle";
8
- import $5DxI1$contentfulf36tokens from "@contentful/f36-tokens";
9
- import {Text as $5DxI1$Text, Heading as $5DxI1$Heading, Subheading as $5DxI1$Subheading, Paragraph as $5DxI1$Paragraph} from "@contentful/f36-typography";
10
- import {IconButton as $5DxI1$IconButton} from "@contentful/f36-button";
11
- import {MoreHorizontalIcon as $5DxI1$MoreHorizontalIcon} from "@contentful/f36-icons";
12
- import {Menu as $5DxI1$Menu} from "@contentful/f36-menu";
13
- import $5DxI1$truncate from "truncate";
14
- import {Tooltip as $5DxI1$Tooltip} from "@contentful/f36-tooltip";
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
- const $082b639acf692abe$export$e5c3362273de1eca = ()=>{
30
- return {
31
- contentBody: /*#__PURE__*/ (0, $5DxI1$css)({
32
- name: "161cbg",
33
- styles: "grid-column:content;grid-row:content;white-space:initial;"
34
- }),
35
- wrapper: /*#__PURE__*/ (0, $5DxI1$css)({
36
- name: "1cjnmwb",
37
- styles: "flex:1 1 0;display:grid;grid-template-rows:[header] auto [content] minmax(0, 1fr);grid-template-columns:auto [content] minmax(0, 1fr);"
38
- }),
39
- dragHandle: /*#__PURE__*/ (0, $5DxI1$css)({
40
- borderBottomLeftRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
41
- borderTopLeftRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
42
- cursor: "grab"
43
- }),
44
- root: ({ hasHeader: hasHeader , isHovered: isHovered , isSelected: isSelected })=>{
45
- const styles = {
46
- backgroundColor: (0, $5DxI1$contentfulf36tokens).colorWhite,
47
- borderColor: (0, $5DxI1$contentfulf36tokens).gray300,
48
- borderRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
49
- borderStyle: "solid",
50
- borderWidth: 1,
51
- color: (0, $5DxI1$contentfulf36tokens).gray900,
52
- display: "flex",
53
- textAlign: "left",
54
- width: "100%",
55
- fontSize: (0, $5DxI1$contentfulf36tokens).fontSizeM,
56
- fontWeight: (0, $5DxI1$contentfulf36tokens).fontWeightNormal,
57
- position: "relative",
58
- textDecoration: "none",
59
- transition: `border-color ${(0, $5DxI1$contentfulf36tokens).transitionDurationDefault} ${(0, $5DxI1$contentfulf36tokens).transitionEasingDefault},
60
- box-shadow ${(0, $5DxI1$contentfulf36tokens).transitionDurationShort} ${(0, $5DxI1$contentfulf36tokens).transitionEasingDefault}`,
61
- "&:focus": /*#__PURE__*/ (0, $5DxI1$css)({
62
- borderColor: isSelected ? (0, $5DxI1$contentfulf36tokens).blue100 : (0, $5DxI1$contentfulf36tokens).colorPrimary,
63
- boxShadow: (0, $5DxI1$contentfulf36tokens).glowPrimary,
64
- outline: "none"
65
- }),
66
- "&:focus:not(:focus-visible)": /*#__PURE__*/ (0, $5DxI1$css)({
67
- borderColor: isSelected ? (0, $5DxI1$contentfulf36tokens).colorPrimary : (0, $5DxI1$contentfulf36tokens).gray300,
68
- boxShadow: "unset"
69
- }),
70
- "&:focus-visible": /*#__PURE__*/ (0, $5DxI1$css)({
71
- borderColor: (0, $5DxI1$contentfulf36tokens).colorPrimary,
72
- boxShadow: (0, $5DxI1$contentfulf36tokens).glowPrimary
73
- })
74
- };
75
- if (!hasHeader) styles.paddingTop = (0, $5DxI1$contentfulf36tokens).spacingM;
76
- if (isHovered) {
77
- styles.borderColor = (0, $5DxI1$contentfulf36tokens).colorPrimary;
78
- styles.cursor = "pointer";
79
- }
80
- if (isSelected) {
81
- styles.backgroundColor = (0, $5DxI1$contentfulf36tokens).blue100;
82
- styles.borderColor = (0, $5DxI1$contentfulf36tokens).colorPrimary;
83
- }
84
- return /*#__PURE__*/ (0, $5DxI1$css)(styles);
85
- },
86
- skeleton: /*#__PURE__*/ (0, $5DxI1$css)({
87
- border: `1px solid ${(0, $5DxI1$contentfulf36tokens).gray300}`,
88
- borderRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
89
- padding: (0, $5DxI1$contentfulf36tokens).spacingM
90
- })
91
- };
92
- };
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
- const $6e2e1e7b43420737$export$6468e6b9c1bc1de = ()=>{
108
- return {
109
- root: /*#__PURE__*/ (0, $5DxI1$css)({
110
- minHeight: "auto",
111
- padding: (0, $5DxI1$contentfulf36tokens).spacing2Xs,
112
- marginLeft: (0, $5DxI1$contentfulf36tokens).spacingXs
113
- })
114
- };
115
- };
116
-
117
-
118
- const $c83d23d1a559d33c$export$9b6a647253f61c5f = ({ buttonProps: buttonProps , children: children })=>{
119
- const styles = (0, $6e2e1e7b43420737$export$6468e6b9c1bc1de)();
120
- return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Menu), null, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Menu).Trigger, null, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$IconButton), {
121
- "aria-label": "Actions",
122
- icon: /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$MoreHorizontalIcon), null),
123
- ...buttonProps,
124
- className: (0, $5DxI1$cx)(styles.root, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.className),
125
- size: "small",
126
- variant: "transparent",
127
- testId: "cf-ui-card-actions"
128
- })), /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Menu).List, null, children));
129
- };
130
-
131
-
132
-
133
- const $798bf03d82ac02ed$var$getHeaderStyles = ()=>{
134
- return {
135
- header: /*#__PURE__*/ (0, $5DxI1$css)({
136
- alignItems: "center",
137
- borderBottomColor: (0, $5DxI1$contentfulf36tokens).gray200,
138
- borderBottomStyle: "solid",
139
- borderBottomWidth: 1,
140
- borderTopLeftRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
141
- borderTopRightRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
142
- boxSizing: "border-box",
143
- color: (0, $5DxI1$contentfulf36tokens).gray600,
144
- fontSize: (0, $5DxI1$contentfulf36tokens).fontSizeM,
145
- fontWeight: (0, $5DxI1$contentfulf36tokens).fontWeightNormal,
146
- gridColumn: "content",
147
- gridRow: "header",
148
- lineHeight: (0, $5DxI1$contentfulf36tokens).lineHeightM,
149
- paddingBottom: (0, $5DxI1$contentfulf36tokens).spacingXs,
150
- paddingLeft: (0, $5DxI1$contentfulf36tokens).spacingM,
151
- paddingRight: (0, $5DxI1$contentfulf36tokens).spacingXs,
152
- paddingTop: (0, $5DxI1$contentfulf36tokens).spacingXs,
153
- minHeight: "37px"
154
- }),
155
- headerWithActions: /*#__PURE__*/ (0, $5DxI1$css)({
156
- paddingBottom: 0,
157
- paddingRight: (0, $5DxI1$contentfulf36tokens).spacingXs,
158
- paddingTop: 0
159
- })
160
- };
161
- };
162
- const $798bf03d82ac02ed$export$783e10c0b439f264 = (e)=>{
163
- e.preventDefault();
164
- e.stopPropagation();
165
- };
166
- const $798bf03d82ac02ed$export$606643aa598b5a97 = (props)=>{
167
- const { icon: icon , type: type , actions: actions , actionsButtonProps: actionsButtonProps , badge: badge } = props;
168
- const styles = $798bf03d82ac02ed$var$getHeaderStyles();
169
- return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
170
- className: (0, $5DxI1$cx)(styles.header, actions && styles.headerWithActions)
171
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
172
- flexGrow: 1
173
- }, type && /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Text), {
174
- fontColor: "gray600",
175
- isWordBreak: true
176
- }, type)), icon && /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
177
- alignItems: "center",
178
- marginLeft: "spacingXs"
179
- }, icon), badge && /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
180
- alignItems: "center",
181
- marginLeft: "spacingXs"
182
- }, badge), actions && actions.length > 0 && /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex // don't propagate click event, so onClick handler on the card is not triggered
183
- ), {
184
- onClick: $798bf03d82ac02ed$export$783e10c0b439f264,
185
- alignItems: "center"
186
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $c83d23d1a559d33c$export$9b6a647253f61c5f), {
187
- buttonProps: actionsButtonProps
188
- }, actions)));
189
- };
190
- $798bf03d82ac02ed$export$606643aa598b5a97.displayName = "DefaultCardHeader";
191
-
192
-
193
- const $58aab48c7cf09ac0$export$eed7d00d62e881b8 = "article";
194
- function $58aab48c7cf09ac0$var$_BaseCard({ actions: actions , actionsButtonProps: actionsButtonProps , ariaLabel: ariaLabel , badge: badge , children: children , className: className , contentBodyProps: contentBodyProps , header: header , href: href , icon: icon , isDragging: isDragging = false , isHovered: isHoveredProp , isSelected: isSelected = false , onBlur: onBlur , onClick: onClick , onFocus: onFocus , onKeyDown: onKeyDown , onMouseEnter: onMouseEnter , onMouseLeave: onMouseLeave , target: target , rel: rel , testId: testId = "cf-ui-base-card" , title: title , type: type , withDragHandle: withDragHandle , dragHandleRender: dragHandleRender , isLoading: isLoading , ...otherProps }, forwardedRef) {
195
- const styles = (0, $082b639acf692abe$export$e5c3362273de1eca)();
196
- const [isHovered, setIsHovered] = (0, $5DxI1$useState)(isHoveredProp !== null && isHoveredProp !== void 0 ? isHoveredProp : false);
197
- const isInteractive = Boolean(onClick || href || withDragHandle);
198
- const hasHeader = Boolean(header);
199
- const defaultHeader = type || icon || badge || actions ? /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $798bf03d82ac02ed$export$606643aa598b5a97), {
200
- type: type,
201
- icon: icon,
202
- badge: badge,
203
- actions: actions,
204
- actionsButtonProps: actionsButtonProps
205
- }) : null;
206
- const handleFocus = (0, $5DxI1$useCallback)((event)=>{
207
- if (onFocus) onFocus(event);
208
- }, [
209
- onFocus
210
- ]);
211
- const handleBlur = (0, $5DxI1$useCallback)((event)=>{
212
- if (onBlur) onBlur(event);
213
- }, [
214
- onBlur
215
- ]);
216
- const handleMouseEnter = (0, $5DxI1$useCallback)((event)=>{
217
- setIsHovered(true);
218
- if (onMouseEnter) onMouseEnter(event);
219
- }, [
220
- onMouseEnter
221
- ]);
222
- const handleMouseLeave = (0, $5DxI1$useCallback)((event)=>{
223
- setIsHovered(false);
224
- if (onMouseLeave) onMouseLeave(event);
225
- }, [
226
- onMouseLeave
227
- ]);
228
- const handleClick = onClick ? (event)=>{
229
- onClick(event);
230
- } : undefined;
231
- const handleKeyDown = (0, $5DxI1$useCallback)((event)=>{
232
- if (onKeyDown) onKeyDown(event);
233
- }, [
234
- onKeyDown
235
- ]);
236
- if (isLoading) return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Skeleton).Container, {
237
- className: styles.skeleton,
238
- svgHeight: "5.6rem"
239
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Skeleton).DisplayText, {
240
- numberOfLines: 1
241
- }), /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Skeleton).BodyText, {
242
- numberOfLines: 1,
243
- offsetTop: 35
244
- }));
245
- const drag = /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$DragHandle), {
246
- className: styles.dragHandle,
247
- isActive: isDragging,
248
- label: "Reorder entry",
249
- onClick: (0, $798bf03d82ac02ed$export$783e10c0b439f264)
250
- });
251
- return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Box), {
252
- "aria-label": title || ariaLabel,
253
- "aria-pressed": otherProps.as === "button" ? isSelected ? "true" : "false" : undefined,
254
- as: $58aab48c7cf09ac0$export$eed7d00d62e881b8,
255
- className: (0, $5DxI1$cx)(styles.root({
256
- hasHeader: hasHeader,
257
- isHovered: isHovered,
258
- isSelected: isSelected
259
- }), className),
260
- href: href,
261
- onBlur: handleBlur,
262
- onClick: handleClick,
263
- onFocus: handleFocus,
264
- onMouseEnter: typeof isHoveredProp === "undefined" && isInteractive ? handleMouseEnter : undefined,
265
- onMouseLeave: typeof isHoveredProp === "undefined" && isInteractive ? handleMouseLeave : undefined,
266
- onKeyDown: handleKeyDown,
267
- rel: href && (rel || "noreferrer"),
268
- role: onClick && !href ? "button" : undefined,
269
- tabIndex: onClick ? 0 : undefined,
270
- target: target,
271
- ...otherProps,
272
- ref: forwardedRef,
273
- testId: testId,
274
- title: title
275
- }, withDragHandle ? dragHandleRender ? dragHandleRender({
276
- drag: drag,
277
- isDragging: isDragging
278
- }) : drag : null, /*#__PURE__*/ (0, $5DxI1$react).createElement("div", {
279
- className: styles.wrapper,
280
- "data-card-part": "wrapper"
281
- }, header !== null && header !== void 0 ? header : defaultHeader, /*#__PURE__*/ (0, $5DxI1$react).createElement("div", {
282
- className: styles.contentBody,
283
- "data-card-part": "content"
284
- }, children)));
285
- }
286
- $58aab48c7cf09ac0$var$_BaseCard.displayName = "BaseCard";
287
- const $58aab48c7cf09ac0$export$ffd8d1a491a618f2 = /*#__PURE__*/ (0, $5DxI1$forwardRef)($58aab48c7cf09ac0$var$_BaseCard);
288
-
289
-
290
-
291
-
292
- const $f5face715e2a2436$export$37a6ca57378bcb83 = ()=>{
293
- return {
294
- root: ({ size: size })=>/*#__PURE__*/ (0, $5DxI1$css)({
295
- display: "inline-flex",
296
- width: "auto",
297
- borderRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
298
- minWidth: `calc(1rem * (120 / ${(0, $5DxI1$contentfulf36tokens).fontBaseDefault}))`,
299
- height: size === "small" ? `calc(1rem * (188 / ${(0, $5DxI1$contentfulf36tokens).fontBaseDefault}))` : `calc(1rem * (300 / ${(0, $5DxI1$contentfulf36tokens).fontBaseDefault}))`,
300
- padding: 0,
301
- textAlign: "center"
302
- }),
303
- asset: /*#__PURE__*/ (0, $5DxI1$css)({
304
- name: "10klw3m",
305
- styles: "height:100%;"
306
- }),
307
- skeleton: /*#__PURE__*/ (0, $5DxI1$css)({
308
- border: `1px solid ${(0, $5DxI1$contentfulf36tokens).gray300}`,
309
- borderRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
310
- padding: (0, $5DxI1$contentfulf36tokens).spacingM
311
- })
312
- };
313
- };
314
-
315
-
316
-
317
- const $e5307476578213bc$export$eff93e4e59ccc3b8 = ({ actions: actions , className: className , icon: icon = null , isSelected: isSelected , size: size = "default" , src: src , status: status , title: title , type: type , withDragHandle: withDragHandle = false , isLoading: isLoading , testId: testId = "cf-ui-asset-card" , ...otherProps })=>{
318
- const styles = (0, $f5face715e2a2436$export$37a6ca57378bcb83)();
319
- const badge = status ? /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$EntityStatusBadge), {
320
- entityStatus: status
321
- }) : null;
322
- const header = icon || badge || actions ? /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $798bf03d82ac02ed$export$606643aa598b5a97), {
323
- icon: icon,
324
- badge: badge,
325
- actions: actions
326
- }) : null;
327
- if (isLoading) return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Skeleton).Container, {
328
- className: styles.skeleton,
329
- svgWidth: size === "default" ? "18rem" : "11rem",
330
- svgHeight: size === "default" ? "18.75rem" : "12rem"
331
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Skeleton).Image, {
332
- width: "100%",
333
- height: "18.75rem"
334
- }));
335
- return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $58aab48c7cf09ac0$export$ffd8d1a491a618f2), {
336
- ...otherProps,
337
- badge: badge,
338
- className: (0, $5DxI1$cx)(styles.root({
339
- size: size
340
- }), className),
341
- header: header,
342
- isSelected: isSelected,
343
- title: title,
344
- withDragHandle: withDragHandle,
345
- testId: testId
346
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
347
- alignItems: "center",
348
- fullHeight: true,
349
- justifyContent: "center"
350
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Asset), {
351
- className: styles.asset,
352
- src: src,
353
- status: status,
354
- title: title,
355
- type: type
356
- })));
357
- };
358
-
359
-
360
-
361
-
362
-
363
-
364
-
365
-
366
-
367
-
368
-
369
- const $2fcc945398035016$var$getCardPaddingValue = (padding)=>{
370
- switch(padding){
371
- case "large":
372
- return (0, $5DxI1$contentfulf36tokens).spacingL;
373
- case "none":
374
- return 0;
375
- default:
376
- return (0, $5DxI1$contentfulf36tokens).spacingM;
377
- }
378
- };
379
- const $2fcc945398035016$export$164c3dc7db460fb7 = ({ padding: padding })=>({
380
- header: /*#__PURE__*/ (0, $5DxI1$css)({
381
- gridColumn: "content",
382
- gridRow: "header",
383
- marginBottom: (0, $5DxI1$contentfulf36tokens).spacingM
384
- }),
385
- root: /*#__PURE__*/ (0, $5DxI1$css)({
386
- padding: $2fcc945398035016$var$getCardPaddingValue(padding)
387
- })
388
- });
389
-
390
-
391
- function $cce5018d103477ad$var$_Card({ actions: actions , badge: badge , icon: icon , padding: padding = "default" , title: title , className: className , testId: testId = "cf-ui-card" , ...otherProps }, forwardedRef) {
392
- const styles = (0, $2fcc945398035016$export$164c3dc7db460fb7)({
393
- padding: padding
394
- });
395
- const hasHeader = Boolean(title || icon || badge || actions);
396
- return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $58aab48c7cf09ac0$export$ffd8d1a491a618f2), {
397
- className: (0, $5DxI1$cx)(styles.root, className),
398
- ...otherProps,
399
- testId: testId,
400
- header: hasHeader && /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
401
- alignItems: "center",
402
- className: (0, $5DxI1$cx)(styles.header)
403
- }, title && /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
404
- as: "header",
405
- flexGrow: 1
406
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Heading), {
407
- marginBottom: "none"
408
- }, title)), icon && /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
409
- alignItems: "center",
410
- marginLeft: "spacingXs"
411
- }, icon), badge && /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
412
- alignItems: "center",
413
- marginLeft: "spacingXs"
414
- }, badge), actions && /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $c83d23d1a559d33c$export$9b6a647253f61c5f), null, actions)),
415
- ref: forwardedRef
416
- });
417
- }
418
- $cce5018d103477ad$var$_Card.displayName = "Card";
419
- const $cce5018d103477ad$export$60332b2344f7fe41 = /*#__PURE__*/ (0, $5DxI1$forwardRef)($cce5018d103477ad$var$_Card);
420
-
421
-
422
-
423
-
424
-
425
-
426
-
427
-
428
-
429
-
430
-
431
-
432
- const $163f0b3a3660f6d4$export$25b6e8fb8b7b795b = ()=>{
433
- return {
434
- actionsButton: /*#__PURE__*/ (0, $5DxI1$css)({
435
- borderBottomLeftRadius: 0,
436
- borderBottomRightRadius: 0,
437
- borderTopLeftRadius: 0,
438
- borderTopRightRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium
439
- }),
440
- content: (size)=>/*#__PURE__*/ (0, $5DxI1$css)({
441
- gridColumn: "content",
442
- marginTop: size === "small" ? (0, $5DxI1$contentfulf36tokens).spacingXs : (0, $5DxI1$contentfulf36tokens).spacingS,
443
- marginBottom: size === "small" ? `calc(-1 * ${(0, $5DxI1$contentfulf36tokens).spacingXs})` : 0
444
- }),
445
- root: /*#__PURE__*/ (0, $5DxI1$css)({
446
- padding: 0,
447
- '[data-card-part="content"]': {
448
- paddingBottom: (0, $5DxI1$contentfulf36tokens).spacingM,
449
- paddingLeft: (0, $5DxI1$contentfulf36tokens).spacingM,
450
- paddingRight: (0, $5DxI1$contentfulf36tokens).spacingM
451
- }
452
- }),
453
- header: /*#__PURE__*/ (0, $5DxI1$css)({
454
- borderBottomWidth: 1,
455
- borderBottomColor: (0, $5DxI1$contentfulf36tokens).gray200,
456
- borderBottomStyle: "solid",
457
- minHeight: "auto",
458
- paddingBottom: (0, $5DxI1$contentfulf36tokens).spacingXs,
459
- paddingLeft: (0, $5DxI1$contentfulf36tokens).spacingM,
460
- paddingRight: (0, $5DxI1$contentfulf36tokens).spacingXs
461
- }),
462
- thumbnail: (size)=>/*#__PURE__*/ (0, $5DxI1$css)({
463
- margin: `0 0 0 ${(0, $5DxI1$contentfulf36tokens).spacingS}`,
464
- padding: 0,
465
- overflow: "hidden",
466
- position: "relative",
467
- img: {
468
- width: "100%",
469
- height: "100%",
470
- objectFit: "cover",
471
- position: "absolute",
472
- zIndex: 1
473
- },
474
- ...size === "small" ? {
475
- height: "40px",
476
- width: "40px"
477
- } : {
478
- height: "70px",
479
- width: "70px"
480
- }
481
- })
482
- };
483
- };
484
-
485
-
486
- const $b207f531c43dcc46$var$ENTRY_CARD_DEFAULT_TAG = "article";
487
- function $b207f531c43dcc46$var$EntryCardTitle({ title: title , titleTag: titleTag }) {
488
- if (!title) return null;
489
- const truncatedTitle = (0, $5DxI1$truncate)(title, 255, {});
490
- return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Subheading), {
491
- title: title.length > 255 ? title : "",
492
- testId: "title",
493
- as: titleTag,
494
- marginBottom: "none",
495
- isWordBreak: true
496
- }, truncatedTitle);
497
- }
498
- $b207f531c43dcc46$var$EntryCardTitle.displayName = "EntryCardTitle";
499
- function $b207f531c43dcc46$var$EntryCardDescription({ description: description , size: size }) {
500
- if (!description || size === "small") return null;
501
- const truncatedDescription = (0, $5DxI1$truncate)(description, 95, {});
502
- return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Paragraph), {
503
- marginBottom: "none",
504
- isWordBreak: true
505
- }, truncatedDescription);
506
- }
507
- $b207f531c43dcc46$var$EntryCardDescription.displayName = "EntryCardDescription";
508
- function $b207f531c43dcc46$var$_EntryCard({ actions: actions , children: children , className: className , src: src , status: status , thumbnailElement: thumbnailElement , description: description , withDragHandle: withDragHandle = false , title: title , titleTag: titleTag = "h2" , size: size , testId: testId = "cf-ui-entry-card" , contentType: contentType , ...otherProps }, forwardedRef) {
509
- const styles = (0, $163f0b3a3660f6d4$export$25b6e8fb8b7b795b)();
510
- const badge = status ? /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$EntityStatusBadge), {
511
- entityStatus: status
512
- }) : null;
513
- return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $58aab48c7cf09ac0$export$ffd8d1a491a618f2), {
514
- as: $b207f531c43dcc46$var$ENTRY_CARD_DEFAULT_TAG,
515
- ...otherProps,
516
- actions: actions,
517
- badge: badge,
518
- className: (0, $5DxI1$cx)(styles.root, className),
519
- withDragHandle: withDragHandle,
520
- ref: forwardedRef,
521
- type: contentType,
522
- testId: testId
523
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
524
- alignItems: "center",
525
- className: styles.content(size),
526
- flexDirection: "row"
527
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Flex), {
528
- flexDirection: "column",
529
- flexGrow: 1,
530
- gap: "spacingS"
531
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement($b207f531c43dcc46$var$EntryCardTitle, {
532
- title: title,
533
- titleTag: titleTag
534
- }), /*#__PURE__*/ (0, $5DxI1$react).createElement($b207f531c43dcc46$var$EntryCardDescription, {
535
- size: size,
536
- description: description
537
- }), children), thumbnailElement && size !== "small" && /*#__PURE__*/ (0, $5DxI1$react).createElement("figure", {
538
- className: styles.thumbnail(size)
539
- }, thumbnailElement)));
540
- }
541
- $b207f531c43dcc46$var$_EntryCard.displayName = "EntryCard";
542
- const $b207f531c43dcc46$export$326973e3eb2dbf = /*#__PURE__*/ (0, $5DxI1$forwardRef)($b207f531c43dcc46$var$_EntryCard);
543
-
544
-
545
-
546
-
547
-
548
-
549
-
550
-
551
-
552
-
553
-
554
-
555
- const $7025bd74e0f685d1$export$ccfc6dbdba6183be = ()=>{
556
- return {
557
- actions: /*#__PURE__*/ (0, $5DxI1$css)({
558
- display: "flex",
559
- padding: 0,
560
- marginLeft: (0, $5DxI1$contentfulf36tokens).spacingXs,
561
- minHeight: "auto"
562
- }),
563
- root: ({ status: status })=>{
564
- const statusColors = (0, $5DxI1$getEntityStatusStyles)({
565
- status: status
566
- });
567
- return /*#__PURE__*/ (0, $5DxI1$css)({
568
- borderBottomLeftRadius: 0,
569
- borderTopLeftRadius: 0,
570
- display: "inline-flex",
571
- width: "auto",
572
- verticalAlign: "middle",
573
- paddingBottom: 0,
574
- paddingTop: 0,
575
- paddingLeft: (0, $5DxI1$contentfulf36tokens).spacingS,
576
- paddingRight: (0, $5DxI1$contentfulf36tokens).spacing2Xs,
577
- '[data-card-part="wrapper"]': {
578
- display: "inline-flex",
579
- flexDirection: "row-reverse"
580
- },
581
- "&::before": {
582
- backgroundColor: statusColors.color,
583
- bottom: 0,
584
- content: '""',
585
- display: "block",
586
- left: 0,
587
- position: "absolute",
588
- top: 0,
589
- width: (0, $5DxI1$contentfulf36tokens).spacing2Xs
590
- }
591
- });
592
- },
593
- skeleton: /*#__PURE__*/ (0, $5DxI1$css)({
594
- display: "inline-flex",
595
- border: `1px solid ${(0, $5DxI1$contentfulf36tokens).gray300}`,
596
- borderTopRightRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
597
- borderBottomRightRadius: (0, $5DxI1$contentfulf36tokens).borderRadiusMedium,
598
- padding: (0, $5DxI1$contentfulf36tokens).spacingXs
599
- })
600
- };
601
- };
602
-
603
-
604
-
605
- const $80460818031cae79$export$94c16395f9ec3265 = ({ actions: actions , className: className , children: children , status: status , title: title , isLoading: isLoading , testId: testId = "cf-ui-inline-entry-card" , ...otherProps })=>{
606
- const styles = (0, $7025bd74e0f685d1$export$ccfc6dbdba6183be)();
607
- const header = /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $c83d23d1a559d33c$export$9b6a647253f61c5f), {
608
- buttonProps: {
609
- className: styles.actions
610
- }
611
- }, actions);
612
- if (isLoading) return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Skeleton).Container, {
613
- className: styles.skeleton,
614
- svgHeight: "1.25rem",
615
- svgWidth: "6rem"
616
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Skeleton).BodyText, {
617
- numberOfLines: 1
618
- }));
619
- return /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Tooltip), {
620
- placement: "bottom",
621
- content: title
622
- }, /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $58aab48c7cf09ac0$export$ffd8d1a491a618f2), {
623
- ...otherProps,
624
- className: (0, $5DxI1$cx)(styles.root({
625
- status: status
626
- }), className),
627
- header: header,
628
- testId: testId
629
- }, children || /*#__PURE__*/ (0, $5DxI1$react).createElement((0, $5DxI1$Text), null, title)));
630
- };
631
-
632
-
633
-
634
-
635
-
636
- export {$e5307476578213bc$export$eff93e4e59ccc3b8 as AssetCard, $cce5018d103477ad$export$60332b2344f7fe41 as Card, $b207f531c43dcc46$export$326973e3eb2dbf as EntryCard, $80460818031cae79$export$94c16395f9ec3265 as InlineEntryCard};
637
- //# sourceMappingURL=module.js.map