@atlaskit/media-card 77.12.0 → 77.12.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.
Files changed (52) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/card/card.js +5 -5
  3. package/dist/cjs/card/inlinePlayerWrapperStyles.js +1 -1
  4. package/dist/cjs/card/media-card-analytics-error-boundary.js +1 -1
  5. package/dist/cjs/card/ui/wrapper/styles.js +1 -1
  6. package/dist/cjs/card/v2/cardV2.js +1 -1
  7. package/dist/cjs/card/v2/fileCard.js +1 -1
  8. package/dist/cjs/inline/loader.js +1 -1
  9. package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js +11 -11
  10. package/dist/cjs/utils/ufoExperiences.js +1 -1
  11. package/dist/es2019/card/card.js +5 -5
  12. package/dist/es2019/card/inlinePlayerWrapperStyles.js +12 -12
  13. package/dist/es2019/card/media-card-analytics-error-boundary.js +1 -1
  14. package/dist/es2019/card/ui/wrapper/styles.js +21 -21
  15. package/dist/es2019/card/v2/cardV2.js +1 -1
  16. package/dist/es2019/card/v2/fileCard.js +1 -1
  17. package/dist/es2019/inline/loader.js +1 -1
  18. package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js +11 -11
  19. package/dist/es2019/utils/ufoExperiences.js +1 -1
  20. package/dist/esm/card/card.js +5 -5
  21. package/dist/esm/card/inlinePlayerWrapperStyles.js +1 -1
  22. package/dist/esm/card/media-card-analytics-error-boundary.js +1 -1
  23. package/dist/esm/card/ui/wrapper/styles.js +1 -1
  24. package/dist/esm/card/v2/cardV2.js +1 -1
  25. package/dist/esm/card/v2/fileCard.js +1 -1
  26. package/dist/esm/inline/loader.js +1 -1
  27. package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js +11 -11
  28. package/dist/esm/utils/ufoExperiences.js +1 -1
  29. package/dist/types/card/ui/iconWrapper/styles.d.ts +1 -1
  30. package/dist/types/card/ui/titleBox/styles.d.ts +1 -1
  31. package/dist/types/utils/preventClickThrough.d.ts +1 -1
  32. package/dist/types/utils/viewportDetector.d.ts +1 -1
  33. package/dist/types-ts4.5/card/ui/iconWrapper/styles.d.ts +1 -1
  34. package/dist/types-ts4.5/card/ui/titleBox/styles.d.ts +1 -1
  35. package/dist/types-ts4.5/utils/preventClickThrough.d.ts +1 -1
  36. package/dist/types-ts4.5/utils/viewportDetector.d.ts +1 -1
  37. package/example-helpers/DelayedRender.tsx +19 -19
  38. package/example-helpers/cardViewWrapper.tsx +18 -22
  39. package/example-helpers/cards.tsx +268 -331
  40. package/example-helpers/developmentUseMessage.tsx +8 -9
  41. package/example-helpers/index.tsx +100 -124
  42. package/example-helpers/selectableCard.tsx +32 -35
  43. package/example-helpers/ssrHelpers.tsx +19 -29
  44. package/example-helpers/styles.ts +73 -73
  45. package/example-helpers/svg-helpers/cardContainer.tsx +15 -21
  46. package/example-helpers/svg-helpers/controls.tsx +11 -11
  47. package/example-helpers/svg-helpers/dimensionPicker.tsx +85 -93
  48. package/example-helpers/svg-helpers/svgContainer.tsx +18 -18
  49. package/example-helpers/svg-helpers/toggle.tsx +28 -29
  50. package/example-helpers/svg-helpers/uploader.ts +33 -33
  51. package/package.json +5 -5
  52. package/report.api.md +227 -232
package/example-helpers/cards.tsx CHANGED
@@ -1,16 +1,16 @@
1
1
  import React from 'react';
2
2
 
