@trafilea/afrodita-components 6.15.0 → 6.15.2
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 +14 -6
- package/build/index.esm.js +21 -12
- package/build/index.esm.js.map +1 -1
- package/build/index.js +21 -12
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -5230,7 +5230,10 @@ var Title$7 = newStyled.h1(templateObject_6$q || (templateObject_6$q = __makeTem
|
|
|
5230
5230
|
return color;
|
|
5231
5231
|
});
|
|
5232
5232
|
var IconContainer$5 = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5233
|
-
var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right:
|
|
5233
|
+
var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5234
|
+
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5235
|
+
return right;
|
|
5236
|
+
});
|
|
5234
5237
|
var templateObject_1$1J, templateObject_2$19, templateObject_3$W, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g;
|
|
5235
5238
|
|
|
5236
5239
|
var useOnClickOutside = function (ref, handler) {
|
|
@@ -5307,13 +5310,13 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
5307
5310
|
|
|
5308
5311
|
var Tooltip = function (_a) {
|
|
5309
5312
|
var _b;
|
|
5310
|
-
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d;
|
|
5313
|
+
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.closeBtnSize, closeBtnSize = _e === void 0 ? 0.5 : _e;
|
|
5311
5314
|
var theme = useTheme();
|
|
5312
|
-
var
|
|
5315
|
+
var _f = React$2.useState(0), childrenWidth = _f[0], setChildrenWidth = _f[1];
|
|
5313
5316
|
var childrenRef = React$2.createRef();
|
|
5314
|
-
var
|
|
5317
|
+
var _g = React$2.useState(0), tooltipHeight = _g[0], setTooltipHeight = _g[1];
|
|
5315
5318
|
var tooltipRef = React$2.createRef();
|
|
5316
|
-
var
|
|
5319
|
+
var _h = React$2.useState(false), closeTooltip = _h[0], setCloseTooltip = _h[1];
|
|
5317
5320
|
var isMobile = useWindowDimensions().isMobile;
|
|
5318
5321
|
React$2.useLayoutEffect(function () {
|
|
5319
5322
|
var ref = childrenRef.current;
|
|
@@ -5323,7 +5326,7 @@ var Tooltip = function (_a) {
|
|
|
5323
5326
|
var ref = tooltipRef.current;
|
|
5324
5327
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
5325
5328
|
}, [tooltipRef]);
|
|
5326
|
-
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip
|
|
5329
|
+
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxRuntime.jsxs(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, {
|
|
5327
5330
|
testId: 'HeaderIcon',
|
|
5328
5331
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5329
5332
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -5893,7 +5896,7 @@ var radioIds = {
|
|
|
5893
5896
|
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5894
5897
|
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5895
5898
|
var AutoshipV2 = function (_a) {
|
|
5896
|
-
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel;
|
|
5899
|
+
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
5897
5900
|
var theme = useTheme();
|
|
5898
5901
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5899
5902
|
? frequencyValues.map(function (value) {
|
|
@@ -5901,7 +5904,9 @@ var AutoshipV2 = function (_a) {
|
|
|
5901
5904
|
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5902
5905
|
})
|
|
5903
5906
|
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5904
|
-
var
|
|
5907
|
+
var initialRadioChecked = radioIds.autoship &&
|
|
5908
|
+
((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.includes(radioIds.autoship.id)) ? radioIds.oneTime : radioIds.autoship);
|
|
5909
|
+
var _d = React$2.useState(initialRadioChecked), radioCheck = _d[0], setRadioCheck = _d[1];
|
|
5905
5910
|
var _e = React$2.useState(dropdownOptions[0].value), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
|
|
5906
5911
|
var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
|
|
5907
5912
|
var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
|
|
@@ -5910,7 +5915,7 @@ var AutoshipV2 = function (_a) {
|
|
|
5910
5915
|
var autoShipPctOverListPrice = (autoShipSaving / listPrice) * 100;
|
|
5911
5916
|
var autoShipPctOverListPriceRounded = Math.round(autoShipPctOverListPrice / 5) * 5;
|
|
5912
5917
|
var updatedAutoshipBenefits = benefits !== null && benefits !== void 0 ? benefits : __spreadArray([
|
|
5913
|
-
"Save up to ".concat(autoShipPctOverListPriceRounded, "% always")
|
|
5918
|
+
"<span style=\"font-weight: 600\">Save up to ".concat(autoShipPctOverListPriceRounded, "% always.</span>")
|
|
5914
5919
|
], autoshipBenefits.slice(0), true);
|
|
5915
5920
|
var createDataObject = function () {
|
|
5916
5921
|
return {
|
|
@@ -5924,6 +5929,9 @@ var AutoshipV2 = function (_a) {
|
|
|
5924
5929
|
onChange(createDataObject());
|
|
5925
5930
|
}, []);
|
|
5926
5931
|
var handleChange = function (value, type) {
|
|
5932
|
+
if (disabledInputs && disabledInputs.includes(value.id)) {
|
|
5933
|
+
return;
|
|
5934
|
+
}
|
|
5927
5935
|
var dataObj = createDataObject();
|
|
5928
5936
|
if (type === 'radio') {
|
|
5929
5937
|
setRadioCheck(value);
|
|
@@ -5935,9 +5943,9 @@ var AutoshipV2 = function (_a) {
|
|
|
5935
5943
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5936
5944
|
};
|
|
5937
5945
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5938
|
-
return (jsxRuntime.jsxs(Container$11, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsxRuntime.jsx("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "
|
|
5946
|
+
return (jsxRuntime.jsxs(Container$11, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsxRuntime.jsx("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5939
5947
|
? benefitsColor.selected
|
|
5940
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText,
|
|
5948
|
+
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(FlexContainer, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
5941
5949
|
};
|
|
5942
5950
|
|
|
5943
5951
|
var _a$2;
|
|
@@ -19336,11 +19344,12 @@ var templateObject_1$d, templateObject_2$9;
|
|
|
19336
19344
|
var SizeSelector = function (_a) {
|
|
19337
19345
|
var _b;
|
|
19338
19346
|
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, onClickSizeTip = _a.onClickSizeTip, _c = _a.inline, inline = _c === void 0 ? false : _c, width = _a.width, _d = _a.hasSizeGuide, hasSizeGuide = _d === void 0 ? false : _d, sizeTipReferences = _a.sizeTipReferences;
|
|
19347
|
+
var activeSizeTip = sizeTipReferences === null || sizeTipReferences === void 0 ? void 0 : sizeTipReferences.find(function (sizeTip) { return (sizeTip === null || sizeTip === void 0 ? void 0 : sizeTip.size) === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label); });
|
|
19339
19348
|
return (jsxs("div", __assign$1({ css: {
|
|
19340
19349
|
display: 'flex',
|
|
19341
19350
|
flexDirection: inline ? 'row' : 'column',
|
|
19342
19351
|
alignItems: inline ? 'center' : 'start',
|
|
19343
|
-
} }, { children: [jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$7, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children:
|
|
19352
|
+
} }, { children: [jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$7, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, __assign$1({ "data-testid": "sizing-tip" }, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.tip }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { hideIcon: true, onClick: onClickSizeTip, title: (_b = activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.cta) !== null && _b !== void 0 ? _b : 'Size and Fit Guide' }, void 0))] }), void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes === null || sizes === void 0 ? void 0 : sizes.map(function (size) {
|
|
19344
19353
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
19345
19354
|
return (jsx(SelectorSecondary, { css: {
|
|
19346
19355
|
padding: '0.75rem 1rem 0.625rem',
|