@trafilea/afrodita-components 5.0.0-beta.114 → 5.0.0-beta.116
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/build/index.d.ts +1 -0
- package/build/index.esm.js +15 -6
- package/build/index.esm.js.map +1 -1
- package/build/index.js +15 -6
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -5062,8 +5062,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
5062
5062
|
};
|
|
5063
5063
|
case exports.ComponentSize.Small:
|
|
5064
5064
|
return {
|
|
5065
|
-
fontSize: '
|
|
5066
|
-
finalPricefontSize: '
|
|
5065
|
+
fontSize: '14px',
|
|
5066
|
+
finalPricefontSize: '20px',
|
|
5067
5067
|
finalPricefontSizeSmall: '12px',
|
|
5068
5068
|
margin: '0 0 0 0.5rem',
|
|
5069
5069
|
lineHeight: '1.25rem',
|
|
@@ -17449,13 +17449,13 @@ var IconContainer = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __
|
|
|
17449
17449
|
var IconPlaceholder = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
17450
17450
|
var DiscountContainer = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"], ["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"])));
|
|
17451
17451
|
var PackSelector = function (_a) {
|
|
17452
|
-
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
17452
|
+
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17453
17453
|
return (jsxRuntime.jsx(Container$9, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17454
|
-
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
17454
|
+
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17455
17455
|
}) }), void 0));
|
|
17456
17456
|
};
|
|
17457
17457
|
var PackCard = function (_a) {
|
|
17458
|
-
var pack = _a.pack, onChange = _a.onChange, selected = _a.selected;
|
|
17458
|
+
var pack = _a.pack, onChange = _a.onChange, selected = _a.selected, currencyCode = _a.currencyCode;
|
|
17459
17459
|
var _b = React$2.useState(null), icon = _b[0], setIcon = _b[1];
|
|
17460
17460
|
React$2.useEffect(function () {
|
|
17461
17461
|
fetch(pack.meta.icon)
|
|
@@ -17465,7 +17465,16 @@ var PackCard = function (_a) {
|
|
|
17465
17465
|
}, [pack.meta.icon]);
|
|
17466
17466
|
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
17467
17467
|
color: 'var(--colors-semantic-urgent-color)',
|
|
17468
|
-
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice
|
|
17468
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
17469
|
+
locale: 'en-US',
|
|
17470
|
+
currency: currencyCode || 'USD',
|
|
17471
|
+
}) }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
|
|
17472
|
+
locale: 'en-US',
|
|
17473
|
+
currency: currencyCode || 'USD',
|
|
17474
|
+
})] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
17475
|
+
locale: 'en-US',
|
|
17476
|
+
currency: currencyCode || 'USD',
|
|
17477
|
+
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17469
17478
|
};
|
|
17470
17479
|
var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$5, templateObject_5$3, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
17471
17480
|
|