@financial-times/x-teaser 14.6.3 → 14.6.5

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 (6) hide show
  1. package/__tests__/__snapshots__/snapshots.test.js.snap +41 -41
  2. package/dist/Teaser.cjs.js +5 -4
  3. package/dist/Teaser.es5.js +5 -6
  4. package/dist/Teaser.esm.js +5 -4
  5. package/package.json +2 -2
  6. package/src/Image.jsx +3 -5
package/__tests__/__snapshots__/snapshots.test.js.snap CHANGED
@@ -45,7 +45,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with article data 1`] = `
45
45
  className="o-teaser__image-placeholder"
46
46
  style={
47
47
  Object {
48
- "paddingBottom": "56.2500%",
48
+ "aspectRatio": "2048/1152",
49
49
  }
50
50
  }
51
51
  >
@@ -105,7 +105,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with article-with-data-image
105
105
  className="o-teaser__image-placeholder"
106
106
  style={
107
107
  Object {
108
- "paddingBottom": "56.2500%",
108
+ "aspectRatio": "2048/1152",
109
109
  }
110
110
  }
111
111
  >
@@ -200,7 +200,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with contentPackage data 1`]
200
200
  className="o-teaser__image-placeholder"
201
201
  style={
202
202
  Object {
203
- "paddingBottom": "56.2500%",
203
+ "aspectRatio": "2048/1152",
204
204
  }
205
205
  }
206
206
  >
@@ -308,7 +308,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with packageItem data 1`] =
308
308
  className="o-teaser__image-placeholder"
309
309
  style={
310
310
  Object {
311
- "paddingBottom": "56.2500%",
311
+ "aspectRatio": "2048/1152",
312
312
  }
313
313
  }
314
314
  >
@@ -374,7 +374,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with podcast data 1`] = `
374
374
  className="o-teaser__image-placeholder"
375
375
  style={
376
376
  Object {
377
- "paddingBottom": "56.2500%",
377
+ "aspectRatio": "2048/1152",
378
378
  }
379
379
  }
380
380
  >
@@ -437,7 +437,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with promoted data 1`] = `
437
437
  className="o-teaser__image-placeholder"
438
438
  style={
439
439
  Object {
440
- "paddingBottom": "56.2857%",
440
+ "aspectRatio": "700/394",
441
441
  }
442
442
  }
443
443
  >
@@ -498,7 +498,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with topStory data 1`] = `
498
498
  className="o-teaser__image-placeholder"
499
499
  style={
500
500
  Object {
501
- "paddingBottom": "56.2500%",
501
+ "aspectRatio": "2048/1152",
502
502
  }
503
503
  }
504
504
  >
@@ -564,7 +564,7 @@ exports[`x-teaser / snapshots renders a Hero teaser with video data 1`] = `
564
564
  className="o-teaser__image-placeholder"
565
565
  style={
566
566
  Object {
567
- "paddingBottom": "56.2500%",
567
+ "aspectRatio": "1920/1080",
568
568
  }
569
569
  }
570
570
  >
@@ -1123,7 +1123,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with article data 1`]
1123
1123
  className="o-teaser__image-placeholder"
1124
1124
  style={
1125
1125
  Object {
1126
- "paddingBottom": "56.2500%",
1126
+ "aspectRatio": "2048/1152",
1127
1127
  }
1128
1128
  }
1129
1129
  >
@@ -1183,7 +1183,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with article-with-dat
1183
1183
  className="o-teaser__image-placeholder"
1184
1184
  style={
1185
1185
  Object {
1186
- "paddingBottom": "56.2500%",
1186
+ "aspectRatio": "2048/1152",
1187
1187
  }
1188
1188
  }
1189
1189
  >
@@ -1278,7 +1278,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with contentPackage d
1278
1278
  className="o-teaser__image-placeholder"
1279
1279
  style={
1280
1280
  Object {
1281
- "paddingBottom": "56.2500%",
1281
+ "aspectRatio": "2048/1152",
1282
1282
  }
1283
1283
  }
