@trafilea/afrodita-components 7.10.6 → 7.11.0

package/build/es/components/motivator-progress-bar/MotivatorProgressBar.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n,__assign as r}from"tslib";import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"@emotion/styled";import i from"html-react-parser";import{useTheme as d}from"../../core/theme/Theme.js";var a,c,u=t.div(a||(a=n(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ",";\n  background-color: ",";\n  width: ",";\n  border-radius: ",";\n  left: ",";\n  animation: ",";\n"],["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ",";\n  background-color: ",";\n  width: ",";\n  border-radius: ",";\n  left: ",";\n  animation: ",";\n"])),(function(n){return n.height||"0.5rem"}),(function(n){return n.backgroundColor}),(function(n){var r=n.percent;return r?f(r):"50%"}),(function(n){return n.borderRadius||"0.25rem"}),(function(n){return n.percent?"0":"-50%"}),(function(n){return n.percent?"none":"loading 1s ease-in 0.5s infinite"})),l=t.div((function(n){var r=n.backgroundColor;return{height:n.height||"0.5rem",width:"100%",backgroundColor:r,borderRadius:n.borderRadius||"0.25rem"}})),s=t.div({display:"grid",gridTemplateColumns:"1fr 10fr 1fr",justifyContent:"center",alignItems:"center",width:"416px",gap:"8px",maxWidth:"100%",padding:"0 16px",position:"relative"}),g=t.div((function(n){return{width:"475px",maxWidth:"100%",display:"flex",gap:"13px",padding:"16px 0",flexDirection:"column",alignItems:"center",background:n.backgroundColor}})),m=t.div(c||(c=n(["\n  padding: 0 1rem;\n  text-align: center;\n"],["\n  padding: 0 1rem;\n  text-align: center;\n"]))),f=function(n){return n<=100&&n>=0?"".concat(n,"%"):"0%"},h=t.div((function(n){return{fontWeight:n.isBold?600:400}})),p=function(n){var t=n.fillColor,a=void 0===t?"#F7A08B":t,c=n.backgroundColor,f=void 0===c?"#F7F7F7":c,p=n.unfilledColor,v=void 0===p?"#EEBFBD":p,b=n.currencyCode,C=void 0===b?"$":b,k=n.endingValue,x=void 0===k?70:k,B=n.currentAmount,y=void 0===B?0:B,M=n.rewardUnlockedMessage,w=n.isClubBarMotivatorTest,F=void 0!==w&&w,S=n.remainingAmountMessage,A=n.hasProgressBar,P=void 0===A||A,T=d(),X=y>=x,j=function(n,r){var e=n/r;return e>1?100:100*e}(y,x);return e(g,r({backgroundColor:f},{children:[P&&e(s,r({"data-testid":"MPBContainer"},{children:[e(h,{children:[C,y]},void 0),o(l,r({backgroundColor:v||T.colors.shades[100].color,"data-testid":"MPBBackground"},{children:o(u,{"data-testid":"MPBBar",backgroundColor:a,percent:j},void 0)}),void 0),e(h,r({isBold:!0},{children:[C,x]}),void 0)]}),void 0),X?o(m,{dangerouslySetInnerHTML:{__html:M}},void 0):function(){var n=Math.round(100*(x-y))/100;if(F)return e(m,{children:["Spend ",C,n," more to unlock ",o("strong",{children:"Free Priority Shipping"},void 0)," with Club!"]},void 0);var r=null!=S?S:"Spend currencyCoderemainingAmount more to get <strong>Free Shipping</strong>";return r=(r=r.replace("currencyCode",C)).replace("remainingAmount",n.toString()),o(m,{children:i(r)},void 0)}()]}),void 0)};export{p as MotivatorProgressBar};
+import{__makeTemplateObject as n,__spreadArray as r,__assign as o}from"tslib";import{jsxs as t,jsx as e}from"react/jsx-runtime";import i from"@emotion/styled";import d from"html-react-parser";import{useTheme as a}from"../../core/theme/Theme.js";var l,c,u=i.div(l||(l=n(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ",";\n  background-color: ",";\n  width: ",";\n  border-radius: ",";\n  left: ",";\n  animation: ",";\n"],["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ",";\n  background-color: ",";\n  width: ",";\n  border-radius: ",";\n  left: ",";\n  animation: ",";\n"])),(function(n){return n.height||"0.5rem"}),(function(n){return n.backgroundColor}),(function(n){var r=n.percent;return r?v(r):"50%"}),(function(n){return n.borderRadius||"0.25rem"}),(function(n){return n.percent?"0":"-50%"}),(function(n){return n.percent?"none":"loading 1s ease-in 0.5s infinite"})),s=i.div((function(n){var r=n.backgroundColor;return{height:n.height||"0.5rem",width:"100%",backgroundColor:r,borderRadius:n.borderRadius||"0.25rem"}})),h=i.div({display:"grid",gridTemplateColumns:"1fr 10fr 1fr",justifyContent:"center",alignItems:"center",width:"416px",gap:"8px",maxWidth:"100%",padding:"0 16px",position:"relative"}),g=i.div((function(n){return{width:"475px",maxWidth:"100%",display:"flex",gap:"13px",padding:"16px 0",flexDirection:"column",alignItems:"center",background:n.backgroundColor}})),f=i.div(c||(c=n(["\n  padding: 0 1rem;\n  text-align: center;\n"],["\n  padding: 0 1rem;\n  text-align: center;\n"]))),v=function(n){return n<=100&&n>=0?"".concat(n,"%"):"0%"},m=i.div((function(n){return{fontWeight:n.isBold?600:400}})),p=i.div((function(n){var r=n.position,o=n.backgroundColor;return{position:"absolute",left:"calc(".concat(r,"% - 25.5px)"),top:"50%",transform:"translateY(-50%)",display:"flex",alignItems:"center",justifyContent:"center",width:"27px",height:"27px",borderRadius:"50%",backgroundColor:o||"#FFFFFF",border:"2px solid #FFFFFF",boxShadow:"0 0 0 1px ".concat(o),zIndex:2,overflow:"hidden",flexShrink:0,"& > *":{maxWidth:"100%",maxHeight:"100%",flexShrink:0}}})),b=i.div({position:"relative",width:"100%",overflow:"visible"}),x=function(n,r){var o=n/r;return o>1?100:100*o},C=function(n){var i,l=n.fillColor,c=void 0===l?"#F7A08B":l,v=n.backgroundColor,C=void 0===v?"#F7F7F7":v,k=n.unfilledColor,F=void 0===k?"#EEBFBD":k,B=n.currencyCode,y=void 0===B?"$":B,w=n.endingValue,M=void 0===w?70:w,S=n.currentAmount,A=void 0===S?0:S,I=n.rewardUnlockedMessage,P=n.isClubBarMotivatorTest,D=void 0!==P&&P,T=n.remainingAmountMessage,j=n.hasProgressBar,R=void 0===j||j,W=n.thresholds,X=a(),E=W&&W.length>0?function(n){return r([],n,!0).sort((function(n,r){return n.threshold-r.threshold}))}(W):void 0,H=function(n,r){if(r&&0!==r.length){var o=r.find((function(r){return n<r.threshold}));return null==o?void 0:o.threshold}}(A,E),_=function(n,r){if(r&&0!==r.length)for(var o=r.length-1;o>=0;o--)if(n>=r[o].threshold)return r[o]}(A,E),z=E&&void 0!==H?H:M,L=null===(i=null==E?void 0:E[0])||void 0===i?void 0:i.threshold,U=void 0!==L&&A>=L,V=E?E[E.length-1].threshold:M,Y=A>=z,$=x(A,z);return t(g,o({backgroundColor:C},{children:[R&&t(h,o({"data-testid":"MPBContainer"},{children:[t(m,{children:[y,A]},void 0),t(b,{children:[e(s,o({backgroundColor:F||X.colors.shades[100].color,"data-testid":"MPBBackground"},{children:e(u,{"data-testid":"MPBBar",backgroundColor:c,percent:$},void 0)}),void 0),U&&(null==E?void 0:E.map((function(n,r){var t=x(n.threshold,V),i=function(n,r,o){return r>=n.threshold?n.iconBackgroundColor||o:"#D1D1D1"}(n,A,c);return e(p,o({position:t,backgroundColor:i,"data-testid":"MPBThresholdIcon-".concat(r)},{children:n.icon}),"threshold-".concat(r,"-").concat(n.threshold))})))]},void 0),t(m,o({isBold:!0},{children:[y,z]}),void 0)]}),void 0),Y?e(f,{dangerouslySetInnerHTML:{__html:I}},void 0):function(){var n,r,o=E&&void 0!==H?H:M,i=Math.round(100*(o-A))/100;if(D)return t(f,{children:["Spend ",y,i," more to unlock ",e("strong",{children:"Free Priority Shipping"},void 0)," with Club!"]},void 0);var a=null!==(r=null!==(n=null==_?void 0:_.remainingAmountMessage)&&void 0!==n?n:T)&&void 0!==r?r:"Spend currencyCoderemainingAmount more to get <strong>Free Shipping</strong>";return a=(a=a.replace("currencyCode",y)).replace("remainingAmount",i.toString()),e(f,{children:d(a)},void 0)}()]}),void 0)};export{C as MotivatorProgressBar};
 //# sourceMappingURL=MotivatorProgressBar.js.map

package/build/index.d.ts

@@ -3586,6 +3586,12 @@ declare const useModal: (id: string) => {
     close: () => void;
 };
 
+interface ProgressThreshold {
+    icon: React.ReactNode;
+    threshold: number;
+    iconBackgroundColor?: string;
+    remainingAmountMessage?: string;
+}
 interface MotivatorProgressBarProps {
     fillColor?: string;
     currentAmount?: number;
@@ -3598,8 +3604,9 @@ interface MotivatorProgressBarProps {
     isClubBarMotivatorTest?: boolean;
     remainingAmountMessage?: string;
     hasProgressBar?: boolean;
+    thresholds?: ProgressThreshold[];
 }
-declare const MotivatorProgressBar: ({ fillColor, backgroundColor, unfilledColor, currencyCode, endingValue, currentAmount, rewardUnlockedMessage, isClubBarMotivatorTest, remainingAmountMessage, hasProgressBar, }: MotivatorProgressBarProps) => JSX.Element;
+declare const MotivatorProgressBar: ({ fillColor, backgroundColor, unfilledColor, currencyCode, endingValue, currentAmount, rewardUnlockedMessage, isClubBarMotivatorTest, remainingAmountMessage, hasProgressBar, thresholds, }: MotivatorProgressBarProps) => JSX.Element;
 
 interface OrderBarProps {
     message: string;

package/build/lib/components/motivator-progress-bar/MotivatorProgressBar.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("tslib"),e=require("react/jsx-runtime"),r=require("@emotion/styled"),t=require("html-react-parser"),i=require("../../core/theme/Theme.js");function o(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var a,d,u=o(r),s=o(t),l=u.default.div(a||(a=n.__makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ",";\n  background-color: ",";\n  width: ",";\n  border-radius: ",";\n  left: ",";\n  animation: ",";\n"],["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ",";\n  background-color: ",";\n  width: ",";\n  border-radius: ",";\n  left: ",";\n  animation: ",";\n"])),(function(n){return n.height||"0.5rem"}),(function(n){return n.backgroundColor}),(function(n){var e=n.percent;return e?h(e):"50%"}),(function(n){return n.borderRadius||"0.25rem"}),(function(n){return n.percent?"0":"-50%"}),(function(n){return n.percent?"none":"loading 1s ease-in 0.5s infinite"})),c=u.default.div((function(n){var e=n.backgroundColor;return{height:n.height||"0.5rem",width:"100%",backgroundColor:e,borderRadius:n.borderRadius||"0.25rem"}})),g=u.default.div({display:"grid",gridTemplateColumns:"1fr 10fr 1fr",justifyContent:"center",alignItems:"center",width:"416px",gap:"8px",maxWidth:"100%",padding:"0 16px",position:"relative"}),f=u.default.div((function(n){return{width:"475px",maxWidth:"100%",display:"flex",gap:"13px",padding:"16px 0",flexDirection:"column",alignItems:"center",background:n.backgroundColor}})),m=u.default.div(d||(d=n.__makeTemplateObject(["\n  padding: 0 1rem;\n  text-align: center;\n"],["\n  padding: 0 1rem;\n  text-align: center;\n"]))),h=function(n){return n<=100&&n>=0?"".concat(n,"%"):"0%"},v=u.default.div((function(n){return{fontWeight:n.isBold?600:400}}));exports.MotivatorProgressBar=function(r){var t=r.fillColor,o=void 0===t?"#F7A08B":t,a=r.backgroundColor,d=void 0===a?"#F7F7F7":a,u=r.unfilledColor,h=void 0===u?"#EEBFBD":u,p=r.currencyCode,x=void 0===p?"$":p,b=r.endingValue,k=void 0===b?70:b,C=r.currentAmount,j=void 0===C?0:C,_=r.rewardUnlockedMessage,y=r.isClubBarMotivatorTest,B=void 0!==y&&y,M=r.remainingAmountMessage,w=r.hasProgressBar,F=void 0===w||w,P=i.useTheme(),T=j>=k,S=function(n,e){var r=n/e;return r>1?100:100*r}(j,k);return e.jsxs(f,n.__assign({backgroundColor:d},{children:[F&&e.jsxs(g,n.__assign({"data-testid":"MPBContainer"},{children:[e.jsxs(v,{children:[x,j]},void 0),e.jsx(c,n.__assign({backgroundColor:h||P.colors.shades[100].color,"data-testid":"MPBBackground"},{children:e.jsx(l,{"data-testid":"MPBBar",backgroundColor:o,percent:S},void 0)}),void 0),e.jsxs(v,n.__assign({isBold:!0},{children:[x,k]}),void 0)]}),void 0),T?e.jsx(m,{dangerouslySetInnerHTML:{__html:_}},void 0):function(){var n=Math.round(100*(k-j))/100;if(B)return e.jsxs(m,{children:["Spend ",x,n," more to unlock ",e.jsx("strong",{children:"Free Priority Shipping"},void 0)," with Club!"]},void 0);var r=null!=M?M:"Spend currencyCoderemainingAmount more to get <strong>Free Shipping</strong>";return r=(r=r.replace("currencyCode",x)).replace("remainingAmount",n.toString()),e.jsx(m,{children:s.default(r)},void 0)}()]}),void 0)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("tslib"),r=require("react/jsx-runtime"),e=require("@emotion/styled"),t=require("html-react-parser"),o=require("../../core/theme/Theme.js");function i(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var d,a,l=i(e),s=i(t),u=l.default.div(d||(d=n.__makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ",";\n  background-color: ",";\n  width: ",";\n  border-radius: ",";\n  left: ",";\n  animation: ",";\n"],["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ",";\n  background-color: ",";\n  width: ",";\n  border-radius: ",";\n  left: ",";\n  animation: ",";\n"])),(function(n){return n.height||"0.5rem"}),(function(n){return n.backgroundColor}),(function(n){var r=n.percent;return r?v(r):"50%"}),(function(n){return n.borderRadius||"0.25rem"}),(function(n){return n.percent?"0":"-50%"}),(function(n){return n.percent?"none":"loading 1s ease-in 0.5s infinite"})),c=l.default.div((function(n){var r=n.backgroundColor;return{height:n.height||"0.5rem",width:"100%",backgroundColor:r,borderRadius:n.borderRadius||"0.25rem"}})),h=l.default.div({display:"grid",gridTemplateColumns:"1fr 10fr 1fr",justifyContent:"center",alignItems:"center",width:"416px",gap:"8px",maxWidth:"100%",padding:"0 16px",position:"relative"}),g=l.default.div((function(n){return{width:"475px",maxWidth:"100%",display:"flex",gap:"13px",padding:"16px 0",flexDirection:"column",alignItems:"center",background:n.backgroundColor}})),f=l.default.div(a||(a=n.__makeTemplateObject(["\n  padding: 0 1rem;\n  text-align: center;\n"],["\n  padding: 0 1rem;\n  text-align: center;\n"]))),v=function(n){return n<=100&&n>=0?"".concat(n,"%"):"0%"},m=l.default.div((function(n){return{fontWeight:n.isBold?600:400}})),p=l.default.div((function(n){var r=n.position,e=n.backgroundColor;return{position:"absolute",left:"calc(".concat(r,"% - 25.5px)"),top:"50%",transform:"translateY(-50%)",display:"flex",alignItems:"center",justifyContent:"center",width:"27px",height:"27px",borderRadius:"50%",backgroundColor:e||"#FFFFFF",border:"2px solid #FFFFFF",boxShadow:"0 0 0 1px ".concat(e),zIndex:2,overflow:"hidden",flexShrink:0,"& > *":{maxWidth:"100%",maxHeight:"100%",flexShrink:0}}})),x=l.default.div({position:"relative",width:"100%",overflow:"visible"}),b=function(n,r){var e=n/r;return e>1?100:100*e};exports.MotivatorProgressBar=function(e){var t,i=e.fillColor,d=void 0===i?"#F7A08B":i,a=e.backgroundColor,l=void 0===a?"#F7F7F7":a,v=e.unfilledColor,k=void 0===v?"#EEBFBD":v,C=e.currencyCode,j=void 0===C?"$":C,_=e.endingValue,F=void 0===_?70:_,y=e.currentAmount,B=void 0===y?0:y,w=e.rewardUnlockedMessage,M=e.isClubBarMotivatorTest,S=void 0!==M&&M,P=e.remainingAmountMessage,T=e.hasProgressBar,A=void 0===T||T,I=e.thresholds,q=o.useTheme(),D=I&&I.length>0?function(r){return n.__spreadArray([],r,!0).sort((function(n,r){return n.threshold-r.threshold}))}(I):void 0,R=function(n,r){if(r&&0!==r.length){var e=r.find((function(r){return n<r.threshold}));return null==e?void 0:e.threshold}}(B,D),W=function(n,r){if(r&&0!==r.length)for(var e=r.length-1;e>=0;e--)if(n>=r[e].threshold)return r[e]}(B,D),X=D&&void 0!==R?R:F,O=null===(t=null==D?void 0:D[0])||void 0===t?void 0:t.threshold,E=void 0!==O&&B>=O,H=D?D[D.length-1].threshold:F,z=B>=X,L=b(B,X);return r.jsxs(g,n.__assign({backgroundColor:l},{children:[A&&r.jsxs(h,n.__assign({"data-testid":"MPBContainer"},{children:[r.jsxs(m,{children:[j,B]},void 0),r.jsxs(x,{children:[r.jsx(c,n.__assign({backgroundColor:k||q.colors.shades[100].color,"data-testid":"MPBBackground"},{children:r.jsx(u,{"data-testid":"MPBBar",backgroundColor:d,percent:L},void 0)}),void 0),E&&(null==D?void 0:D.map((function(e,t){var o=b(e.threshold,H),i=function(n,r,e){return r>=n.threshold?n.iconBackgroundColor||e:"#D1D1D1"}(e,B,d);return r.jsx(p,n.__assign({position:o,backgroundColor:i,"data-testid":"MPBThresholdIcon-".concat(t)},{children:e.icon}),"threshold-".concat(t,"-").concat(e.threshold))})))]},void 0),r.jsxs(m,n.__assign({isBold:!0},{children:[j,X]}),void 0)]}),void 0),z?r.jsx(f,{dangerouslySetInnerHTML:{__html:w}},void 0):function(){var n,e,t=D&&void 0!==R?R:F,o=Math.round(100*(t-B))/100;if(S)return r.jsxs(f,{children:["Spend ",j,o," more to unlock ",r.jsx("strong",{children:"Free Priority Shipping"},void 0)," with Club!"]},void 0);var i=null!==(e=null!==(n=null==W?void 0:W.remainingAmountMessage)&&void 0!==n?n:P)&&void 0!==e?e:"Spend currencyCoderemainingAmount more to get <strong>Free Shipping</strong>";return i=(i=i.replace("currencyCode",j)).replace("remainingAmount",o.toString()),r.jsx(f,{children:s.default(i)},void 0)}()]}),void 0)};
 //# sourceMappingURL=MotivatorProgressBar.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "7.10.6",
+  "version": "7.11.0",
   "private": false,
   "main": "build/lib/index.js",
   "style": "build/es/index.css",