3
3
  import {
4
- createStorybookMediaClientConfig,
5
- imageFileId,
6
- unknownFileId,
7
- errorFileId,
8
- videoFileId,
9
- audioFileId,
10
- docFileId,
11
- smallImageFileId,
12
- wideImageFileId,
13
- largeImageFileId,
4
+ createStorybookMediaClientConfig,
5
+ imageFileId,
6
+ unknownFileId,
7
+ errorFileId,
8
+ videoFileId,
9
+ audioFileId,
10
+ docFileId,
11
+ smallImageFileId,
12
+ wideImageFileId,
13
+ largeImageFileId,
14
14
  } from '@atlaskit/media-test-helpers';
15
15
  import { type FileIdentifier } from '@atlaskit/media-client';
16
16
 
@@ -21,82 +21,74 @@ const mediaClientConfig = createStorybookMediaClientConfig();
21
21
  // standard
22
22
  const successIdentifier: FileIdentifier = imageFileId;
23
23
  export const standardCards = [
24
- {
25
- title: 'Image',
26
- content: (
27
- <Card
28
- identifier={successIdentifier}
29
- mediaClientConfig={mediaClientConfig}
30
- appearance="image"
31
- />
32
- ),
33
- },
24
+ {
25
+ title: 'Image',
26
+ content: (
27
+ <Card
28
+ identifier={successIdentifier}
29
+ mediaClientConfig={mediaClientConfig}
30
+ appearance="image"
31
+ />
32
+ ),
33
+ },
34
34
  ];
35
35
 
36
36
  export const cardWithContextId = [
37
- {
38
- title: 'Image with parameter',
39
- content: (
40
- <Card
41
- identifier={successIdentifier}
42
- mediaClientConfig={mediaClientConfig}
43
- appearance="image"
44
- contextId="some-id"
45
- />
46
- ),
47
- },
37
+ {
38
+ title: 'Image with parameter',
39
+ content: (
40
+ <Card
41
+ identifier={successIdentifier}
42
+ mediaClientConfig={mediaClientConfig}
43
+ appearance="image"
44
+ contextId="some-id"
45
+ />
46
+ ),
47
+ },
48
48
  ];
49
49
 
50
50
  //error cards
51
51
  export const errorCardsDark = [
52
- {
53
- title: 'Image',
54
- content: (
55
- <Card
56
- identifier={errorFileId}
57
- mediaClientConfig={mediaClientConfig}
58
- appearance="image"
59
- />
60
- ),
61
- },
52
+ {
53
+ title: 'Image',
54
+ content: (
55
+ <Card identifier={errorFileId} mediaClientConfig={mediaClientConfig} appearance="image" />
56
+ ),
57
+ },
62
58
  ];
63
59
 
64
60
  export const errorCards = [
65
- {
66
- title: 'Image',
67
- content: (
68
- <Card
69
- identifier={errorFileId}
70
- mediaClientConfig={mediaClientConfig}
71
- appearance="image"
72
- />
73
- ),
74
- },
75
- {
76
- title: 'Image with alt text',
77
- content: (
78
- <Card
79
- identifier={errorFileId}
80
- mediaClientConfig={mediaClientConfig}
81
- alt="When an image fails to load, you will see the alt text value here (if present)"
82
- appearance="image"
83
- />
84
- ),
85
- },
61
+ {
62
+ title: 'Image',
63
+ content: (
64
+ <Card identifier={errorFileId} mediaClientConfig={mediaClientConfig} appearance="image" />
65
+ ),
66
+ },
67
+ {
68
+ title: 'Image with alt text',
69
+ content: (
70
+ <Card
71
+ identifier={errorFileId}
72
+ mediaClientConfig={mediaClientConfig}
73
+ alt="When an image fails to load, you will see the alt text value here (if present)"
74
+ appearance="image"
75
+ />
76
+ ),
77
+ },
86
78
  ];
87
79
 