1284
1284
  >
@@ -1386,7 +1386,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with packageItem data
1386
1386
  className="o-teaser__image-placeholder"
1387
1387
  style={
1388
1388
  Object {
1389
- "paddingBottom": "56.2500%",
1389
+ "aspectRatio": "2048/1152",
1390
1390
  }
1391
1391
  }
1392
1392
  >
@@ -1452,7 +1452,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with podcast data 1`]
1452
1452
  className="o-teaser__image-placeholder"
1453
1453
  style={
1454
1454
  Object {
1455
- "paddingBottom": "56.2500%",
1455
+ "aspectRatio": "2048/1152",
1456
1456
  }
1457
1457
  }
1458
1458
  >
@@ -1515,7 +1515,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with promoted data 1`
1515
1515
  className="o-teaser__image-placeholder"
1516
1516
  style={
1517
1517
  Object {
1518
- "paddingBottom": "56.2857%",
1518
+ "aspectRatio": "700/394",
1519
1519
  }
1520
1520
  }
1521
1521
  >
@@ -1576,7 +1576,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with topStory data 1`
1576
1576
  className="o-teaser__image-placeholder"
1577
1577
  style={
1578
1578
  Object {
1579
- "paddingBottom": "56.2500%",
1579
+ "aspectRatio": "2048/1152",
1580
1580
  }
1581
1581
  }
1582
1582
  >
@@ -1642,7 +1642,7 @@ exports[`x-teaser / snapshots renders a HeroOverlay teaser with video data 1`] =
1642
1642
  className="o-teaser__image-placeholder"
1643
1643
  style={
1644
1644
  Object {
1645
- "paddingBottom": "56.2500%",
1645
+ "aspectRatio": "1920/1080",
1646
1646
  }
1647
1647
  }
1648
1648
  >
@@ -2062,7 +2062,7 @@ exports[`x-teaser / snapshots renders a HeroVideo teaser with video data 1`] = `
2062
2062
  className="o-teaser__image-placeholder"
2063
2063
  style={
2064
2064
  Object {
2065
- "paddingBottom": "56.2500%",
2065
+ "aspectRatio": "1920/1080",
2066
2066
  }
2067
2067
  }
2068
2068
  >
@@ -2149,7 +2149,7 @@ exports[`x-teaser / snapshots renders a Large teaser with article data 1`] = `
2149
2149
  className="o-teaser__image-placeholder"
2150
2150
  style={
2151
2151
  Object {
2152
- "paddingBottom": "56.2500%",
2152
+ "aspectRatio": "2048/1152",
2153
2153
  }
2154
2154
  }
2155
2155
  >
@@ -2221,7 +2221,7 @@ exports[`x-teaser / snapshots renders a Large teaser with article-with-data-imag
2221
2221
  className="o-teaser__image-placeholder"
2222
2222
  style={
2223
2223
  Object {
2224
- "paddingBottom": "56.2500%",
2224
+ "aspectRatio": "2048/1152",
2225
2225
  }
2226
2226
  }
2227
2227
  >
