@bikdotai/bik-component-library 0.0.749-beta.4 → 0.0.749-beta.6
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/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/esm/components/whats-new/WhatsNewButton.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),n=require("../../assets/icons/chevronRight2.svg.js"),r=require("../../assets/icons/play.svg.js"),s=require("../button/Button.js"),o=require("./constants/index.js"),i=require("./styles/majorPopup.styles.js");require("../../constants/Theme.js"),require("./constants/animations.js");var a=require("./utils/htmlHelpers.js"),l=require("./utils/animationHelpers.js"),u=require("./utils/elementHelpers.js");exports.default=c=>{let{feature:d,currentIndex:p,totalFeatures:y,onSkip:g,onExplore:v,onPrevious:j,onNext:b,setIsClosing:h,onSecondaryAction:x,ratio:B="16:9",padding:f}=c;var T,m,O,E,U,k,M,P,C,_;const[L,q]=e.useState(!1),[w,S]=e.useState(!1),[W,A]=e.useState(""),D=e.useRef(null),[I,N]=e.useState(!1),[H,R]=e.useState(!0),F=e.useRef(null);e.useEffect((()=>{L&&S(!0)}),[L]);const X=()=>{v(),l.hideJoyrideArrow(D.current);const t=u.findWhatsNewButton();if(t&&D.current){const e=l.calculateCloseTransform(D.current,t);A(e)}else A("scale(0)");null==h||h(!0),q(!0)},J=t=>{var e;if(t.preventDefault(),t.stopPropagation(),null===(e=d.secondaryButton)||void 0===e?void 0:e.redirectionUrl){d.secondaryButton.redirectionUrl.startsWith("http")?window.open(d.secondaryButton.redirectionUrl,"_blank","noopener,noreferrer"):window.location.href=d.secondaryButton.redirectionUrl}x&&x(),l.hideJoyrideArrow(D.current);const n=u.findWhatsNewButton();if(n&&D.current){const t=l.calculateCloseTransform(D.current,n);A(t)}else A("scale(0)");null==h||h(!0),q(!0)},V=i.getMajorPopupStyles(w,W,B,f||d.padding,null===(T=d.primaryButton)||void 0===T?void 0:T.style,null===(m=d.secondaryButton)||void 0===m?void 0:m.style);return t.jsxs("div",Object.assign({ref:D,style:V.container},{children:[t.jsx("style",{children:"\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t"}),t.jsxs("div",Object.assign({style:V.contentWrapper},{children:[t.jsx("div",Object.assign({style:V.imageContainer},{children:d.productVideo?t.jsxs(t.Fragment,{children:[t.jsx("video",{ref:F,src:d.productVideo,style:V.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,controls:!0,"aria-label":`Product video for ${d.title}`}),(I||H)&&t.jsx("div",Object.assign({style:V.videoOverlay,onClick:t=>{t.stopPropagation(),F.current&&(F.current.paused?(F.current.play(),N(!1),R(!1)):(F.current.pause(),N(!0),R(!0)))},role:"button",tabIndex:0,"aria-label":I?"Play video":"Pause video",onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),F.current&&(F.current.paused?(F.current.play(),N(!1),R(!1)):(F.current.pause(),N(!0),R(!0))))}},{children:t.jsx(r.default,{width:20,height:20})}))]}):d.displayImage?t.jsx("img",{src:d.displayImage,alt:d.title,style:V.image,onError:t=>{d.image&&(t.target.src=d.image)}}):t.jsx("div",Object.assign({style:V.imagePlaceholder},{children:o.TEXT.FEATURE_PREVIEW_PLACEHOLDER}))})),t.jsxs("div",Object.assign({style:V.contentContainer},{children:[t.jsx("div",Object.assign({style:V.skipButtonContainer},{children:t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{l.hideJoyrideArrow(D.current);const e=u.findWhatsNewButton();if(e&&D.current){const t=l.calculateCloseTransform(D.current,e);A(t)}else A("scale(0)");null==h||h(!0),q(!0),l.executeAfterAnimation(t)})(g)},style:V.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,V.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,V.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),t.jsx("h3",Object.assign({style:V.title},{children:d.title})),t.jsx("div",{"data-popup-content":!0,style:V.content,dangerouslySetInnerHTML:{__html:a.decodeHTMLEntities(d.content||d.body||"")}}),t.jsxs("div",Object.assign({style:V.actionsWrapper},{children:[t.jsxs("div",Object.assign({style:V.buttonsGroup},{children:[(null===(O=d.primaryButton)||void 0===O?void 0:O.redirectionUrl)||d.redirectUrl?t.jsx("a",Object.assign({href:(null===(E=d.primaryButton)||void 0===E?void 0:E.redirectionUrl)||d.redirectUrl,target:((null===(U=d.primaryButton)||void 0===U?void 0:U.redirectionUrl)||d.redirectUrl).startsWith("http")?"_blank":"_self",rel:((null===(k=d.primaryButton)||void 0===k?void 0:k.redirectionUrl)||d.redirectUrl).startsWith("http")?"noopener noreferrer":void 0,onClick:X,style:V.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,V.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,V.exploreButton.base)},{children:(null===(M=d.primaryButton)||void 0===M?void 0:M.text)||d.buttonText||o.TEXT.DEFAULT_BUTTON_TEXT})):t.jsx(s.Button,{onClick:X,style:V.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,V.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,V.exploreButton.base),buttonText:(null===(P=d.primaryButton)||void 0===P?void 0:P.text)||d.buttonText||o.TEXT.DEFAULT_BUTTON_TEXT}),(null===(C=d.secondaryButton)||void 0===C?void 0:C.text)&&((null===(_=d.secondaryButton)||void 0===_?void 0:_.redirectionUrl)?t.jsx("a",Object.assign({href:d.secondaryButton.redirectionUrl,target:d.secondaryButton.redirectionUrl.startsWith("http")?"_blank":"_self",rel:d.secondaryButton.redirectionUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:J,style:V.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,V.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,V.secondaryButton.base)},{children:d.secondaryButton.text})):t.jsx(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),n=require("../../assets/icons/chevronRight2.svg.js"),r=require("../../assets/icons/play.svg.js"),s=require("../button/Button.js"),o=require("./constants/index.js"),i=require("./styles/majorPopup.styles.js");require("../../constants/Theme.js"),require("./constants/animations.js");var a=require("./utils/htmlHelpers.js"),l=require("./utils/animationHelpers.js"),u=require("./utils/elementHelpers.js");exports.default=c=>{let{feature:d,currentIndex:p,totalFeatures:y,onSkip:g,onExplore:v,onPrevious:j,onNext:b,setIsClosing:h,onSecondaryAction:x,ratio:B="16:9",padding:f}=c;var T,m,O,E,U,k,M,P,C,_;const[L,q]=e.useState(!1),[w,S]=e.useState(!1),[W,A]=e.useState(""),D=e.useRef(null),[I,N]=e.useState(!1),[H,R]=e.useState(!0),F=e.useRef(null);e.useEffect((()=>{L&&S(!0)}),[L]);const X=()=>{v(),l.hideJoyrideArrow(D.current);const t=u.findWhatsNewButton();if(t&&D.current){const e=l.calculateCloseTransform(D.current,t);A(e)}else A("scale(0)");null==h||h(!0),q(!0)},J=t=>{var e;if(t.preventDefault(),t.stopPropagation(),null===(e=d.secondaryButton)||void 0===e?void 0:e.redirectionUrl){d.secondaryButton.redirectionUrl.startsWith("http")?window.open(d.secondaryButton.redirectionUrl,"_blank","noopener,noreferrer"):window.location.href=d.secondaryButton.redirectionUrl}x&&x(),l.hideJoyrideArrow(D.current);const n=u.findWhatsNewButton();if(n&&D.current){const t=l.calculateCloseTransform(D.current,n);A(t)}else A("scale(0)");null==h||h(!0),q(!0)},V=i.getMajorPopupStyles(w,W,B,f||d.padding,null===(T=d.primaryButton)||void 0===T?void 0:T.style,null===(m=d.secondaryButton)||void 0===m?void 0:m.style);return t.jsxs("div",Object.assign({ref:D,style:V.container},{children:[t.jsx("style",{children:"\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t"}),t.jsxs("div",Object.assign({style:V.contentWrapper},{children:[t.jsx("div",Object.assign({style:V.imageContainer},{children:d.productVideo?t.jsxs(t.Fragment,{children:[t.jsx("video",{ref:F,src:d.productVideo,style:V.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,controls:!0,"aria-label":`Product video for ${d.title}`}),(I||H)&&t.jsx("div",Object.assign({style:V.videoOverlay,onClick:t=>{t.stopPropagation(),F.current&&(F.current.paused?(F.current.play(),N(!1),R(!1)):(F.current.pause(),N(!0),R(!0)))},role:"button",tabIndex:0,"aria-label":I?"Play video":"Pause video",onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),F.current&&(F.current.paused?(F.current.play(),N(!1),R(!1)):(F.current.pause(),N(!0),R(!0))))}},{children:t.jsx(r.default,{width:20,height:20})}))]}):d.displayImage?t.jsx("img",{src:d.displayImage,alt:d.title,style:V.image,onError:t=>{d.image&&(t.target.src=d.image)}}):t.jsx("div",Object.assign({style:V.imagePlaceholder},{children:o.TEXT.FEATURE_PREVIEW_PLACEHOLDER}))})),t.jsxs("div",Object.assign({style:V.contentContainer},{children:[t.jsx("div",Object.assign({style:V.skipButtonContainer},{children:t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{l.hideJoyrideArrow(D.current);const e=u.findWhatsNewButton();if(e&&D.current){const t=l.calculateCloseTransform(D.current,e);A(t)}else A("scale(0)");null==h||h(!0),q(!0),l.executeAfterAnimation(t)})(g)},style:V.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,V.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,V.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),t.jsx("h3",Object.assign({style:V.title},{children:d.title})),t.jsx("div",{"data-popup-content":!0,style:V.content,dangerouslySetInnerHTML:{__html:a.decodeHTMLEntities(d.content||d.body||"")}}),t.jsxs("div",Object.assign({style:V.actionsWrapper},{children:[t.jsxs("div",Object.assign({style:V.buttonsGroup},{children:[(null===(O=d.primaryButton)||void 0===O?void 0:O.redirectionUrl)||d.redirectUrl?t.jsx("a",Object.assign({href:(null===(E=d.primaryButton)||void 0===E?void 0:E.redirectionUrl)||d.redirectUrl,target:((null===(U=d.primaryButton)||void 0===U?void 0:U.redirectionUrl)||d.redirectUrl).startsWith("http")?"_blank":"_self",rel:((null===(k=d.primaryButton)||void 0===k?void 0:k.redirectionUrl)||d.redirectUrl).startsWith("http")?"noopener noreferrer":void 0,onClick:X,style:V.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,V.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,V.exploreButton.base)},{children:(null===(M=d.primaryButton)||void 0===M?void 0:M.text)||d.buttonText||o.TEXT.DEFAULT_BUTTON_TEXT})):t.jsx(s.Button,{onClick:X,style:V.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,V.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,V.exploreButton.base),buttonText:(null===(P=d.primaryButton)||void 0===P?void 0:P.text)||d.buttonText||o.TEXT.DEFAULT_BUTTON_TEXT}),(null===(C=d.secondaryButton)||void 0===C?void 0:C.text)&&((null===(_=d.secondaryButton)||void 0===_?void 0:_.redirectionUrl)?t.jsx("a",Object.assign({href:d.secondaryButton.redirectionUrl,target:d.secondaryButton.redirectionUrl.startsWith("http")?"_blank":"_self",rel:d.secondaryButton.redirectionUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:J,style:V.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,V.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,V.secondaryButton.base)},{children:d.secondaryButton.text})):t.jsx("button",Object.assign({onClick:J,style:V.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,V.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,V.secondaryButton.base)},{children:d.secondaryButton.text})))]})),y>1&&t.jsxs("div",Object.assign({style:V.navigationContainer},{children:[t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),j()},disabled:0===p,style:V.navigationButton(0===p).base,onMouseEnter:t=>{0!==p&&Object.assign(t.currentTarget.style,V.navigationButton(!1).hover)},onMouseLeave:t=>{0!==p&&Object.assign(t.currentTarget.style,V.navigationButton(!1).base)},"aria-label":"Previous feature"},{children:t.jsx(n.default,{style:{transform:"rotate(180deg)"}})})),t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),b()},disabled:p===y-1,style:V.navigationButton(p===y-1).base,onMouseEnter:t=>{p!==y-1&&Object.assign(t.currentTarget.style,V.navigationButton(!1).hover)},onMouseLeave:t=>{p!==y-1&&Object.assign(t.currentTarget.style,V.navigationButton(p===y-1).base)},"aria-label":"Next feature"},{children:t.jsx(n.default,{})}))]}))]}))]}))]}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../../constants/Theme.js"),e=require("../constants/animations.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../../constants/Theme.js"),e=require("../constants/animations.js"),n=require("../constants/dimensions.js");const o=(t,e)=>Object.assign(Object.assign(Object.assign(Object.assign({},t),(null==e?void 0:e.textColor)&&{color:e.textColor}),(null==e?void 0:e.backgroundColor)&&{backgroundColor:e.backgroundColor}),(null==e?void 0:e.borderColor)&&{borderColor:e.borderColor});exports.getMajorPopupStyles=function(i,r){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"16:9",l=arguments.length>3&&void 0!==arguments[3]?arguments[3]:n.SPACING.MAJOR.containerPadding,O=arguments.length>4?arguments[4]:void 0;const I=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";return n.POPUP_DIMENSIONS.MAJOR.imageWidth[t]||n.POPUP_DIMENSIONS.MAJOR.imageWidth["16:9"]}(a),S=parseInt(l,10)||16,N=n.DESIGN_DIMENSIONS.IMAGE_HEIGHT+2*S;return{container:{width:`${S+I+parseInt(n.SPACING.MAJOR.contentGap,10)+n.POPUP_DIMENSIONS.MAJOR.textAreaWidth+S}px`,height:"auto",minHeight:`${N}px`,display:"flex",flexDirection:"column",backgroundColor:n.DESIGN_COLORS.BACKGROUND.SURFACE,borderRadius:n.BORDER_RADIUS.POPUP,overflow:"hidden",position:"relative",padding:l,transform:i?r:"scale(1)",opacity:i?0:1,transition:e.POPUP_TRANSITION,boxSizing:"border-box"},headerContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.SPACING.MAJOR.headerMarginBottom,position:"relative"},contentWrapper:{display:"flex",flex:1,gap:n.SPACING.MAJOR.contentGap},skipButton:{base:{background:"transparent",border:"none",color:n.DESIGN_COLORS.TEXT.TERTIARY,fontSize:n.DESIGN_TYPOGRAPHY.SKIP_BUTTON.fontSize,fontWeight:n.DESIGN_TYPOGRAPHY.SKIP_BUTTON.fontWeight,cursor:"pointer",padding:n.SPACING.MAJOR.skipButtonPadding,borderRadius:n.BORDER_RADIUS.BUTTON,fontFamily:n.DESIGN_TYPOGRAPHY.SKIP_BUTTON.fontFamily,lineHeight:n.DESIGN_TYPOGRAPHY.SKIP_BUTTON.lineHeight},hover:{backgroundColor:t.BASE_COLORS.grayscale[100],color:t.BASE_COLORS.grayscale[700]}},imageContainer:{backgroundColor:n.DESIGN_COLORS.BACKGROUND.IMAGE,width:`${I}px`,height:`${n.DESIGN_DIMENSIONS.IMAGE_HEIGHT}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:n.BORDER_RADIUS.BUTTON,overflow:"hidden",flexShrink:0},image:{width:"100%",height:"100%",objectFit:"cover"},imagePlaceholder:{color:t.BASE_COLORS.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:t.BASE_COLORS.grayscale[800]},videoOverlay:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.4)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",zIndex:10,transition:"opacity 0.2s"},playIcon:{width:"84px",height:"84px",color:"#060606ff"},contentContainer:{flex:1,display:"flex",marginLeft:n.SPACING.MAJOR.contentMarginLeft,flexDirection:"column",justifyContent:"flex-start",background:"transparent",maxWidth:`${n.POPUP_DIMENSIONS.MAJOR.textAreaWidth}px`,gap:n.SPACING.MAJOR.listGap},skipButtonContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.SPACING.MAJOR.skipButtonContainerMargin},title:{fontSize:n.DESIGN_TYPOGRAPHY.TITLE.fontSize,fontWeight:n.DESIGN_TYPOGRAPHY.TITLE.fontWeight,marginBottom:n.SPACING.MAJOR.titleBottom,padding:0,color:n.DESIGN_COLORS.TEXT.PRIMARY,lineHeight:n.DESIGN_TYPOGRAPHY.TITLE.lineHeight,textAlign:"left",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",fontFamily:n.DESIGN_TYPOGRAPHY.TITLE.fontFamily},content:{fontSize:n.DESIGN_TYPOGRAPHY.CONTENT.fontSize,lineHeight:n.DESIGN_TYPOGRAPHY.CONTENT.lineHeight,color:n.DESIGN_COLORS.TEXT.SECONDARY,textAlign:"left",marginBottom:"auto",fontFamily:n.DESIGN_TYPOGRAPHY.CONTENT.fontFamily,fontWeight:n.DESIGN_TYPOGRAPHY.CONTENT.fontWeight},actionsWrapper:{display:"flex",alignItems:"center",justifyContent:"space-between",marginRight:n.SPACING.MAJOR.actionsTop,gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:n.SPACING.MAJOR.listGap},exploreButton:{base:o({backgroundColor:"transparent",border:`1px solid ${n.DESIGN_COLORS.BUTTON.PRIMARY_BORDER}`,color:n.DESIGN_COLORS.BUTTON.PRIMARY_TEXT,borderRadius:n.BORDER_RADIUS.BUTTON,fontSize:n.DESIGN_TYPOGRAPHY.BUTTON.fontSize,fontWeight:n.DESIGN_TYPOGRAPHY.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${n.DESIGN_DIMENSIONS.BUTTON_PADDING_HORIZONTAL}`,height:`${n.DESIGN_DIMENSIONS.BUTTON_HEIGHT}px`,textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:n.DESIGN_TYPOGRAPHY.BUTTON.fontFamily,lineHeight:n.DESIGN_TYPOGRAPHY.BUTTON.lineHeight},O),hover:{backgroundColor:(null==O?void 0:O.backgroundColor)?`${O.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},secondaryButton:{base:o({backgroundColor:"transparent",color:n.DESIGN_COLORS.BUTTON.PRIMARY_TEXT,borderRadius:n.BORDER_RADIUS.BUTTON,fontSize:n.DESIGN_TYPOGRAPHY.BUTTON.fontSize,fontWeight:n.DESIGN_TYPOGRAPHY.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${n.DESIGN_DIMENSIONS.BUTTON_PADDING_HORIZONTAL}`,height:`${n.DESIGN_DIMENSIONS.BUTTON_HEIGHT}px`,textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:n.DESIGN_TYPOGRAPHY.BUTTON.fontFamily,lineHeight:n.DESIGN_TYPOGRAPHY.BUTTON.lineHeight,transition:"none"},O),hover:{backgroundColor:(null==O?void 0:O.backgroundColor)?`${O.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{display:"flex",gap:n.SPACING.MAJOR.navigationGap,alignItems:"center"},navigationButton:e=>({base:{width:`${n.DESIGN_DIMENSIONS.NAVIGATION_BUTTON_SIZE}px`,height:`${n.DESIGN_DIMENSIONS.NAVIGATION_BUTTON_SIZE}px`,backgroundColor:"transparent",border:"none",color:e?n.DESIGN_COLORS.ICON.DISABLED:n.DESIGN_COLORS.ICON.ENABLED,fontSize:"16px",cursor:e?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:n.BORDER_RADIUS.BUTTON,padding:0},hover:{color:t.BASE_COLORS.warning[500]}})}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),s=require("../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),s=require("../../constants/Theme.js"),n=require("../tooltips/Tooltip.js"),i=require("./WhatsNew.styles.js");exports.WhatsNewButton=o=>{let{onClick:r,newContentCount:a=0,isOpen:c=!1,isLoading:d=!1,tooltip:l="What's new",testId:h="whats-new-button",iconWidth:j=32,iconHeight:u=32,customIcon:x}=o;return d?t.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t.jsx(i.WhatsNewIconContainer,Object.assign({count:a},{children:t.jsxs("div",Object.assign({className:"main-icon-class "+(c?"icon-active":""),style:{color:c?s.COLORS.content.brand:s.COLORS.content.primary},onClick:r,"data-testid":h},{children:[t.jsx(n.Tooltip,Object.assign({body:l,placement:"bottom"},{children:t.jsx("div",{children:x?t.jsx(x,{width:j,height:u,color:c?s.COLORS.content.brand:s.COLORS.content.primary}):t.jsx(e.default,{width:j,height:u})})})),a>0&&t.jsx("div",Object.assign({className:"notification--count"},{children:t.jsx("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e,Fragment as n}from"react/jsx-runtime";import{useState as r,useRef as o,useEffect as s}from"react";import i from"../../assets/icons/chevronRight2.svg.js";import a from"../../assets/icons/play.svg.js";import{Button as l}from"../button/Button.js";import{TEXT as c}from"./constants/index.js";import{getMajorPopupStyles as u}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as d}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as p,calculateCloseTransform as
|
|
1
|
+
import{jsxs as t,jsx as e,Fragment as n}from"react/jsx-runtime";import{useState as r,useRef as o,useEffect as s}from"react";import i from"../../assets/icons/chevronRight2.svg.js";import a from"../../assets/icons/play.svg.js";import{Button as l}from"../button/Button.js";import{TEXT as c}from"./constants/index.js";import{getMajorPopupStyles as u}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as d}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as p,calculateCloseTransform as g,executeAfterAnimation as y}from"./utils/animationHelpers.js";import{findWhatsNewButton as v}from"./utils/elementHelpers.js";const b=b=>{let{feature:m,currentIndex:h,totalFeatures:B,onSkip:j,onExplore:f,onPrevious:O,onNext:T,setIsClosing:x,onSecondaryAction:U,ratio:k="16:9",padding:E}=b;var P,M,C,_,L,D,I,W,w,A;const[H,S]=r(!1),[F,N]=r(!1),[R,V]=r(""),X=o(null),[z,G]=r(!1),[K,$]=r(!0),q=o(null);s((()=>{H&&N(!0)}),[H]);const J=()=>{f(),p(X.current);const t=v();if(t&&X.current){const e=g(X.current,t);V(e)}else V("scale(0)");null==x||x(!0),S(!0)},Q=t=>{var e;if(t.preventDefault(),t.stopPropagation(),null===(e=m.secondaryButton)||void 0===e?void 0:e.redirectionUrl){m.secondaryButton.redirectionUrl.startsWith("http")?window.open(m.secondaryButton.redirectionUrl,"_blank","noopener,noreferrer"):window.location.href=m.secondaryButton.redirectionUrl}U&&U(),p(X.current);const n=v();if(n&&X.current){const t=g(X.current,n);V(t)}else V("scale(0)");null==x||x(!0),S(!0)},Y=u(F,R,k,E||m.padding,null===(P=m.primaryButton)||void 0===P?void 0:P.style,null===(M=m.secondaryButton)||void 0===M?void 0:M.style);return t("div",Object.assign({ref:X,style:Y.container},{children:[e("style",{children:"\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t"}),t("div",Object.assign({style:Y.contentWrapper},{children:[e("div",Object.assign({style:Y.imageContainer},{children:m.productVideo?t(n,{children:[e("video",{ref:q,src:m.productVideo,style:Y.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,controls:!0,"aria-label":`Product video for ${m.title}`}),(z||K)&&e("div",Object.assign({style:Y.videoOverlay,onClick:t=>{t.stopPropagation(),q.current&&(q.current.paused?(q.current.play(),G(!1),$(!1)):(q.current.pause(),G(!0),$(!0)))},role:"button",tabIndex:0,"aria-label":z?"Play video":"Pause video",onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),q.current&&(q.current.paused?(q.current.play(),G(!1),$(!1)):(q.current.pause(),G(!0),$(!0))))}},{children:e(a,{width:20,height:20})}))]}):m.displayImage?e("img",{src:m.displayImage,alt:m.title,style:Y.image,onError:t=>{m.image&&(t.target.src=m.image)}}):e("div",Object.assign({style:Y.imagePlaceholder},{children:c.FEATURE_PREVIEW_PLACEHOLDER}))})),t("div",Object.assign({style:Y.contentContainer},{children:[e("div",Object.assign({style:Y.skipButtonContainer},{children:e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{p(X.current);const e=v();if(e&&X.current){const t=g(X.current,e);V(t)}else V("scale(0)");null==x||x(!0),S(!0),y(t)})(j)},style:Y.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Y.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Y.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),e("h3",Object.assign({style:Y.title},{children:m.title})),e("div",{"data-popup-content":!0,style:Y.content,dangerouslySetInnerHTML:{__html:d(m.content||m.body||"")}}),t("div",Object.assign({style:Y.actionsWrapper},{children:[t("div",Object.assign({style:Y.buttonsGroup},{children:[(null===(C=m.primaryButton)||void 0===C?void 0:C.redirectionUrl)||m.redirectUrl?e("a",Object.assign({href:(null===(_=m.primaryButton)||void 0===_?void 0:_.redirectionUrl)||m.redirectUrl,target:((null===(L=m.primaryButton)||void 0===L?void 0:L.redirectionUrl)||m.redirectUrl).startsWith("http")?"_blank":"_self",rel:((null===(D=m.primaryButton)||void 0===D?void 0:D.redirectionUrl)||m.redirectUrl).startsWith("http")?"noopener noreferrer":void 0,onClick:J,style:Y.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Y.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Y.exploreButton.base)},{children:(null===(I=m.primaryButton)||void 0===I?void 0:I.text)||m.buttonText||c.DEFAULT_BUTTON_TEXT})):e(l,{onClick:J,style:Y.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Y.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Y.exploreButton.base),buttonText:(null===(W=m.primaryButton)||void 0===W?void 0:W.text)||m.buttonText||c.DEFAULT_BUTTON_TEXT}),(null===(w=m.secondaryButton)||void 0===w?void 0:w.text)&&((null===(A=m.secondaryButton)||void 0===A?void 0:A.redirectionUrl)?e("a",Object.assign({href:m.secondaryButton.redirectionUrl,target:m.secondaryButton.redirectionUrl.startsWith("http")?"_blank":"_self",rel:m.secondaryButton.redirectionUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:Q,style:Y.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Y.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Y.secondaryButton.base)},{children:m.secondaryButton.text})):e("button",Object.assign({onClick:Q,style:Y.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Y.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Y.secondaryButton.base)},{children:m.secondaryButton.text})))]})),B>1&&t("div",Object.assign({style:Y.navigationContainer},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:0===h,style:Y.navigationButton(0===h).base,onMouseEnter:t=>{0!==h&&Object.assign(t.currentTarget.style,Y.navigationButton(!1).hover)},onMouseLeave:t=>{0!==h&&Object.assign(t.currentTarget.style,Y.navigationButton(!1).base)},"aria-label":"Previous feature"},{children:e(i,{style:{transform:"rotate(180deg)"}})})),e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),T()},disabled:h===B-1,style:Y.navigationButton(h===B-1).base,onMouseEnter:t=>{h!==B-1&&Object.assign(t.currentTarget.style,Y.navigationButton(!1).hover)},onMouseLeave:t=>{h!==B-1&&Object.assign(t.currentTarget.style,Y.navigationButton(h===B-1).base)},"aria-label":"Next feature"},{children:e(i,{})}))]}))]}))]}))]}))]}))};export{b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{SPACING as o,POPUP_DIMENSIONS as n,DESIGN_COLORS as i,BORDER_RADIUS as r,DESIGN_TYPOGRAPHY as a,DESIGN_DIMENSIONS as l}from"../constants/dimensions.js";const d=(t,e)=>Object.assign(Object.assign(Object.assign(Object.assign({},t),(null==e?void 0:e.textColor)&&{color:e.textColor}),(null==e?void 0:e.backgroundColor)&&{backgroundColor:e.backgroundColor}),(null==e?void 0:e.borderColor)&&{borderColor:e.borderColor}),g=function(g,s){let c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"16:9",T=arguments.length>3&&void 0!==arguments[3]?arguments[3]:o.MAJOR.containerPadding,p=arguments.length>4?arguments[4]:void 0
|
|
1
|
+
import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{SPACING as o,POPUP_DIMENSIONS as n,DESIGN_COLORS as i,BORDER_RADIUS as r,DESIGN_TYPOGRAPHY as a,DESIGN_DIMENSIONS as l}from"../constants/dimensions.js";const d=(t,e)=>Object.assign(Object.assign(Object.assign(Object.assign({},t),(null==e?void 0:e.textColor)&&{color:e.textColor}),(null==e?void 0:e.backgroundColor)&&{backgroundColor:e.backgroundColor}),(null==e?void 0:e.borderColor)&&{borderColor:e.borderColor}),g=function(g,s){let c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"16:9",T=arguments.length>3&&void 0!==arguments[3]?arguments[3]:o.MAJOR.containerPadding,p=arguments.length>4?arguments[4]:void 0;const f=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";return n.MAJOR.imageWidth[t]||n.MAJOR.imageWidth["16:9"]}(c),h=parseInt(T,10)||16,u=l.IMAGE_HEIGHT+2*h;return{container:{width:`${h+f+parseInt(o.MAJOR.contentGap,10)+n.MAJOR.textAreaWidth+h}px`,height:"auto",minHeight:`${u}px`,display:"flex",flexDirection:"column",backgroundColor:i.BACKGROUND.SURFACE,borderRadius:r.POPUP,overflow:"hidden",position:"relative",padding:T,transform:g?s:"scale(1)",opacity:g?0:1,transition:e,boxSizing:"border-box"},headerContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:o.MAJOR.headerMarginBottom,position:"relative"},contentWrapper:{display:"flex",flex:1,gap:o.MAJOR.contentGap},skipButton:{base:{background:"transparent",border:"none",color:i.TEXT.TERTIARY,fontSize:a.SKIP_BUTTON.fontSize,fontWeight:a.SKIP_BUTTON.fontWeight,cursor:"pointer",padding:o.MAJOR.skipButtonPadding,borderRadius:r.BUTTON,fontFamily:a.SKIP_BUTTON.fontFamily,lineHeight:a.SKIP_BUTTON.lineHeight},hover:{backgroundColor:t.grayscale[100],color:t.grayscale[700]}},imageContainer:{backgroundColor:i.BACKGROUND.IMAGE,width:`${f}px`,height:`${l.IMAGE_HEIGHT}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:r.BUTTON,overflow:"hidden",flexShrink:0},image:{width:"100%",height:"100%",objectFit:"cover"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:t.grayscale[800]},videoOverlay:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.4)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",zIndex:10,transition:"opacity 0.2s"},playIcon:{width:"84px",height:"84px",color:"#060606ff"},contentContainer:{flex:1,display:"flex",marginLeft:o.MAJOR.contentMarginLeft,flexDirection:"column",justifyContent:"flex-start",background:"transparent",maxWidth:`${n.MAJOR.textAreaWidth}px`,gap:o.MAJOR.listGap},skipButtonContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:o.MAJOR.skipButtonContainerMargin},title:{fontSize:a.TITLE.fontSize,fontWeight:a.TITLE.fontWeight,marginBottom:o.MAJOR.titleBottom,padding:0,color:i.TEXT.PRIMARY,lineHeight:a.TITLE.lineHeight,textAlign:"left",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",fontFamily:a.TITLE.fontFamily},content:{fontSize:a.CONTENT.fontSize,lineHeight:a.CONTENT.lineHeight,color:i.TEXT.SECONDARY,textAlign:"left",marginBottom:"auto",fontFamily:a.CONTENT.fontFamily,fontWeight:a.CONTENT.fontWeight},actionsWrapper:{display:"flex",alignItems:"center",justifyContent:"space-between",marginRight:o.MAJOR.actionsTop,gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:o.MAJOR.listGap},exploreButton:{base:d({backgroundColor:"transparent",border:`1px solid ${i.BUTTON.PRIMARY_BORDER}`,color:i.BUTTON.PRIMARY_TEXT,borderRadius:r.BUTTON,fontSize:a.BUTTON.fontSize,fontWeight:a.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${l.BUTTON_PADDING_HORIZONTAL}`,height:`${l.BUTTON_HEIGHT}px`,textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight},p),hover:{backgroundColor:(null==p?void 0:p.backgroundColor)?`${p.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},secondaryButton:{base:d({backgroundColor:"transparent",color:i.BUTTON.PRIMARY_TEXT,borderRadius:r.BUTTON,fontSize:a.BUTTON.fontSize,fontWeight:a.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${l.BUTTON_PADDING_HORIZONTAL}`,height:`${l.BUTTON_HEIGHT}px`,textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight,transition:"none"},p),hover:{backgroundColor:(null==p?void 0:p.backgroundColor)?`${p.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{display:"flex",gap:o.MAJOR.navigationGap,alignItems:"center"},navigationButton:e=>({base:{width:`${l.NAVIGATION_BUTTON_SIZE}px`,height:`${l.NAVIGATION_BUTTON_SIZE}px`,backgroundColor:"transparent",border:"none",color:e?i.ICON.DISABLED:i.ICON.ENABLED,fontSize:"16px",cursor:e?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:r.BUTTON,padding:0},hover:{color:t.warning[500]}})}};export{g as getMajorPopupStyles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as
|
|
1
|
+
import{jsxs as t,jsx as n}from"react/jsx-runtime";import i from"../../assets/icons/whatsNew.svg.js";import{COLORS as e}from"../../constants/Theme.js";import{Tooltip as o}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as s}from"./WhatsNew.styles.js";const r=r=>{let{onClick:c,newContentCount:a=0,isOpen:d=!1,isLoading:l=!1,tooltip:m="What's new",testId:h="whats-new-button",iconWidth:p=32,iconHeight:g=32,customIcon:b}=r;return l?t("div",Object.assign({style:{margin:"0px 8px"}},{children:[n("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),n("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):n(s,Object.assign({count:a},{children:t("div",Object.assign({className:"main-icon-class "+(d?"icon-active":""),style:{color:d?e.content.brand:e.content.primary},onClick:c,"data-testid":h},{children:[n(o,Object.assign({body:m,placement:"bottom"},{children:n("div",{children:b?n(b,{width:p,height:g,color:d?e.content.brand:e.content.primary}):n(i,{width:p,height:g})})})),a>0&&n("div",Object.assign({className:"notification--count"},{children:n("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};export{r as WhatsNewButton};
|