@bikdotai/bik-component-library 0.0.786-0 → 0.0.786-1
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/assets/icons/MessageSearchIcon.d.ts +7 -1
- package/dist/cjs/assets/icons/MessageSearchIcon.js +1 -1
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.d.ts +2 -0
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.js +1 -1
- package/dist/cjs/components/ProgressChecklist/ProgressStepper.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/post-live-checklist/PostLiveChecklist.js +1 -1
- package/dist/esm/assets/icons/MessageSearchIcon.d.ts +7 -1
- package/dist/esm/assets/icons/MessageSearchIcon.js +1 -1
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.d.ts +2 -0
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.js +1 -1
- package/dist/esm/components/ProgressChecklist/ProgressStepper.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/post-live-checklist/PostLiveChecklist.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
interface MessageSearchIconProps {
|
|
2
|
+
color?: string;
|
|
3
|
+
width?: number | string;
|
|
4
|
+
height?: number | string;
|
|
5
|
+
}
|
|
6
|
+
export declare const MessageSearchIcon: ({ color, width, height, }: MessageSearchIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");exports.MessageSearchIcon=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js");exports.MessageSearchIcon=i=>{let{color:s=t.COLORS.content.primary,width:r=15,height:C=15}=i;return e.jsxs("svg",Object.assign({width:r,height:C,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("g",Object.assign({clipPath:"url(#clip0_7022_7711)"},{children:e.jsx("path",{d:"M12.0312 1.875C12.3213 1.875 12.5996 1.99019 12.8047 2.19531C13.0098 2.40043 13.125 2.67867 13.125 2.96875V4.79297C13.1246 5.13782 12.8449 5.41797 12.5 5.41797C12.1551 5.41797 11.8754 5.13782 11.875 4.79297V3.125H1.875V12.001L3.6543 10.4648L3.69824 10.4297C3.80405 10.3538 3.93135 10.3125 4.0625 10.3125H7.1875C7.53268 10.3125 7.8125 10.5923 7.8125 10.9375C7.8125 11.2827 7.53268 11.5625 7.1875 11.5625H4.29492L2.42969 13.1748L2.42285 13.1797C2.26369 13.3136 2.06944 13.3992 1.86328 13.4268C1.65698 13.4542 1.44655 13.4226 1.25781 13.335C1.06917 13.2473 0.908951 13.1079 0.796875 12.9326C0.684823 12.7573 0.625365 12.5528 0.625 12.3447V2.96875C0.625 2.67867 0.740195 2.40043 0.945312 2.19531C1.15043 1.99019 1.42867 1.875 1.71875 1.875H12.0312ZM10.8271 6.23535C12.1647 6.23535 13.249 7.31967 13.249 8.65723C13.2489 9.15653 13.0979 9.6204 12.8389 10.0059L13.8926 11.0596C14.0756 11.2426 14.0756 11.5396 13.8926 11.7227C13.7096 11.9054 13.4135 11.9055 13.2305 11.7227L12.1758 10.668C11.7903 10.9269 11.3264 11.0791 10.8271 11.0791C9.48985 11.0789 8.40547 9.99452 8.40527 8.65723C8.40527 7.31977 9.48973 6.23552 10.8271 6.23535ZM10.8271 7.17285C10.0075 7.17302 9.34277 7.83753 9.34277 8.65723C9.34297 9.47675 10.0076 10.1414 10.8271 10.1416C11.6468 10.1416 12.3113 9.47685 12.3115 8.65723C12.3115 7.83743 11.6469 7.17285 10.8271 7.17285Z",fill:s})})),e.jsx("defs",{children:e.jsx("clipPath",Object.assign({id:"clip0_7022_7711"},{children:e.jsx("rect",{width:"15",height:"15",fill:"white"})}))})]}))};
|
|
@@ -32,6 +32,8 @@ export interface SingleChecklistItemType {
|
|
|
32
32
|
buttonDisabled?: boolean;
|
|
33
33
|
hideRedirectButton?: boolean;
|
|
34
34
|
hideSetupButton?: boolean;
|
|
35
|
+
/** Custom node to render in place of the default setup button. */
|
|
36
|
+
customSetupButton?: React.ReactNode;
|
|
35
37
|
}
|
|
36
38
|
export interface MultiChecklistItemType {
|
|
37
39
|
id: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js");require("../../_virtual/_tslib.js");var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js"),r=require("../../constants/Theme.js");require("../../_virtual/_tslib.js");var l=require("../../assets/icons/chevronRight.svg.js"),n=require("../../assets/icons/info.svg.js"),o=require("react"),c=require("../alerts/Alert.js"),a=require("../alerts/AlertHelper.js"),d=require("../button/Button.js"),u=require("../progress-bar-v2/ProgressBarV2.js"),p=require("../tag/Tag.js"),g=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),h=require("./MultiChecklistItem.js"),x=require("./ProgressChecklist.style.js"),C=require("./ProgressStepper.js");exports.default=v=>{let{header:y,subheader:b,items:m=[],progressBarColor:T,headerAction:S,showProgressBar:f=!0,noBorder:O=!1}=v;const[k,A]=o.useState(m);o.useEffect((()=>{A(m)}),[m]);const I=k.filter((e=>e.isCompleted)).length,q=k.length,B=q>0?I/q*100:0;return e.jsxs(x.ProgressChecklistContainer,Object.assign({noBorder:O},{children:[e.jsxs(x.HeaderSection,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsx(j.TitleMedium,{children:y}),S&&e.jsx("div",{children:S})]})),e.jsx(j.BodySecondary,Object.assign({color:r.COLORS.content.secondary},{children:b}))]}),f&&e.jsxs(x.ProgressBarSection,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(u.ProgressBarV2,{progress:Math.round(B),type:u.ProgressBarType.LINE,matchParentWidth:!0,showProgress:!1,color:null!=T?T:r.COLORS.background.positive.vibrant,progressBarThickness:12})})),e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e.jsxs(j.TitleSmall,Object.assign({style:{color:r.COLORS.content.secondary,textAlign:"right"}},{children:[I," / ",q]}))}))]})),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:k.map((o=>{var u,j,v,y,b,m,T,S;if("single"===o.type)return e.jsxs(x.SingleChecklistItem,Object.assign({isActive:o.isActive||!1},{children:[e.jsxs(x.SingleChecklistMainRow,{children:[e.jsx(x.SingleChecklistIconWrapper,{children:o.isCompleted?null!==(u=o.completedIcon)&&void 0!==u?u:e.jsx(s.CompletedChecklistIcon,{}):o.isActive?null!==(j=o.activeIcon)&&void 0!==j?j:e.jsx(t.ActiveChecklistIcon,{}):null!==(v=o.icon)&&void 0!==v?v:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(x.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(x.SingleChecklistHeader,Object.assign({completed:!!o.isCompleted,isActive:!!o.isActive},{children:o.header})),(null===(y=o.tag)||void 0===y?void 0:y.tagText)&&(o.tag.tooltip?e.jsx(g.Tooltip,Object.assign({},o.tag.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(p.Tag,{tagText:o.tag.tagText,variant:o.tag.variant,type:o.tag.type,theme:o.tag.theme})}))})):e.jsx(p.Tag,{tagText:o.tag.tagText,variant:o.tag.variant,type:o.tag.type,theme:o.tag.theme}))]})),e.jsx(x.SingleChecklistSubheader,{children:o.subheader})]}),o.isCompleted&&!o.hideRedirectButton&&e.jsx("div",Object.assign({onClick:o.onSetup,style:{cursor:"pointer"}},{children:e.jsx(l.default,{style:{marginLeft:"12px"},width:12,height:12,color:r.COLORS.content.secondary})})),!o.isCompleted&&o.isActive&&!o.hideSetupButton&&(o.customSetupButton?o.customSetupButton:e.jsx(x.SingleChecklistActionWrapper,{children:e.jsx(d.Button,{buttonText:null!==(b=o.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(m=o.buttonType)&&void 0!==m?m:"primary",onClick:o.onSetup,disabled:null!==(T=o.buttonDisabled)&&void 0!==T&&T})}))]}),o.alertText&&e.jsx(x.SingleChecklistAlertRow,{children:e.jsx(c.Alert,{text:o.alertText,type:null!==(S=o.alertType)&&void 0!==S?S:a.ALERT_TYPES.WARNING,contentPosition:a.CONTENT_POSITION.START,textColor:o.alertType===a.ALERT_TYPES.BRAND?"#4B1583":"",icon:t=>e.jsx(n.default,Object.assign({},t))})})]}),o.id);if("multiple"===o.type){const t=o.steps&&o.steps.length>0?o.steps.map(((e,t)=>{var s;return{id:null!==(s=e.id)&&void 0!==s?s:`${o.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${o.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${o.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${o.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return e.jsx(h.default,Object.assign({item:o},{children:e.jsx(C.default,{steps:t,isStepperActive:o.isActive})}),o.id)}}))}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/Redirect2Icon.js"),i=require("../../assets/icons/SmallCheckIcon.js");require("../../_virtual/_tslib.js");var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/Redirect2Icon.js"),i=require("../../constants/Theme.js"),n=require("../../assets/icons/SmallCheckIcon.js");require("../../_virtual/_tslib.js");var l=require("react"),s=require("../button/Button.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=d(l);const r=d=>{let{steps:r=[],onStepClick:a,isStepperActive:c}=d;var u,p;const x=r.length>0?r:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[v,h]=l.useState(null!==(p=null===(u=x[0])||void 0===u?void 0:u.id)&&void 0!==p?p:null);return e.jsx("div",Object.assign({style:{paddingLeft:52}},{children:e.jsx("div",Object.assign({style:{margin:0,padding:0,display:"flex",flexDirection:"column",gap:12}},{children:x.map(((l,d)=>{var r,u,p,g,j,m,f;return e.jsxs(o.default.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var t;const i=(0===d||(null===(t=x[d-1])||void 0===t?void 0:t.isCompleted))&&!0===c;return!0===l.isCompleted?e.jsx("div",Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsx(n.SmallCheckIcon,{})})):e.jsx("div",Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:i?"#4B1583":"transparent",color:i?"#FFFFFF":"#BDBDBD",border:"1px solid "+(i?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsx("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:d+1}))}))})(),e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(u=null!==(r=l.label)&&void 0!==r?r:l.text)&&void 0!==u?u:`step ${d+1}`}`},{children:e.jsx(s.Button,{buttonText:null!==(g=null!==(p=l.label)&&void 0!==p?p:l.text)&&void 0!==g?g:`Step ${d+1}`,buttonType:"text",buttonTextColor:l.isCompleted?i.COLORS.text.secondary:0!==d&&!0!==(null===(j=x[d-1])||void 0===j?void 0:j.isCompleted)||!c?i.COLORS.content.inactive:"#4B1583",matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,t;h(null!==(e=l.id)&&void 0!==e?e:v),(!l.isCompleted&&c&&(0===d||!0===(null===(t=x[d-1])||void 0===t?void 0:t.isCompleted))||l.isCompleted)&&(l.onClick?l.onClick():l.id&&(null==a||a(l.id)))}})})),!l.isCompleted&&(0===d||!0===(null===(m=x[d-1])||void 0===m?void 0:m.isCompleted))&&c&&e.jsx("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"},"aria-hidden":!0,onClick:e=>{var t,i;h(null!==(t=l.id)&&void 0!==t?t:v),l.isCompleted||!c||0!==d&&!0!==(null===(i=x[d-1])||void 0===i?void 0:i.isCompleted)||(l.onClick?l.onClick():l.id&&(null==a||a(l.id)))}},{children:e.jsx(t.Redirect2Icon,{})}))]})),d!==x.length-1&&e.jsx("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(f=l.id)&&void 0!==f?f:`step-${d}`)}))}))}))};var a=o.default.memo(r);exports.default=a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("../../_virtual/_tslib.js");var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js");require("../../_virtual/_tslib.js");var s=require("../../assets/icons/HeadsetIcon.js"),i=require("../../assets/icons/MarketingIcon.js"),r=require("react"),n=require("../buttonGroup/ButtonGroup.js"),o=require("../post-live-checklist-item/PostLiveChecklistItem.js"),a=require("../TypographyStyle.js");exports.PostLiveChecklist=l=>{let{title:u="Boost Performance",subtitle:c="Enable these features to make your assistant smarter",marketingChecklist:d=[],supportChecklist:p=[],onChecklistSetup:m,useCaseType:g}=l;var h;const[j,b]=r.useState("marketing"),[k,C]=r.useState("none"),[x,f]=r.useState("marketing");r.useEffect((()=>{const e=d.filter((e=>!e.isCompleted)).length,t=p.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?C("tabs"):(C("list"),e>0&&f("marketing"),t>0&&f("support")):C("none")}),[d,p]);const v=(()=>{const e=[{id:"marketing",title:"Marketing",icon:i.default},{id:"support",title:"Support",icon:s.default}];if(!g)return e;return"support"===String(g).toLowerCase()?[e[1],e[0]]:e})();r.useEffect((()=>{"tabs"===k&&v.length>0&&b(v[0].id)}),[k,g]);const O=e=>e.toUpperCase(),y=(e,t)=>{m&&m(e,t)};if("none"===k)return null;const S="tabs"===k?"marketing"===j?d:p:"marketing"===x?d:p;return e.jsxs("div",Object.assign({style:{padding:16,border:`1px solid ${t.COLORS.stroke.primary}`,backgroundColor:t.COLORS.surface.standard,borderRadius:8}},{children:[e.jsxs("div",{children:[e.jsx(a.TitleRegular,Object.assign({color:"#4B1583"},{children:u})),e.jsx(a.BodySecondary,Object.assign({color:(null===(h=t.COLORS.content)||void 0===h?void 0:h.secondary)||"#666666"},{children:c}))]}),e.jsx("div",Object.assign({style:{marginTop:12}},{children:"tabs"===k?e.jsxs(e.Fragment,{children:[e.jsx(n.ButtonGroup,{size:"medium",gap:"12px",iconPosition:"left",onButtonClick:e=>b(e),activeButtonId:j,buttonGroup:v}),e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:S.map((t=>e.jsx(o.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>y(t.id,O(j))},t.id)))}))]}):e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:S.map((t=>e.jsx(o.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>y(t.id,O(x))},t.id)))}))}))]}))};
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
interface MessageSearchIconProps {
|
|
2
|
+
color?: string;
|
|
3
|
+
width?: number | string;
|
|
4
|
+
height?: number | string;
|
|
5
|
+
}
|
|
6
|
+
export declare const MessageSearchIcon: ({ color, width, height, }: MessageSearchIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as t,jsx as i}from"react/jsx-runtime";import{COLORS as C}from"../../constants/Theme.js";const e=e=>{let{color:h=C.content.primary,width:r=15,height:l=15}=e;return t("svg",Object.assign({width:r,height:l,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[i("g",Object.assign({clipPath:"url(#clip0_7022_7711)"},{children:i("path",{d:"M12.0312 1.875C12.3213 1.875 12.5996 1.99019 12.8047 2.19531C13.0098 2.40043 13.125 2.67867 13.125 2.96875V4.79297C13.1246 5.13782 12.8449 5.41797 12.5 5.41797C12.1551 5.41797 11.8754 5.13782 11.875 4.79297V3.125H1.875V12.001L3.6543 10.4648L3.69824 10.4297C3.80405 10.3538 3.93135 10.3125 4.0625 10.3125H7.1875C7.53268 10.3125 7.8125 10.5923 7.8125 10.9375C7.8125 11.2827 7.53268 11.5625 7.1875 11.5625H4.29492L2.42969 13.1748L2.42285 13.1797C2.26369 13.3136 2.06944 13.3992 1.86328 13.4268C1.65698 13.4542 1.44655 13.4226 1.25781 13.335C1.06917 13.2473 0.908951 13.1079 0.796875 12.9326C0.684823 12.7573 0.625365 12.5528 0.625 12.3447V2.96875C0.625 2.67867 0.740195 2.40043 0.945312 2.19531C1.15043 1.99019 1.42867 1.875 1.71875 1.875H12.0312ZM10.8271 6.23535C12.1647 6.23535 13.249 7.31967 13.249 8.65723C13.2489 9.15653 13.0979 9.6204 12.8389 10.0059L13.8926 11.0596C14.0756 11.2426 14.0756 11.5396 13.8926 11.7227C13.7096 11.9054 13.4135 11.9055 13.2305 11.7227L12.1758 10.668C11.7903 10.9269 11.3264 11.0791 10.8271 11.0791C9.48985 11.0789 8.40547 9.99452 8.40527 8.65723C8.40527 7.31977 9.48973 6.23552 10.8271 6.23535ZM10.8271 7.17285C10.0075 7.17302 9.34277 7.83753 9.34277 8.65723C9.34297 9.47675 10.0076 10.1414 10.8271 10.1416C11.6468 10.1416 12.3113 9.47685 12.3115 8.65723C12.3115 7.83743 11.6469 7.17285 10.8271 7.17285Z",fill:h})})),i("defs",{children:i("clipPath",Object.assign({id:"clip0_7022_7711"},{children:i("rect",{width:"15",height:"15",fill:"white"})}))})]}))};export{e as MessageSearchIcon};
|
|
@@ -32,6 +32,8 @@ export interface SingleChecklistItemType {
|
|
|
32
32
|
buttonDisabled?: boolean;
|
|
33
33
|
hideRedirectButton?: boolean;
|
|
34
34
|
hideSetupButton?: boolean;
|
|
35
|
+
/** Custom node to render in place of the default setup button. */
|
|
36
|
+
customSetupButton?: React.ReactNode;
|
|
35
37
|
}
|
|
36
38
|
export interface MultiChecklistItemType {
|
|
37
39
|
id: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ActiveChecklistIcon as i}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as s}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ActiveChecklistIcon as i}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as s}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as o}from"../../assets/icons/InactiveChecklistIcon.js";import{COLORS as r}from"../../constants/Theme.js";import"../../_virtual/_tslib.js";import n from"../../assets/icons/chevronRight.svg.js";import l from"../../assets/icons/info.svg.js";import{useState as c,useEffect as a}from"react";import{Alert as d}from"../alerts/Alert.js";import{ALERT_TYPES as p,CONTENT_POSITION as m}from"../alerts/AlertHelper.js";import{Button as g}from"../button/Button.js";import{ProgressBarV2 as h,ProgressBarType as u}from"../progress-bar-v2/ProgressBarV2.js";import{Tag as v}from"../tag/Tag.js";import{Tooltip as f}from"../tooltips/Tooltip.js";import{TitleMedium as y,BodySecondary as b,TitleSmall as j}from"../TypographyStyle.js";import x from"./MultiChecklistItem.js";import{ProgressChecklistContainer as C,HeaderSection as T,ProgressBarSection as A,SingleChecklistItem as O,SingleChecklistMainRow as B,SingleChecklistIconWrapper as I,SingleChecklistContent as k,SingleChecklistHeader as S,SingleChecklistSubheader as P,SingleChecklistActionWrapper as w,SingleChecklistAlertRow as R}from"./ProgressChecklist.style.js";import $ from"./ProgressStepper.js";const D=D=>{let{header:N,subheader:V,items:W=[],progressBarColor:L,headerAction:M,showProgressBar:_=!0,noBorder:E=!1}=D;const[G,H]=c(W);a((()=>{H(W)}),[W]);const q=G.filter((e=>e.isCompleted)).length,z=G.length,F=z>0?q/z*100:0;return e(C,Object.assign({noBorder:E},{children:[e(T,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[t(y,{children:N}),M&&t("div",{children:M})]})),t(b,Object.assign({color:r.content.secondary},{children:V}))]}),_&&e(A,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[t("div",Object.assign({style:{flex:1}},{children:t(h,{progress:Math.round(F),type:u.LINE,matchParentWidth:!0,showProgress:!1,color:null!=L?L:r.background.positive.vibrant,progressBarThickness:12})})),t("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e(j,Object.assign({style:{color:r.content.secondary,textAlign:"right"}},{children:[q," / ",z]}))}))]})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:G.map((c=>{var a,h,u,y,b,j,C,T;if("single"===c.type)return e(O,Object.assign({isActive:c.isActive||!1},{children:[e(B,{children:[t(I,{children:c.isCompleted?null!==(a=c.completedIcon)&&void 0!==a?a:t(s,{}):c.isActive?null!==(h=c.activeIcon)&&void 0!==h?h:t(i,{}):null!==(u=c.icon)&&void 0!==u?u:t(o,{})}),e(k,{children:[e("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[t(S,Object.assign({completed:!!c.isCompleted,isActive:!!c.isActive},{children:c.header})),(null===(y=c.tag)||void 0===y?void 0:y.tagText)&&(c.tag.tooltip?t(f,Object.assign({},c.tag.tooltip,{children:t("span",Object.assign({style:{display:"inline-flex"}},{children:t(v,{tagText:c.tag.tagText,variant:c.tag.variant,type:c.tag.type,theme:c.tag.theme})}))})):t(v,{tagText:c.tag.tagText,variant:c.tag.variant,type:c.tag.type,theme:c.tag.theme}))]})),t(P,{children:c.subheader})]}),c.isCompleted&&!c.hideRedirectButton&&t("div",Object.assign({onClick:c.onSetup,style:{cursor:"pointer"}},{children:t(n,{style:{marginLeft:"12px"},width:12,height:12,color:r.content.secondary})})),!c.isCompleted&&c.isActive&&!c.hideSetupButton&&(c.customSetupButton?c.customSetupButton:t(w,{children:t(g,{buttonText:null!==(b=c.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(j=c.buttonType)&&void 0!==j?j:"primary",onClick:c.onSetup,disabled:null!==(C=c.buttonDisabled)&&void 0!==C&&C})}))]}),c.alertText&&t(R,{children:t(d,{text:c.alertText,type:null!==(T=c.alertType)&&void 0!==T?T:p.WARNING,contentPosition:m.START,textColor:c.alertType===p.BRAND?"#4B1583":"",icon:e=>t(l,Object.assign({},e))})})]}),c.id);if("multiple"===c.type){const e=c.steps&&c.steps.length>0?c.steps.map(((e,t)=>{var i;return{id:null!==(i=e.id)&&void 0!==i?i:`${c.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${c.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${c.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${c.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return t(x,Object.assign({item:c},{children:t($,{steps:e,isStepperActive:c.isActive})}),c.id)}}))}))]}))};export{D as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Redirect2Icon as i}from"../../assets/icons/Redirect2Icon.js";import{
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Redirect2Icon as i}from"../../assets/icons/Redirect2Icon.js";import{COLORS as n}from"../../constants/Theme.js";import{SmallCheckIcon as l}from"../../assets/icons/SmallCheckIcon.js";import"../../_virtual/_tslib.js";import o,{useState as d}from"react";import{Button as s}from"../button/Button.js";const r=r=>{let{steps:a=[],onStepClick:c,isStepperActive:p}=r;var m,u;const h=a.length>0?a:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[v,g]=d(null!==(u=null===(m=h[0])||void 0===m?void 0:m.id)&&void 0!==u?u:null);return e("div",Object.assign({style:{paddingLeft:52}},{children:e("div",Object.assign({style:{margin:0,padding:0,display:"flex",flexDirection:"column",gap:12}},{children:h.map(((d,r)=>{var a,m,u,x,f,b,C;return t(o.Fragment,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var t;const i=(0===r||(null===(t=h[r-1])||void 0===t?void 0:t.isCompleted))&&!0===p,n=!0===d.isCompleted;return e("div",n?Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:e(l,{})}):Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:i?"#4B1583":"transparent",color:i?"#FFFFFF":"#BDBDBD",border:"1px solid "+(i?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:r+1}))}))})(),e("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(m=null!==(a=d.label)&&void 0!==a?a:d.text)&&void 0!==m?m:`step ${r+1}`}`},{children:e(s,{buttonText:null!==(x=null!==(u=d.label)&&void 0!==u?u:d.text)&&void 0!==x?x:`Step ${r+1}`,buttonType:"text",buttonTextColor:d.isCompleted?n.text.secondary:0!==r&&!0!==(null===(f=h[r-1])||void 0===f?void 0:f.isCompleted)||!p?n.content.inactive:"#4B1583",matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,t;g(null!==(e=d.id)&&void 0!==e?e:v),(!d.isCompleted&&p&&(0===r||!0===(null===(t=h[r-1])||void 0===t?void 0:t.isCompleted))||d.isCompleted)&&(d.onClick?d.onClick():d.id&&(null==c||c(d.id)))}})})),!d.isCompleted&&(0===r||!0===(null===(b=h[r-1])||void 0===b?void 0:b.isCompleted))&&p&&e("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"},"aria-hidden":!0,onClick:e=>{var t,i;g(null!==(t=d.id)&&void 0!==t?t:v),d.isCompleted||!p||0!==r&&!0!==(null===(i=h[r-1])||void 0===i?void 0:i.isCompleted)||(d.onClick?d.onClick():d.id&&(null==c||c(d.id)))}},{children:e(i,{})}))]})),r!==h.length-1&&e("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(C=d.id)&&void 0!==C?C:`step-${r}`)}))}))}))};var a=o.memo(r);export{a as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import"../../_virtual/_tslib.js";import s from"../../assets/icons/HeadsetIcon.js";import o from"../../assets/icons/MarketingIcon.js";import{useState as n,useEffect as a}from"react";import{ButtonGroup as l}from"../buttonGroup/ButtonGroup.js";import{PostLiveChecklistItem as p}from"../post-live-checklist-item/PostLiveChecklistItem.js";import{TitleRegular as d,BodySecondary as m}from"../TypographyStyle.js";const c=c=>{let{title:u="Boost Performance",subtitle:g="Enable these features to make your assistant smarter",marketingChecklist:h=[],supportChecklist:b=[],onChecklistSetup:f,useCaseType:k}=c;var C;const[j,y]=n("marketing"),[v,O]=n("none"),[x,S]=n("marketing");a((()=>{const e=h.filter((e=>!e.isCompleted)).length,t=b.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?O("tabs"):(O("list"),e>0&&S("marketing"),t>0&&S("support")):O("none")}),[h,b]);const T=(()=>{const e=[{id:"marketing",title:"Marketing",icon:o},{id:"support",title:"Support",icon:s}];if(!k)return e;return"support"===String(k).toLowerCase()?[e[1],e[0]]:e})();a((()=>{"tabs"===v&&T.length>0&&y(T[0].id)}),[v,k]);const B=e=>e.toUpperCase(),H=(e,t)=>{f&&f(e,t)};if("none"===v)return null;const I="tabs"===v?"marketing"===j?h:b:"marketing"===x?h:b;return e("div",Object.assign({style:{padding:16,border:`1px solid ${r.stroke.primary}`,backgroundColor:r.surface.standard,borderRadius:8}},{children:[e("div",{children:[t(d,Object.assign({color:"#4B1583"},{children:u})),t(m,Object.assign({color:(null===(C=r.content)||void 0===C?void 0:C.secondary)||"#666666"},{children:g}))]}),t("div",Object.assign({style:{marginTop:12}},{children:"tabs"===v?e(i,{children:[t(l,{size:"medium",gap:"12px",iconPosition:"left",onButtonClick:e=>y(e),activeButtonId:j,buttonGroup:T}),t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:I.map((e=>t(p,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>H(e.id,B(j))},e.id)))}))]}):t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:I.map((e=>t(p,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>H(e.id,B(x))},e.id)))}))}))]}))};export{c as PostLiveChecklist};
|