@@ -2340,7 +2340,7 @@ exports[`x-teaser / snapshots renders a Large teaser with contentPackage data 1`
2340
2340
  className="o-teaser__image-placeholder"
2341
2341
  style={
2342
2342
  Object {
2343
- "paddingBottom": "56.2500%",
2343
+ "aspectRatio": "2048/1152",
2344
2344
  }
2345
2345
  }
2346
2346
  >
@@ -2472,7 +2472,7 @@ exports[`x-teaser / snapshots renders a Large teaser with packageItem data 1`] =
2472
2472
  className="o-teaser__image-placeholder"
2473
2473
  style={
2474
2474
  Object {
2475
- "paddingBottom": "56.2500%",
2475
+ "aspectRatio": "2048/1152",
2476
2476
  }
2477
2477
  }
2478
2478
  >
@@ -2550,7 +2550,7 @@ exports[`x-teaser / snapshots renders a Large teaser with podcast data 1`] = `
2550
2550
  className="o-teaser__image-placeholder"
2551
2551
  style={
2552
2552
  Object {
2553
- "paddingBottom": "56.2500%",
2553
+ "aspectRatio": "2048/1152",
2554
2554
  }
2555
2555
  }
2556
2556
  >
@@ -2625,7 +2625,7 @@ exports[`x-teaser / snapshots renders a Large teaser with promoted data 1`] = `
2625
2625
  className="o-teaser__image-placeholder"
2626
2626
  style={
2627
2627
  Object {
2628
- "paddingBottom": "56.2857%",
2628
+ "aspectRatio": "700/394",
2629
2629
  }
2630
2630
  }
2631
2631
  >
@@ -2698,7 +2698,7 @@ exports[`x-teaser / snapshots renders a Large teaser with topStory data 1`] = `
2698
2698
  className="o-teaser__image-placeholder"
2699
2699
  style={
2700
2700
  Object {
2701
- "paddingBottom": "56.2500%",
2701
+ "aspectRatio": "2048/1152",
2702
2702
  }
2703
2703
  }
2704
2704
  >
@@ -2776,7 +2776,7 @@ exports[`x-teaser / snapshots renders a Large teaser with video data 1`] = `
2776
2776
  className="o-teaser__image-placeholder"
2777
2777
  style={
2778
2778
  Object {
2779
- "paddingBottom": "56.2500%",
2779
+ "aspectRatio": "1920/1080",
2780
2780
  }
2781
2781
  }
2782
2782
  >
@@ -3227,7 +3227,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with article data 1`]
3227
3227
  className="o-teaser__image-placeholder"
3228
3228
  style={
3229
3229
  Object {
3230
- "paddingBottom": "56.2500%",
3230
+ "aspectRatio": "2048/1152",
3231
3231
  }
3232
3232
  }
3233
3233
  >
@@ -3299,7 +3299,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with article-with-data
3299
3299
  className="o-teaser__image-placeholder"
3300
3300
  style={
3301
3301
  Object {
3302
- "paddingBottom": "56.2500%",
3302
+ "aspectRatio": "2048/1152",
3303
3303
  }
3304
3304
  }
3305
3305
  >
@@ -3418,7 +3418,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with contentPackage da
3418
3418
  className="o-teaser__image-placeholder"
3419
3419
  style={
3420
3420
  Object {
3421
- "paddingBottom": "56.2500%",
3421
+ "aspectRatio": "2048/1152",
3422
3422
  }
3423
3423
  }
3424
3424
  >
@@ -3550,7 +3550,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with packageItem data
3550
3550
  className="o-teaser__image-placeholder"
3551
3551
  style={
3552
3552
  Object {
3553
- "paddingBottom": "56.2500%",
3553
+ "aspectRatio": "2048/1152",
3554
3554
  }
3555
3555
  }
3556
3556
  >
@@ -3628,7 +3628,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with podcast data 1`]
3628
3628
  className="o-teaser__image-placeholder"
3629
3629
  style={
3630
3630
  Object {
3631
- "paddingBottom": "56.2500%",
3631
+ "aspectRatio": "2048/1152",
3632
3632
  }
3633
3633
  }
3634
3634
  >
@@ -3703,7 +3703,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with promoted data 1`]
3703
3703
  className="o-teaser__image-placeholder"
3704
3704
  style={
3705
3705
  Object {
3706
- "paddingBottom": "56.2857%",
3706
+ "aspectRatio": "700/394",
3707
3707
  }
3708
3708
  }
3709
3709
  >
@@ -3776,7 +3776,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with topStory data 1`]
3776
3776
  className="o-teaser__image-placeholder"
3777
3777
  style={
3778
3778
  Object {
3779
- "paddingBottom": "56.2500%",
3779
+ "aspectRatio": "2048/1152",
3780
3780
  }
3781
3781
  }
3782
3782
  >