88
80
  export const menuCards = [
89
- {
90
- title: 'Image',
91
- content: (
92
- <Card
93
- identifier={successIdentifier}
94
- mediaClientConfig={mediaClientConfig}
95
- appearance="image"
96
- actions={actions}
97
- />
98
- ),
99
- },
81
+ {
82
+ title: 'Image',
83
+ content: (
84
+ <Card
85
+ identifier={successIdentifier}
86
+ mediaClientConfig={mediaClientConfig}
87
+ appearance="image"
88
+ actions={actions}
89
+ />
90
+ ),
91
+ },
100
92
  ];
101
93
 
102
94
  // api cards
@@ -104,316 +96,261 @@ export const apiCards = createApiCards('image', successIdentifier);
104
96
 
105
97
  // no thumbnail
106
98
  export const noThumbnailCards = [
107
- {
108
- title: 'Image',
109
- content: (
110
- <Card
111
- identifier={unknownFileId}
112
- mediaClientConfig={mediaClientConfig}
113
- appearance="image"
114
- />
115
- ),
116
- },
99
+ {
100
+ title: 'Image',
101
+ content: (
102
+ <Card identifier={unknownFileId} mediaClientConfig={mediaClientConfig} appearance="image" />
103
+ ),
104
+ },
117
105
  ];
118
106
 
119
107
  // lazy load
120
108
  export const lazyLoadCards = [
121
- {
122
- title: 'Lazy',
123
- content: (
124
- <Card
125
- isLazy={true}
126
- identifier={successIdentifier}
127
- mediaClientConfig={mediaClientConfig}
128
- appearance="image"
129
- />
130
- ),
131
- },
132
- {
133
- title: 'No lazy',
134
- content: (
135
- <Card
136
- isLazy={false}
137
- identifier={successIdentifier}
138
- mediaClientConfig={mediaClientConfig}
139
- appearance="image"
140
- />
141
- ),
142
- },
109
+ {
110
+ title: 'Lazy',
111
+ content: (
112
+ <Card
113
+ isLazy={true}
114
+ identifier={successIdentifier}
115
+ mediaClientConfig={mediaClientConfig}
116
+ appearance="image"
117
+ />
118
+ ),
119
+ },
120
+ {
121
+ title: 'No lazy',
122
+ content: (
123
+ <Card
124
+ isLazy={false}
125
+ identifier={successIdentifier}
126
+ mediaClientConfig={mediaClientConfig}
127
+ appearance="image"
128
+ />
129
+ ),
130
+ },
143
131
  ];
144
132
 
145
133
  // no hover state cards
146
134
  export const noHoverStateCards = [
147
- {
148
- title: 'Overlay disabled',
149
- content: (
150
- <Card
151
- identifier={successIdentifier}
152
- mediaClientConfig={mediaClientConfig}
153
- appearance="image"
154
- disableOverlay={true}
155
- />
156
- ),
157
- },
158
- {
159
- title: 'Selected',
160
- content: (
161
- <Card
162
- identifier={successIdentifier}
163
- mediaClientConfig={mediaClientConfig}
164
- appearance="image"
165
- disableOverlay={true}
166
- selectable={true}
167
- selected={true}
168
- />
169
- ),
170
- },
135
+ {
136
+ title: 'Overlay disabled',
137
+ content: (
138
+ <Card
139
+ identifier={successIdentifier}
140
+ mediaClientConfig={mediaClientConfig}
141
+ appearance="image"
142
+ disableOverlay={true}
143
+ />
144
+ ),
145
+ },
146
+ {
147
+ title: 'Selected',
148
+ content: (
149
+ <Card
150
+ identifier={successIdentifier}
151
+ mediaClientConfig={mediaClientConfig}
152
+ appearance="image"
153
+ disableOverlay={true}
154
+ selectable={true}
155
+ selected={true}
156
+ />
157
+ ),
158
+ },
171
159
  ];
172
160
 
173
161
  // collection and no collection configuration of files
