@trafilea/afrodita-components 5.0.0-beta.2 → 5.0.0-beta.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.
- package/build/index.d.ts +5 -5
- package/build/index.esm.js +36 -45
- package/build/index.esm.js.map +1 -1
- package/build/index.js +36 -45
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -491,16 +491,16 @@ interface SizeSelectorProps {
|
|
|
491
491
|
selectedValue: SizeOption;
|
|
492
492
|
onChange: (size: SizeOption) => void;
|
|
493
493
|
inline?: boolean;
|
|
494
|
+
width?: string;
|
|
494
495
|
}
|
|
495
|
-
declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
496
|
+
declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, width, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
496
497
|
|
|
497
498
|
interface SizeFitGuideProps {
|
|
498
499
|
title: string;
|
|
499
|
-
|
|
500
|
-
fitPercentage: number;
|
|
500
|
+
fitPercentage?: number;
|
|
501
501
|
onClick: () => void;
|
|
502
502
|
}
|
|
503
|
-
declare const SizeFitGuide: ({ title,
|
|
503
|
+
declare const SizeFitGuide: ({ title, fitPercentage, onClick }: SizeFitGuideProps) => JSX.Element;
|
|
504
504
|
|
|
505
505
|
interface BaseButtonProps {
|
|
506
506
|
children: React.ReactNode;
|
|
@@ -1670,7 +1670,7 @@ interface PackOption {
|
|
|
1670
1670
|
}
|
|
1671
1671
|
interface PackSelectorProps {
|
|
1672
1672
|
packs: PackOption[];
|
|
1673
|
-
selectedValue:
|
|
1673
|
+
selectedValue: PackOption;
|
|
1674
1674
|
onChange: (size: PackOption) => void;
|
|
1675
1675
|
}
|
|
1676
1676
|
declare const PackSelector: FC<PackSelectorProps>;
|
package/build/index.esm.js
CHANGED
|
@@ -4008,13 +4008,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
4008
4008
|
}
|
|
4009
4009
|
};
|
|
4010
4010
|
var SimpleSelector = function (_a) {
|
|
4011
|
-
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
|
|
4011
|
+
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick;
|
|
4012
4012
|
var theme = useTheme();
|
|
4013
4013
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
4014
4014
|
var activeStyles = active
|
|
4015
4015
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
4016
4016
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
4017
|
-
return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
4017
|
+
return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { width: width, boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
4018
4018
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
4019
4019
|
}, '&:disabled': {
|
|
4020
4020
|
color: theme.colors.shades['250'].color,
|
|
@@ -4023,7 +4023,7 @@ var SimpleSelector = function (_a) {
|
|
|
4023
4023
|
};
|
|
4024
4024
|
|
|
4025
4025
|
var SelectorSecondary = function (_a) {
|
|
4026
|
-
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
|
|
4026
|
+
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, width = _a.width, onClick = _a.onClick;
|
|
4027
4027
|
var theme = useTheme();
|
|
4028
4028
|
var stylesByActive = active
|
|
4029
4029
|
? {
|
|
@@ -4038,7 +4038,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4038
4038
|
border: theme.component.selector.default.border,
|
|
4039
4039
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
4040
4040
|
};
|
|
4041
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
4041
|
+
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, width: width, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
4042
4042
|
background: theme.component.selector.hover.background,
|
|
4043
4043
|
color: theme.component.selector.hover.color,
|
|
4044
4044
|
}, '&:disabled': {
|
|
@@ -4053,7 +4053,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4053
4053
|
var TAGS = {
|
|
4054
4054
|
hero1: newStyled.h1(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""]))),
|
|
4055
4055
|
hero2: newStyled.h2(templateObject_2$E || (templateObject_2$E = __makeTemplateObject([""], [""]))),
|
|
4056
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4056
|
+
hero3: newStyled.h3(templateObject_3$p || (templateObject_3$p = __makeTemplateObject([""], [""]))),
|
|
4057
4057
|
display1: newStyled.h1(templateObject_4$g || (templateObject_4$g = __makeTemplateObject([""], [""]))),
|
|
4058
4058
|
display2: newStyled.h2(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject([""], [""]))),
|
|
4059
4059
|
heading1: newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject([""], [""]))),
|
|
@@ -4069,7 +4069,7 @@ var TAGS = {
|
|
|
4069
4069
|
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
4070
4070
|
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4071
4071
|
};
|
|
4072
|
-
var Text$
|
|
4072
|
+
var Text$5 = function (_a) {
|
|
4073
4073
|
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
4074
4074
|
var theme = useTheme();
|
|
4075
4075
|
var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
@@ -4174,24 +4174,24 @@ var DEFAULTS = {
|
|
|
4174
4174
|
size: 'regular',
|
|
4175
4175
|
},
|
|
4176
4176
|
};
|
|
4177
|
-
var templateObject_1$11, templateObject_2$E, templateObject_3$
|
|
4177
|
+
var templateObject_1$11, templateObject_2$E, templateObject_3$p, templateObject_4$g, templateObject_5$9, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4178
4178
|
|
|
4179
4179
|
var ButtonsContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
4180
4180
|
var inline = _a.inline;
|
|
4181
4181
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4182
4182
|
});
|
|
4183
4183
|
var SizeSelector = function (_a) {
|
|
4184
|
-
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
4184
|
+
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width;
|
|
4185
4185
|
return (jsxs("div", __assign$1({ css: {
|
|
4186
4186
|
display: 'flex',
|
|
4187
4187
|
flexDirection: inline ? 'row' : 'column',
|
|
4188
4188
|
alignItems: inline ? 'center' : 'start',
|
|
4189
|
-
} }, { children: [jsxs(Text$
|
|
4189
|
+
} }, { children: [jsxs(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$5, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
|
|
4190
4190
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
4191
4191
|
return (jsx(SelectorSecondary, { css: {
|
|
4192
4192
|
padding: '0.75rem 1rem 0.625rem',
|
|
4193
4193
|
margin: '0 0.5rem 0.625rem 0',
|
|
4194
|
-
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
|
|
4194
|
+
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4195
4195
|
}) }), void 0)] }), void 0));
|
|
4196
4196
|
};
|
|
4197
4197
|
var templateObject_1$10;
|
|
@@ -4243,12 +4243,12 @@ var templateObject_1$$;
|
|
|
4243
4243
|
|
|
4244
4244
|
var Container$E = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
4245
4245
|
var P$3 = newStyled.p(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4246
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4246
|
+
var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
4247
4247
|
var SizeFitGuide = function (_a) {
|
|
4248
|
-
var title = _a.title,
|
|
4249
|
-
return (jsxs$1(Container$E, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$3, { children: [
|
|
4248
|
+
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
4249
|
+
return (jsxs$1(Container$E, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected: ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0))] }, void 0));
|
|
4250
4250
|
};
|
|
4251
|
-
var templateObject_1$_, templateObject_2$D, templateObject_3$
|
|
4251
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$o;
|
|
4252
4252
|
|
|
4253
4253
|
var getStylesBySize$6 = function (size) {
|
|
4254
4254
|
switch (size) {
|
|
@@ -4364,7 +4364,7 @@ var Price = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTempl
|
|
|
4364
4364
|
var margin = _a.margin, size = _a.size;
|
|
4365
4365
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
4366
4366
|
});
|
|
4367
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
4367
|
+
var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
4368
4368
|
var _b;
|
|
4369
4369
|
var size = _a.size;
|
|
4370
4370
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -4374,7 +4374,7 @@ var PriceLabel = function (_a) {
|
|
|
4374
4374
|
var theme = useTheme();
|
|
4375
4375
|
return (jsxs$1(Container$C, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4376
4376
|
};
|
|
4377
|
-
var templateObject_1$Y, templateObject_2$B, templateObject_3$
|
|
4377
|
+
var templateObject_1$Y, templateObject_2$B, templateObject_3$n;
|
|
4378
4378
|
|
|
4379
4379
|
var OneColorSelector = function (_a) {
|
|
4380
4380
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4415,12 +4415,12 @@ var OutOfStock = function (_a) {
|
|
|
4415
4415
|
|
|
4416
4416
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4417
4417
|
newStyled(lt.Label)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4418
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4418
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
4419
4419
|
var Span = newStyled.span(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4420
4420
|
var OptionsContainer = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
4421
4421
|
var Label$2 = function (_a) {
|
|
4422
4422
|
var label = _a.label, values = _a.values;
|
|
4423
|
-
return (jsxs$1(Text$
|
|
4423
|
+
return (jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
4424
4424
|
};
|
|
4425
4425
|
var Option = function (_a) {
|
|
4426
4426
|
var value = _a.value, children = _a.children;
|
|
@@ -4435,7 +4435,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4435
4435
|
Option: Option,
|
|
4436
4436
|
OptionsContainer: OptionsContainer,
|
|
4437
4437
|
});
|
|
4438
|
-
var templateObject_1$X, templateObject_2$A, templateObject_3$
|
|
4438
|
+
var templateObject_1$X, templateObject_2$A, templateObject_3$m, templateObject_4$f, templateObject_5$8;
|
|
4439
4439
|
|
|
4440
4440
|
var Container$B = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"])), function (_a) {
|
|
4441
4441
|
var borderColor = _a.borderColor;
|
|
@@ -4536,12 +4536,12 @@ var templateObject_1$T;
|
|
|
4536
4536
|
|
|
4537
4537
|
var Container$z = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
4538
4538
|
var TopTagContainer$1 = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
4539
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
4539
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
4540
4540
|
var ImageProductWithTags$1 = function (_a) {
|
|
4541
4541
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
4542
4542
|
return (jsxs$1(Container$z, __assign$1({ "data-testid": testId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
4543
4543
|
};
|
|
4544
|
-
var templateObject_1$S, templateObject_2$x, templateObject_3$
|
|
4544
|
+
var templateObject_1$S, templateObject_2$x, templateObject_3$l;
|
|
4545
4545
|
|
|
4546
4546
|
var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
4547
4547
|
var ProductGallery = function (_a) {
|
|
@@ -4917,7 +4917,7 @@ var ContentWrapper = newStyled.div(templateObject_2$v || (templateObject_2$v = _
|
|
|
4917
4917
|
var borderColor = _a.borderColor;
|
|
4918
4918
|
return borderColor;
|
|
4919
4919
|
});
|
|
4920
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
4920
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
4921
4921
|
var position = _a.position;
|
|
4922
4922
|
return getArrowRotation(position);
|
|
4923
4923
|
}, function (_a) {
|
|
@@ -4937,7 +4937,7 @@ var Title$4 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTem
|
|
|
4937
4937
|
return color;
|
|
4938
4938
|
});
|
|
4939
4939
|
var IconContainer$5 = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __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"])));
|
|
4940
|
-
var templateObject_1$L, templateObject_2$v, templateObject_3$
|
|
4940
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$k, templateObject_4$e, templateObject_5$7, templateObject_6$5, templateObject_7$3;
|
|
4941
4941
|
|
|
4942
4942
|
var Tooltip = function (_a) {
|
|
4943
4943
|
var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
|
|
@@ -5124,22 +5124,12 @@ var RadioGroupInput = function (_a) {
|
|
|
5124
5124
|
|
|
5125
5125
|
var Wrapper$3 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5126
5126
|
var Container$r = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5127
|
-
var Text$5 = newStyled.h4(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
5128
|
-
var color = _a.color;
|
|
5129
|
-
return color;
|
|
5130
|
-
}, function (_a) {
|
|
5131
|
-
var weight = _a.weight;
|
|
5132
|
-
return (weight ? weight : '400');
|
|
5133
|
-
}, function (_a) {
|
|
5134
|
-
var margin = _a.margin;
|
|
5135
|
-
return (margin ? margin : '0');
|
|
5136
|
-
});
|
|
5137
5127
|
var Minimalistic = function (_a) {
|
|
5138
|
-
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#
|
|
5128
|
+
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
|
|
5139
5129
|
var theme = useTheme();
|
|
5140
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$r, __assign$1({ "data-testid": "TopSection" }, { children: [jsx$1(Text$5, __assign$1({
|
|
5130
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$r, __assign$1({ "data-testid": "TopSection" }, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$r, __assign$1({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$5, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5141
5131
|
};
|
|
5142
|
-
var templateObject_1$J, templateObject_2$t
|
|
5132
|
+
var templateObject_1$J, templateObject_2$t;
|
|
5143
5133
|
|
|
5144
5134
|
var Container$q = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5145
5135
|
var Title$3 = newStyled.h1(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
@@ -5318,10 +5308,11 @@ var sliceString = function (str, maxLength) {
|
|
|
5318
5308
|
};
|
|
5319
5309
|
|
|
5320
5310
|
var formatPrice = function (value, _a) {
|
|
5321
|
-
var _b
|
|
5322
|
-
var
|
|
5311
|
+
var _b;
|
|
5312
|
+
var _c = _a === void 0 ? {} : _a, _d = _c.locale, locale = _d === void 0 ? 'en-US' : _d, _e = _c.currency, currency = _e === void 0 ? 'USD' : _e;
|
|
5313
|
+
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
5323
5314
|
// this prevents `Intl.NumberFormat` from rounding the number
|
|
5324
|
-
var valueToFormat = parseFloat("".concat(integer, ".").concat(fraction.slice(0, 2)));
|
|
5315
|
+
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
5325
5316
|
return new Intl.NumberFormat(locale, {
|
|
5326
5317
|
style: 'currency',
|
|
5327
5318
|
currency: currency,
|
|
@@ -10466,7 +10457,7 @@ var Description$1 = newStyled.div({
|
|
|
10466
10457
|
var ProductItem = function (_a) {
|
|
10467
10458
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
10468
10459
|
var theme = useTheme();
|
|
10469
|
-
return (jsxs$1(Container$a, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$
|
|
10460
|
+
return (jsxs$1(Container$a, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
10470
10461
|
};
|
|
10471
10462
|
var templateObject_1$e;
|
|
10472
10463
|
|
|
@@ -10477,7 +10468,7 @@ var Container$9 = newStyled.div({
|
|
|
10477
10468
|
});
|
|
10478
10469
|
var Footer = function (_a) {
|
|
10479
10470
|
var text = _a.text, onClick = _a.onClick;
|
|
10480
|
-
return (jsx$1(Container$9, { children: jsx$1(Text$
|
|
10471
|
+
return (jsx$1(Container$9, { children: jsx$1(Text$5, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
10481
10472
|
};
|
|
10482
10473
|
|
|
10483
10474
|
var Ul = newStyled.ul({
|
|
@@ -10511,7 +10502,7 @@ var Header = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTem
|
|
|
10511
10502
|
var ResultsPanel = function (_a) {
|
|
10512
10503
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
10513
10504
|
var theme = useTheme();
|
|
10514
|
-
return (jsxs$1(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$
|
|
10505
|
+
return (jsxs$1(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$5, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
10515
10506
|
};
|
|
10516
10507
|
var templateObject_1$d, templateObject_2$5, templateObject_3$5;
|
|
10517
10508
|
|
|
@@ -15018,7 +15009,7 @@ var IconPlaceholder = newStyled.div(templateObject_7 || (templateObject_7 = __ma
|
|
|
15018
15009
|
var PackSelector = function (_a) {
|
|
15019
15010
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
15020
15011
|
return (jsx$1(Container, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
15021
|
-
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack
|
|
15012
|
+
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
15022
15013
|
}) }), void 0));
|
|
15023
15014
|
};
|
|
15024
15015
|
var PackCard = function (_a) {
|
|
@@ -15030,9 +15021,9 @@ var PackCard = function (_a) {
|
|
|
15030
15021
|
.then(function (icon) { return setIcon(icon); })
|
|
15031
15022
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
15032
15023
|
}, [pack.meta.icon]);
|
|
15033
|
-
return (jsxs$1(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 ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$
|
|
15024
|
+
return (jsxs$1(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 ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$5, __assign$1({ variant: "tag", weight: "bold", size: "small" }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.7, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxs$1(Text$5, __assign$1({ variant: "body", size: "small" }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(Text$5, __assign$1({ variant: "body", size: "small", "data-testid": "pack-selector-prices" }, { children: [jsx$1("del", { children: formatPrice(pack.meta.originalPrice) }, void 0), " - ", formatPrice(pack.meta.price)] }), void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
15034
15025
|
};
|
|
15035
15026
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
15036
15027
|
|
|
15037
|
-
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$
|
|
15028
|
+
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
15038
15029
|
//# sourceMappingURL=index.esm.js.map
|