@contentful/f36-entity-list 4.12.0 → 4.15.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 +45 -0
- package/dist/main.js +91 -94
- package/dist/main.js.map +1 -1
- package/dist/module.js +91 -94
- package/dist/module.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,50 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 4.15.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`647c849e`](https://github.com/contentful/forma-36/commit/647c849e30891f65be401e95d2ae45b5a715da36)]:
|
|
8
|
+
- @contentful/f36-icon@4.15.0
|
|
9
|
+
- @contentful/f36-badge@4.15.0
|
|
10
|
+
- @contentful/f36-button@4.15.0
|
|
11
|
+
- @contentful/f36-drag-handle@4.15.0
|
|
12
|
+
- @contentful/f36-icons@4.15.0
|
|
13
|
+
- @contentful/f36-menu@4.15.0
|
|
14
|
+
- @contentful/f36-skeleton@4.15.0
|
|
15
|
+
- @contentful/f36-typography@4.15.0
|
|
16
|
+
- @contentful/f36-core@4.15.0
|
|
17
|
+
|
|
18
|
+
## 4.14.0
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies []:
|
|
23
|
+
- @contentful/f36-badge@4.14.0
|
|
24
|
+
- @contentful/f36-button@4.14.0
|
|
25
|
+
- @contentful/f36-drag-handle@4.14.0
|
|
26
|
+
- @contentful/f36-icon@4.14.0
|
|
27
|
+
- @contentful/f36-icons@4.14.0
|
|
28
|
+
- @contentful/f36-menu@4.14.0
|
|
29
|
+
- @contentful/f36-skeleton@4.14.0
|
|
30
|
+
- @contentful/f36-typography@4.14.0
|
|
31
|
+
- @contentful/f36-core@4.14.0
|
|
32
|
+
|
|
33
|
+
## 4.13.0
|
|
34
|
+
|
|
35
|
+
### Patch Changes
|
|
36
|
+
|
|
37
|
+
- Updated dependencies []:
|
|
38
|
+
- @contentful/f36-badge@4.13.0
|
|
39
|
+
- @contentful/f36-button@4.13.0
|
|
40
|
+
- @contentful/f36-drag-handle@4.13.0
|
|
41
|
+
- @contentful/f36-icon@4.13.0
|
|
42
|
+
- @contentful/f36-icons@4.13.0
|
|
43
|
+
- @contentful/f36-menu@4.13.0
|
|
44
|
+
- @contentful/f36-skeleton@4.13.0
|
|
45
|
+
- @contentful/f36-typography@4.13.0
|
|
46
|
+
- @contentful/f36-core@4.13.0
|
|
47
|
+
|
|
3
48
|
## 4.12.0
|
|
4
49
|
|
|
5
50
|
### Patch Changes
|
package/dist/main.js
CHANGED
|
@@ -25,31 +25,30 @@ $parcel$export(module.exports, "EntityListItem", () => $3f4d63406b2f6561$export$
|
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
const $e3aba86fc342822d$export$2b0a239870ba448d = ()=>({
|
|
28
|
-
root: /*#__PURE__*/ $hadoL$emotion.css({
|
|
29
|
-
display:
|
|
30
|
-
listStyle:
|
|
28
|
+
root: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
29
|
+
display: "block",
|
|
30
|
+
listStyle: "none",
|
|
31
31
|
margin: 0,
|
|
32
32
|
padding: 0,
|
|
33
|
-
border: `1px solid ${($parcel$interopDefault($hadoL$contentfulf36tokens)).gray200}`,
|
|
34
|
-
borderBottom:
|
|
35
|
-
borderRadius: ($parcel$interopDefault($hadoL$contentfulf36tokens)).borderRadiusMedium,
|
|
36
|
-
overflow:
|
|
33
|
+
border: `1px solid ${(0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).gray200}`,
|
|
34
|
+
borderBottom: "none",
|
|
35
|
+
borderRadius: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).borderRadiusMedium,
|
|
36
|
+
overflow: "hidden"
|
|
37
37
|
})
|
|
38
|
-
})
|
|
39
|
-
;
|
|
38
|
+
});
|
|
40
39
|
|
|
41
40
|
|
|
42
41
|
function $42fa390001ac865a$var$_EntityList(props, ref) {
|
|
43
|
-
const styles = $e3aba86fc342822d$export$2b0a239870ba448d();
|
|
44
|
-
return /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("ul", {
|
|
45
|
-
"data-test-id": props.testId ||
|
|
42
|
+
const styles = (0, $e3aba86fc342822d$export$2b0a239870ba448d)();
|
|
43
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement("ul", {
|
|
44
|
+
"data-test-id": props.testId || "cf-ui-entity-list",
|
|
46
45
|
ref: ref,
|
|
47
|
-
className: $hadoL$emotion.cx(styles.root, props.className),
|
|
46
|
+
className: (0, $hadoL$emotion.cx)(styles.root, props.className),
|
|
48
47
|
style: props.style
|
|
49
48
|
}, props.children);
|
|
50
49
|
}
|
|
51
|
-
$42fa390001ac865a$var$_EntityList.displayName =
|
|
52
|
-
const $42fa390001ac865a$export$8bb466c13870163e = /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).forwardRef($42fa390001ac865a$var$_EntityList);
|
|
50
|
+
$42fa390001ac865a$var$_EntityList.displayName = "EntityList";
|
|
51
|
+
const $42fa390001ac865a$export$8bb466c13870163e = /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).forwardRef($42fa390001ac865a$var$_EntityList);
|
|
53
52
|
|
|
54
53
|
|
|
55
54
|
|
|
@@ -64,170 +63,168 @@ const $42fa390001ac865a$export$8bb466c13870163e = /*#__PURE__*/ ($parcel$interop
|
|
|
64
63
|
|
|
65
64
|
|
|
66
65
|
const $07bceb135ccb0944$export$3bb342229d68a121 = ()=>({
|
|
67
|
-
root: (props)=>/*#__PURE__*/ $hadoL$emotion.css({
|
|
68
|
-
display:
|
|
69
|
-
boxShadow: `inset 0 -1px 0 ${($parcel$interopDefault($hadoL$contentfulf36tokens)).gray200}`,
|
|
70
|
-
position:
|
|
71
|
-
transition: `${($parcel$interopDefault($hadoL$contentfulf36tokens)).transitionDurationShort} ${($parcel$interopDefault($hadoL$contentfulf36tokens)).transitionEasingDefault}`,
|
|
72
|
-
transitionProperty:
|
|
73
|
-
backgroundColor: ($parcel$interopDefault($hadoL$contentfulf36tokens)).colorWhite,
|
|
66
|
+
root: (props)=>/*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
67
|
+
display: "flex",
|
|
68
|
+
boxShadow: `inset 0 -1px 0 ${(0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).gray200}`,
|
|
69
|
+
position: "relative",
|
|
70
|
+
transition: `${(0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).transitionDurationShort} ${(0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).transitionEasingDefault}`,
|
|
71
|
+
transitionProperty: "box-shadow, background-color",
|
|
72
|
+
backgroundColor: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).colorWhite,
|
|
74
73
|
...props.isDragActive ? {
|
|
75
|
-
boxShadow: ($parcel$interopDefault($hadoL$contentfulf36tokens)).boxShadowHeavy
|
|
74
|
+
boxShadow: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).boxShadowHeavy
|
|
76
75
|
} : {},
|
|
77
|
-
|
|
78
|
-
backgroundColor: ($parcel$interopDefault($hadoL$contentfulf36tokens)).gray100
|
|
76
|
+
"&:hover": {
|
|
77
|
+
backgroundColor: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).gray100
|
|
79
78
|
}
|
|
80
|
-
})
|
|
81
|
-
,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
textAlign: 'left'
|
|
79
|
+
}),
|
|
80
|
+
card: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
81
|
+
display: "flex",
|
|
82
|
+
textDecoration: "none",
|
|
83
|
+
width: "100%",
|
|
84
|
+
minHeight: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).spacing3Xl,
|
|
85
|
+
padding: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).spacingXs,
|
|
86
|
+
border: "none",
|
|
87
|
+
background: "none",
|
|
88
|
+
textAlign: "left"
|
|
91
89
|
}),
|
|
92
|
-
content: /*#__PURE__*/ $hadoL$emotion.css({
|
|
90
|
+
content: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
93
91
|
name: "15ync0s",
|
|
94
92
|
styles: "flex-grow:1;min-width:0;"
|
|
95
93
|
}),
|
|
96
|
-
media: /*#__PURE__*/ $hadoL$emotion.css({
|
|
97
|
-
display:
|
|
94
|
+
media: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
95
|
+
display: "flex",
|
|
98
96
|
flexShrink: 0,
|
|
99
|
-
alignItems:
|
|
100
|
-
justifyContent:
|
|
101
|
-
backgroundColor: ($parcel$interopDefault($hadoL$contentfulf36tokens)).gray200,
|
|
102
|
-
width: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacing2Xl,
|
|
103
|
-
height: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacing2Xl,
|
|
104
|
-
margin:
|
|
105
|
-
marginRight: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacingXs
|
|
97
|
+
alignItems: "center",
|
|
98
|
+
justifyContent: "center",
|
|
99
|
+
backgroundColor: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).gray200,
|
|
100
|
+
width: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).spacing2Xl,
|
|
101
|
+
height: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).spacing2Xl,
|
|
102
|
+
margin: "0",
|
|
103
|
+
marginRight: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).spacingXs
|
|
106
104
|
}),
|
|
107
|
-
thumbnail: /*#__PURE__*/ $hadoL$emotion.css({
|
|
105
|
+
thumbnail: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
108
106
|
name: "12qah06",
|
|
109
107
|
styles: "display:block;width:100%;height:100%;object-fit:cover;"
|
|
110
108
|
}),
|
|
111
|
-
contentType: /*#__PURE__*/ $hadoL$emotion.css({
|
|
112
|
-
marginLeft: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacingXs
|
|
109
|
+
contentType: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
110
|
+
marginLeft: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).spacingXs
|
|
113
111
|
}),
|
|
114
|
-
description: /*#__PURE__*/ $hadoL$emotion.css({
|
|
115
|
-
marginTop: ($parcel$interopDefault($hadoL$contentfulf36tokens)).spacing2Xs
|
|
112
|
+
description: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
113
|
+
marginTop: (0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).spacing2Xs
|
|
116
114
|
}),
|
|
117
|
-
meta: /*#__PURE__*/ $hadoL$emotion.css({
|
|
115
|
+
meta: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
118
116
|
name: "1n0gfod",
|
|
119
117
|
styles: "margin-left:auto;flex-shrink:0;"
|
|
120
118
|
}),
|
|
121
|
-
dragHandle: /*#__PURE__*/ $hadoL$emotion.css({
|
|
122
|
-
borderBottomLeftRadius:
|
|
123
|
-
borderTopLeftRadius:
|
|
124
|
-
boxShadow: `inset 0 -1px 0 ${($parcel$interopDefault($hadoL$contentfulf36tokens)).gray200}`
|
|
119
|
+
dragHandle: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
120
|
+
borderBottomLeftRadius: "0",
|
|
121
|
+
borderTopLeftRadius: "0",
|
|
122
|
+
boxShadow: `inset 0 -1px 0 ${(0, ($parcel$interopDefault($hadoL$contentfulf36tokens))).gray200}`
|
|
125
123
|
}),
|
|
126
|
-
menuTrigger: /*#__PURE__*/ $hadoL$emotion.css({
|
|
124
|
+
menuTrigger: /*#__PURE__*/ (0, $hadoL$emotion.css)({
|
|
127
125
|
name: "c1v07n",
|
|
128
126
|
styles: "padding:0 0.125rem;min-height:1.5rem;"
|
|
129
127
|
})
|
|
130
|
-
})
|
|
131
|
-
;
|
|
128
|
+
});
|
|
132
129
|
|
|
133
130
|
|
|
134
131
|
|
|
135
132
|
|
|
136
133
|
const $3f4d63406b2f6561$var$ICON_MAP = {
|
|
137
|
-
asset: $hadoL$contentfulf36icons.AssetIcon,
|
|
138
|
-
entry: $hadoL$contentfulf36icons.EntryIcon,
|
|
139
|
-
release: $hadoL$contentfulf36icons.ReleaseIcon
|
|
134
|
+
asset: (0, $hadoL$contentfulf36icons.AssetIcon),
|
|
135
|
+
entry: (0, $hadoL$contentfulf36icons.EntryIcon),
|
|
136
|
+
release: (0, $hadoL$contentfulf36icons.ReleaseIcon)
|
|
140
137
|
};
|
|
141
|
-
const $3f4d63406b2f6561$export$65b9c70c5f42a158 = ({ className: className , testId: testId =
|
|
142
|
-
const styles = $07bceb135ccb0944$export$3bb342229d68a121();
|
|
138
|
+
const $3f4d63406b2f6561$export$65b9c70c5f42a158 = ({ className: className , testId: testId = "cf-ui-entity-list-item" , title: title , description: description , contentType: contentType , entityType: entityType = "entry" , withThumbnail: withThumbnail = true , thumbnailUrl: thumbnailUrl , thumbnailAltText: thumbnailAltText , status: status , actions: actions , withDragHandle: withDragHandle , isDragActive: isDragActive , isLoading: isLoading , onClick: onClick , href: href , cardDragHandleProps: cardDragHandleProps , cardDragHandleComponent: cardDragHandleComponent , isActionsDisabled: isActionsDisabled = false , ...otherProps })=>{
|
|
139
|
+
const styles = (0, $07bceb135ccb0944$export$3bb342229d68a121)();
|
|
143
140
|
const renderCardDragHandle = ()=>{
|
|
144
141
|
if (cardDragHandleComponent) return cardDragHandleComponent;
|
|
145
|
-
else if (withDragHandle) return /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36draghandle.DragHandle, {
|
|
142
|
+
else if (withDragHandle) return /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36draghandle.DragHandle), {
|
|
146
143
|
className: styles.dragHandle,
|
|
147
144
|
isActive: isDragActive,
|
|
148
145
|
label: "Reorder entry",
|
|
149
146
|
...cardDragHandleProps
|
|
150
147
|
});
|
|
151
148
|
};
|
|
152
|
-
let Element =
|
|
153
|
-
if (href || onClick) Element = href ?
|
|
149
|
+
let Element = "article";
|
|
150
|
+
if (href || onClick) Element = href ? "a" : "button";
|
|
154
151
|
// archived assets will not be available on the CDN, resulting in a broken image src
|
|
155
|
-
const isArchived = status ===
|
|
152
|
+
const isArchived = status === "archived";
|
|
156
153
|
const asIcon = isArchived || !thumbnailUrl;
|
|
157
|
-
return /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("li", {
|
|
154
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement("li", {
|
|
158
155
|
...otherProps,
|
|
159
|
-
className: $hadoL$emotion.cx(styles.root({
|
|
156
|
+
className: (0, $hadoL$emotion.cx)(styles.root({
|
|
160
157
|
isDragActive: isDragActive
|
|
161
158
|
}), className),
|
|
162
159
|
"data-test-id": testId
|
|
163
|
-
}, renderCardDragHandle(), isLoading ? /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("article", {
|
|
160
|
+
}, renderCardDragHandle(), isLoading ? /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement("article", {
|
|
164
161
|
className: styles.card
|
|
165
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36skeleton.SkeletonContainer, {
|
|
162
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36skeleton.SkeletonContainer), {
|
|
166
163
|
clipId: "f36-entity-list-item-skeleton"
|
|
167
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36skeleton.SkeletonImage, {
|
|
164
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36skeleton.SkeletonImage), {
|
|
168
165
|
height: 46,
|
|
169
166
|
width: 46
|
|
170
|
-
}), /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36skeleton.SkeletonBodyText, {
|
|
167
|
+
}), /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36skeleton.SkeletonBodyText), {
|
|
171
168
|
numberOfLines: 2,
|
|
172
169
|
lineHeight: 18,
|
|
173
170
|
offsetLeft: 54
|
|
174
|
-
}))) : /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement(Element, {
|
|
171
|
+
}))) : /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement(Element, {
|
|
175
172
|
className: styles.card,
|
|
176
173
|
onClick: onClick,
|
|
177
174
|
href: href,
|
|
178
|
-
type: Element ===
|
|
179
|
-
target: href ?
|
|
180
|
-
}, withThumbnail && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("figure", {
|
|
175
|
+
type: Element === "button" ? "button" : undefined,
|
|
176
|
+
target: href ? "_blank" : undefined
|
|
177
|
+
}, withThumbnail && /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement("figure", {
|
|
181
178
|
className: styles.media
|
|
182
|
-
}, asIcon ? /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36icon.Icon, {
|
|
179
|
+
}, asIcon ? /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36icon.Icon), {
|
|
183
180
|
as: $3f4d63406b2f6561$var$ICON_MAP[entityType.toLowerCase()],
|
|
184
181
|
variant: "muted"
|
|
185
|
-
}) : /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("img", {
|
|
182
|
+
}) : /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement("img", {
|
|
186
183
|
src: thumbnailUrl,
|
|
187
184
|
className: styles.thumbnail,
|
|
188
185
|
alt: thumbnailAltText
|
|
189
|
-
})), /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement("div", {
|
|
186
|
+
})), /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement("div", {
|
|
190
187
|
className: styles.content
|
|
191
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36core.Flex, null, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36typography.Text, {
|
|
188
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36core.Flex), null, /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36typography.Text), {
|
|
192
189
|
as: "h3",
|
|
193
190
|
lineHeight: "lineHeightM",
|
|
194
191
|
fontColor: "gray900",
|
|
195
192
|
fontWeight: "fontWeightDemiBold",
|
|
196
193
|
isTruncated: true
|
|
197
|
-
}, title), contentType && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36typography.Text, {
|
|
194
|
+
}, title), contentType && /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36typography.Text), {
|
|
198
195
|
as: "span",
|
|
199
196
|
lineHeight: "lineHeightM",
|
|
200
197
|
fontColor: "gray600",
|
|
201
198
|
className: styles.contentType,
|
|
202
199
|
isTruncated: true
|
|
203
|
-
}, "(", contentType, ")")), description && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36typography.Text, {
|
|
200
|
+
}, "(", contentType, ")")), description && /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36typography.Text), {
|
|
204
201
|
as: "p",
|
|
205
202
|
lineHeight: "lineHeightM",
|
|
206
203
|
fontColor: "gray900",
|
|
207
204
|
isTruncated: true,
|
|
208
205
|
className: styles.description
|
|
209
|
-
}, description)), /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36core.Flex, {
|
|
206
|
+
}, description)), /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36core.Flex), {
|
|
210
207
|
className: styles.meta,
|
|
211
208
|
alignItems: "flex-start",
|
|
212
209
|
paddingLeft: "spacingXs"
|
|
213
|
-
}, status && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36core.Box, {
|
|
214
|
-
marginRight: actions ?
|
|
215
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36badge.EntityStatusBadge, {
|
|
210
|
+
}, status && /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36core.Box), {
|
|
211
|
+
marginRight: actions ? "spacingXs" : "none"
|
|
212
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36badge.EntityStatusBadge), {
|
|
216
213
|
entityStatus: status
|
|
217
|
-
})), actions && /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36menu.Menu, null, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36menu.Menu.Trigger, null, /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36button.Button, {
|
|
214
|
+
})), actions && /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36menu.Menu), null, /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36menu.Menu).Trigger, null, /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36button.Button), {
|
|
218
215
|
isDisabled: isActionsDisabled,
|
|
219
|
-
startIcon: /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36icons.MoreHorizontalIcon, null),
|
|
216
|
+
startIcon: /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36icons.MoreHorizontalIcon), null),
|
|
220
217
|
variant: "transparent",
|
|
221
218
|
"aria-label": "Actions",
|
|
222
219
|
size: "small",
|
|
223
220
|
className: styles.menuTrigger
|
|
224
|
-
})), /*#__PURE__*/ ($parcel$interopDefault($hadoL$react)).createElement($hadoL$contentfulf36menu.Menu.List, null, actions)))));
|
|
221
|
+
})), /*#__PURE__*/ (0, ($parcel$interopDefault($hadoL$react))).createElement((0, $hadoL$contentfulf36menu.Menu).List, null, actions)))));
|
|
225
222
|
};
|
|
226
|
-
$3f4d63406b2f6561$export$65b9c70c5f42a158.displayName =
|
|
223
|
+
$3f4d63406b2f6561$export$65b9c70c5f42a158.displayName = "EntityListItem";
|
|
227
224
|
|
|
228
225
|
|
|
229
|
-
const $e853778315da5e40$export$8bb466c13870163e = $42fa390001ac865a$export$8bb466c13870163e;
|
|
230
|
-
$e853778315da5e40$export$8bb466c13870163e.Item = $3f4d63406b2f6561$export$65b9c70c5f42a158;
|
|
226
|
+
const $e853778315da5e40$export$8bb466c13870163e = (0, $42fa390001ac865a$export$8bb466c13870163e);
|
|
227
|
+
$e853778315da5e40$export$8bb466c13870163e.Item = (0, $3f4d63406b2f6561$export$65b9c70c5f42a158);
|
|
231
228
|
|
|
232
229
|
|
|
233
230
|
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/components/entity-list/src/index.ts","packages/components/entity-list/src/CompoundEntityList.tsx","packages/components/entity-list/src/EntityList.tsx","packages/components/entity-list/src/EntityList.styles.ts","packages/components/entity-list/src/EntityListItem/EntityListItem.tsx","packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts"],"sourcesContent":["export { EntityList } from './CompoundEntityList';\nexport type { EntityListProps } from './EntityList';\nexport { EntityListItem } from './EntityListItem/EntityListItem';\nexport type { EntityListItemProps } from './EntityListItem/EntityListItem';\n","import { EntityList as OriginalEntityList } from './EntityList';\nimport { EntityListItem } from './EntityListItem/EntityListItem';\n\ntype CompoundEntityList = typeof OriginalEntityList & {\n Item: typeof EntityListItem;\n};\n\nexport const EntityList = OriginalEntityList as CompoundEntityList;\nEntityList.Item = EntityListItem;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getEntityListStyles } from './EntityList.styles';\n\nexport interface EntityListProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nfunction _EntityList(\n props: ExpandProps<EntityListProps>,\n ref: React.Ref<HTMLUListElement>,\n) {\n const styles = getEntityListStyles();\n\n return (\n <ul\n data-test-id={props.testId || 'cf-ui-entity-list'}\n ref={ref}\n className={cx(styles.root, props.className)}\n style={props.style}\n >\n {props.children}\n </ul>\n );\n}\n\n_EntityList.displayName = 'EntityList';\n\nexport const EntityList = React.forwardRef(_EntityList);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getEntityListStyles = () => ({\n root: css({\n display: 'block',\n listStyle: 'none',\n margin: 0,\n padding: 0,\n border: `1px solid ${tokens.gray200}`,\n borderBottom: 'none',\n borderRadius: tokens.borderRadiusMedium,\n overflow: 'hidden',\n }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { MouseEventHandler } from 'react';\n\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport type {\n CommonProps,\n EntityStatus,\n PickUnion,\n} from '@contentful/f36-core';\nimport {\n AssetIcon,\n EntryIcon,\n ReleaseIcon,\n MoreHorizontalIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle } from '@contentful/f36-drag-handle';\nimport type { DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex, Box } from '@contentful/f36-core';\n\ntype EntityListItemStatus = PickUnion<\n EntityStatus,\n 'archived' | 'changed' | 'draft' | 'published'\n>;\n\nconst ICON_MAP = {\n asset: AssetIcon,\n entry: EntryIcon,\n release: ReleaseIcon,\n};\n\nexport interface EntityListItemProps extends CommonProps {\n /**\n * The title of the entity\n */\n title: string;\n /**\n * The description of the entity\n */\n description?: string;\n /**\n * The content type of the entity\n */\n contentType?: string;\n /**\n * The publish status of the entry\n */\n status?: EntityListItemStatus;\n /**\n * A boolean used to render the Thumbnail or not\n */\n withThumbnail?: boolean;\n /**\n * The URL of the entity's preview thumbnail. Use 46px x 46px images for best results\n */\n thumbnailUrl?: string;\n /**\n * The alt text for the thumbnail\n */\n thumbnailAltText?: string;\n /**\n * Menu elements rendered as actions in Menu\n */\n actions?: React.ReactNodeArray;\n /**\n * Renders a drag handle for the component for use in drag and drop contexts\n */\n withDragHandle?: boolean;\n /**\n * Applies styling for when the component is actively being dragged by the user\n */\n isDragActive?: boolean;\n /**\n * Prop to pass a custom CardDragHandle component to for use in drag and drop contexts\n */\n cardDragHandleComponent?: React.ReactNode;\n /**\n * Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)\n */\n cardDragHandleProps?: Partial<DragHandleProps>;\n /**\n * An entity can either be an Entry, an Asset or a Release. This prop will apply styling based on if the entity is an asset, a release or an entry\n *\n * Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility\n */\n entityType?: 'Entry' | 'Asset' | 'entry' | 'asset' | 'Release';\n /**\n * Loading state for the component - when true will display loading feedback to the user\n */\n isLoading?: boolean;\n /**\n * The action to be performed on click of the EntryCard\n */\n onClick?: MouseEventHandler;\n /**\n * The href for the component. Will render the card as an `a` element for native browser link handling\n */\n href?: string;\n /**\n * A boolean used to disable the CardActions\n */\n isActionsDisabled?: boolean;\n}\n\nexport const EntityListItem = ({\n className,\n testId = 'cf-ui-entity-list-item',\n title,\n description,\n contentType,\n entityType = 'entry',\n withThumbnail = true,\n thumbnailUrl,\n thumbnailAltText,\n status,\n actions,\n withDragHandle,\n isDragActive,\n isLoading,\n onClick,\n href,\n cardDragHandleProps,\n cardDragHandleComponent,\n isActionsDisabled = false,\n ...otherProps\n}: EntityListItemProps): React.ReactElement => {\n const styles = getEntityListItemStyles();\n\n const renderCardDragHandle = () => {\n if (cardDragHandleComponent) {\n return cardDragHandleComponent;\n } else if (withDragHandle) {\n return (\n <DragHandle\n className={styles.dragHandle}\n isActive={isDragActive}\n label=\"Reorder entry\"\n {...cardDragHandleProps}\n />\n );\n }\n };\n\n let Element: React.ElementType = 'article';\n if (href || onClick) {\n Element = href ? 'a' : 'button';\n }\n\n // archived assets will not be available on the CDN, resulting in a broken image src\n const isArchived = status === 'archived';\n const asIcon = isArchived || !thumbnailUrl;\n\n return (\n <li\n {...otherProps}\n className={cx(styles.root({ isDragActive }), className)}\n data-test-id={testId}\n >\n {renderCardDragHandle()}\n {isLoading ? (\n <article className={styles.card}>\n <SkeletonContainer clipId=\"f36-entity-list-item-skeleton\">\n <SkeletonImage height={46} width={46} />\n <SkeletonBodyText\n numberOfLines={2}\n lineHeight={18}\n offsetLeft={54}\n />\n </SkeletonContainer>\n </article>\n ) : (\n <Element\n className={styles.card}\n onClick={onClick}\n href={href}\n type={Element === 'button' ? 'button' : undefined}\n target={href ? '_blank' : undefined}\n >\n {withThumbnail && (\n <figure className={styles.media}>\n {asIcon ? (\n <Icon as={ICON_MAP[entityType.toLowerCase()]} variant=\"muted\" />\n ) : (\n <img\n src={thumbnailUrl}\n className={styles.thumbnail}\n alt={thumbnailAltText}\n />\n )}\n </figure>\n )}\n\n <div className={styles.content}>\n <Flex>\n <Text\n as=\"h3\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n fontWeight=\"fontWeightDemiBold\"\n isTruncated\n >\n {title}\n </Text>\n\n {contentType && (\n <Text\n as=\"span\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.contentType}\n isTruncated\n >\n ({contentType})\n </Text>\n )}\n </Flex>\n {description && (\n <Text\n as=\"p\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n isTruncated\n className={styles.description}\n >\n {description}\n </Text>\n )}\n </div>\n\n <Flex\n className={styles.meta}\n alignItems=\"flex-start\"\n paddingLeft=\"spacingXs\"\n >\n {status && (\n <Box marginRight={actions ? 'spacingXs' : 'none'}>\n <EntityStatusBadge entityStatus={status} />\n </Box>\n )}\n\n {actions && (\n <Menu>\n <Menu.Trigger>\n <Button\n isDisabled={isActionsDisabled}\n startIcon={<MoreHorizontalIcon />}\n variant=\"transparent\"\n aria-label=\"Actions\"\n size=\"small\"\n className={styles.menuTrigger}\n />\n </Menu.Trigger>\n <Menu.List>{actions}</Menu.List>\n </Menu>\n )}\n </Flex>\n </Element>\n )}\n </li>\n );\n};\n\nEntityListItem.displayName = 'EntityListItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { EntityListItemProps } from './EntityListItem';\n\nexport const getEntityListItemStyles = () => ({\n root: (props: Pick<EntityListItemProps, 'isDragActive'>) =>\n css({\n display: 'flex',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n position: 'relative',\n transition: `${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n transitionProperty: 'box-shadow, background-color',\n backgroundColor: tokens.colorWhite,\n ...(props.isDragActive\n ? {\n boxShadow: tokens.boxShadowHeavy,\n }\n : {}),\n\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n card: css({\n display: 'flex',\n textDecoration: 'none',\n width: '100%',\n minHeight: tokens.spacing3Xl,\n padding: tokens.spacingXs,\n border: 'none',\n background: 'none',\n textAlign: 'left',\n }),\n content: css({\n flexGrow: 1,\n minWidth: 0,\n }),\n media: css({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: tokens.gray200,\n width: tokens.spacing2Xl,\n height: tokens.spacing2Xl,\n margin: '0',\n marginRight: tokens.spacingXs,\n }),\n thumbnail: css({\n display: 'block',\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n }),\n contentType: css({\n marginLeft: tokens.spacingXs,\n }),\n description: css({\n marginTop: tokens.spacing2Xs,\n }),\n meta: css({\n marginLeft: 'auto',\n flexShrink: 0,\n }),\n dragHandle: css({\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n }),\n menuTrigger: css({\n padding: '0 0.125rem',\n minHeight: '1.5rem',\n }),\n});\n"],"names":["EntityList","EntityListProps","EntityListItem","EntityListItemProps","OriginalEntityList","CompoundEntityList","Item","React","CommonProps","ExpandProps","getEntityListStyles","children","ReactNode","_EntityList","props","ref","Ref","HTMLUListElement","styles","testId","root","className","style","displayName","forwardRef","tokens","display","listStyle","margin","padding","border","gray200","borderBottom","borderRadius","borderRadiusMedium","overflow","MouseEventHandler","EntityStatusBadge","EntityStatus","PickUnion","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","Icon","Text","DragHandle","DragHandleProps","Button","Menu","getEntityListItemStyles","SkeletonBodyText","SkeletonContainer","SkeletonImage","Flex","Box","EntityListItemStatus","ICON_MAP","asset","entry","release","title","description","contentType","status","withThumbnail","thumbnailUrl","thumbnailAltText","actions","ReactNodeArray","withDragHandle","isDragActive","cardDragHandleComponent","cardDragHandleProps","Partial","entityType","isLoading","onClick","href","isActionsDisabled","otherProps","ReactElement","renderCardDragHandle","dragHandle","Element","ElementType","isArchived","asIcon","card","undefined","media","toLowerCase","thumbnail","content","meta","menuTrigger","Pick","boxShadow","position","transition","transitionDurationShort","transitionEasingDefault","transitionProperty","backgroundColor","colorWhite","boxShadowHeavy","gray100","textDecoration","width","minHeight","spacing3Xl","spacingXs","background","textAlign","flexShrink","alignItems","justifyContent","spacing2Xl","height","marginRight","marginLeft","marginTop","spacing2Xs","borderBottomLeftRadius","borderTopLeftRadius"],"version":3,"file":"main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/components/entity-list/src/index.ts","packages/components/entity-list/src/CompoundEntityList.tsx","packages/components/entity-list/src/EntityList.tsx","packages/components/entity-list/src/EntityList.styles.ts","packages/components/entity-list/src/EntityListItem/EntityListItem.tsx","packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts"],"sourcesContent":["export { EntityList } from './CompoundEntityList';\nexport type { EntityListProps } from './EntityList';\nexport { EntityListItem } from './EntityListItem/EntityListItem';\nexport type { EntityListItemProps } from './EntityListItem/EntityListItem';\n","import { EntityList as OriginalEntityList } from './EntityList';\nimport { EntityListItem } from './EntityListItem/EntityListItem';\n\ntype CompoundEntityList = typeof OriginalEntityList & {\n Item: typeof EntityListItem;\n};\n\nexport const EntityList = OriginalEntityList as CompoundEntityList;\nEntityList.Item = EntityListItem;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getEntityListStyles } from './EntityList.styles';\n\nexport interface EntityListProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nfunction _EntityList(\n props: ExpandProps<EntityListProps>,\n ref: React.Ref<HTMLUListElement>,\n) {\n const styles = getEntityListStyles();\n\n return (\n <ul\n data-test-id={props.testId || 'cf-ui-entity-list'}\n ref={ref}\n className={cx(styles.root, props.className)}\n style={props.style}\n >\n {props.children}\n </ul>\n );\n}\n\n_EntityList.displayName = 'EntityList';\n\nexport const EntityList = React.forwardRef(_EntityList);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getEntityListStyles = () => ({\n root: css({\n display: 'block',\n listStyle: 'none',\n margin: 0,\n padding: 0,\n border: `1px solid ${tokens.gray200}`,\n borderBottom: 'none',\n borderRadius: tokens.borderRadiusMedium,\n overflow: 'hidden',\n }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { MouseEventHandler } from 'react';\n\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport type {\n CommonProps,\n EntityStatus,\n PickUnion,\n} from '@contentful/f36-core';\nimport {\n AssetIcon,\n EntryIcon,\n ReleaseIcon,\n MoreHorizontalIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle } from '@contentful/f36-drag-handle';\nimport type { DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex, Box } from '@contentful/f36-core';\n\ntype EntityListItemStatus = PickUnion<\n EntityStatus,\n 'archived' | 'changed' | 'draft' | 'published'\n>;\n\nconst ICON_MAP = {\n asset: AssetIcon,\n entry: EntryIcon,\n release: ReleaseIcon,\n};\n\nexport interface EntityListItemProps extends CommonProps {\n /**\n * The title of the entity\n */\n title: string;\n /**\n * The description of the entity\n */\n description?: string;\n /**\n * The content type of the entity\n */\n contentType?: string;\n /**\n * The publish status of the entry\n */\n status?: EntityListItemStatus;\n /**\n * A boolean used to render the Thumbnail or not\n */\n withThumbnail?: boolean;\n /**\n * The URL of the entity's preview thumbnail. Use 46px x 46px images for best results\n */\n thumbnailUrl?: string;\n /**\n * The alt text for the thumbnail\n */\n thumbnailAltText?: string;\n /**\n * Menu elements rendered as actions in Menu\n */\n actions?: React.ReactNodeArray;\n /**\n * Renders a drag handle for the component for use in drag and drop contexts\n */\n withDragHandle?: boolean;\n /**\n * Applies styling for when the component is actively being dragged by the user\n */\n isDragActive?: boolean;\n /**\n * Prop to pass a custom CardDragHandle component to for use in drag and drop contexts\n */\n cardDragHandleComponent?: React.ReactNode;\n /**\n * Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)\n */\n cardDragHandleProps?: Partial<DragHandleProps>;\n /**\n * An entity can either be an Entry, an Asset or a Release. This prop will apply styling based on if the entity is an asset, a release or an entry\n *\n * Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility\n */\n entityType?: 'Entry' | 'Asset' | 'entry' | 'asset' | 'Release';\n /**\n * Loading state for the component - when true will display loading feedback to the user\n */\n isLoading?: boolean;\n /**\n * The action to be performed on click of the EntryCard\n */\n onClick?: MouseEventHandler;\n /**\n * The href for the component. Will render the card as an `a` element for native browser link handling\n */\n href?: string;\n /**\n * A boolean used to disable the CardActions\n */\n isActionsDisabled?: boolean;\n}\n\nexport const EntityListItem = ({\n className,\n testId = 'cf-ui-entity-list-item',\n title,\n description,\n contentType,\n entityType = 'entry',\n withThumbnail = true,\n thumbnailUrl,\n thumbnailAltText,\n status,\n actions,\n withDragHandle,\n isDragActive,\n isLoading,\n onClick,\n href,\n cardDragHandleProps,\n cardDragHandleComponent,\n isActionsDisabled = false,\n ...otherProps\n}: EntityListItemProps): React.ReactElement => {\n const styles = getEntityListItemStyles();\n\n const renderCardDragHandle = () => {\n if (cardDragHandleComponent) {\n return cardDragHandleComponent;\n } else if (withDragHandle) {\n return (\n <DragHandle\n className={styles.dragHandle}\n isActive={isDragActive}\n label=\"Reorder entry\"\n {...cardDragHandleProps}\n />\n );\n }\n };\n\n let Element: React.ElementType = 'article';\n if (href || onClick) {\n Element = href ? 'a' : 'button';\n }\n\n // archived assets will not be available on the CDN, resulting in a broken image src\n const isArchived = status === 'archived';\n const asIcon = isArchived || !thumbnailUrl;\n\n return (\n <li\n {...otherProps}\n className={cx(styles.root({ isDragActive }), className)}\n data-test-id={testId}\n >\n {renderCardDragHandle()}\n {isLoading ? (\n <article className={styles.card}>\n <SkeletonContainer clipId=\"f36-entity-list-item-skeleton\">\n <SkeletonImage height={46} width={46} />\n <SkeletonBodyText\n numberOfLines={2}\n lineHeight={18}\n offsetLeft={54}\n />\n </SkeletonContainer>\n </article>\n ) : (\n <Element\n className={styles.card}\n onClick={onClick}\n href={href}\n type={Element === 'button' ? 'button' : undefined}\n target={href ? '_blank' : undefined}\n >\n {withThumbnail && (\n <figure className={styles.media}>\n {asIcon ? (\n <Icon as={ICON_MAP[entityType.toLowerCase()]} variant=\"muted\" />\n ) : (\n <img\n src={thumbnailUrl}\n className={styles.thumbnail}\n alt={thumbnailAltText}\n />\n )}\n </figure>\n )}\n\n <div className={styles.content}>\n <Flex>\n <Text\n as=\"h3\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n fontWeight=\"fontWeightDemiBold\"\n isTruncated\n >\n {title}\n </Text>\n\n {contentType && (\n <Text\n as=\"span\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.contentType}\n isTruncated\n >\n ({contentType})\n </Text>\n )}\n </Flex>\n {description && (\n <Text\n as=\"p\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n isTruncated\n className={styles.description}\n >\n {description}\n </Text>\n )}\n </div>\n\n <Flex\n className={styles.meta}\n alignItems=\"flex-start\"\n paddingLeft=\"spacingXs\"\n >\n {status && (\n <Box marginRight={actions ? 'spacingXs' : 'none'}>\n <EntityStatusBadge entityStatus={status} />\n </Box>\n )}\n\n {actions && (\n <Menu>\n <Menu.Trigger>\n <Button\n isDisabled={isActionsDisabled}\n startIcon={<MoreHorizontalIcon />}\n variant=\"transparent\"\n aria-label=\"Actions\"\n size=\"small\"\n className={styles.menuTrigger}\n />\n </Menu.Trigger>\n <Menu.List>{actions}</Menu.List>\n </Menu>\n )}\n </Flex>\n </Element>\n )}\n </li>\n );\n};\n\nEntityListItem.displayName = 'EntityListItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { EntityListItemProps } from './EntityListItem';\n\nexport const getEntityListItemStyles = () => ({\n root: (props: Pick<EntityListItemProps, 'isDragActive'>) =>\n css({\n display: 'flex',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n position: 'relative',\n transition: `${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n transitionProperty: 'box-shadow, background-color',\n backgroundColor: tokens.colorWhite,\n ...(props.isDragActive\n ? {\n boxShadow: tokens.boxShadowHeavy,\n }\n : {}),\n\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n card: css({\n display: 'flex',\n textDecoration: 'none',\n width: '100%',\n minHeight: tokens.spacing3Xl,\n padding: tokens.spacingXs,\n border: 'none',\n background: 'none',\n textAlign: 'left',\n }),\n content: css({\n flexGrow: 1,\n minWidth: 0,\n }),\n media: css({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: tokens.gray200,\n width: tokens.spacing2Xl,\n height: tokens.spacing2Xl,\n margin: '0',\n marginRight: tokens.spacingXs,\n }),\n thumbnail: css({\n display: 'block',\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n }),\n contentType: css({\n marginLeft: tokens.spacingXs,\n }),\n description: css({\n marginTop: tokens.spacing2Xs,\n }),\n meta: css({\n marginLeft: 'auto',\n flexShrink: 0,\n }),\n dragHandle: css({\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n }),\n menuTrigger: css({\n padding: '0 0.125rem',\n minHeight: '1.5rem',\n }),\n});\n"],"names":["EntityList","EntityListProps","EntityListItem","EntityListItemProps","OriginalEntityList","CompoundEntityList","Item","React","CommonProps","ExpandProps","getEntityListStyles","children","ReactNode","_EntityList","props","ref","Ref","HTMLUListElement","styles","testId","root","className","style","displayName","forwardRef","tokens","display","listStyle","margin","padding","border","gray200","borderBottom","borderRadius","borderRadiusMedium","overflow","MouseEventHandler","EntityStatusBadge","EntityStatus","PickUnion","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","Icon","Text","DragHandle","DragHandleProps","Button","Menu","getEntityListItemStyles","SkeletonBodyText","SkeletonContainer","SkeletonImage","Flex","Box","EntityListItemStatus","ICON_MAP","asset","entry","release","title","description","contentType","status","withThumbnail","thumbnailUrl","thumbnailAltText","actions","ReactNodeArray","withDragHandle","isDragActive","cardDragHandleComponent","cardDragHandleProps","Partial","entityType","isLoading","onClick","href","isActionsDisabled","otherProps","ReactElement","renderCardDragHandle","dragHandle","Element","ElementType","isArchived","asIcon","card","undefined","media","toLowerCase","thumbnail","content","meta","menuTrigger","Pick","boxShadow","position","transition","transitionDurationShort","transitionEasingDefault","transitionProperty","backgroundColor","colorWhite","boxShadowHeavy","gray100","textDecoration","width","minHeight","spacing3Xl","spacingXs","background","textAlign","flexShrink","alignItems","justifyContent","spacing2Xl","height","marginRight","marginLeft","marginTop","spacing2Xs","borderBottomLeftRadius","borderTopLeftRadius"],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -16,31 +16,30 @@ import {Flex as $qeOF0$Flex, Box as $qeOF0$Box} from "@contentful/f36-core";
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
const $32a4ed8cc58cbd41$export$2b0a239870ba448d = ()=>({
|
|
19
|
-
root: /*#__PURE__*/ $qeOF0$css({
|
|
20
|
-
display:
|
|
21
|
-
listStyle:
|
|
19
|
+
root: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
20
|
+
display: "block",
|
|
21
|
+
listStyle: "none",
|
|
22
22
|
margin: 0,
|
|
23
23
|
padding: 0,
|
|
24
|
-
border: `1px solid ${$qeOF0$contentfulf36tokens.gray200}`,
|
|
25
|
-
borderBottom:
|
|
26
|
-
borderRadius: $qeOF0$contentfulf36tokens.borderRadiusMedium,
|
|
27
|
-
overflow:
|
|
24
|
+
border: `1px solid ${(0, $qeOF0$contentfulf36tokens).gray200}`,
|
|
25
|
+
borderBottom: "none",
|
|
26
|
+
borderRadius: (0, $qeOF0$contentfulf36tokens).borderRadiusMedium,
|
|
27
|
+
overflow: "hidden"
|
|
28
28
|
})
|
|
29
|
-
})
|
|
30
|
-
;
|
|
29
|
+
});
|
|
31
30
|
|
|
32
31
|
|
|
33
32
|
function $3382b9e83b849fa7$var$_EntityList(props, ref) {
|
|
34
|
-
const styles = $32a4ed8cc58cbd41$export$2b0a239870ba448d();
|
|
35
|
-
return /*#__PURE__*/ $qeOF0$react.createElement("ul", {
|
|
36
|
-
"data-test-id": props.testId ||
|
|
33
|
+
const styles = (0, $32a4ed8cc58cbd41$export$2b0a239870ba448d)();
|
|
34
|
+
return /*#__PURE__*/ (0, $qeOF0$react).createElement("ul", {
|
|
35
|
+
"data-test-id": props.testId || "cf-ui-entity-list",
|
|
37
36
|
ref: ref,
|
|
38
|
-
className: $qeOF0$cx(styles.root, props.className),
|
|
37
|
+
className: (0, $qeOF0$cx)(styles.root, props.className),
|
|
39
38
|
style: props.style
|
|
40
39
|
}, props.children);
|
|
41
40
|
}
|
|
42
|
-
$3382b9e83b849fa7$var$_EntityList.displayName =
|
|
43
|
-
const $3382b9e83b849fa7$export$8bb466c13870163e = /*#__PURE__*/ $qeOF0$react.forwardRef($3382b9e83b849fa7$var$_EntityList);
|
|
41
|
+
$3382b9e83b849fa7$var$_EntityList.displayName = "EntityList";
|
|
42
|
+
const $3382b9e83b849fa7$export$8bb466c13870163e = /*#__PURE__*/ (0, $qeOF0$react).forwardRef($3382b9e83b849fa7$var$_EntityList);
|
|
44
43
|
|
|
45
44
|
|
|
46
45
|
|
|
@@ -55,170 +54,168 @@ const $3382b9e83b849fa7$export$8bb466c13870163e = /*#__PURE__*/ $qeOF0$react.for
|
|
|
55
54
|
|
|
56
55
|
|
|
57
56
|
const $7cd3138fd5d2efdd$export$3bb342229d68a121 = ()=>({
|
|
58
|
-
root: (props)=>/*#__PURE__*/ $qeOF0$css({
|
|
59
|
-
display:
|
|
60
|
-
boxShadow: `inset 0 -1px 0 ${$qeOF0$contentfulf36tokens.gray200}`,
|
|
61
|
-
position:
|
|
62
|
-
transition: `${$qeOF0$contentfulf36tokens.transitionDurationShort} ${$qeOF0$contentfulf36tokens.transitionEasingDefault}`,
|
|
63
|
-
transitionProperty:
|
|
64
|
-
backgroundColor: $qeOF0$contentfulf36tokens.colorWhite,
|
|
57
|
+
root: (props)=>/*#__PURE__*/ (0, $qeOF0$css)({
|
|
58
|
+
display: "flex",
|
|
59
|
+
boxShadow: `inset 0 -1px 0 ${(0, $qeOF0$contentfulf36tokens).gray200}`,
|
|
60
|
+
position: "relative",
|
|
61
|
+
transition: `${(0, $qeOF0$contentfulf36tokens).transitionDurationShort} ${(0, $qeOF0$contentfulf36tokens).transitionEasingDefault}`,
|
|
62
|
+
transitionProperty: "box-shadow, background-color",
|
|
63
|
+
backgroundColor: (0, $qeOF0$contentfulf36tokens).colorWhite,
|
|
65
64
|
...props.isDragActive ? {
|
|
66
|
-
boxShadow: $qeOF0$contentfulf36tokens.boxShadowHeavy
|
|
65
|
+
boxShadow: (0, $qeOF0$contentfulf36tokens).boxShadowHeavy
|
|
67
66
|
} : {},
|
|
68
|
-
|
|
69
|
-
backgroundColor: $qeOF0$contentfulf36tokens.gray100
|
|
67
|
+
"&:hover": {
|
|
68
|
+
backgroundColor: (0, $qeOF0$contentfulf36tokens).gray100
|
|
70
69
|
}
|
|
71
|
-
})
|
|
72
|
-
,
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
textAlign: 'left'
|
|
70
|
+
}),
|
|
71
|
+
card: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
72
|
+
display: "flex",
|
|
73
|
+
textDecoration: "none",
|
|
74
|
+
width: "100%",
|
|
75
|
+
minHeight: (0, $qeOF0$contentfulf36tokens).spacing3Xl,
|
|
76
|
+
padding: (0, $qeOF0$contentfulf36tokens).spacingXs,
|
|
77
|
+
border: "none",
|
|
78
|
+
background: "none",
|
|
79
|
+
textAlign: "left"
|
|
82
80
|
}),
|
|
83
|
-
content: /*#__PURE__*/ $qeOF0$css({
|
|
81
|
+
content: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
84
82
|
name: "15ync0s",
|
|
85
83
|
styles: "flex-grow:1;min-width:0;"
|
|
86
84
|
}),
|
|
87
|
-
media: /*#__PURE__*/ $qeOF0$css({
|
|
88
|
-
display:
|
|
85
|
+
media: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
86
|
+
display: "flex",
|
|
89
87
|
flexShrink: 0,
|
|
90
|
-
alignItems:
|
|
91
|
-
justifyContent:
|
|
92
|
-
backgroundColor: $qeOF0$contentfulf36tokens.gray200,
|
|
93
|
-
width: $qeOF0$contentfulf36tokens.spacing2Xl,
|
|
94
|
-
height: $qeOF0$contentfulf36tokens.spacing2Xl,
|
|
95
|
-
margin:
|
|
96
|
-
marginRight: $qeOF0$contentfulf36tokens.spacingXs
|
|
88
|
+
alignItems: "center",
|
|
89
|
+
justifyContent: "center",
|
|
90
|
+
backgroundColor: (0, $qeOF0$contentfulf36tokens).gray200,
|
|
91
|
+
width: (0, $qeOF0$contentfulf36tokens).spacing2Xl,
|
|
92
|
+
height: (0, $qeOF0$contentfulf36tokens).spacing2Xl,
|
|
93
|
+
margin: "0",
|
|
94
|
+
marginRight: (0, $qeOF0$contentfulf36tokens).spacingXs
|
|
97
95
|
}),
|
|
98
|
-
thumbnail: /*#__PURE__*/ $qeOF0$css({
|
|
96
|
+
thumbnail: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
99
97
|
name: "12qah06",
|
|
100
98
|
styles: "display:block;width:100%;height:100%;object-fit:cover;"
|
|
101
99
|
}),
|
|
102
|
-
contentType: /*#__PURE__*/ $qeOF0$css({
|
|
103
|
-
marginLeft: $qeOF0$contentfulf36tokens.spacingXs
|
|
100
|
+
contentType: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
101
|
+
marginLeft: (0, $qeOF0$contentfulf36tokens).spacingXs
|
|
104
102
|
}),
|
|
105
|
-
description: /*#__PURE__*/ $qeOF0$css({
|
|
106
|
-
marginTop: $qeOF0$contentfulf36tokens.spacing2Xs
|
|
103
|
+
description: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
104
|
+
marginTop: (0, $qeOF0$contentfulf36tokens).spacing2Xs
|
|
107
105
|
}),
|
|
108
|
-
meta: /*#__PURE__*/ $qeOF0$css({
|
|
106
|
+
meta: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
109
107
|
name: "1n0gfod",
|
|
110
108
|
styles: "margin-left:auto;flex-shrink:0;"
|
|
111
109
|
}),
|
|
112
|
-
dragHandle: /*#__PURE__*/ $qeOF0$css({
|
|
113
|
-
borderBottomLeftRadius:
|
|
114
|
-
borderTopLeftRadius:
|
|
115
|
-
boxShadow: `inset 0 -1px 0 ${$qeOF0$contentfulf36tokens.gray200}`
|
|
110
|
+
dragHandle: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
111
|
+
borderBottomLeftRadius: "0",
|
|
112
|
+
borderTopLeftRadius: "0",
|
|
113
|
+
boxShadow: `inset 0 -1px 0 ${(0, $qeOF0$contentfulf36tokens).gray200}`
|
|
116
114
|
}),
|
|
117
|
-
menuTrigger: /*#__PURE__*/ $qeOF0$css({
|
|
115
|
+
menuTrigger: /*#__PURE__*/ (0, $qeOF0$css)({
|
|
118
116
|
name: "c1v07n",
|
|
119
117
|
styles: "padding:0 0.125rem;min-height:1.5rem;"
|
|
120
118
|
})
|
|
121
|
-
})
|
|
122
|
-
;
|
|
119
|
+
});
|
|
123
120
|
|
|
124
121
|
|
|
125
122
|
|
|
126
123
|
|
|
127
124
|
const $b8d6b7ec5fedd0fe$var$ICON_MAP = {
|
|
128
|
-
asset: $qeOF0$AssetIcon,
|
|
129
|
-
entry: $qeOF0$EntryIcon,
|
|
130
|
-
release: $qeOF0$ReleaseIcon
|
|
125
|
+
asset: (0, $qeOF0$AssetIcon),
|
|
126
|
+
entry: (0, $qeOF0$EntryIcon),
|
|
127
|
+
release: (0, $qeOF0$ReleaseIcon)
|
|
131
128
|
};
|
|
132
|
-
const $b8d6b7ec5fedd0fe$export$65b9c70c5f42a158 = ({ className: className , testId: testId =
|
|
133
|
-
const styles = $7cd3138fd5d2efdd$export$3bb342229d68a121();
|
|
129
|
+
const $b8d6b7ec5fedd0fe$export$65b9c70c5f42a158 = ({ className: className , testId: testId = "cf-ui-entity-list-item" , title: title , description: description , contentType: contentType , entityType: entityType = "entry" , withThumbnail: withThumbnail = true , thumbnailUrl: thumbnailUrl , thumbnailAltText: thumbnailAltText , status: status , actions: actions , withDragHandle: withDragHandle , isDragActive: isDragActive , isLoading: isLoading , onClick: onClick , href: href , cardDragHandleProps: cardDragHandleProps , cardDragHandleComponent: cardDragHandleComponent , isActionsDisabled: isActionsDisabled = false , ...otherProps })=>{
|
|
130
|
+
const styles = (0, $7cd3138fd5d2efdd$export$3bb342229d68a121)();
|
|
134
131
|
const renderCardDragHandle = ()=>{
|
|
135
132
|
if (cardDragHandleComponent) return cardDragHandleComponent;
|
|
136
|
-
else if (withDragHandle) return /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$DragHandle, {
|
|
133
|
+
else if (withDragHandle) return /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$DragHandle), {
|
|
137
134
|
className: styles.dragHandle,
|
|
138
135
|
isActive: isDragActive,
|
|
139
136
|
label: "Reorder entry",
|
|
140
137
|
...cardDragHandleProps
|
|
141
138
|
});
|
|
142
139
|
};
|
|
143
|
-
let Element =
|
|
144
|
-
if (href || onClick) Element = href ?
|
|
140
|
+
let Element = "article";
|
|
141
|
+
if (href || onClick) Element = href ? "a" : "button";
|
|
145
142
|
// archived assets will not be available on the CDN, resulting in a broken image src
|
|
146
|
-
const isArchived = status ===
|
|
143
|
+
const isArchived = status === "archived";
|
|
147
144
|
const asIcon = isArchived || !thumbnailUrl;
|
|
148
|
-
return /*#__PURE__*/ $qeOF0$react.createElement("li", {
|
|
145
|
+
return /*#__PURE__*/ (0, $qeOF0$react).createElement("li", {
|
|
149
146
|
...otherProps,
|
|
150
|
-
className: $qeOF0$cx(styles.root({
|
|
147
|
+
className: (0, $qeOF0$cx)(styles.root({
|
|
151
148
|
isDragActive: isDragActive
|
|
152
149
|
}), className),
|
|
153
150
|
"data-test-id": testId
|
|
154
|
-
}, renderCardDragHandle(), isLoading ? /*#__PURE__*/ $qeOF0$react.createElement("article", {
|
|
151
|
+
}, renderCardDragHandle(), isLoading ? /*#__PURE__*/ (0, $qeOF0$react).createElement("article", {
|
|
155
152
|
className: styles.card
|
|
156
|
-
}, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$SkeletonContainer, {
|
|
153
|
+
}, /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$SkeletonContainer), {
|
|
157
154
|
clipId: "f36-entity-list-item-skeleton"
|
|
158
|
-
}, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$SkeletonImage, {
|
|
155
|
+
}, /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$SkeletonImage), {
|
|
159
156
|
height: 46,
|
|
160
157
|
width: 46
|
|
161
|
-
}), /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$SkeletonBodyText, {
|
|
158
|
+
}), /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$SkeletonBodyText), {
|
|
162
159
|
numberOfLines: 2,
|
|
163
160
|
lineHeight: 18,
|
|
164
161
|
offsetLeft: 54
|
|
165
|
-
}))) : /*#__PURE__*/ $qeOF0$react.createElement(Element, {
|
|
162
|
+
}))) : /*#__PURE__*/ (0, $qeOF0$react).createElement(Element, {
|
|
166
163
|
className: styles.card,
|
|
167
164
|
onClick: onClick,
|
|
168
165
|
href: href,
|
|
169
|
-
type: Element ===
|
|
170
|
-
target: href ?
|
|
171
|
-
}, withThumbnail && /*#__PURE__*/ $qeOF0$react.createElement("figure", {
|
|
166
|
+
type: Element === "button" ? "button" : undefined,
|
|
167
|
+
target: href ? "_blank" : undefined
|
|
168
|
+
}, withThumbnail && /*#__PURE__*/ (0, $qeOF0$react).createElement("figure", {
|
|
172
169
|
className: styles.media
|
|
173
|
-
}, asIcon ? /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Icon, {
|
|
170
|
+
}, asIcon ? /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Icon), {
|
|
174
171
|
as: $b8d6b7ec5fedd0fe$var$ICON_MAP[entityType.toLowerCase()],
|
|
175
172
|
variant: "muted"
|
|
176
|
-
}) : /*#__PURE__*/ $qeOF0$react.createElement("img", {
|
|
173
|
+
}) : /*#__PURE__*/ (0, $qeOF0$react).createElement("img", {
|
|
177
174
|
src: thumbnailUrl,
|
|
178
175
|
className: styles.thumbnail,
|
|
179
176
|
alt: thumbnailAltText
|
|
180
|
-
})), /*#__PURE__*/ $qeOF0$react.createElement("div", {
|
|
177
|
+
})), /*#__PURE__*/ (0, $qeOF0$react).createElement("div", {
|
|
181
178
|
className: styles.content
|
|
182
|
-
}, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Flex, null, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Text, {
|
|
179
|
+
}, /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Flex), null, /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Text), {
|
|
183
180
|
as: "h3",
|
|
184
181
|
lineHeight: "lineHeightM",
|
|
185
182
|
fontColor: "gray900",
|
|
186
183
|
fontWeight: "fontWeightDemiBold",
|
|
187
184
|
isTruncated: true
|
|
188
|
-
}, title), contentType && /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Text, {
|
|
185
|
+
}, title), contentType && /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Text), {
|
|
189
186
|
as: "span",
|
|
190
187
|
lineHeight: "lineHeightM",
|
|
191
188
|
fontColor: "gray600",
|
|
192
189
|
className: styles.contentType,
|
|
193
190
|
isTruncated: true
|
|
194
|
-
}, "(", contentType, ")")), description && /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Text, {
|
|
191
|
+
}, "(", contentType, ")")), description && /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Text), {
|
|
195
192
|
as: "p",
|
|
196
193
|
lineHeight: "lineHeightM",
|
|
197
194
|
fontColor: "gray900",
|
|
198
195
|
isTruncated: true,
|
|
199
196
|
className: styles.description
|
|
200
|
-
}, description)), /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Flex, {
|
|
197
|
+
}, description)), /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Flex), {
|
|
201
198
|
className: styles.meta,
|
|
202
199
|
alignItems: "flex-start",
|
|
203
200
|
paddingLeft: "spacingXs"
|
|
204
|
-
}, status && /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Box, {
|
|
205
|
-
marginRight: actions ?
|
|
206
|
-
}, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$EntityStatusBadge, {
|
|
201
|
+
}, status && /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Box), {
|
|
202
|
+
marginRight: actions ? "spacingXs" : "none"
|
|
203
|
+
}, /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$EntityStatusBadge), {
|
|
207
204
|
entityStatus: status
|
|
208
|
-
})), actions && /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Menu, null, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Menu.Trigger, null, /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Button, {
|
|
205
|
+
})), actions && /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Menu), null, /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Menu).Trigger, null, /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Button), {
|
|
209
206
|
isDisabled: isActionsDisabled,
|
|
210
|
-
startIcon: /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$MoreHorizontalIcon, null),
|
|
207
|
+
startIcon: /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$MoreHorizontalIcon), null),
|
|
211
208
|
variant: "transparent",
|
|
212
209
|
"aria-label": "Actions",
|
|
213
210
|
size: "small",
|
|
214
211
|
className: styles.menuTrigger
|
|
215
|
-
})), /*#__PURE__*/ $qeOF0$react.createElement($qeOF0$Menu.List, null, actions)))));
|
|
212
|
+
})), /*#__PURE__*/ (0, $qeOF0$react).createElement((0, $qeOF0$Menu).List, null, actions)))));
|
|
216
213
|
};
|
|
217
|
-
$b8d6b7ec5fedd0fe$export$65b9c70c5f42a158.displayName =
|
|
214
|
+
$b8d6b7ec5fedd0fe$export$65b9c70c5f42a158.displayName = "EntityListItem";
|
|
218
215
|
|
|
219
216
|
|
|
220
|
-
const $bbd0ee2d7d3132a2$export$8bb466c13870163e = $3382b9e83b849fa7$export$8bb466c13870163e;
|
|
221
|
-
$bbd0ee2d7d3132a2$export$8bb466c13870163e.Item = $b8d6b7ec5fedd0fe$export$65b9c70c5f42a158;
|
|
217
|
+
const $bbd0ee2d7d3132a2$export$8bb466c13870163e = (0, $3382b9e83b849fa7$export$8bb466c13870163e);
|
|
218
|
+
$bbd0ee2d7d3132a2$export$8bb466c13870163e.Item = (0, $b8d6b7ec5fedd0fe$export$65b9c70c5f42a158);
|
|
222
219
|
|
|
223
220
|
|
|
224
221
|
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/components/entity-list/src/index.ts","packages/components/entity-list/src/CompoundEntityList.tsx","packages/components/entity-list/src/EntityList.tsx","packages/components/entity-list/src/EntityList.styles.ts","packages/components/entity-list/src/EntityListItem/EntityListItem.tsx","packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts"],"sourcesContent":["export { EntityList } from './CompoundEntityList';\nexport type { EntityListProps } from './EntityList';\nexport { EntityListItem } from './EntityListItem/EntityListItem';\nexport type { EntityListItemProps } from './EntityListItem/EntityListItem';\n","import { EntityList as OriginalEntityList } from './EntityList';\nimport { EntityListItem } from './EntityListItem/EntityListItem';\n\ntype CompoundEntityList = typeof OriginalEntityList & {\n Item: typeof EntityListItem;\n};\n\nexport const EntityList = OriginalEntityList as CompoundEntityList;\nEntityList.Item = EntityListItem;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getEntityListStyles } from './EntityList.styles';\n\nexport interface EntityListProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nfunction _EntityList(\n props: ExpandProps<EntityListProps>,\n ref: React.Ref<HTMLUListElement>,\n) {\n const styles = getEntityListStyles();\n\n return (\n <ul\n data-test-id={props.testId || 'cf-ui-entity-list'}\n ref={ref}\n className={cx(styles.root, props.className)}\n style={props.style}\n >\n {props.children}\n </ul>\n );\n}\n\n_EntityList.displayName = 'EntityList';\n\nexport const EntityList = React.forwardRef(_EntityList);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getEntityListStyles = () => ({\n root: css({\n display: 'block',\n listStyle: 'none',\n margin: 0,\n padding: 0,\n border: `1px solid ${tokens.gray200}`,\n borderBottom: 'none',\n borderRadius: tokens.borderRadiusMedium,\n overflow: 'hidden',\n }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { MouseEventHandler } from 'react';\n\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport type {\n CommonProps,\n EntityStatus,\n PickUnion,\n} from '@contentful/f36-core';\nimport {\n AssetIcon,\n EntryIcon,\n ReleaseIcon,\n MoreHorizontalIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle } from '@contentful/f36-drag-handle';\nimport type { DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex, Box } from '@contentful/f36-core';\n\ntype EntityListItemStatus = PickUnion<\n EntityStatus,\n 'archived' | 'changed' | 'draft' | 'published'\n>;\n\nconst ICON_MAP = {\n asset: AssetIcon,\n entry: EntryIcon,\n release: ReleaseIcon,\n};\n\nexport interface EntityListItemProps extends CommonProps {\n /**\n * The title of the entity\n */\n title: string;\n /**\n * The description of the entity\n */\n description?: string;\n /**\n * The content type of the entity\n */\n contentType?: string;\n /**\n * The publish status of the entry\n */\n status?: EntityListItemStatus;\n /**\n * A boolean used to render the Thumbnail or not\n */\n withThumbnail?: boolean;\n /**\n * The URL of the entity's preview thumbnail. Use 46px x 46px images for best results\n */\n thumbnailUrl?: string;\n /**\n * The alt text for the thumbnail\n */\n thumbnailAltText?: string;\n /**\n * Menu elements rendered as actions in Menu\n */\n actions?: React.ReactNodeArray;\n /**\n * Renders a drag handle for the component for use in drag and drop contexts\n */\n withDragHandle?: boolean;\n /**\n * Applies styling for when the component is actively being dragged by the user\n */\n isDragActive?: boolean;\n /**\n * Prop to pass a custom CardDragHandle component to for use in drag and drop contexts\n */\n cardDragHandleComponent?: React.ReactNode;\n /**\n * Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)\n */\n cardDragHandleProps?: Partial<DragHandleProps>;\n /**\n * An entity can either be an Entry, an Asset or a Release. This prop will apply styling based on if the entity is an asset, a release or an entry\n *\n * Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility\n */\n entityType?: 'Entry' | 'Asset' | 'entry' | 'asset' | 'Release';\n /**\n * Loading state for the component - when true will display loading feedback to the user\n */\n isLoading?: boolean;\n /**\n * The action to be performed on click of the EntryCard\n */\n onClick?: MouseEventHandler;\n /**\n * The href for the component. Will render the card as an `a` element for native browser link handling\n */\n href?: string;\n /**\n * A boolean used to disable the CardActions\n */\n isActionsDisabled?: boolean;\n}\n\nexport const EntityListItem = ({\n className,\n testId = 'cf-ui-entity-list-item',\n title,\n description,\n contentType,\n entityType = 'entry',\n withThumbnail = true,\n thumbnailUrl,\n thumbnailAltText,\n status,\n actions,\n withDragHandle,\n isDragActive,\n isLoading,\n onClick,\n href,\n cardDragHandleProps,\n cardDragHandleComponent,\n isActionsDisabled = false,\n ...otherProps\n}: EntityListItemProps): React.ReactElement => {\n const styles = getEntityListItemStyles();\n\n const renderCardDragHandle = () => {\n if (cardDragHandleComponent) {\n return cardDragHandleComponent;\n } else if (withDragHandle) {\n return (\n <DragHandle\n className={styles.dragHandle}\n isActive={isDragActive}\n label=\"Reorder entry\"\n {...cardDragHandleProps}\n />\n );\n }\n };\n\n let Element: React.ElementType = 'article';\n if (href || onClick) {\n Element = href ? 'a' : 'button';\n }\n\n // archived assets will not be available on the CDN, resulting in a broken image src\n const isArchived = status === 'archived';\n const asIcon = isArchived || !thumbnailUrl;\n\n return (\n <li\n {...otherProps}\n className={cx(styles.root({ isDragActive }), className)}\n data-test-id={testId}\n >\n {renderCardDragHandle()}\n {isLoading ? (\n <article className={styles.card}>\n <SkeletonContainer clipId=\"f36-entity-list-item-skeleton\">\n <SkeletonImage height={46} width={46} />\n <SkeletonBodyText\n numberOfLines={2}\n lineHeight={18}\n offsetLeft={54}\n />\n </SkeletonContainer>\n </article>\n ) : (\n <Element\n className={styles.card}\n onClick={onClick}\n href={href}\n type={Element === 'button' ? 'button' : undefined}\n target={href ? '_blank' : undefined}\n >\n {withThumbnail && (\n <figure className={styles.media}>\n {asIcon ? (\n <Icon as={ICON_MAP[entityType.toLowerCase()]} variant=\"muted\" />\n ) : (\n <img\n src={thumbnailUrl}\n className={styles.thumbnail}\n alt={thumbnailAltText}\n />\n )}\n </figure>\n )}\n\n <div className={styles.content}>\n <Flex>\n <Text\n as=\"h3\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n fontWeight=\"fontWeightDemiBold\"\n isTruncated\n >\n {title}\n </Text>\n\n {contentType && (\n <Text\n as=\"span\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.contentType}\n isTruncated\n >\n ({contentType})\n </Text>\n )}\n </Flex>\n {description && (\n <Text\n as=\"p\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n isTruncated\n className={styles.description}\n >\n {description}\n </Text>\n )}\n </div>\n\n <Flex\n className={styles.meta}\n alignItems=\"flex-start\"\n paddingLeft=\"spacingXs\"\n >\n {status && (\n <Box marginRight={actions ? 'spacingXs' : 'none'}>\n <EntityStatusBadge entityStatus={status} />\n </Box>\n )}\n\n {actions && (\n <Menu>\n <Menu.Trigger>\n <Button\n isDisabled={isActionsDisabled}\n startIcon={<MoreHorizontalIcon />}\n variant=\"transparent\"\n aria-label=\"Actions\"\n size=\"small\"\n className={styles.menuTrigger}\n />\n </Menu.Trigger>\n <Menu.List>{actions}</Menu.List>\n </Menu>\n )}\n </Flex>\n </Element>\n )}\n </li>\n );\n};\n\nEntityListItem.displayName = 'EntityListItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { EntityListItemProps } from './EntityListItem';\n\nexport const getEntityListItemStyles = () => ({\n root: (props: Pick<EntityListItemProps, 'isDragActive'>) =>\n css({\n display: 'flex',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n position: 'relative',\n transition: `${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n transitionProperty: 'box-shadow, background-color',\n backgroundColor: tokens.colorWhite,\n ...(props.isDragActive\n ? {\n boxShadow: tokens.boxShadowHeavy,\n }\n : {}),\n\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n card: css({\n display: 'flex',\n textDecoration: 'none',\n width: '100%',\n minHeight: tokens.spacing3Xl,\n padding: tokens.spacingXs,\n border: 'none',\n background: 'none',\n textAlign: 'left',\n }),\n content: css({\n flexGrow: 1,\n minWidth: 0,\n }),\n media: css({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: tokens.gray200,\n width: tokens.spacing2Xl,\n height: tokens.spacing2Xl,\n margin: '0',\n marginRight: tokens.spacingXs,\n }),\n thumbnail: css({\n display: 'block',\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n }),\n contentType: css({\n marginLeft: tokens.spacingXs,\n }),\n description: css({\n marginTop: tokens.spacing2Xs,\n }),\n meta: css({\n marginLeft: 'auto',\n flexShrink: 0,\n }),\n dragHandle: css({\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n }),\n menuTrigger: css({\n padding: '0 0.125rem',\n minHeight: '1.5rem',\n }),\n});\n"],"names":["EntityList","EntityListProps","EntityListItem","EntityListItemProps","OriginalEntityList","CompoundEntityList","Item","React","CommonProps","ExpandProps","getEntityListStyles","children","ReactNode","_EntityList","props","ref","Ref","HTMLUListElement","styles","testId","root","className","style","displayName","forwardRef","tokens","display","listStyle","margin","padding","border","gray200","borderBottom","borderRadius","borderRadiusMedium","overflow","MouseEventHandler","EntityStatusBadge","EntityStatus","PickUnion","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","Icon","Text","DragHandle","DragHandleProps","Button","Menu","getEntityListItemStyles","SkeletonBodyText","SkeletonContainer","SkeletonImage","Flex","Box","EntityListItemStatus","ICON_MAP","asset","entry","release","title","description","contentType","status","withThumbnail","thumbnailUrl","thumbnailAltText","actions","ReactNodeArray","withDragHandle","isDragActive","cardDragHandleComponent","cardDragHandleProps","Partial","entityType","isLoading","onClick","href","isActionsDisabled","otherProps","ReactElement","renderCardDragHandle","dragHandle","Element","ElementType","isArchived","asIcon","card","undefined","media","toLowerCase","thumbnail","content","meta","menuTrigger","Pick","boxShadow","position","transition","transitionDurationShort","transitionEasingDefault","transitionProperty","backgroundColor","colorWhite","boxShadowHeavy","gray100","textDecoration","width","minHeight","spacing3Xl","spacingXs","background","textAlign","flexShrink","alignItems","justifyContent","spacing2Xl","height","marginRight","marginLeft","marginTop","spacing2Xs","borderBottomLeftRadius","borderTopLeftRadius"],"version":3,"file":"module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/components/entity-list/src/index.ts","packages/components/entity-list/src/CompoundEntityList.tsx","packages/components/entity-list/src/EntityList.tsx","packages/components/entity-list/src/EntityList.styles.ts","packages/components/entity-list/src/EntityListItem/EntityListItem.tsx","packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts"],"sourcesContent":["export { EntityList } from './CompoundEntityList';\nexport type { EntityListProps } from './EntityList';\nexport { EntityListItem } from './EntityListItem/EntityListItem';\nexport type { EntityListItemProps } from './EntityListItem/EntityListItem';\n","import { EntityList as OriginalEntityList } from './EntityList';\nimport { EntityListItem } from './EntityListItem/EntityListItem';\n\ntype CompoundEntityList = typeof OriginalEntityList & {\n Item: typeof EntityListItem;\n};\n\nexport const EntityList = OriginalEntityList as CompoundEntityList;\nEntityList.Item = EntityListItem;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getEntityListStyles } from './EntityList.styles';\n\nexport interface EntityListProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nfunction _EntityList(\n props: ExpandProps<EntityListProps>,\n ref: React.Ref<HTMLUListElement>,\n) {\n const styles = getEntityListStyles();\n\n return (\n <ul\n data-test-id={props.testId || 'cf-ui-entity-list'}\n ref={ref}\n className={cx(styles.root, props.className)}\n style={props.style}\n >\n {props.children}\n </ul>\n );\n}\n\n_EntityList.displayName = 'EntityList';\n\nexport const EntityList = React.forwardRef(_EntityList);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getEntityListStyles = () => ({\n root: css({\n display: 'block',\n listStyle: 'none',\n margin: 0,\n padding: 0,\n border: `1px solid ${tokens.gray200}`,\n borderBottom: 'none',\n borderRadius: tokens.borderRadiusMedium,\n overflow: 'hidden',\n }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { MouseEventHandler } from 'react';\n\nimport { EntityStatusBadge } from '@contentful/f36-badge';\nimport type {\n CommonProps,\n EntityStatus,\n PickUnion,\n} from '@contentful/f36-core';\nimport {\n AssetIcon,\n EntryIcon,\n ReleaseIcon,\n MoreHorizontalIcon,\n} from '@contentful/f36-icons';\nimport { Icon } from '@contentful/f36-icon';\nimport { Text } from '@contentful/f36-typography';\nimport { DragHandle } from '@contentful/f36-drag-handle';\nimport type { DragHandleProps } from '@contentful/f36-drag-handle';\nimport { Button } from '@contentful/f36-button';\nimport { Menu } from '@contentful/f36-menu';\n\nimport { getEntityListItemStyles } from './EntityListItem.styles';\n\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex, Box } from '@contentful/f36-core';\n\ntype EntityListItemStatus = PickUnion<\n EntityStatus,\n 'archived' | 'changed' | 'draft' | 'published'\n>;\n\nconst ICON_MAP = {\n asset: AssetIcon,\n entry: EntryIcon,\n release: ReleaseIcon,\n};\n\nexport interface EntityListItemProps extends CommonProps {\n /**\n * The title of the entity\n */\n title: string;\n /**\n * The description of the entity\n */\n description?: string;\n /**\n * The content type of the entity\n */\n contentType?: string;\n /**\n * The publish status of the entry\n */\n status?: EntityListItemStatus;\n /**\n * A boolean used to render the Thumbnail or not\n */\n withThumbnail?: boolean;\n /**\n * The URL of the entity's preview thumbnail. Use 46px x 46px images for best results\n */\n thumbnailUrl?: string;\n /**\n * The alt text for the thumbnail\n */\n thumbnailAltText?: string;\n /**\n * Menu elements rendered as actions in Menu\n */\n actions?: React.ReactNodeArray;\n /**\n * Renders a drag handle for the component for use in drag and drop contexts\n */\n withDragHandle?: boolean;\n /**\n * Applies styling for when the component is actively being dragged by the user\n */\n isDragActive?: boolean;\n /**\n * Prop to pass a custom CardDragHandle component to for use in drag and drop contexts\n */\n cardDragHandleComponent?: React.ReactNode;\n /**\n * Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)\n */\n cardDragHandleProps?: Partial<DragHandleProps>;\n /**\n * An entity can either be an Entry, an Asset or a Release. This prop will apply styling based on if the entity is an asset, a release or an entry\n *\n * Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility\n */\n entityType?: 'Entry' | 'Asset' | 'entry' | 'asset' | 'Release';\n /**\n * Loading state for the component - when true will display loading feedback to the user\n */\n isLoading?: boolean;\n /**\n * The action to be performed on click of the EntryCard\n */\n onClick?: MouseEventHandler;\n /**\n * The href for the component. Will render the card as an `a` element for native browser link handling\n */\n href?: string;\n /**\n * A boolean used to disable the CardActions\n */\n isActionsDisabled?: boolean;\n}\n\nexport const EntityListItem = ({\n className,\n testId = 'cf-ui-entity-list-item',\n title,\n description,\n contentType,\n entityType = 'entry',\n withThumbnail = true,\n thumbnailUrl,\n thumbnailAltText,\n status,\n actions,\n withDragHandle,\n isDragActive,\n isLoading,\n onClick,\n href,\n cardDragHandleProps,\n cardDragHandleComponent,\n isActionsDisabled = false,\n ...otherProps\n}: EntityListItemProps): React.ReactElement => {\n const styles = getEntityListItemStyles();\n\n const renderCardDragHandle = () => {\n if (cardDragHandleComponent) {\n return cardDragHandleComponent;\n } else if (withDragHandle) {\n return (\n <DragHandle\n className={styles.dragHandle}\n isActive={isDragActive}\n label=\"Reorder entry\"\n {...cardDragHandleProps}\n />\n );\n }\n };\n\n let Element: React.ElementType = 'article';\n if (href || onClick) {\n Element = href ? 'a' : 'button';\n }\n\n // archived assets will not be available on the CDN, resulting in a broken image src\n const isArchived = status === 'archived';\n const asIcon = isArchived || !thumbnailUrl;\n\n return (\n <li\n {...otherProps}\n className={cx(styles.root({ isDragActive }), className)}\n data-test-id={testId}\n >\n {renderCardDragHandle()}\n {isLoading ? (\n <article className={styles.card}>\n <SkeletonContainer clipId=\"f36-entity-list-item-skeleton\">\n <SkeletonImage height={46} width={46} />\n <SkeletonBodyText\n numberOfLines={2}\n lineHeight={18}\n offsetLeft={54}\n />\n </SkeletonContainer>\n </article>\n ) : (\n <Element\n className={styles.card}\n onClick={onClick}\n href={href}\n type={Element === 'button' ? 'button' : undefined}\n target={href ? '_blank' : undefined}\n >\n {withThumbnail && (\n <figure className={styles.media}>\n {asIcon ? (\n <Icon as={ICON_MAP[entityType.toLowerCase()]} variant=\"muted\" />\n ) : (\n <img\n src={thumbnailUrl}\n className={styles.thumbnail}\n alt={thumbnailAltText}\n />\n )}\n </figure>\n )}\n\n <div className={styles.content}>\n <Flex>\n <Text\n as=\"h3\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n fontWeight=\"fontWeightDemiBold\"\n isTruncated\n >\n {title}\n </Text>\n\n {contentType && (\n <Text\n as=\"span\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray600\"\n className={styles.contentType}\n isTruncated\n >\n ({contentType})\n </Text>\n )}\n </Flex>\n {description && (\n <Text\n as=\"p\"\n lineHeight=\"lineHeightM\"\n fontColor=\"gray900\"\n isTruncated\n className={styles.description}\n >\n {description}\n </Text>\n )}\n </div>\n\n <Flex\n className={styles.meta}\n alignItems=\"flex-start\"\n paddingLeft=\"spacingXs\"\n >\n {status && (\n <Box marginRight={actions ? 'spacingXs' : 'none'}>\n <EntityStatusBadge entityStatus={status} />\n </Box>\n )}\n\n {actions && (\n <Menu>\n <Menu.Trigger>\n <Button\n isDisabled={isActionsDisabled}\n startIcon={<MoreHorizontalIcon />}\n variant=\"transparent\"\n aria-label=\"Actions\"\n size=\"small\"\n className={styles.menuTrigger}\n />\n </Menu.Trigger>\n <Menu.List>{actions}</Menu.List>\n </Menu>\n )}\n </Flex>\n </Element>\n )}\n </li>\n );\n};\n\nEntityListItem.displayName = 'EntityListItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { EntityListItemProps } from './EntityListItem';\n\nexport const getEntityListItemStyles = () => ({\n root: (props: Pick<EntityListItemProps, 'isDragActive'>) =>\n css({\n display: 'flex',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n position: 'relative',\n transition: `${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n transitionProperty: 'box-shadow, background-color',\n backgroundColor: tokens.colorWhite,\n ...(props.isDragActive\n ? {\n boxShadow: tokens.boxShadowHeavy,\n }\n : {}),\n\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n card: css({\n display: 'flex',\n textDecoration: 'none',\n width: '100%',\n minHeight: tokens.spacing3Xl,\n padding: tokens.spacingXs,\n border: 'none',\n background: 'none',\n textAlign: 'left',\n }),\n content: css({\n flexGrow: 1,\n minWidth: 0,\n }),\n media: css({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: tokens.gray200,\n width: tokens.spacing2Xl,\n height: tokens.spacing2Xl,\n margin: '0',\n marginRight: tokens.spacingXs,\n }),\n thumbnail: css({\n display: 'block',\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n }),\n contentType: css({\n marginLeft: tokens.spacingXs,\n }),\n description: css({\n marginTop: tokens.spacing2Xs,\n }),\n meta: css({\n marginLeft: 'auto',\n flexShrink: 0,\n }),\n dragHandle: css({\n borderBottomLeftRadius: '0',\n borderTopLeftRadius: '0',\n boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,\n }),\n menuTrigger: css({\n padding: '0 0.125rem',\n minHeight: '1.5rem',\n }),\n});\n"],"names":["EntityList","EntityListProps","EntityListItem","EntityListItemProps","OriginalEntityList","CompoundEntityList","Item","React","CommonProps","ExpandProps","getEntityListStyles","children","ReactNode","_EntityList","props","ref","Ref","HTMLUListElement","styles","testId","root","className","style","displayName","forwardRef","tokens","display","listStyle","margin","padding","border","gray200","borderBottom","borderRadius","borderRadiusMedium","overflow","MouseEventHandler","EntityStatusBadge","EntityStatus","PickUnion","AssetIcon","EntryIcon","ReleaseIcon","MoreHorizontalIcon","Icon","Text","DragHandle","DragHandleProps","Button","Menu","getEntityListItemStyles","SkeletonBodyText","SkeletonContainer","SkeletonImage","Flex","Box","EntityListItemStatus","ICON_MAP","asset","entry","release","title","description","contentType","status","withThumbnail","thumbnailUrl","thumbnailAltText","actions","ReactNodeArray","withDragHandle","isDragActive","cardDragHandleComponent","cardDragHandleProps","Partial","entityType","isLoading","onClick","href","isActionsDisabled","otherProps","ReactElement","renderCardDragHandle","dragHandle","Element","ElementType","isArchived","asIcon","card","undefined","media","toLowerCase","thumbnail","content","meta","menuTrigger","Pick","boxShadow","position","transition","transitionDurationShort","transitionEasingDefault","transitionProperty","backgroundColor","colorWhite","boxShadowHeavy","gray100","textDecoration","width","minHeight","spacing3Xl","spacingXs","background","textAlign","flexShrink","alignItems","justifyContent","spacing2Xl","height","marginRight","marginLeft","marginTop","spacing2Xs","borderBottomLeftRadius","borderTopLeftRadius"],"version":3,"file":"module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-entity-list",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.15.0",
|
|
4
4
|
"description": "Forma 36: EntityList component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "parcel build"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@babel/runtime": "^7.6.2",
|
|
10
|
-
"@contentful/f36-badge": "^4.
|
|
11
|
-
"@contentful/f36-button": "^4.
|
|
12
|
-
"@contentful/f36-core": "^4.
|
|
13
|
-
"@contentful/f36-drag-handle": "^4.
|
|
14
|
-
"@contentful/f36-icon": "^4.
|
|
15
|
-
"@contentful/f36-icons": "^4.
|
|
16
|
-
"@contentful/f36-menu": "^4.
|
|
17
|
-
"@contentful/f36-skeleton": "^4.
|
|
10
|
+
"@contentful/f36-badge": "^4.15.0",
|
|
11
|
+
"@contentful/f36-button": "^4.15.0",
|
|
12
|
+
"@contentful/f36-core": "^4.15.0",
|
|
13
|
+
"@contentful/f36-drag-handle": "^4.15.0",
|
|
14
|
+
"@contentful/f36-icon": "^4.15.0",
|
|
15
|
+
"@contentful/f36-icons": "^4.15.0",
|
|
16
|
+
"@contentful/f36-menu": "^4.15.0",
|
|
17
|
+
"@contentful/f36-skeleton": "^4.15.0",
|
|
18
18
|
"@contentful/f36-tokens": "^4.0.1",
|
|
19
|
-
"@contentful/f36-typography": "^4.
|
|
19
|
+
"@contentful/f36-typography": "^4.15.0",
|
|
20
20
|
"emotion": "^10.0.17"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|