@bikdotai/bik-component-library 0.0.750-beta.7 → 0.0.750-beta.8
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.d.ts +1 -0
- package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts +1 -0
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.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"),a=require("./styles/majorPopup.styles.js");require("../../constants/Theme.js"),require("./constants/animations.js");var i=require("./utils/htmlHelpers.js"),l=require("./utils/animationHelpers.js"),u=require("./utils/elementHelpers.js");exports.default=c=>{let{feature:d,currentIndex:p,totalFeatures:g,onSkip:y,onExplore:v,onPrevious:b,onNext:j,setIsClosing:h,onSecondaryAction:f,ratio:x="16:9",padding:B}=c;var T,O,m,E,M,k,U,P,C,w;const[_,L]=e.useState(!1),[W,
|
|
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"),a=require("./styles/majorPopup.styles.js");require("../../constants/Theme.js"),require("./constants/animations.js");var i=require("./utils/htmlHelpers.js"),l=require("./utils/animationHelpers.js"),u=require("./utils/elementHelpers.js");exports.default=c=>{let{feature:d,currentIndex:p,totalFeatures:g,onSkip:y,onExplore:v,onPrevious:b,onNext:j,setIsClosing:h,onSecondaryAction:f,ratio:x="16:9",padding:B}=c;var T,O,m,E,M,k,U,P,C,w;const[_,L]=e.useState(!1),[W,q]=e.useState(!1),[S,A]=e.useState(""),D=e.useRef(null),[I,H]=e.useState(!1),[N,R]=e.useState(!0),F=e.useRef(null),[X,V]=e.useState(x),J=e.useRef(null);e.useEffect((()=>{_&&q(!0)}),[_]);const z=()=>{var t,e;const n=null===(t=d.primaryButton)||void 0===t?void 0:t.action;if("Play Video"===n)v();else if("Open link"===n){const t=(null===(e=d.primaryButton)||void 0===e?void 0:e.redirectionUrl)||d.redirectUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else v();l.hideJoyrideArrow(D.current);const r=u.findWhatsNewButton();if(r&&D.current){const t=l.calculateCloseTransform(D.current,r);A(t)}else A("scale(0)");null==h||h(!0),L(!0)},G=t=>{var e,n;t.preventDefault(),t.stopPropagation();const r=null===(e=d.secondaryButton)||void 0===e?void 0:e.action;if("Open link"===r){const t=null===(n=d.secondaryButton)||void 0===n?void 0:n.redirectionUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else"Close popup"!==r&&""!==r||f&&f();l.hideJoyrideArrow(D.current);const s=u.findWhatsNewButton();if(s&&D.current){const t=l.calculateCloseTransform(D.current,s);A(t)}else A("scale(0)");null==h||h(!0),L(!0)},K=a.getMajorPopupStyles(W,S,X,B||d.padding,null===(T=d.primaryButton)||void 0===T?void 0:T.style,null===(O=d.secondaryButton)||void 0===O?void 0:O.style);return t.jsx("div",Object.assign({style:K.outerWrapper},{children:t.jsxs("div",Object.assign({ref:D,style:Object.assign(Object.assign({},K.container),{opacity:W?0:1,transition:"opacity 0.2s ease-in-out, transform 0.3s ease"})},{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:K.contentWrapper},{children:[t.jsx("div",Object.assign({style:K.imageContainer},{children:d.productVideo?t.jsxs(t.Fragment,{children:[t.jsx("video",{ref:F,src:d.productVideo,style:K.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,controls:!0,"aria-label":`Product video for ${d.title}`,onLoadedMetadata:t=>{const e=t.currentTarget,n=e.videoWidth,r=e.videoHeight;if(n&&r){const t=n/r;Math.abs(t-16/9)<.1?V("16:9"):Math.abs(t-1)<.1?V("1:1"):Math.abs(t-4/3)<.1?V("4:3"):V(t>1.5?"16:9":t<.9?"4:3":"1:1")}}}),(I||N)&&t.jsx("div",Object.assign({style:K.videoOverlay,onClick:t=>{t.stopPropagation(),F.current&&(F.current.paused?(F.current.play(),H(!1),R(!1)):(F.current.pause(),H(!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(),H(!1),R(!1)):(F.current.pause(),H(!0),R(!0))))}},{children:t.jsx(r.default,{width:20,height:20})}))]}):d.displayImage?t.jsx("img",{ref:J,src:d.displayImage,alt:d.title,style:K.image,onLoad:t=>{const e=t.currentTarget,n=e.naturalWidth,r=e.naturalHeight;if(n&&r){const t=n/r;Math.abs(t-16/9)<.1?V("16:9"):Math.abs(t-1)<.1?V("1:1"):Math.abs(t-4/3)<.1?V("4:3"):V(t>1.5?"16:9":t<.9?"4:3":"1:1")}},onError:t=>{d.image&&(t.target.src=d.image)}}):t.jsx("div",Object.assign({style:K.imagePlaceholder},{children:o.TEXT.FEATURE_PREVIEW_PLACEHOLDER}))})),t.jsxs("div",Object.assign({style:K.contentContainer},{children:[t.jsx("div",Object.assign({style:K.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),L(!0),l.executeAfterAnimation(t)})(y)},style:K.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,K.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,K.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),t.jsx("h3",Object.assign({style:K.title},{children:d.title})),t.jsx("div",{"data-popup-content":!0,style:K.content,dangerouslySetInnerHTML:{__html:i.decodeHTMLEntities(d.content||d.body||"")}}),t.jsxs("div",Object.assign({style:K.actionsWrapper},{children:[t.jsxs("div",Object.assign({style:K.buttonsGroup},{children:[(null===(m=d.primaryButton)||void 0===m?void 0:m.redirectionUrl)||d.redirectUrl?t.jsx("a",Object.assign({href:(null===(E=d.primaryButton)||void 0===E?void 0:E.redirectionUrl)||d.redirectUrl,target:((null===(M=d.primaryButton)||void 0===M?void 0:M.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:z,style:K.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,K.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,K.exploreButton.base)},{children:(null===(U=d.primaryButton)||void 0===U?void 0:U.text)||d.buttonText||o.TEXT.DEFAULT_BUTTON_TEXT})):t.jsx(s.Button,{onClick:z,style:K.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,K.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,K.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===(w=d.secondaryButton)||void 0===w?void 0:w.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:G,style:K.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,K.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,K.secondaryButton.base)},{children:d.secondaryButton.text})):t.jsx("button",Object.assign({onClick:G,style:K.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,K.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,K.secondaryButton.base)},{children:d.secondaryButton.text})))]})),g>1&&t.jsxs("div",Object.assign({style:K.navigationContainer},{children:[t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),b()},disabled:0===p,style:K.navigationButton(0===p).base,onMouseEnter:t=>{0!==p&&Object.assign(t.currentTarget.style,K.navigationButton(!1).hover)},onMouseLeave:t=>{0!==p&&Object.assign(t.currentTarget.style,K.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(),j()},disabled:p===g-1,style:K.navigationButton(p===g-1).base,onMouseEnter:t=>{p!==g-1&&Object.assign(t.currentTarget.style,K.navigationButton(!1).hover)},onMouseLeave:t=>{p!==g-1&&Object.assign(t.currentTarget.style,K.navigationButton(p===g-1).base)},"aria-label":"Next feature"},{children:t.jsx(n.default,{})}))]}))]}))]}))]}))]}))}))};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import { ButtonStyle } from '../types/feature.types';
|
|
3
3
|
export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string, ratio?: '16:9' | '1:1' | '4:3', padding?: string, primaryButtonStyle?: ButtonStyle, secondaryButtonStyle?: ButtonStyle) => {
|
|
4
|
+
outerWrapper: CSSProperties;
|
|
4
5
|
container: CSSProperties;
|
|
5
6
|
headerContainer: CSSProperties;
|
|
6
7
|
contentWrapper: CSSProperties;
|
|
@@ -1 +1 @@
|
|
|
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=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"]},i=(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(r,a){let l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"16:9",O=arguments.length>3&&void 0!==arguments[3]?arguments[3]:n.SPACING.MAJOR.containerPadding,I=arguments.length>4?arguments[4]:void 0,
|
|
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=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"]},i=(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(r,a){let l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"16:9",O=arguments.length>3&&void 0!==arguments[3]?arguments[3]:n.SPACING.MAJOR.containerPadding,I=arguments.length>4?arguments[4]:void 0,d=arguments.length>5?arguments[5]:void 0;const N=o(l),S=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";const e=o(t);let i;switch(t){case"16:9":i=Math.round(e*(9/16));break;case"1:1":i=e;break;case"4:3":i=Math.round(e*(3/4));break;default:i=n.DESIGN_DIMENSIONS.IMAGE_HEIGHT}return Math.min(i,224)}(l),s=parseInt(O,10)||16,g=s+N+parseInt(n.SPACING.MAJOR.contentGap,10)+n.POPUP_DIMENSIONS.MAJOR.textAreaWidth+s,T=S+2*s;return{outerWrapper:{width:`${s+o("16:9")+parseInt(n.SPACING.MAJOR.contentGap,10)+n.POPUP_DIMENSIONS.MAJOR.textAreaWidth+s}px`,display:"flex",justifyContent:"flex-end",background:"transparent"},container:{width:`${g}px`,height:"auto",minHeight:`${T}px`,display:"flex",flexDirection:"column",backgroundColor:n.DESIGN_COLORS.BACKGROUND.SURFACE,borderRadius:n.BORDER_RADIUS.POPUP,overflow:"hidden",position:"relative",padding:O,transform:r?a:"scale(1)",opacity:r?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:"rgba(255, 255, 255, 0.10)",color:t.BASE_COLORS.grayscale[700]}},imageContainer:{backgroundColor:n.DESIGN_COLORS.BACKGROUND.IMAGE,width:`${N}px`,height:`${S}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 0 auto",width:`${n.POPUP_DIMENSIONS.MAJOR.textAreaWidth}px`,minWidth:`${n.POPUP_DIMENSIONS.MAJOR.textAreaWidth}px`,maxWidth:`${n.POPUP_DIMENSIONS.MAJOR.textAreaWidth}px`,display:"flex",flexDirection:"column",justifyContent:"flex-start",background:"transparent",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",marginTop:"auto",gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:n.SPACING.MAJOR.listGap},exploreButton:{base:i({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},I),hover:{backgroundColor:"rgba(255, 255, 255, 0.10)"}},secondaryButton:{base:i({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`,border:"none",boxShadow:"none",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"},d),hover:{backgroundColor:(null==d?void 0:d.backgroundColor)?`${d.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{display:"flex",gap:n.SPACING.MAJOR.navigationGap,alignItems:"center"},navigationButton:t=>({base:{width:`${n.DESIGN_DIMENSIONS.NAVIGATION_BUTTON_SIZE}px`,height:`${n.DESIGN_DIMENSIONS.NAVIGATION_BUTTON_SIZE}px`,backgroundColor:"transparent",border:"none",color:t?n.DESIGN_COLORS.ICON.DISABLED:n.DESIGN_COLORS.ICON.ENABLED,fontSize:"16px",cursor:t?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:n.BORDER_RADIUS.BUTTON,padding:0},hover:{backgroundColor:"rgba(255, 255, 255, 0.10)"}})}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as t,jsxs 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:h,currentIndex:m,totalFeatures:f,onSkip:j,onExplore:B,onPrevious:O,onNext:T,setIsClosing:x,onSecondaryAction:k,ratio:M="16:9",padding:E}=b;var U,P,C,L,_,W,w,D,I,H;const[A,S]=r(!1),[F,N]=r(!1),[R,V]=r(""),X=o(null),[z,G]=r(!1),[K,$]=r(!0),q=o(null),[J,Q]=r(M),Y=o(null);s((()=>{A&&N(!0)}),[A]);const Z=()=>{var t,e;const n=null===(t=h.primaryButton)||void 0===t?void 0:t.action;if("Play Video"===n)B();else if("Open link"===n){const t=(null===(e=h.primaryButton)||void 0===e?void 0:e.redirectionUrl)||h.redirectUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else B();p(X.current);const r=v();if(r&&X.current){const t=g(X.current,r);V(t)}else V("scale(0)");null==x||x(!0),S(!0)},tt=t=>{var e,n;t.preventDefault(),t.stopPropagation();const r=null===(e=h.secondaryButton)||void 0===e?void 0:e.action;if("Open link"===r){const t=null===(n=h.secondaryButton)||void 0===n?void 0:n.redirectionUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else"Close popup"!==r&&""!==r||k&&k();p(X.current);const o=v();if(o&&X.current){const t=g(X.current,o);V(t)}else V("scale(0)");null==x||x(!0),S(!0)},et=u(F,R,J,E||h.padding,null===(U=h.primaryButton)||void 0===U?void 0:U.style,null===(P=h.secondaryButton)||void 0===P?void 0:P.style);return t("div",Object.assign({style:et.outerWrapper},{children:e("div",Object.assign({ref:X,style:Object.assign(Object.assign({},et.container),{opacity:F?0:1,transition:"opacity 0.2s ease-in-out, transform 0.3s ease"})},{children:[t("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"}),e("div",Object.assign({style:et.contentWrapper},{children:[t("div",Object.assign({style:et.imageContainer},{children:h.productVideo?e(n,{children:[t("video",{ref:q,src:h.productVideo,style:et.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,controls:!0,"aria-label":`Product video for ${h.title}`,onLoadedMetadata:t=>{const e=t.currentTarget,n=e.videoWidth,r=e.videoHeight;if(n&&r){const t=n/r;Math.abs(t-16/9)<.1?Q("16:9"):Math.abs(t-1)<.1?Q("1:1"):Math.abs(t-4/3)<.1?Q("4:3"):Q(t>1.5?"16:9":t<.9?"4:3":"1:1")}}}),(z||K)&&t("div",Object.assign({style:et.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:t(a,{width:20,height:20})}))]}):h.displayImage?t("img",{ref:Y,src:h.displayImage,alt:h.title,style:et.image,onLoad:t=>{const e=t.currentTarget,n=e.naturalWidth,r=e.naturalHeight;if(n&&r){const t=n/r;Math.abs(t-16/9)<.1?Q("16:9"):Math.abs(t-1)<.1?Q("1:1"):Math.abs(t-4/3)<.1?Q("4:3"):Q(t>1.5?"16:9":t<.9?"4:3":"1:1")}},onError:t=>{h.image&&(t.target.src=h.image)}}):t("div",Object.assign({style:et.imagePlaceholder},{children:c.FEATURE_PREVIEW_PLACEHOLDER}))})),e("div",Object.assign({style:et.contentContainer},{children:[t("div",Object.assign({style:et.skipButtonContainer},{children:t("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:et.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,et.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,et.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),t("h3",Object.assign({style:et.title},{children:h.title})),t("div",{"data-popup-content":!0,style:et.content,dangerouslySetInnerHTML:{__html:d(h.content||h.body||"")}}),e("div",Object.assign({style:et.actionsWrapper},{children:[e("div",Object.assign({style:et.buttonsGroup},{children:[(null===(C=h.primaryButton)||void 0===C?void 0:C.redirectionUrl)||h.redirectUrl?t("a",Object.assign({href:(null===(L=h.primaryButton)||void 0===L?void 0:L.redirectionUrl)||h.redirectUrl,target:((null===(_=h.primaryButton)||void 0===_?void 0:_.redirectionUrl)||h.redirectUrl).startsWith("http")?"_blank":"_self",rel:((null===(W=h.primaryButton)||void 0===W?void 0:W.redirectionUrl)||h.redirectUrl).startsWith("http")?"noopener noreferrer":void 0,onClick:Z,style:et.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,et.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,et.exploreButton.base)},{children:(null===(w=h.primaryButton)||void 0===w?void 0:w.text)||h.buttonText||c.DEFAULT_BUTTON_TEXT})):t(l,{onClick:Z,style:et.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,et.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,et.exploreButton.base),buttonText:(null===(D=h.primaryButton)||void 0===D?void 0:D.text)||h.buttonText||c.DEFAULT_BUTTON_TEXT}),(null===(I=h.secondaryButton)||void 0===I?void 0:I.text)&&((null===(H=h.secondaryButton)||void 0===H?void 0:H.redirectionUrl)?t("a",Object.assign({href:h.secondaryButton.redirectionUrl,target:h.secondaryButton.redirectionUrl.startsWith("http")?"_blank":"_self",rel:h.secondaryButton.redirectionUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:tt,style:et.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,et.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,et.secondaryButton.base)},{children:h.secondaryButton.text})):t("button",Object.assign({onClick:tt,style:et.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,et.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,et.secondaryButton.base)},{children:h.secondaryButton.text})))]})),f>1&&e("div",Object.assign({style:et.navigationContainer},{children:[t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:0===m,style:et.navigationButton(0===m).base,onMouseEnter:t=>{0!==m&&Object.assign(t.currentTarget.style,et.navigationButton(!1).hover)},onMouseLeave:t=>{0!==m&&Object.assign(t.currentTarget.style,et.navigationButton(!1).base)},"aria-label":"Previous feature"},{children:t(i,{style:{transform:"rotate(180deg)"}})})),t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),T()},disabled:m===f-1,style:et.navigationButton(m===f-1).base,onMouseEnter:t=>{m!==f-1&&Object.assign(t.currentTarget.style,et.navigationButton(!1).hover)},onMouseLeave:t=>{m!==f-1&&Object.assign(t.currentTarget.style,et.navigationButton(m===f-1).base)},"aria-label":"Next feature"},{children:t(i,{})}))]}))]}))]}))]}))]}))}))};export{b as default};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import { ButtonStyle } from '../types/feature.types';
|
|
3
3
|
export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string, ratio?: '16:9' | '1:1' | '4:3', padding?: string, primaryButtonStyle?: ButtonStyle, secondaryButtonStyle?: ButtonStyle) => {
|
|
4
|
+
outerWrapper: CSSProperties;
|
|
4
5
|
container: CSSProperties;
|
|
5
6
|
headerContainer: CSSProperties;
|
|
6
7
|
contentWrapper: CSSProperties;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{SPACING as
|
|
1
|
+
import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{SPACING as n,POPUP_DIMENSIONS as o,DESIGN_COLORS as i,BORDER_RADIUS as r,DESIGN_TYPOGRAPHY as a,DESIGN_DIMENSIONS as l}from"../constants/dimensions.js";const d=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";return o.MAJOR.imageWidth[t]||o.MAJOR.imageWidth["16:9"]},s=(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,c){let p=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"16:9",T=arguments.length>3&&void 0!==arguments[3]?arguments[3]:n.MAJOR.containerPadding,f=arguments.length>4?arguments[4]:void 0,h=arguments.length>5?arguments[5]:void 0;const u=d(p),O=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";const e=d(t);let n;switch(t){case"16:9":n=Math.round(e*(9/16));break;case"1:1":n=e;break;case"4:3":n=Math.round(e*(3/4));break;default:n=l.IMAGE_HEIGHT}return Math.min(n,224)}(p),x=parseInt(T,10)||16,b=x+u+parseInt(n.MAJOR.contentGap,10)+o.MAJOR.textAreaWidth+x,m=O+2*x;return{outerWrapper:{width:`${x+d("16:9")+parseInt(n.MAJOR.contentGap,10)+o.MAJOR.textAreaWidth+x}px`,display:"flex",justifyContent:"flex-end",background:"transparent"},container:{width:`${b}px`,height:"auto",minHeight:`${m}px`,display:"flex",flexDirection:"column",backgroundColor:i.BACKGROUND.SURFACE,borderRadius:r.POPUP,overflow:"hidden",position:"relative",padding:T,transform:g?c:"scale(1)",opacity:g?0:1,transition:e,boxSizing:"border-box"},headerContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.MAJOR.headerMarginBottom,position:"relative"},contentWrapper:{display:"flex",flex:1,gap:n.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:n.MAJOR.skipButtonPadding,borderRadius:r.BUTTON,fontFamily:a.SKIP_BUTTON.fontFamily,lineHeight:a.SKIP_BUTTON.lineHeight},hover:{backgroundColor:"rgba(255, 255, 255, 0.10)",color:t.grayscale[700]}},imageContainer:{backgroundColor:i.BACKGROUND.IMAGE,width:`${u}px`,height:`${O}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 0 auto",width:`${o.MAJOR.textAreaWidth}px`,minWidth:`${o.MAJOR.textAreaWidth}px`,maxWidth:`${o.MAJOR.textAreaWidth}px`,display:"flex",flexDirection:"column",justifyContent:"flex-start",background:"transparent",gap:n.MAJOR.listGap},skipButtonContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.MAJOR.skipButtonContainerMargin},title:{fontSize:a.TITLE.fontSize,fontWeight:a.TITLE.fontWeight,marginBottom:n.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",marginTop:"auto",gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:n.MAJOR.listGap},exploreButton:{base:s({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},f),hover:{backgroundColor:"rgba(255, 255, 255, 0.10)"}},secondaryButton:{base:s({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`,border:"none",boxShadow:"none",textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight,transition:"none"},h),hover:{backgroundColor:(null==h?void 0:h.backgroundColor)?`${h.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{display:"flex",gap:n.MAJOR.navigationGap,alignItems:"center"},navigationButton:t=>({base:{width:`${l.NAVIGATION_BUTTON_SIZE}px`,height:`${l.NAVIGATION_BUTTON_SIZE}px`,backgroundColor:"transparent",border:"none",color:t?i.ICON.DISABLED:i.ICON.ENABLED,fontSize:"16px",cursor:t?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:r.BUTTON,padding:0},hover:{backgroundColor:"rgba(255, 255, 255, 0.10)"}})}};export{g as getMajorPopupStyles};
|