@meduza/ui-kit-2 0.1.42 → 0.1.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Image/Image.types.d.ts +1 -4
- package/dist/ui-kit-2.cjs.development.js +35 -51
- package/dist/ui-kit-2.cjs.development.js.map +1 -1
- package/dist/ui-kit-2.cjs.production.min.js +1 -1
- package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
- package/dist/ui-kit-2.esm.js +35 -51
- package/dist/ui-kit-2.esm.js.map +1 -1
- package/dist/ui-kit.css +1232 -1192
- package/package.json +1 -1
- package/src/DotsOnImage/DotsOnImage.module.css +41 -7
- package/src/DotsOnImage/index.tsx +1 -1
- package/src/DotsOnImage/mock.json +2 -2
- package/src/EmbedBlock/EmbedBlock.tsx +0 -1
- package/src/Image/Image.stories.tsx +0 -1
- package/src/Image/Image.types.ts +1 -4
- package/src/Image/index.tsx +3 -17
package/dist/ui-kit-2.esm.js
CHANGED
|
@@ -296,13 +296,6 @@ var BlockContext = /*#__PURE__*/React.createContext({
|
|
|
296
296
|
});
|
|
297
297
|
var BlockProvider = BlockContext.Provider;
|
|
298
298
|
|
|
299
|
-
var viewportSize = (function () {
|
|
300
|
-
return {
|
|
301
|
-
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
|
|
302
|
-
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
|
|
303
|
-
};
|
|
304
|
-
});
|
|
305
|
-
|
|
306
299
|
var POST_MESSAGE_PREFIX = 'mdzKitMsg';
|
|
307
300
|
|
|
308
301
|
var postMessage = function postMessage(category, element, action) {
|
|
@@ -318,29 +311,6 @@ var postMessage = function postMessage(category, element, action) {
|
|
|
318
311
|
}
|
|
319
312
|
};
|
|
320
313
|
|
|
321
|
-
var MediaQuerySizes = {
|
|
322
|
-
MOBILE: 512,
|
|
323
|
-
PORTRAIT_TABLET: 768,
|
|
324
|
-
LANDSCAPE_TABLET: 1024,
|
|
325
|
-
DESKTOP: 1010,
|
|
326
|
-
WIDE_DESKTOP: 1200
|
|
327
|
-
};
|
|
328
|
-
var imageBreakpoints = {
|
|
329
|
-
325: '(min-width: 0)',
|
|
330
|
-
520: '(min-width: 325px)',
|
|
331
|
-
600: '(min-width: 600px)',
|
|
332
|
-
650: '(min-width: 650px)',
|
|
333
|
-
980: '(min-width: 1000px)',
|
|
334
|
-
1335: '(min-width: 1000px)'
|
|
335
|
-
};
|
|
336
|
-
var imageConditionalKeys = {
|
|
337
|
-
xs: [325],
|
|
338
|
-
superFull: [1335, 650, 520, 325],
|
|
339
|
-
full: [980, 650, 520, 325],
|
|
340
|
-
"default": [650, 520, 325],
|
|
341
|
-
narrow: [600, 325]
|
|
342
|
-
};
|
|
343
|
-
|
|
344
314
|
var styles$3 = {"root":"Lazy-module_root__2Z72l"};
|
|
345
315
|
|
|
346
316
|
var Lazy = function Lazy(_ref) {
|
|
@@ -375,6 +345,29 @@ var Lazy = function Lazy(_ref) {
|
|
|
375
345
|
}, visible && children);
|
|
376
346
|
};
|
|
377
347
|
|
|
348
|
+
var MediaQuerySizes = {
|
|
349
|
+
MOBILE: 512,
|
|
350
|
+
PORTRAIT_TABLET: 768,
|
|
351
|
+
LANDSCAPE_TABLET: 1024,
|
|
352
|
+
DESKTOP: 1010,
|
|
353
|
+
WIDE_DESKTOP: 1200
|
|
354
|
+
};
|
|
355
|
+
var imageBreakpoints = {
|
|
356
|
+
325: '(min-width: 0)',
|
|
357
|
+
520: '(min-width: 325px)',
|
|
358
|
+
600: '(min-width: 600px)',
|
|
359
|
+
650: '(min-width: 650px)',
|
|
360
|
+
980: '(min-width: 1000px)',
|
|
361
|
+
1335: '(min-width: 1000px)'
|
|
362
|
+
};
|
|
363
|
+
var imageConditionalKeys = {
|
|
364
|
+
xs: [325],
|
|
365
|
+
superFull: [1335, 650, 520, 325],
|
|
366
|
+
full: [980, 650, 520, 325],
|
|
367
|
+
"default": [650, 520, 325],
|
|
368
|
+
narrow: [600, 325]
|
|
369
|
+
};
|
|
370
|
+
|
|
378
371
|
var toCamel = function toCamel(s) {
|
|
379
372
|
return s.replace(/([_][a-z])/gi, function (str) {
|
|
380
373
|
return str.toUpperCase().replace('_', '');
|
|
@@ -443,7 +436,8 @@ var Image = function Image(_ref) {
|
|
|
443
436
|
height = _ref.height,
|
|
444
437
|
source = _ref.source,
|
|
445
438
|
lazy = _ref.lazy,
|
|
446
|
-
fullscreen = _ref.fullscreen,
|
|
439
|
+
_ref$fullscreen = _ref.fullscreen,
|
|
440
|
+
fullscreen = _ref$fullscreen === void 0 ? true : _ref$fullscreen,
|
|
447
441
|
ratio = _ref.ratio,
|
|
448
442
|
styleContext = _ref.styleContext;
|
|
449
443
|
|
|
@@ -455,17 +449,7 @@ var Image = function Image(_ref) {
|
|
|
455
449
|
setIsLoaded = _useState[1];
|
|
456
450
|
|
|
457
451
|
var handleClick = function handleClick() {
|
|
458
|
-
if (!
|
|
459
|
-
return;
|
|
460
|
-
}
|
|
461
|
-
|
|
462
|
-
var _viewportSize = viewportSize(),
|
|
463
|
-
viewportWidth = _viewportSize.width;
|
|
464
|
-
|
|
465
|
-
var disableFullscreenDesktop = viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.desktop;
|
|
466
|
-
var disableFullscreenMobile = viewportWidth < MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.mobile;
|
|
467
|
-
|
|
468
|
-
if (disableFullscreenDesktop || disableFullscreenMobile) {
|
|
452
|
+
if (!lightBox || optimized && !optimized.original) {
|
|
469
453
|
return;
|
|
470
454
|
}
|
|
471
455
|
|
|
@@ -482,7 +466,7 @@ var Image = function Image(_ref) {
|
|
|
482
466
|
/* fallback w325 url until w6 was released */
|
|
483
467
|
|
|
484
468
|
var fallbackSource = source && source[0] || optimized.w325 && optimized.w325['1x'] || optimized.original;
|
|
485
|
-
var classNames = [[styles$4.root, true], [styles$4.isLoaded, isLoaded], [styles$4.fullscreen, fullscreen
|
|
469
|
+
var classNames = [[styles$4.root, true], [styles$4.isLoaded, isLoaded], [styles$4.fullscreen, fullscreen]];
|
|
486
470
|
|
|
487
471
|
if (styleContext) {
|
|
488
472
|
classNames = makeStyleContext(classNames, styleContext, styles$4);
|
|
@@ -636,6 +620,13 @@ var Footnote = function Footnote(_ref) {
|
|
|
636
620
|
}, children));
|
|
637
621
|
};
|
|
638
622
|
|
|
623
|
+
var viewportSize = (function () {
|
|
624
|
+
return {
|
|
625
|
+
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
|
|
626
|
+
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
|
|
627
|
+
};
|
|
628
|
+
});
|
|
629
|
+
|
|
639
630
|
var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","isVisible":"DotsOnImage-module_isVisible__Wqqqt","marker":"DotsOnImage-module_marker__lH5cP","show":"DotsOnImage-module_show__2TMBv","dot":"DotsOnImage-module_dot__H1wua","isActive":"DotsOnImage-module_isActive__3hh31","popover":"DotsOnImage-module_popover__35Cpj","isRight":"DotsOnImage-module_isRight__2RsJe","isTop":"DotsOnImage-module_isTop__3zmSK","isLeft":"DotsOnImage-module_isLeft__3quc9","isBottom":"DotsOnImage-module_isBottom__3Nk1T"};
|
|
640
631
|
|
|
641
632
|
var DotsOnImage = function DotsOnImage(_ref) {
|
|
@@ -754,10 +745,7 @@ var DotsOnImage = function DotsOnImage(_ref) {
|
|
|
754
745
|
height: height,
|
|
755
746
|
alt: credit,
|
|
756
747
|
display: display,
|
|
757
|
-
fullscreen:
|
|
758
|
-
mobile: false,
|
|
759
|
-
desktop: false
|
|
760
|
-
}
|
|
748
|
+
fullscreen: false
|
|
761
749
|
}), React.createElement("div", {
|
|
762
750
|
ref: container
|
|
763
751
|
}, dots.map(function (dot) {
|
|
@@ -1272,10 +1260,6 @@ var EmbedBlock = function EmbedBlock(_ref) {
|
|
|
1272
1260
|
return React.createElement("div", {
|
|
1273
1261
|
className: styles$i.figure
|
|
1274
1262
|
}, React.createElement(Image, {
|
|
1275
|
-
fullscreen: {
|
|
1276
|
-
desktop: block.data.fullscreen,
|
|
1277
|
-
mobile: true
|
|
1278
|
-
},
|
|
1279
1263
|
source: !optimized && [small, large],
|
|
1280
1264
|
optimized: block.data.optimized,
|
|
1281
1265
|
width: block.data.width,
|