@meduza/ui-kit-2 0.1.99 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui-kit-2.cjs.development.js +114 -102
- 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 +114 -102
- package/dist/ui-kit-2.esm.js.map +1 -1
- package/dist/ui-kit.css +1888 -1890
- package/package.json +1 -1
- package/src/DonatesTeaser/DonatesTeaser.module.css +12 -16
- package/src/DonatesTeaser/index.tsx +7 -7
- package/src/RawHtmlBlock/index.tsx +5 -0
- package/src/ShopRelatedBlock/ShopRelatedBlock.module.css +14 -13
|
@@ -1997,7 +1997,7 @@ var MetaContainer = function MetaContainer(_ref) {
|
|
|
1997
1997
|
})));
|
|
1998
1998
|
};
|
|
1999
1999
|
|
|
2000
|
-
var styles$w = {"root":"DonatesTeaser-module_root__3rtaJ","
|
|
2000
|
+
var styles$w = {"root":"DonatesTeaser-module_root__3rtaJ","main":"DonatesTeaser-module_main__YBt6p","title":"DonatesTeaser-module_title__hs-yr","text":"DonatesTeaser-module_text__ro-QA","cta":"DonatesTeaser-module_cta__1orPb","ctaInner":"DonatesTeaser-module_ctaInner__2LChL","center":"DonatesTeaser-module_center__2Ynx9","isInCard":"DonatesTeaser-module_isInCard__HrFh8","isInSlide":"DonatesTeaser-module_isInSlide__1vC4Z"};
|
|
2001
2001
|
|
|
2002
2002
|
var DonatesTeaser = function DonatesTeaser(_ref) {
|
|
2003
2003
|
var styleContext = _ref.styleContext,
|
|
@@ -2011,15 +2011,14 @@ var DonatesTeaser = function DonatesTeaser(_ref) {
|
|
|
2011
2011
|
|
|
2012
2012
|
var data = {
|
|
2013
2013
|
ru: {
|
|
2014
|
-
title: '
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
button: 'Дать денег',
|
|
2014
|
+
title: 'Вы совершили чудо',
|
|
2015
|
+
subtitle: '«Медуза» продолжает работать, потому что есть вы',
|
|
2016
|
+
button: '«Медуза», я с тобой ',
|
|
2018
2017
|
href: 'https://support.meduza.io'
|
|
2019
2018
|
},
|
|
2020
2019
|
en: {
|
|
2021
2020
|
title: 'Tune in and help Meduza!',
|
|
2022
|
-
|
|
2021
|
+
subtitle: 'We’re only here thanks to you.',
|
|
2023
2022
|
button: 'Pledge today',
|
|
2024
2023
|
href: 'https://support.meduza.io/en'
|
|
2025
2024
|
}
|
|
@@ -2035,6 +2034,11 @@ var DonatesTeaser = function DonatesTeaser(_ref) {
|
|
|
2035
2034
|
dangerouslySetInnerHTML: {
|
|
2036
2035
|
__html: data[lang].title
|
|
2037
2036
|
}
|
|
2037
|
+
}), " ", React__default.createElement("span", {
|
|
2038
|
+
className: styles$w.text,
|
|
2039
|
+
dangerouslySetInnerHTML: {
|
|
2040
|
+
__html: data[lang].subtitle
|
|
2041
|
+
}
|
|
2038
2042
|
}))), React__default.createElement("div", {
|
|
2039
2043
|
className: styles$w.cta
|
|
2040
2044
|
}, React__default.createElement("a", {
|
|
@@ -2517,6 +2521,99 @@ var RelatedRichBlock = function RelatedRichBlock(_ref) {
|
|
|
2517
2521
|
})));
|
|
2518
2522
|
};
|
|
2519
2523
|
|
|
2524
|
+
var styles$C = {"root":"ShopRelatedBlock-module_root__x4vdk","wrapper":"ShopRelatedBlock-module_wrapper__3jQp9","overlay":"ShopRelatedBlock-module_overlay__15S5a","overlayHeader":"ShopRelatedBlock-module_overlayHeader__2IXK-","body":"ShopRelatedBlock-module_body__3ipYj","hasGradient":"ShopRelatedBlock-module_hasGradient__1pghj","picture":"ShopRelatedBlock-module_picture__1bu9H","tag":"ShopRelatedBlock-module_tag__2vTKm","center":"ShopRelatedBlock-module_center__2H85-","title":"ShopRelatedBlock-module_title__1ZIW0","price":"ShopRelatedBlock-module_price__2cVXM","dark":"ShopRelatedBlock-module_dark__3Gfbc","light":"ShopRelatedBlock-module_light__1y8Qy","mobile":"ShopRelatedBlock-module_mobile__AleU0","desktop":"ShopRelatedBlock-module_desktop__2--zA"};
|
|
2525
|
+
|
|
2526
|
+
/* eslint-disable react/jsx-no-target-blank */
|
|
2527
|
+
var ShopRelatedBlock = function ShopRelatedBlock(_ref) {
|
|
2528
|
+
var _ref$block = _ref.block,
|
|
2529
|
+
onlyOn = _ref$block.only_on,
|
|
2530
|
+
_ref$block$data = _ref$block.data,
|
|
2531
|
+
url = _ref$block$data.url,
|
|
2532
|
+
_ref$block$data$cover = _ref$block$data.cover,
|
|
2533
|
+
urls = _ref$block$data$cover.urls,
|
|
2534
|
+
gradients = _ref$block$data$cover.gradients,
|
|
2535
|
+
tag = _ref$block$data$cover.tag,
|
|
2536
|
+
layout = _ref$block$data$cover.layout,
|
|
2537
|
+
ratio = _ref$block$data$cover.ratio,
|
|
2538
|
+
firstTitle = _ref$block$data$cover.first_title,
|
|
2539
|
+
secondTitle = _ref$block$data$cover.second_title,
|
|
2540
|
+
styleContext = _ref.styleContext;
|
|
2541
|
+
var style = {};
|
|
2542
|
+
var styleHeader = {};
|
|
2543
|
+
|
|
2544
|
+
var _useInView = reactIntersectionObserver.useInView({
|
|
2545
|
+
threshold: 0,
|
|
2546
|
+
triggerOnce: true
|
|
2547
|
+
}),
|
|
2548
|
+
ref = _useInView[0],
|
|
2549
|
+
inView = _useInView[1];
|
|
2550
|
+
|
|
2551
|
+
React.useEffect(function () {
|
|
2552
|
+
if (inView) {
|
|
2553
|
+
if (onlyOn === 'mobile' && window.innerWidth <= 511 || onlyOn === 'desktop' && window.innerWidth >= 512 || !onlyOn) {
|
|
2554
|
+
postMessage('productRelated', url, 'view');
|
|
2555
|
+
}
|
|
2556
|
+
}
|
|
2557
|
+
}, [inView]);
|
|
2558
|
+
|
|
2559
|
+
var handleClick = function handleClick() {
|
|
2560
|
+
postMessage('productRelated', url, 'click');
|
|
2561
|
+
};
|
|
2562
|
+
|
|
2563
|
+
var classNames = [[styles$C.root, true], [styles$C.hasGradient, !!gradients], [styles$C[onlyOn], !!onlyOn && !!styles$C[onlyOn]]];
|
|
2564
|
+
|
|
2565
|
+
if (styleContext) {
|
|
2566
|
+
classNames = makeStyleContext(classNames, styleContext, styles$C);
|
|
2567
|
+
}
|
|
2568
|
+
|
|
2569
|
+
if (gradients) {
|
|
2570
|
+
styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
|
|
2571
|
+
var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
|
|
2572
|
+
classNames = makeStyleContext(classNames, theme, styles$C);
|
|
2573
|
+
|
|
2574
|
+
if (onlyOn === 'desktop') {
|
|
2575
|
+
style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
|
|
2576
|
+
}
|
|
2577
|
+
}
|
|
2578
|
+
|
|
2579
|
+
return React__default.createElement("a", {
|
|
2580
|
+
"data-testid": "related-rich-block",
|
|
2581
|
+
className: makeClassName(classNames),
|
|
2582
|
+
href: url,
|
|
2583
|
+
target: "_blank",
|
|
2584
|
+
onClick: function onClick() {
|
|
2585
|
+
return handleClick();
|
|
2586
|
+
},
|
|
2587
|
+
ref: ref
|
|
2588
|
+
}, layout === 'rich' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
|
|
2589
|
+
className: styles$C.overlay,
|
|
2590
|
+
style: style
|
|
2591
|
+
}), React__default.createElement("div", {
|
|
2592
|
+
className: styles$C.overlayHeader,
|
|
2593
|
+
style: styleHeader
|
|
2594
|
+
})), React__default.createElement("div", {
|
|
2595
|
+
className: styles$C.tag
|
|
2596
|
+
}, React__default.createElement(Tag, {
|
|
2597
|
+
size: "small",
|
|
2598
|
+
theme: "inherit",
|
|
2599
|
+
styleContext: "richRelated"
|
|
2600
|
+
}, tag)), React__default.createElement("div", {
|
|
2601
|
+
className: styles$C.cover
|
|
2602
|
+
}, React__default.createElement("div", {
|
|
2603
|
+
className: styles$C.picture
|
|
2604
|
+
}, React__default.createElement(Image, {
|
|
2605
|
+
optimized: urls,
|
|
2606
|
+
ratio: ratio,
|
|
2607
|
+
display: "narrow"
|
|
2608
|
+
}))), React__default.createElement("div", {
|
|
2609
|
+
className: styles$C.body
|
|
2610
|
+
}, React__default.createElement("h2", {
|
|
2611
|
+
className: styles$C.title
|
|
2612
|
+
}, firstTitle, React__default.createElement("span", {
|
|
2613
|
+
className: styles$C.price
|
|
2614
|
+
}, secondTitle))));
|
|
2615
|
+
};
|
|
2616
|
+
|
|
2520
2617
|
var RawHtmlBlock = function RawHtmlBlock(_ref) {
|
|
2521
2618
|
var block = _ref.block,
|
|
2522
2619
|
styleContext = _ref.styleContext,
|
|
@@ -2573,6 +2670,14 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
|
|
|
2573
2670
|
});
|
|
2574
2671
|
}
|
|
2575
2672
|
|
|
2673
|
+
case 'related_shop':
|
|
2674
|
+
{
|
|
2675
|
+
return React__default.createElement(ShopRelatedBlock, {
|
|
2676
|
+
block: block,
|
|
2677
|
+
styleContext: styleContext
|
|
2678
|
+
});
|
|
2679
|
+
}
|
|
2680
|
+
|
|
2576
2681
|
default:
|
|
2577
2682
|
{
|
|
2578
2683
|
return React__default.createElement(BlockProvider, {
|
|
@@ -2590,7 +2695,7 @@ var RawHtmlBlock = function RawHtmlBlock(_ref) {
|
|
|
2590
2695
|
}
|
|
2591
2696
|
};
|
|
2592
2697
|
|
|
2593
|
-
var styles$
|
|
2698
|
+
var styles$D = {"root":"ToolbarButton-module_root__xN-fq","isDark":"ToolbarButton-module_isDark__2q5U7","dark":"ToolbarButton-module_dark__GrIOr","bookmark":"ToolbarButton-module_bookmark__3369b","isActive":"ToolbarButton-module_isActive__3NLAE","text":"ToolbarButton-module_text__32m6s"};
|
|
2594
2699
|
|
|
2595
2700
|
var ToolbarButton = function ToolbarButton(_ref) {
|
|
2596
2701
|
var children = _ref.children,
|
|
@@ -2598,7 +2703,7 @@ var ToolbarButton = function ToolbarButton(_ref) {
|
|
|
2598
2703
|
theme = _ref.theme,
|
|
2599
2704
|
isActive = _ref.isActive,
|
|
2600
2705
|
_onClick = _ref.onClick;
|
|
2601
|
-
var classNames = [[styles$
|
|
2706
|
+
var classNames = [[styles$D.root, true], [styles$D[type], !!styles$D[type]], [styles$D[theme], !!styles$D[theme] && !!theme], [styles$D.isActive, !!isActive]];
|
|
2602
2707
|
return React__default.createElement("li", {
|
|
2603
2708
|
className: toolbarStyles.item
|
|
2604
2709
|
}, React__default.createElement("button", {
|
|
@@ -2613,103 +2718,10 @@ var ToolbarButton = function ToolbarButton(_ref) {
|
|
|
2613
2718
|
icon: type,
|
|
2614
2719
|
styleContext: "isInToolbar"
|
|
2615
2720
|
}), children && React__default.createElement("span", {
|
|
2616
|
-
className: styles$
|
|
2721
|
+
className: styles$D.text
|
|
2617
2722
|
}, children)));
|
|
2618
2723
|
};
|
|
2619
2724
|
|
|
2620
|
-
var styles$D = {"root":"ShopRelatedBlock-module_root__x4vdk","wrapper":"ShopRelatedBlock-module_wrapper__3jQp9","overlay":"ShopRelatedBlock-module_overlay__15S5a","overlayHeader":"ShopRelatedBlock-module_overlayHeader__2IXK-","body":"ShopRelatedBlock-module_body__3ipYj","hasGradient":"ShopRelatedBlock-module_hasGradient__1pghj","picture":"ShopRelatedBlock-module_picture__1bu9H","tag":"ShopRelatedBlock-module_tag__2vTKm","center":"ShopRelatedBlock-module_center__2H85-","title":"ShopRelatedBlock-module_title__1ZIW0","price":"ShopRelatedBlock-module_price__2cVXM","dark":"ShopRelatedBlock-module_dark__3Gfbc","light":"ShopRelatedBlock-module_light__1y8Qy","mobile":"ShopRelatedBlock-module_mobile__AleU0","desktop":"ShopRelatedBlock-module_desktop__2--zA"};
|
|
2621
|
-
|
|
2622
|
-
/* eslint-disable react/jsx-no-target-blank */
|
|
2623
|
-
var ShopRelatedBlock = function ShopRelatedBlock(_ref) {
|
|
2624
|
-
var _ref$block = _ref.block,
|
|
2625
|
-
onlyOn = _ref$block.only_on,
|
|
2626
|
-
_ref$block$data = _ref$block.data,
|
|
2627
|
-
url = _ref$block$data.url,
|
|
2628
|
-
_ref$block$data$cover = _ref$block$data.cover,
|
|
2629
|
-
urls = _ref$block$data$cover.urls,
|
|
2630
|
-
gradients = _ref$block$data$cover.gradients,
|
|
2631
|
-
tag = _ref$block$data$cover.tag,
|
|
2632
|
-
layout = _ref$block$data$cover.layout,
|
|
2633
|
-
ratio = _ref$block$data$cover.ratio,
|
|
2634
|
-
firstTitle = _ref$block$data$cover.first_title,
|
|
2635
|
-
secondTitle = _ref$block$data$cover.second_title,
|
|
2636
|
-
styleContext = _ref.styleContext;
|
|
2637
|
-
var style = {};
|
|
2638
|
-
var styleHeader = {};
|
|
2639
|
-
|
|
2640
|
-
var _useInView = reactIntersectionObserver.useInView({
|
|
2641
|
-
threshold: 0,
|
|
2642
|
-
triggerOnce: true
|
|
2643
|
-
}),
|
|
2644
|
-
ref = _useInView[0],
|
|
2645
|
-
inView = _useInView[1];
|
|
2646
|
-
|
|
2647
|
-
React.useEffect(function () {
|
|
2648
|
-
if (inView) {
|
|
2649
|
-
if (onlyOn === 'mobile' && window.innerWidth <= 511 || onlyOn === 'desktop' && window.innerWidth >= 512 || !onlyOn) {
|
|
2650
|
-
postMessage('productRelated', url, 'view');
|
|
2651
|
-
}
|
|
2652
|
-
}
|
|
2653
|
-
}, [inView]);
|
|
2654
|
-
|
|
2655
|
-
var handleClick = function handleClick() {
|
|
2656
|
-
postMessage('productRelated', url, 'click');
|
|
2657
|
-
};
|
|
2658
|
-
|
|
2659
|
-
var classNames = [[styles$D.root, true], [styles$D.hasGradient, !!gradients], [styles$D[onlyOn], !!onlyOn && !!styles$D[onlyOn]]];
|
|
2660
|
-
|
|
2661
|
-
if (styleContext) {
|
|
2662
|
-
classNames = makeStyleContext(classNames, styleContext, styles$D);
|
|
2663
|
-
}
|
|
2664
|
-
|
|
2665
|
-
if (gradients) {
|
|
2666
|
-
styleHeader.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockTop');
|
|
2667
|
-
var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
|
|
2668
|
-
classNames = makeStyleContext(classNames, theme, styles$D);
|
|
2669
|
-
|
|
2670
|
-
if (onlyOn === 'desktop') {
|
|
2671
|
-
style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom');
|
|
2672
|
-
}
|
|
2673
|
-
}
|
|
2674
|
-
|
|
2675
|
-
return React__default.createElement("a", {
|
|
2676
|
-
"data-testid": "related-rich-block",
|
|
2677
|
-
className: makeClassName(classNames),
|
|
2678
|
-
href: url,
|
|
2679
|
-
target: "_blank",
|
|
2680
|
-
onClick: function onClick() {
|
|
2681
|
-
return handleClick();
|
|
2682
|
-
},
|
|
2683
|
-
ref: ref
|
|
2684
|
-
}, layout === 'rich' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
|
|
2685
|
-
className: styles$D.overlay,
|
|
2686
|
-
style: style
|
|
2687
|
-
}), React__default.createElement("div", {
|
|
2688
|
-
className: styles$D.overlayHeader,
|
|
2689
|
-
style: styleHeader
|
|
2690
|
-
})), React__default.createElement("div", {
|
|
2691
|
-
className: styles$D.tag
|
|
2692
|
-
}, React__default.createElement(Tag, {
|
|
2693
|
-
size: "small",
|
|
2694
|
-
theme: "inherit",
|
|
2695
|
-
styleContext: "richRelated"
|
|
2696
|
-
}, tag)), React__default.createElement("div", {
|
|
2697
|
-
className: styles$D.cover
|
|
2698
|
-
}, React__default.createElement("div", {
|
|
2699
|
-
className: styles$D.picture
|
|
2700
|
-
}, React__default.createElement(Image, {
|
|
2701
|
-
optimized: urls,
|
|
2702
|
-
ratio: ratio,
|
|
2703
|
-
display: "narrow"
|
|
2704
|
-
}))), React__default.createElement("div", {
|
|
2705
|
-
className: styles$D.body
|
|
2706
|
-
}, React__default.createElement("h2", {
|
|
2707
|
-
className: styles$D.title
|
|
2708
|
-
}, firstTitle, React__default.createElement("span", {
|
|
2709
|
-
className: styles$D.price
|
|
2710
|
-
}, secondTitle))));
|
|
2711
|
-
};
|
|
2712
|
-
|
|
2713
2725
|
exports.BookmarkButton = BookmarkButton;
|
|
2714
2726
|
exports.Button = Button;
|
|
2715
2727
|
exports.CardTitle = CardTitle;
|