174
162
  export const fileWithNoCollection: FileIdentifier = {
175
- mediaItemType: 'file',
176
- id: 'e84c54a4-38b2-463f-ae27-5ba043c3e4c2',
163
+ mediaItemType: 'file',
164
+ id: 'e84c54a4-38b2-463f-ae27-5ba043c3e4c2',
177
165
  };
178
166
 
179
167
  export const collectionConfigCards = [
180
- {
181
- title: 'Standalone file (NO collection)',
182
- content: (
183
- <Card
184
- identifier={fileWithNoCollection}
185
- mediaClientConfig={mediaClientConfig}
186
- />
187
- ),
188
- },
189
- {
190
- title: 'File within collection',
191
- content: (
192
- <Card
193
- identifier={successIdentifier}
194
- mediaClientConfig={mediaClientConfig}
195
- />
196
- ),
197
- },
168
+ {
169
+ title: 'Standalone file (NO collection)',
170
+ content: <Card identifier={fileWithNoCollection} mediaClientConfig={mediaClientConfig} />,
171
+ },
172
+ {
173
+ title: 'File within collection',
174
+ content: <Card identifier={successIdentifier} mediaClientConfig={mediaClientConfig} />,
175
+ },
198
176
  ];
199
177
 
200
178
  const divStyle = {
201
- width: '100px',
202
- height: '100px',
179
+ width: '100px',
180
+ height: '100px',
203
181
  };
204
182
  const dimensions = { height: 50, width: 50 };
205
183
 
206
184
  export const lightDefaultCards = [
207
- {
208
- title: 'Medium Loading',
209
- content: (
210
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
211
- <div style={divStyle}>
212
- <CardLoading />
213
- </div>
214
- ),
215
- },
216
- {
217
- title: 'Medium Error',
218
- content: (
219
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
220
- <div style={divStyle}>
221
- <CardError />
222
- </div>
223
- ),
224
- },
185
+ {
186
+ title: 'Medium Loading',
187
+ content: (
188
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
189
+ <div style={divStyle}>
190
+ <CardLoading />
191
+ </div>
192
+ ),
193
+ },
194
+ {
195
+ title: 'Medium Error',
196
+ content: (
197
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
198
+ <div style={divStyle}>
199
+ <CardError />
200
+ </div>
201
+ ),
202
+ },
225
203
  ];
226
204
 
227
205
  export const lightResizedCards = [
228
- {
229
- title: 'Medium Loading',
230
- content: <CardLoading dimensions={dimensions} />,
231
- },
232
- {
233
- title: 'Medium Error',
234
- content: <CardError dimensions={dimensions} />,
235
- },
206
+ {
207
+ title: 'Medium Loading',
208
+ content: <CardLoading dimensions={dimensions} />,
209
+ },
210
+ {
211
+ title: 'Medium Error',
212
+ content: <CardError dimensions={dimensions} />,
213
+ },
236
214
  ];
237
215
 
238
216
  // file cards
239
217
  export const videoFileCard = (
240
- <Card mediaClientConfig={mediaClientConfig} identifier={videoFileId} />
218
+ <Card mediaClientConfig={mediaClientConfig} identifier={videoFileId} />
241
219
  );
242
220
 
243
221
  export const imageFileCard = (
244
- <Card mediaClientConfig={mediaClientConfig} identifier={imageFileId} />
222
+ <Card mediaClientConfig={mediaClientConfig} identifier={imageFileId} />
245
223
  );
246
224
 
247
225
  export const audioFileCard = (
248
- <Card mediaClientConfig={mediaClientConfig} identifier={audioFileId} />
226
+ <Card mediaClientConfig={mediaClientConfig} identifier={audioFileId} />
249
227
  );
250
228
 
251
- export const docFileCard = (
252
- <Card mediaClientConfig={mediaClientConfig} identifier={docFileId} />
253
- );
229
+ export const docFileCard = <Card mediaClientConfig={mediaClientConfig} identifier={docFileId} />;
254
230
 
