@bikdotai/bik-component-library 0.0.744-beta.7 → 0.0.744-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/styles/majorPopup.styles.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNewPanel.js +1 -1
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/esm/components/whats-new/WhatsNewPanel.js +1 -1
- package/package.json +1 -1
|
@@ -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=(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,I=arguments.length>5?arguments[5]:void 0;const N=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,s=n.DESIGN_DIMENSIONS.IMAGE_HEIGHT+2*S;return{container:{width:`${S+N+parseInt(n.SPACING.MAJOR.contentGap,10)+n.POPUP_DIMENSIONS.MAJOR.textAreaWidth+S}px`,height:"auto",minHeight:`${s}px`,display:"flex",flexDirection:"column",backgroundColor:n.DESIGN_COLORS.BACKGROUND.SURFACE,borderRadius:n.BORDER_RADIUS.BUTTON,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",transition:"all 0.2s",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.1)",color:n.DESIGN_COLORS.TEXT.PRIMARY}},imageContainer:{backgroundColor:n.DESIGN_COLORS.BACKGROUND.IMAGE,width:`${N}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",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`,transition:"all 0.2s",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`,transition:"all 0.2s",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:(null==I?void 0:I.backgroundColor)?`${I.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",transition:"all 0.2s",borderRadius:n.BORDER_RADIUS.BUTTON,padding:0},hover:t?{}:{backgroundColor:"rgba(255, 255, 255, 0.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=(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,I=arguments.length>5?arguments[5]:void 0;const N=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,s=n.DESIGN_DIMENSIONS.IMAGE_HEIGHT+2*S;return{container:{width:`${S+N+parseInt(n.SPACING.MAJOR.contentGap,10)+n.POPUP_DIMENSIONS.MAJOR.textAreaWidth+S}px`,height:"auto",minHeight:`${s}px`,display:"flex",flexDirection:"column",backgroundColor:n.DESIGN_COLORS.BACKGROUND.SURFACE,borderRadius:n.BORDER_RADIUS.BUTTON,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",transition:"all 0.2s",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.1)",color:n.DESIGN_COLORS.TEXT.PRIMARY}},imageContainer:{backgroundColor:n.DESIGN_COLORS.BACKGROUND.IMAGE,width:`${N}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`,transition:"all 0.2s",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`,transition:"all 0.2s",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:(null==I?void 0:I.backgroundColor)?`${I.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",transition:"all 0.2s",borderRadius:n.BORDER_RADIUS.BUTTON,padding:0},hover:t?{}:{backgroundColor:"rgba(255, 255, 255, 0.1)"}})}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("date-fns"),s=require("react"),r=require("../../assets/icons/searchIcon.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("date-fns"),s=require("react"),r=require("../../assets/icons/searchIcon.svg.js"),n=require("../../assets/icons/whatsNew.svg.js"),a=require("../../constants/Theme.js"),i=require("../button/Button.js"),o=require("../feature-announcements/VideoModal.js"),c=require("../searchBar/searchBar.js"),d=require("../side-modal/SideModal.js"),l=require("../TypographyStyle.js"),h=require("./WhatsNew.styles.js");exports.WhatsNewPanel=u=>{let{isOpen:j,onClose:m,content:x,isLoading:g=!1,title:w="What's new on BIK",searchPlaceholder:p="Search posts",emptyStateTitle:b="Nothing new!",emptyStateDescription:C="There are no new updates or features at the moment. Check back soon!",noResultsText:f="Sorry, no results found.",width:y="480px",onContentClick:O,renderCustomContent:N}=u;const[S,v]=s.useState(""),[M,L]=s.useState(!1),[q,k]=s.useState(""),T=e=>{if(!e.createdAt)return!1;const s=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return t.differenceInBusinessDays(new Date,s)<7},B=s.useMemo((()=>{if(!S.trim())return x;const e=S.toLowerCase();return x.filter((t=>t.title.toLowerCase().includes(e)||t.body.toLowerCase().includes(e)||t.content&&t.content.toLowerCase().includes(e)))}),[x,S]),W=e=>{e.productVideo?(k(e.productVideo),L(!0)):e.redirectUrl&&(e=>{const t=e.trim();try{const e=new URL(t,window.location.origin);e.origin===window.location.origin?window.location.href=e.href:window.open(e.href,"_blank","noopener,noreferrer")}catch(e){t.startsWith("/")||t.startsWith(".")?window.location.href=t:/^https?:\/\//i.test(t)&&window.open(t,"_blank","noopener,noreferrer")}})(e.redirectUrl),O&&O(e)},D=0===x.length,R=0===B.length;return j?e.jsxs(d.SideModal,Object.assign({width:y,onClose:m,header:"",headerCustomComponent:e.jsx(l.TitleMedium,Object.assign({color:a.COLORS.background.inverse},{children:w})),headerStyle:{background:a.COLORS.background.brandLight},hideFooter:!0},{children:[e.jsxs(h.MainContainer,{children:[e.jsx("div",Object.assign({className:"mt-8"},{children:e.jsx(c.SearchBar,{width:"100%",isEnabled:!D,onChange:e=>{v(e)},onEnter:e=>{v(e)},placeholder:p,variant:"default",searchValue:S,onClickCross:()=>{v("")}})})),e.jsx(h.WhatsNewWrapper,{children:D||R?e.jsxs("div",Object.assign({className:"no--data--found"},{children:[e.jsx("div",Object.assign({className:"icon--wrapper"},{children:D?e.jsx(n.default,{width:32,height:32}):e.jsx(r.default,{width:32,height:32})})),D?e.jsxs(e.Fragment,{children:[e.jsx(l.TitleRegular,{children:b}),e.jsx(l.BodyPrimary,Object.assign({color:a.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:C}))]}):R?e.jsx(l.BodyPrimary,Object.assign({color:a.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:f})):null]})):e.jsx("div",Object.assign({className:"scroller"},{children:B.map(((s,r)=>N?N(s):e.jsxs(h.MainCardContainer,Object.assign({className:"padding--16 mb-mt-8"},{children:[e.jsx(h.BackgroundImageContainer,{imageUrl:s.image,height:"209px",width:"100%",style:{borderRadius:"4px"}}),e.jsx("div",Object.assign({className:"mt-20 full--width"},{children:e.jsxs("div",Object.assign({className:"created--at flex flex--row"},{children:[T(s)?e.jsx("div",Object.assign({className:"new--content--tag"},{children:e.jsx(l.Caption,{children:"New"})})):e.jsx(e.Fragment,{}),e.jsx(l.Caption,Object.assign({style:{color:a.COLORS.content.placeholder}},{children:s.createdAt?t.format(s.createdAt.toDate?s.createdAt.toDate():new Date(s.createdAt),"dd MMMM yyyy"):""}))]}))})),e.jsx("div",Object.assign({className:"mt--8"},{children:e.jsx(l.TitleSmall,{children:s.title})})),e.jsx("div",{dangerouslySetInnerHTML:{__html:s.body},className:"card--desc mt--12"}),e.jsx("div",Object.assign({className:"flex flex--row mt-20 full--width"},{children:e.jsx(i.Button,{buttonText:s.buttonText||"Explore the feature",onClick:()=>W(s),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${r}`)))}))})]}),e.jsx(o.VideoModal,{isOpen:M,videoUrl:q,onClose:()=>{L(!1)}})]})):e.jsx(e.Fragment,{})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as o}from"../constants/animations.js";import{SPACING as n,POPUP_DIMENSIONS as e,DESIGN_COLORS as i,BORDER_RADIUS as r,DESIGN_TYPOGRAPHY as a,DESIGN_DIMENSIONS as l}from"../constants/dimensions.js";const d=(t,o)=>Object.assign(Object.assign(Object.assign(Object.assign({},t),(null==o?void 0:o.textColor)&&{color:o.textColor}),(null==o?void 0:o.backgroundColor)&&{backgroundColor:o.backgroundColor}),(null==o?void 0:o.borderColor)&&{borderColor:o.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]:n.MAJOR.containerPadding,p=arguments.length>4?arguments[4]:void 0,f=arguments.length>5?arguments[5]:void 0;const h=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";return e.MAJOR.imageWidth[t]||e.MAJOR.imageWidth["16:9"]}(c),u=parseInt(T,10)||16,O=l.IMAGE_HEIGHT+2*u;return{container:{width:`${u+h+parseInt(n.MAJOR.contentGap,10)+e.MAJOR.textAreaWidth+u}px`,height:"auto",minHeight:`${O}px`,display:"flex",flexDirection:"column",backgroundColor:i.BACKGROUND.SURFACE,borderRadius:r.BUTTON,overflow:"hidden",position:"relative",padding:T,transform:g?s:"scale(1)",opacity:g?0:1,transition:o,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",transition:"all 0.2s",padding:n.MAJOR.skipButtonPadding,borderRadius:r.BUTTON,fontFamily:a.SKIP_BUTTON.fontFamily,lineHeight:a.SKIP_BUTTON.lineHeight},hover:{backgroundColor:"rgba(255, 255, 255, 0.1)",color:i.TEXT.PRIMARY}},imageContainer:{backgroundColor:i.BACKGROUND.IMAGE,width:`${h}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:n.MAJOR.contentMarginLeft,flexDirection:"column",justifyContent:"flex-start",background:"transparent",maxWidth:`${e.MAJOR.textAreaWidth}px`,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",gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:n.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`,transition:"all 0.2s",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`,transition:"all 0.2s",textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight},f),hover:{backgroundColor:(null==f?void 0:f.backgroundColor)?`${f.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",transition:"all 0.2s",borderRadius:r.BUTTON,padding:0},hover:t?{}:{backgroundColor:"rgba(255, 255, 255, 0.1)"}})}};export{g as getMajorPopupStyles};
|
|
1
|
+
import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as o}from"../constants/animations.js";import{SPACING as n,POPUP_DIMENSIONS as e,DESIGN_COLORS as i,BORDER_RADIUS as r,DESIGN_TYPOGRAPHY as a,DESIGN_DIMENSIONS as l}from"../constants/dimensions.js";const d=(t,o)=>Object.assign(Object.assign(Object.assign(Object.assign({},t),(null==o?void 0:o.textColor)&&{color:o.textColor}),(null==o?void 0:o.backgroundColor)&&{backgroundColor:o.backgroundColor}),(null==o?void 0:o.borderColor)&&{borderColor:o.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]:n.MAJOR.containerPadding,p=arguments.length>4?arguments[4]:void 0,f=arguments.length>5?arguments[5]:void 0;const h=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";return e.MAJOR.imageWidth[t]||e.MAJOR.imageWidth["16:9"]}(c),u=parseInt(T,10)||16,O=l.IMAGE_HEIGHT+2*u;return{container:{width:`${u+h+parseInt(n.MAJOR.contentGap,10)+e.MAJOR.textAreaWidth+u}px`,height:"auto",minHeight:`${O}px`,display:"flex",flexDirection:"column",backgroundColor:i.BACKGROUND.SURFACE,borderRadius:r.BUTTON,overflow:"hidden",position:"relative",padding:T,transform:g?s:"scale(1)",opacity:g?0:1,transition:o,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",transition:"all 0.2s",padding:n.MAJOR.skipButtonPadding,borderRadius:r.BUTTON,fontFamily:a.SKIP_BUTTON.fontFamily,lineHeight:a.SKIP_BUTTON.lineHeight},hover:{backgroundColor:"rgba(255, 255, 255, 0.1)",color:i.TEXT.PRIMARY}},imageContainer:{backgroundColor:i.BACKGROUND.IMAGE,width:`${h}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:n.MAJOR.contentMarginLeft,flexDirection:"column",justifyContent:"flex-start",background:"transparent",maxWidth:`${e.MAJOR.textAreaWidth}px`,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",marginRight:n.MAJOR.actionsTop,gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:n.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`,transition:"all 0.2s",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`,transition:"all 0.2s",textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight},f),hover:{backgroundColor:(null==f?void 0:f.backgroundColor)?`${f.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",transition:"all 0.2s",borderRadius:r.BUTTON,padding:0},hover:t?{}:{backgroundColor:"rgba(255, 255, 255, 0.1)"}})}};export{g as getMajorPopupStyles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as t,jsxs as
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{format as r,differenceInBusinessDays as o}from"date-fns";import{useState as s,useMemo as a}from"react";import i from"../../assets/icons/searchIcon.svg.js";import c from"../../assets/icons/whatsNew.svg.js";import{COLORS as d}from"../../constants/Theme.js";import{Button as l}from"../button/Button.js";import{VideoModal as h}from"../feature-announcements/VideoModal.js";import{SearchBar as m}from"../searchBar/searchBar.js";import{SideModal as p}from"../side-modal/SideModal.js";import{TitleMedium as w,TitleRegular as g,BodyPrimary as u,Caption as f,TitleSmall as b}from"../TypographyStyle.js";import{MainContainer as j,WhatsNewWrapper as y,MainCardContainer as C,BackgroundImageContainer as x}from"./WhatsNew.styles.js";const N=N=>{let{isOpen:O,onClose:v,content:k,isLoading:A=!1,title:D="What's new on BIK",searchPlaceholder:L="Search posts",emptyStateTitle:S="Nothing new!",emptyStateDescription:T="There are no new updates or features at the moment. Check back soon!",noResultsText:M="Sorry, no results found.",width:W="480px",onContentClick:U,renderCustomContent:B}=N;const[V,_]=s(""),[E,I]=s(!1),[R,P]=s(""),z=e=>{if(!e.createdAt)return!1;const t=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return o(new Date,t)<7},F=a((()=>{if(!V.trim())return k;const e=V.toLowerCase();return k.filter((t=>t.title.toLowerCase().includes(e)||t.body.toLowerCase().includes(e)||t.content&&t.content.toLowerCase().includes(e)))}),[k,V]),H=e=>{e.productVideo?(P(e.productVideo),I(!0)):e.redirectUrl&&(e=>{const t=e.trim();try{const e=new URL(t,window.location.origin);e.origin===window.location.origin?window.location.href=e.href:window.open(e.href,"_blank","noopener,noreferrer")}catch(e){t.startsWith("/")||t.startsWith(".")?window.location.href=t:/^https?:\/\//i.test(t)&&window.open(t,"_blank","noopener,noreferrer")}})(e.redirectUrl),U&&U(e)},K=0===k.length,$=0===F.length;return O?n(p,Object.assign({width:W,onClose:v,header:"",headerCustomComponent:e(w,Object.assign({color:d.background.inverse},{children:D})),headerStyle:{background:d.background.brandLight},hideFooter:!0},{children:[n(j,{children:[e("div",Object.assign({className:"mt-8"},{children:e(m,{width:"100%",isEnabled:!K,onChange:e=>{_(e)},onEnter:e=>{_(e)},placeholder:L,variant:"default",searchValue:V,onClickCross:()=>{_("")}})})),e(y,{children:K||$?n("div",Object.assign({className:"no--data--found"},{children:[e("div",Object.assign({className:"icon--wrapper"},{children:e(K?c:i,{width:32,height:32})})),K?n(t,{children:[e(g,{children:S}),e(u,Object.assign({color:d.content.secondary,className:"text--align",style:{maxWidth:300}},{children:T}))]}):$?e(u,Object.assign({color:d.content.secondary,className:"text--align",style:{maxWidth:300}},{children:M})):null]})):e("div",Object.assign({className:"scroller"},{children:F.map(((o,s)=>B?B(o):n(C,Object.assign({className:"padding--16 mb-mt-8"},{children:[e(x,{imageUrl:o.image,height:"209px",width:"100%",style:{borderRadius:"4px"}}),e("div",Object.assign({className:"mt-20 full--width"},{children:n("div",Object.assign({className:"created--at flex flex--row"},{children:[z(o)?e("div",Object.assign({className:"new--content--tag"},{children:e(f,{children:"New"})})):e(t,{}),e(f,Object.assign({style:{color:d.content.placeholder}},{children:o.createdAt?r(o.createdAt.toDate?o.createdAt.toDate():new Date(o.createdAt),"dd MMMM yyyy"):""}))]}))})),e("div",Object.assign({className:"mt--8"},{children:e(b,{children:o.title})})),e("div",{dangerouslySetInnerHTML:{__html:o.body},className:"card--desc mt--12"}),e("div",Object.assign({className:"flex flex--row mt-20 full--width"},{children:e(l,{buttonText:o.buttonText||"Explore the feature",onClick:()=>H(o),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${s}`)))}))})]}),e(h,{isOpen:E,videoUrl:R,onClose:()=>{I(!1)}})]})):e(t,{})};export{N as WhatsNewPanel};
|