@trafilea/afrodita-components 6.39.1 → 6.39.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 +6 -4
- package/build/index.esm.js +15 -15
- package/build/index.js +15 -15
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -1421,9 +1421,8 @@ interface BuyNowPayLaterProps {
|
|
|
1421
1421
|
iconColor?: string;
|
|
1422
1422
|
fontSize?: string;
|
|
1423
1423
|
bnplWithAfterPay?: boolean;
|
|
1424
|
-
toolTipText?: string;
|
|
1425
1424
|
}
|
|
1426
|
-
declare const BuyNowPayLater: ({ displayBNPL, installments, installmentPrice, iconFolder, iconName, showLogo, iconColor, fontSize, bnplWithAfterPay,
|
|
1425
|
+
declare const BuyNowPayLater: ({ displayBNPL, installments, installmentPrice, iconFolder, iconName, showLogo, iconColor, fontSize, bnplWithAfterPay, }: BuyNowPayLaterProps) => JSX.Element | null;
|
|
1427
1426
|
|
|
1428
1427
|
interface CloseButtonProps {
|
|
1429
1428
|
onClick: () => void;
|
|
@@ -2732,15 +2731,18 @@ interface DialogPositionProps {
|
|
|
2732
2731
|
right: string;
|
|
2733
2732
|
}
|
|
2734
2733
|
interface DialogDropdownProps {
|
|
2735
|
-
options
|
|
2734
|
+
options?: {
|
|
2736
2735
|
label: string;
|
|
2737
2736
|
value: string;
|
|
2738
2737
|
}[];
|
|
2739
2738
|
position: DialogPositionProps;
|
|
2740
2739
|
style?: react__default.CSSProperties;
|
|
2740
|
+
dialogDropdownContainerStyle?: react__default.CSSProperties;
|
|
2741
|
+
dialogDropdownListItemStyle?: react__default.CSSProperties;
|
|
2742
|
+
dialogContainerText?: string;
|
|
2741
2743
|
className?: string;
|
|
2742
2744
|
}
|
|
2743
|
-
declare const DropdownDialog: ({ options, position: { top, right }, style, className, }: DialogDropdownProps) => JSX.Element;
|
|
2745
|
+
declare const DropdownDialog: ({ options, position: { top, right }, style, dialogDropdownContainerStyle, dialogDropdownListItemStyle, dialogContainerText, className, }: DialogDropdownProps) => JSX.Element;
|
|
2744
2746
|
|
|
2745
2747
|
declare type FilteringDropdownProps<T> = {
|
|
2746
2748
|
options: DropdownOption<T>[];
|
package/build/index.esm.js
CHANGED
|
@@ -6490,25 +6490,25 @@ var Container$19 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = _
|
|
|
6490
6490
|
var displayBNPL = _a.displayBNPL;
|
|
6491
6491
|
return (displayBNPL ? 'flex' : 'none');
|
|
6492
6492
|
});
|
|
6493
|
-
var TextContainer$1 = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6493
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6494
6494
|
var IconWrapper$1 = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6495
6495
|
var BuyNowPayLater = function (_a) {
|
|
6496
6496
|
var _b;
|
|
6497
|
-
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f
|
|
6497
|
+
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f;
|
|
6498
6498
|
// @ts-ignore
|
|
6499
6499
|
var IconComponent = (_b = Icon === null || Icon === void 0 ? void 0 : Icon[iconFolder]) === null || _b === void 0 ? void 0 : _b[iconName];
|
|
6500
6500
|
if (!IconComponent) {
|
|
6501
6501
|
console.error('Icon', iconName, 'not found');
|
|
6502
6502
|
return null;
|
|
6503
6503
|
}
|
|
6504
|
-
return (jsx$1(Container$19, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize
|
|
6505
|
-
|
|
6506
|
-
|
|
6507
|
-
|
|
6508
|
-
|
|
6509
|
-
|
|
6510
|
-
|
|
6511
|
-
|
|
6504
|
+
return (jsx$1(Container$19, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxs$1("div", { children: [!bnplWithAfterPay
|
|
6505
|
+
? "Or ".concat(installments, " payments of ")
|
|
6506
|
+
: "or 4 interest-free payments of ", jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6507
|
+
display: 'inline',
|
|
6508
|
+
fontSize: fontSize,
|
|
6509
|
+
paddingLeft: '0.25rem',
|
|
6510
|
+
paddingRight: '0.25rem',
|
|
6511
|
+
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsx$1(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsx$1(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6512
6512
|
};
|
|
6513
6513
|
var templateObject_1$1M, templateObject_2$1i, templateObject_3$11;
|
|
6514
6514
|
|
|
@@ -7570,12 +7570,12 @@ var DialogDropdownListContainer = newStyled.ul(templateObject_2$12 || (templateO
|
|
|
7570
7570
|
var DialogDropdownListItem = newStyled.li(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7571
7571
|
var DialogDropdownLink = newStyled.a(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7572
7572
|
var DropdownDialog = function (_a) {
|
|
7573
|
-
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7573
|
+
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
7574
7574
|
var theme = useTheme$1();
|
|
7575
|
-
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children:
|
|
7576
|
-
|
|
7577
|
-
|
|
7578
|
-
|
|
7575
|
+
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsxs$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right, borderRadius: theme.component.dropdown.optionsWrapper.borderRadius, style: dialogDropdownContainerStyle }, { children: [options === null || options === void 0 ? void 0 : options.map(function (_a, idx) {
|
|
7576
|
+
var label = _a.label, value = _a.value;
|
|
7577
|
+
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7578
|
+
}), dialogContainerText && (jsx$1(DialogDropdownListItem, __assign$1({ style: dialogDropdownListItemStyle }, { children: jsx$1(DialogDropdownLink, { children: dialogContainerText }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
7579
7579
|
};
|
|
7580
7580
|
var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F;
|
|
7581
7581
|
|
package/build/index.js
CHANGED
|
@@ -6516,25 +6516,25 @@ var Container$19 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = _
|
|
|
6516
6516
|
var displayBNPL = _a.displayBNPL;
|
|
6517
6517
|
return (displayBNPL ? 'flex' : 'none');
|
|
6518
6518
|
});
|
|
6519
|
-
var TextContainer$1 = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6519
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6520
6520
|
var IconWrapper$1 = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6521
6521
|
var BuyNowPayLater = function (_a) {
|
|
6522
6522
|
var _b;
|
|
6523
|
-
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f
|
|
6523
|
+
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f;
|
|
6524
6524
|
// @ts-ignore
|
|
6525
6525
|
var IconComponent = (_b = Icon === null || Icon === void 0 ? void 0 : Icon[iconFolder]) === null || _b === void 0 ? void 0 : _b[iconName];
|
|
6526
6526
|
if (!IconComponent) {
|
|
6527
6527
|
console.error('Icon', iconName, 'not found');
|
|
6528
6528
|
return null;
|
|
6529
6529
|
}
|
|
6530
|
-
return (jsxRuntime.jsx(Container$19, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
|
|
6534
|
-
|
|
6535
|
-
|
|
6536
|
-
|
|
6537
|
-
|
|
6530
|
+
return (jsxRuntime.jsx(Container$19, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxRuntime.jsxs("div", { children: [!bnplWithAfterPay
|
|
6531
|
+
? "Or ".concat(installments, " payments of ")
|
|
6532
|
+
: "or 4 interest-free payments of ", jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6533
|
+
display: 'inline',
|
|
6534
|
+
fontSize: fontSize,
|
|
6535
|
+
paddingLeft: '0.25rem',
|
|
6536
|
+
paddingRight: '0.25rem',
|
|
6537
|
+
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsxRuntime.jsx(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsxRuntime.jsx(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6538
6538
|
};
|
|
6539
6539
|
var templateObject_1$1M, templateObject_2$1i, templateObject_3$11;
|
|
6540
6540
|
|
|
@@ -7596,12 +7596,12 @@ var DialogDropdownListContainer = newStyled.ul(templateObject_2$12 || (templateO
|
|
|
7596
7596
|
var DialogDropdownListItem = newStyled.li(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7597
7597
|
var DialogDropdownLink = newStyled.a(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7598
7598
|
var DropdownDialog = function (_a) {
|
|
7599
|
-
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7599
|
+
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
7600
7600
|
var theme = useTheme$1();
|
|
7601
|
-
return (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsxRuntime.
|
|
7602
|
-
|
|
7603
|
-
|
|
7604
|
-
|
|
7601
|
+
return (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsxRuntime.jsxs(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right, borderRadius: theme.component.dropdown.optionsWrapper.borderRadius, style: dialogDropdownContainerStyle }, { children: [options === null || options === void 0 ? void 0 : options.map(function (_a, idx) {
|
|
7602
|
+
var label = _a.label, value = _a.value;
|
|
7603
|
+
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7604
|
+
}), dialogContainerText && (jsxRuntime.jsx(DialogDropdownListItem, __assign$1({ style: dialogDropdownListItemStyle }, { children: jsxRuntime.jsx(DialogDropdownLink, { children: dialogContainerText }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
7605
7605
|
};
|
|
7606
7606
|
var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F;
|
|
7607
7607
|
|
package/package.json
CHANGED