255
231
  export const unknownFileCard = (
256
- <Card mediaClientConfig={mediaClientConfig} identifier={unknownFileId} />
232
+ <Card mediaClientConfig={mediaClientConfig} identifier={unknownFileId} />
257
233
  );
258
234
 
259
235
  export const resizingDefaultCards = [
260
- {
261
- title: 'Small',
262
- content: (
263
- <Card
264
- identifier={smallImageFileId}
265
- mediaClientConfig={mediaClientConfig}
266
- />
267
- ),
268
- },
269
- {
270
- title: 'Wide',
271
- content: (
272
- <Card
273
- identifier={wideImageFileId}
274
- mediaClientConfig={mediaClientConfig}
275
- />
276
- ),
277
- },
278
- {
279
- title: 'Large',
280
- content: (
281
- <Card
282
- identifier={largeImageFileId}
283
- mediaClientConfig={mediaClientConfig}
284
- />
285
- ),
286
- },
236
+ {
237
+ title: 'Small',
238
+ content: <Card identifier={smallImageFileId} mediaClientConfig={mediaClientConfig} />,
239
+ },
240
+ {
241
+ title: 'Wide',
242
+ content: <Card identifier={wideImageFileId} mediaClientConfig={mediaClientConfig} />,
243
+ },
244
+ {
245
+ title: 'Large',
246
+ content: <Card identifier={largeImageFileId} mediaClientConfig={mediaClientConfig} />,
247
+ },
287
248
  ];
288
249
 
289
250
  export const croppedCards = [
290
- {
291
- title: 'Small',
292
- content: (
293
- <Card
294
- identifier={smallImageFileId}
295
- mediaClientConfig={mediaClientConfig}
296
- resizeMode="crop"
297
- />
298
- ),
299
- },
300
- {
301
- title: 'Wide',
302
- content: (
303
- <Card
304
- identifier={wideImageFileId}
305
- mediaClientConfig={mediaClientConfig}
306
- resizeMode="crop"
307
- />
308
- ),
309
- },
310
- {
311
- title: 'Large',
312
- content: (
313
- <Card
314
- identifier={largeImageFileId}
315
- mediaClientConfig={mediaClientConfig}
316
- resizeMode="crop"
317
- />
318
- ),
319
- },
251
+ {
252
+ title: 'Small',
253
+ content: (
254
+ <Card identifier={smallImageFileId} mediaClientConfig={mediaClientConfig} resizeMode="crop" />
255
+ ),
256
+ },
257
+ {
258
+ title: 'Wide',
259
+ content: (
260
+ <Card identifier={wideImageFileId} mediaClientConfig={mediaClientConfig} resizeMode="crop" />
261
+ ),
262
+ },
263
+ {
264
+ title: 'Large',
265
+ content: (
266
+ <Card identifier={largeImageFileId} mediaClientConfig={mediaClientConfig} resizeMode="crop" />
267
+ ),
268
+ },
320
269
  ];
321
270
 
322
271
  export const fitCards = [
323
- {
324
- title: 'Small',
325
- content: (
326
- <Card
327
- identifier={smallImageFileId}
328
- mediaClientConfig={mediaClientConfig}
329
- resizeMode="fit"
330
- />
331
- ),
332
- },
333
- {
334
- title: 'Wide',
335
- content: (
336
- <Card
337
- identifier={wideImageFileId}
338
- mediaClientConfig={mediaClientConfig}
339
- resizeMode="fit"
340
- />
341
- ),
342
- },
343
- {
344
- title: 'Large',
345
- content: (
346
- <Card
347
- identifier={largeImageFileId}
348
- mediaClientConfig={mediaClientConfig}
349
- resizeMode="fit"
350
- />
351
- ),
352
- },
272
+ {
273
+ title: 'Small',
274
+ content: (
275
+ <Card identifier={smallImageFileId} mediaClientConfig={mediaClientConfig} resizeMode="fit" />
276
+ ),
277
+ },
278
+ {
279
+ title: 'Wide',
280
+ content: (
281
+ <Card identifier={wideImageFileId} mediaClientConfig={mediaClientConfig} resizeMode="fit" />
282
+ ),
283
+ },
284
+ {
285
+ title: 'Large',
286
+ content: (
287
+ <Card identifier={largeImageFileId} mediaClientConfig={mediaClientConfig} resizeMode="fit" />
288
+ ),
289
+ },
353
290
  ];