@@ -3854,7 +3854,7 @@ exports[`x-teaser / snapshots renders a SmallHeavy teaser with video data 1`] =
3854
3854
  className="o-teaser__image-placeholder"
3855
3855
  style={
3856
3856
  Object {
3857
- "paddingBottom": "56.2500%",
3857
+ "aspectRatio": "1920/1080",
3858
3858
  }
3859
3859
  }
3860
3860
  >
@@ -4462,7 +4462,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with article da
4462
4462
  className="o-teaser__image-placeholder"
4463
4463
  style={
4464
4464
  Object {
4465
- "paddingBottom": "56.2500%",
4465
+ "aspectRatio": "2048/1152",
4466
4466
  }
4467
4467
  }
4468
4468
  >
@@ -4534,7 +4534,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with article-wi
4534
4534
  className="o-teaser__image-placeholder"
4535
4535
  style={
4536
4536
  Object {
4537
- "paddingBottom": "56.2500%",
4537
+ "aspectRatio": "2048/1152",
4538
4538
  }
4539
4539
  }
4540
4540
  >
@@ -4653,7 +4653,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with contentPac
4653
4653
  className="o-teaser__image-placeholder"
4654
4654
  style={
4655
4655
  Object {
4656
- "paddingBottom": "56.2500%",
4656
+ "aspectRatio": "2048/1152",
4657
4657
  }
4658
4658
  }
4659
4659
  >
@@ -4785,7 +4785,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with packageIte
4785
4785
  className="o-teaser__image-placeholder"
4786
4786
  style={
4787
4787
  Object {
4788
- "paddingBottom": "56.2500%",
4788
+ "aspectRatio": "2048/1152",
4789
4789
  }
4790
4790
  }
4791
4791
  >
@@ -4863,7 +4863,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with podcast da
4863
4863
  className="o-teaser__image-placeholder"
4864
4864
  style={
4865
4865
  Object {
4866
- "paddingBottom": "56.2500%",
4866
+ "aspectRatio": "2048/1152",
4867
4867
  }
4868
4868
  }
4869
4869
  >
@@ -4938,7 +4938,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with promoted d
4938
4938
  className="o-teaser__image-placeholder"
4939
4939
  style={
4940
4940
  Object {
4941
- "paddingBottom": "56.2857%",
4941
+ "aspectRatio": "700/394",
4942
4942
  }
4943
4943
  }
4944
4944
  >
@@ -5011,7 +5011,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with topStory d
5011
5011
  className="o-teaser__image-placeholder"
5012
5012
  style={
5013
5013
  Object {
5014
- "paddingBottom": "56.2500%",
5014
+ "aspectRatio": "2048/1152",
5015
5015
  }
5016
5016
  }
5017
5017
  >
@@ -5126,7 +5126,7 @@ exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with video data
5126
5126
  className="o-teaser__image-placeholder"
5127
5127
  style={
5128
5128
  Object {
5129
- "paddingBottom": "56.2500%",
5129
+ "aspectRatio": "1920/1080",
5130
5130
  }
5131
5131
  }
5132
5132
  >
package/dist/Teaser.cjs.js CHANGED
@@ -205,10 +205,11 @@ const aspectRatio = ({
205
205
  height
206
206
  }) => {
207
207
  if (typeof width === 'number' && typeof height === 'number') {
208
- const ratio = 100 / width * height;
209
- return ratio.toFixed(4) + '%';
208
+ return {
209
+ aspectRatio: `${width}/${height}`
210
+ };
210
211
  }
211
- return null;
212
+ return {};
212
213
  };
