@bikdotai/bik-component-library 0.0.750-beta.6 → 0.0.750-beta.7
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.
|
@@ -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,m,
|
|
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,S]=e.useState(!1),[q,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,z]=e.useState(!1),G=e.useRef(null);e.useEffect((()=>{_&&S(!0)}),[_]);const K=()=>{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)},$=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)},Q=a.getMajorPopupStyles(W,q,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.jsxs("div",Object.assign({ref:D,style:Object.assign(Object.assign({},Q.container),{opacity:J?W?0:1:0,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:Q.contentWrapper},{children:[t.jsx("div",Object.assign({style:Q.imageContainer},{children:d.productVideo?t.jsxs(t.Fragment,{children:[t.jsx("video",{ref:F,src:d.productVideo,style:Q.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"),z(!0)}}}),(I||N)&&t.jsx("div",Object.assign({style:Q.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:G,src:d.displayImage,alt:d.title,style:Q.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"),z(!0)}},onError:t=>{d.image&&(t.target.src=d.image)}}):t.jsx("div",Object.assign({style:Q.imagePlaceholder},{children:o.TEXT.FEATURE_PREVIEW_PLACEHOLDER}))})),t.jsxs("div",Object.assign({style:Q.contentContainer},{children:[t.jsx("div",Object.assign({style:Q.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:Q.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Q.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Q.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),t.jsx("h3",Object.assign({style:Q.title},{children:d.title})),t.jsx("div",{"data-popup-content":!0,style:Q.content,dangerouslySetInnerHTML:{__html:i.decodeHTMLEntities(d.content||d.body||"")}}),t.jsxs("div",Object.assign({style:Q.actionsWrapper},{children:[t.jsxs("div",Object.assign({style:Q.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:K,style:Q.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Q.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Q.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:K,style:Q.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Q.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Q.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:$,style:Q.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Q.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Q.secondaryButton.base)},{children:d.secondaryButton.text})):t.jsx("button",Object.assign({onClick:$,style:Q.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,Q.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,Q.secondaryButton.base)},{children:d.secondaryButton.text})))]})),g>1&&t.jsxs("div",Object.assign({style:Q.navigationContainer},{children:[t.jsx("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),b()},disabled:0===p,style:Q.navigationButton(0===p).base,onMouseEnter:t=>{0!==p&&Object.assign(t.currentTarget.style,Q.navigationButton(!1).hover)},onMouseLeave:t=>{0!==p&&Object.assign(t.currentTarget.style,Q.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:Q.navigationButton(p===g-1).base,onMouseEnter:t=>{p!==g-1&&Object.assign(t.currentTarget.style,Q.navigationButton(!1).hover)},onMouseLeave:t=>{p!==g-1&&Object.assign(t.currentTarget.style,Q.navigationButton(p===g-1).base)},"aria-label":"Next feature"},{children:t.jsx(n.default,{})}))]}))]}))]}))]}))]}))};
|
|
@@ -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 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:
|
|
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: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,Z]=r(!1),tt=o(null);s((()=>{A&&N(!0)}),[A]);const et=()=>{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)},nt=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)},rt=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({ref:X,style:Object.assign(Object.assign({},rt.container),{opacity:Y?F?0:1:0,transition:"opacity 0.2s ease-in-out, transform 0.3s ease"})},{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:rt.contentWrapper},{children:[e("div",Object.assign({style:rt.imageContainer},{children:h.productVideo?t(n,{children:[e("video",{ref:q,src:h.productVideo,style:rt.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(!0)}}}),(z||K)&&e("div",Object.assign({style:rt.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})}))]}):h.displayImage?e("img",{ref:tt,src:h.displayImage,alt:h.title,style:rt.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"),Z(!0)}},onError:t=>{h.image&&(t.target.src=h.image)}}):e("div",Object.assign({style:rt.imagePlaceholder},{children:c.FEATURE_PREVIEW_PLACEHOLDER}))})),t("div",Object.assign({style:rt.contentContainer},{children:[e("div",Object.assign({style:rt.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:rt.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,rt.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,rt.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),e("h3",Object.assign({style:rt.title},{children:h.title})),e("div",{"data-popup-content":!0,style:rt.content,dangerouslySetInnerHTML:{__html:d(h.content||h.body||"")}}),t("div",Object.assign({style:rt.actionsWrapper},{children:[t("div",Object.assign({style:rt.buttonsGroup},{children:[(null===(C=h.primaryButton)||void 0===C?void 0:C.redirectionUrl)||h.redirectUrl?e("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:et,style:rt.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,rt.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,rt.exploreButton.base)},{children:(null===(w=h.primaryButton)||void 0===w?void 0:w.text)||h.buttonText||c.DEFAULT_BUTTON_TEXT})):e(l,{onClick:et,style:rt.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,rt.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,rt.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)?e("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:nt,style:rt.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,rt.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,rt.secondaryButton.base)},{children:h.secondaryButton.text})):e("button",Object.assign({onClick:nt,style:rt.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,rt.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,rt.secondaryButton.base)},{children:h.secondaryButton.text})))]})),f>1&&t("div",Object.assign({style:rt.navigationContainer},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:0===m,style:rt.navigationButton(0===m).base,onMouseEnter:t=>{0!==m&&Object.assign(t.currentTarget.style,rt.navigationButton(!1).hover)},onMouseLeave:t=>{0!==m&&Object.assign(t.currentTarget.style,rt.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:m===f-1,style:rt.navigationButton(m===f-1).base,onMouseEnter:t=>{m!==f-1&&Object.assign(t.currentTarget.style,rt.navigationButton(!1).hover)},onMouseLeave:t=>{m!==f-1&&Object.assign(t.currentTarget.style,rt.navigationButton(m===f-1).base)},"aria-label":"Next feature"},{children:e(i,{})}))]}))]}))]}))]}))]}))};export{b as default};
|