354
291
 
355
292
  export const fullFitCards = [
356
- {
357
- title: 'Small',
358
- content: (
359
- <Card
360
- identifier={smallImageFileId}
361
- mediaClientConfig={mediaClientConfig}
362
- resizeMode="full-fit"
363
- />
364
- ),
365
- },
366
- {
367
- title: 'Wide',
368
- content: (
369
- <Card
370
- identifier={wideImageFileId}
371
- mediaClientConfig={mediaClientConfig}
372
- resizeMode="full-fit"
373
- />
374
- ),
375
- },
376
- {
377
- title: 'Large',
378
- content: (
379
- <Card
380
- identifier={largeImageFileId}
381
- mediaClientConfig={mediaClientConfig}
382
- resizeMode="full-fit"
383
- />
384
- ),
385
- },
293
+ {
294
+ title: 'Small',
295
+ content: (
296
+ <Card
297
+ identifier={smallImageFileId}
298
+ mediaClientConfig={mediaClientConfig}
299
+ resizeMode="full-fit"
300
+ />
301
+ ),
302
+ },
303
+ {
304
+ title: 'Wide',
305
+ content: (
306
+ <Card
307
+ identifier={wideImageFileId}
308
+ mediaClientConfig={mediaClientConfig}
309
+ resizeMode="full-fit"
310
+ />
311
+ ),
312
+ },
313
+ {
314
+ title: 'Large',
315
+ content: (
316
+ <Card
317
+ identifier={largeImageFileId}
318
+ mediaClientConfig={mediaClientConfig}
319
+ resizeMode="full-fit"
320
+ />
321
+ ),
322
+ },
386
323
  ];
387
324
 
388
325
  export const stretchyFitCards = [
389
- {
390
- title: 'Small',
391
- content: (
392
- <Card
393
- identifier={smallImageFileId}
394
- mediaClientConfig={mediaClientConfig}
395
- resizeMode="stretchy-fit"
396
- />
397
- ),
398
- },
399
- {
400
- title: 'Wide',
401
- content: (
402
- <Card
403
- identifier={wideImageFileId}
404
- mediaClientConfig={mediaClientConfig}
405
- resizeMode="stretchy-fit"
406
- />
407
- ),
408
- },
409
- {
410
- title: 'Large',
411
- content: (
412
- <Card
413
- identifier={largeImageFileId}
414
- mediaClientConfig={mediaClientConfig}
415
- resizeMode="stretchy-fit"
416
- />
417
- ),
418
- },
326
+ {
327
+ title: 'Small',
328
+ content: (
329
+ <Card
330
+ identifier={smallImageFileId}
331
+ mediaClientConfig={mediaClientConfig}
332
+ resizeMode="stretchy-fit"
333
+ />
334
+ ),
335
+ },
336
+ {
337
+ title: 'Wide',
338
+ content: (
339
+ <Card
340
+ identifier={wideImageFileId}
341
+ mediaClientConfig={mediaClientConfig}
342
+ resizeMode="stretchy-fit"
343
+ />
344
+ ),
345
+ },
346
+ {
347
+ title: 'Large',
348
+ content: (
349
+ <Card
350
+ identifier={largeImageFileId}
351
+ mediaClientConfig={mediaClientConfig}
352
+ resizeMode="stretchy-fit"
353
+ />
354
+ ),
355
+ },
419
356
  ];