213
214
  const NormalImage = ({
214
215
  src,
@@ -262,7 +263,7 @@ var Image = (({
262
263
  }), xEngine.h("div", {
263
264
  className: "o-teaser__image-placeholder",
264
265
  style: {
265
- paddingBottom: aspectRatio(image)
266
+ ...aspectRatio(image)
266
267
  }
267
268
  }, xEngine.h(ImageComponent, {
268
269
  src: imageSrc,
package/dist/Teaser.es5.js CHANGED
@@ -289,10 +289,11 @@ var aspectRatio = function aspectRatio(_ref) {
289
289
  var width = _ref.width,
290
290
  height = _ref.height;
291
291
  if (typeof width === 'number' && typeof height === 'number') {
292
- var ratio = 100 / width * height;
293
- return ratio.toFixed(4) + '%';
292
+ return {
293
+ aspectRatio: "".concat(width, "/").concat(height)
294
+ };
294
295
  }
295
- return null;
296
+ return {};
296
297
  };
297
298
  var NormalImage = function NormalImage(_ref2) {
298
299
  var src = _ref2.src,
@@ -344,9 +345,7 @@ var Image = (function (_ref4) {
344
345
  }
345
346
  }), xEngine.h("div", {
346
347
  className: "o-teaser__image-placeholder",
347
- style: {
348
- paddingBottom: aspectRatio(image)
349
- }
348
+ style: _objectSpread2({}, aspectRatio(image))
350
349
  }, xEngine.h(ImageComponent, {
351
350
  src: imageSrc,
352
351
  lazyLoad: imageLazyLoad,
package/dist/Teaser.esm.js CHANGED
@@ -199,10 +199,11 @@ const aspectRatio = ({
199
199
  height
200
200
  }) => {
201
201
  if (typeof width === 'number' && typeof height === 'number') {
202
- const ratio = 100 / width * height;
203
- return ratio.toFixed(4) + '%';
202
+ return {
203
+ aspectRatio: `${width}/${height}`
204
+ };
204
205
  }
205
- return null;
206
+ return {};
206
207
  };
207
208
  const NormalImage = ({
208
209
  src,
@@ -256,7 +257,7 @@ var Image = (({
256
257
  }), h("div", {
257
258
  className: "o-teaser__image-placeholder",
258
259
  style: {
259
- paddingBottom: aspectRatio(image)
260
+ ...aspectRatio(image)
260
261
  }
261
262
  }, h(ImageComponent, {
262
263
  src: imageSrc,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/x-teaser",
3
- "version": "14.6.3",
3
+ "version": "14.6.5",
4
4
  "description": "This module provides templates for use with o-teaser. Teasers are used to present content.",
5
5
  "source": "src/Teaser.jsx",
6
6
  "main": "dist/Teaser.cjs.js",
@@ -17,7 +17,7 @@
17
17
  "author": "",
18
18
  "license": "ISC",
19
19
  "dependencies": {
20
- "@financial-times/x-engine": "^14.6.3",
20
+ "@financial-times/x-engine": "^14.6.5",
21
21
  "date-fns": "^2.30.0",
22
22
  "dateformat": "^3.0.3"
23
23
  },
package/src/Image.jsx CHANGED
@@ -10,11 +10,9 @@ import Link from './Link'
10
10
  */
11
11
  const aspectRatio = ({ width, height }) => {
12
12
  if (typeof width === 'number' && typeof height === 'number') {
13
- const ratio = (100 / width) * height
14
- return ratio.toFixed(4) + '%'
13
+ return { aspectRatio: `${width}/${height}` }
15
14
  }
16
-
17
- return null
15
+ return {}
18
16
  }
19
17
 
20
18
  const NormalImage = ({ src, alt }) => <img className="o-teaser__image" src={src} alt={alt} />
@@ -46,7 +44,7 @@ export default ({ relativeUrl, url, image, imageSize, imageLazyLoad, imageHighes
46
44
  'aria-hidden': 'true'
47
45
  }}
48
46
  >
49
- <div className="o-teaser__image-placeholder" style={{ paddingBottom: aspectRatio(image) }}>
47
+ <div className="o-teaser__image-placeholder" style={{ ...aspectRatio(image) }}>
50
48
  <ImageComponent src={imageSrc} lazyLoad={imageLazyLoad} alt={alt} />
51
49
  </div>
52
50
  </Link>