@bikdotai/bik-component-library 0.0.744-beta.15 → 0.0.744-beta.3
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/FeatureAnnouncementProvider.js +1 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/constants/dimensions.d.ts +99 -25
- package/dist/cjs/components/feature-announcements/constants/dimensions.js +1 -1
- package/dist/cjs/components/feature-announcements/styles/joyride.styles.d.ts +2 -2
- package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.d.ts +18 -2
- package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/cjs/components/feature-announcements/types/feature.types.d.ts +31 -0
- package/dist/cjs/components/feature-announcements/types/props.types.d.ts +25 -3
- package/dist/cjs/components/whats-new/WhatsNewPanel.js +1 -1
- package/dist/cjs/index.d.ts +0 -3
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/constants/dimensions.d.ts +99 -25
- package/dist/esm/components/feature-announcements/constants/dimensions.js +1 -1
- package/dist/esm/components/feature-announcements/styles/joyride.styles.d.ts +2 -2
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts +18 -2
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/esm/components/feature-announcements/types/feature.types.d.ts +31 -0
- package/dist/esm/components/feature-announcements/types/props.types.d.ts +25 -3
- package/dist/esm/components/whats-new/WhatsNewPanel.js +1 -1
- package/dist/esm/index.d.ts +0 -3
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/assets/icons/ActiveChecklistIcon.d.ts +0 -3
- package/dist/cjs/assets/icons/ActiveChecklistIcon.js +0 -1
- package/dist/cjs/assets/icons/CheckIndicatorIcon.d.ts +0 -1
- package/dist/cjs/assets/icons/CheckIndicatorIcon.js +0 -1
- package/dist/cjs/assets/icons/CompletedChecklistIcon.d.ts +0 -3
- package/dist/cjs/assets/icons/CompletedChecklistIcon.js +0 -1
- package/dist/cjs/assets/icons/CustomiseIcon.d.ts +0 -7
- package/dist/cjs/assets/icons/EnableIcon.d.ts +0 -7
- package/dist/cjs/assets/icons/GoLiveIcon.d.ts +0 -7
- package/dist/cjs/assets/icons/InactiveChecklistIcon.d.ts +0 -3
- package/dist/cjs/assets/icons/InactiveChecklistIcon.js +0 -1
- package/dist/cjs/assets/icons/NudgesIcon.d.ts +0 -7
- package/dist/cjs/assets/icons/OrderTrackingIcon.d.ts +0 -7
- package/dist/cjs/assets/icons/ProgressBadgeIcon.d.ts +0 -3
- package/dist/cjs/assets/icons/ShoppingIcon.d.ts +0 -7
- package/dist/cjs/assets/icons/SmallCheckIcon.d.ts +0 -3
- package/dist/cjs/assets/icons/SmallCheckIcon.js +0 -1
- package/dist/cjs/assets/icons/SupportIcon.d.ts +0 -7
- package/dist/cjs/assets/icons/TrainingIcon.d.ts +0 -7
- package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.d.ts +0 -10
- package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.js +0 -1
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.d.ts +0 -70
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.js +0 -1
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.d.ts +0 -30
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.js +0 -133
- package/dist/cjs/components/ProgressChecklist/ProgressStepper.d.ts +0 -15
- package/dist/cjs/components/ProgressChecklist/ProgressStepper.js +0 -1
- package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.d.ts +0 -19
- package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.js +0 -1
- package/dist/cjs/components/ProgressChecklist/index.d.ts +0 -2
- package/dist/cjs/components/post-live-checklist/PostLiveChecklist.d.ts +0 -23
- package/dist/cjs/components/post-live-checklist/PostLiveChecklist.js +0 -1
- package/dist/cjs/components/post-live-checklist/PostLiveChecklist.stories.d.ts +0 -12
- package/dist/cjs/components/post-live-checklist/index.d.ts +0 -2
- package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.d.ts +0 -10
- package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.js +0 -1
- package/dist/cjs/components/post-live-checklist-item/index.d.ts +0 -1
- package/dist/esm/assets/icons/ActiveChecklistIcon.d.ts +0 -3
- package/dist/esm/assets/icons/ActiveChecklistIcon.js +0 -1
- package/dist/esm/assets/icons/CheckIndicatorIcon.d.ts +0 -1
- package/dist/esm/assets/icons/CheckIndicatorIcon.js +0 -1
- package/dist/esm/assets/icons/CompletedChecklistIcon.d.ts +0 -3
- package/dist/esm/assets/icons/CompletedChecklistIcon.js +0 -1
- package/dist/esm/assets/icons/CustomiseIcon.d.ts +0 -7
- package/dist/esm/assets/icons/EnableIcon.d.ts +0 -7
- package/dist/esm/assets/icons/GoLiveIcon.d.ts +0 -7
- package/dist/esm/assets/icons/InactiveChecklistIcon.d.ts +0 -3
- package/dist/esm/assets/icons/InactiveChecklistIcon.js +0 -1
- package/dist/esm/assets/icons/NudgesIcon.d.ts +0 -7
- package/dist/esm/assets/icons/OrderTrackingIcon.d.ts +0 -7
- package/dist/esm/assets/icons/ProgressBadgeIcon.d.ts +0 -3
- package/dist/esm/assets/icons/ShoppingIcon.d.ts +0 -7
- package/dist/esm/assets/icons/SmallCheckIcon.d.ts +0 -3
- package/dist/esm/assets/icons/SmallCheckIcon.js +0 -1
- package/dist/esm/assets/icons/SupportIcon.d.ts +0 -7
- package/dist/esm/assets/icons/TrainingIcon.d.ts +0 -7
- package/dist/esm/components/ProgressChecklist/MultiChecklistItem.d.ts +0 -10
- package/dist/esm/components/ProgressChecklist/MultiChecklistItem.js +0 -1
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.d.ts +0 -70
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.js +0 -1
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.d.ts +0 -30
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.js +0 -133
- package/dist/esm/components/ProgressChecklist/ProgressStepper.d.ts +0 -15
- package/dist/esm/components/ProgressChecklist/ProgressStepper.js +0 -1
- package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.d.ts +0 -19
- package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.js +0 -1
- package/dist/esm/components/ProgressChecklist/index.d.ts +0 -2
- package/dist/esm/components/post-live-checklist/PostLiveChecklist.d.ts +0 -23
- package/dist/esm/components/post-live-checklist/PostLiveChecklist.js +0 -1
- package/dist/esm/components/post-live-checklist/PostLiveChecklist.stories.d.ts +0 -12
- package/dist/esm/components/post-live-checklist/index.d.ts +0 -2
- package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.d.ts +0 -10
- package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.js +0 -1
- package/dist/esm/components/post-live-checklist-item/index.d.ts +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../constants/Theme.js"),l=require("../button/Button.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(t);const s=n=>{let{steps:s=[],onStepClick:o,isStepperActive:r}=n;var a,c;const u=s.length>0?s:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[p,x]=t.useState(null!==(c=null===(a=u[0])||void 0===a?void 0:a.id)&&void 0!==c?c: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:u.map(((t,n)=>{var s,a,c,h,v,g,f;return e.jsxs(d.default.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var i;const l=(0===n||(null===(i=u[n-1])||void 0===i?void 0:i.isCompleted))&&!0===r;return!0===t.isCompleted?e.jsx("div",Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsxs("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",fill:"#EFE6F9"}),e.jsx("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",stroke:"#4B1583"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.8047 7.52851C18.0651 7.78886 18.0651 8.21097 17.8047 8.47132L10.4714 15.8047C10.2111 16.065 9.78894 16.065 9.5286 15.8047L6.19526 12.4713C5.93491 12.211 5.93491 11.7889 6.19526 11.5285C6.45561 11.2682 6.87772 11.2682 7.13807 11.5285L10 14.3904L16.8619 7.52851C17.1223 7.26816 17.5444 7.26816 17.8047 7.52851Z",fill:"#4B1583"})]}))})):e.jsx("div",Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:l?"#4B1583":"transparent",color:l?"#FFFFFF":"#BDBDBD",border:"1px solid "+(l?"#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:n+1}))}))})(),e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(a=null!==(s=t.label)&&void 0!==s?s:t.text)&&void 0!==a?a:`step ${n+1}`}`},{children:e.jsx(l.Button,{buttonText:null!==(h=null!==(c=t.label)&&void 0!==c?c:t.text)&&void 0!==h?h:`Step ${n+1}`,buttonType:"text",buttonTextColor:t.isCompleted?i.COLORS.text.secondary:0!==n&&!0!==(null===(v=u[n-1])||void 0===v?void 0:v.isCompleted)||!r?i.COLORS.content.inactive:"#4B1583",matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,i;x(null!==(e=t.id)&&void 0!==e?e:p),t.isCompleted||!r||0!==n&&!0!==(null===(i=u[n-1])||void 0===i?void 0:i.isCompleted)||(t.onClick?t.onClick():t.id&&(null==o||o(t.id)))}})})),!t.isCompleted&&(0===n||!0===(null===(g=u[n-1])||void 0===g?void 0:g.isCompleted))&&r&&e.jsx("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"},"aria-hidden":!0,onClick:e=>{var i,l;x(null!==(i=t.id)&&void 0!==i?i:p),t.isCompleted||!r||0!==n&&!0!==(null===(l=u[n-1])||void 0===l?void 0:l.isCompleted)||(t.onClick?t.onClick():t.id&&(null==o||o(t.id)))}},{children:e.jsx("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.83333 6.66667C5.3731 6.66667 5 6.29357 5 5.83333C5 5.3731 5.3731 5 5.83333 5H14.1667C14.6269 5 15 5.3731 15 5.83333V14.1667C15 14.6269 14.6269 15 14.1667 15C13.7064 15 13.3333 14.6269 13.3333 14.1667V7.84518L6.42259 14.7559C6.09715 15.0814 5.56951 15.0814 5.24408 14.7559C4.91864 14.4305 4.91864 13.9028 5.24408 13.5774L12.1548 6.66667H5.83333Z",fill:"#4B1583"})}))}))]})),n!==u.length-1&&e.jsx("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(f=t.id)&&void 0!==f?f:`step-${n}`)}))}))}))};var o=d.default.memo(s);exports.default=o;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface TagProps {
|
|
3
|
-
tagText: string | number;
|
|
4
|
-
variant?: 'regular' | 'circle' | 'compressed';
|
|
5
|
-
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
6
|
-
theme?: 'light' | 'dark';
|
|
7
|
-
}
|
|
8
|
-
interface SimpleChecklistItemProps {
|
|
9
|
-
header: string;
|
|
10
|
-
subheader?: string;
|
|
11
|
-
icon?: React.ReactNode;
|
|
12
|
-
activeIcon?: React.ReactNode;
|
|
13
|
-
completedIcon?: React.ReactNode;
|
|
14
|
-
isActive?: boolean;
|
|
15
|
-
isCompleted?: boolean;
|
|
16
|
-
tag?: TagProps;
|
|
17
|
-
}
|
|
18
|
-
declare const SimpleChecklistItem: React.FC<SimpleChecklistItemProps>;
|
|
19
|
-
export default SimpleChecklistItem;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/ActiveChecklistIcon.js"),t=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js"),c=require("../tag/Tag.js"),l=require("./ProgressChecklist.style.js");exports.default=n=>{let{header:r,subheader:a,icon:o,activeIcon:h,completedIcon:d,isActive:j,isCompleted:g,tag:u}=n;return e.jsx("div",{children:e.jsxs(l.SingleChecklistMainRow,{children:[e.jsx(l.SingleChecklistIconWrapper,{children:g?null!=d?d:e.jsx(t.CompletedChecklistIcon,{}):j?null!=h?h:e.jsx(s.ActiveChecklistIcon,{}):null!=o?o:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(l.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(l.SingleChecklistHeader,Object.assign({completed:g,isActive:j},{children:r})),(null==u?void 0:u.tagText)&&e.jsx(c.Tag,{tagText:u.tagText,variant:u.variant,type:u.type,theme:u.theme})]})),a&&e.jsx(l.SingleChecklistSubheader,Object.assign({isActive:j},{children:a}))]})]})})};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface ChecklistItem {
|
|
3
|
-
id: string;
|
|
4
|
-
isCompleted: boolean;
|
|
5
|
-
isOpen?: boolean;
|
|
6
|
-
header: string;
|
|
7
|
-
image?: string;
|
|
8
|
-
subHeader?: string;
|
|
9
|
-
}
|
|
10
|
-
export interface ButtonGroupItem {
|
|
11
|
-
id: string;
|
|
12
|
-
title: string;
|
|
13
|
-
icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
14
|
-
}
|
|
15
|
-
export interface PostLiveChecklistProps {
|
|
16
|
-
title?: string;
|
|
17
|
-
subtitle?: string;
|
|
18
|
-
marketingChecklist?: ChecklistItem[];
|
|
19
|
-
supportChecklist?: ChecklistItem[];
|
|
20
|
-
onChecklistSetup?: (itemId: string, analyticsButtonId: string) => void;
|
|
21
|
-
useCaseType?: 'marketing' | 'support' | 'both' | string;
|
|
22
|
-
}
|
|
23
|
-
export declare const PostLiveChecklist: React.FC<PostLiveChecklistProps>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../buttonGroup/ButtonGroup.js"),i=require("../post-live-checklist-item/PostLiveChecklistItem.js"),r=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.PostLiveChecklist=o=>{let{title:a="Boost Performance",subtitle:l="Enable these features to make your assistant smarter",marketingChecklist:d=[],supportChecklist:u=[],onChecklistSetup:c,useCaseType:p}=o;var m;const[g,h]=t.useState("marketing"),[j,b]=t.useState("none"),[C,k]=t.useState("marketing");t.useEffect((()=>{const e=d.filter((e=>!e.isCompleted)).length,t=u.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?b("tabs"):(b("list"),e>0&&k("marketing"),t>0&&k("support")):b("none")}),[d,u]);const x=(()=>{const e=[{id:"marketing",title:"Marketing"},{id:"support",title:"Support"}];if(!p)return e;return"support"===String(p).toLowerCase()?[e[1],e[0]]:e})();t.useEffect((()=>{"tabs"===j&&x.length>0&&h(x[0].id)}),[j,p]);const O=e=>e.toUpperCase(),f=(e,t)=>{c&&c(e,t)};if("none"===j)return null;const v="tabs"===j?"marketing"===g?d:u:"marketing"===C?d:u;return e.jsxs("div",Object.assign({style:{padding:16,border:`1px solid ${n.COLORS.stroke.primary}`,backgroundColor:n.COLORS.surface.standard,borderRadius:8}},{children:[e.jsxs("div",{children:[e.jsx(r.TitleRegular,Object.assign({color:"#4B1583"},{children:a})),e.jsx(r.BodySecondary,Object.assign({color:(null===(m=n.COLORS.content)||void 0===m?void 0:m.secondary)||"#666666"},{children:l}))]}),e.jsx("div",Object.assign({style:{marginTop:12}},{children:"tabs"===j?e.jsxs(e.Fragment,{children:[e.jsx(s.ButtonGroup,{size:"medium",gap:"12px",onButtonClick:e=>h(e),activeButtonId:g,buttonGroup:x}),e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:v.map((t=>e.jsx(i.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>f(t.id,O(g))},t.id)))}))]}):e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:v.map((t=>e.jsx(i.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>f(t.id,O(C))},t.id)))}))}))]}))};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
3
|
-
declare const _default: ComponentMeta<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const Default: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
6
|
-
export declare const WithBothChecklists: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
7
|
-
export declare const SupportFirstOrdering: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
8
|
-
export declare const ListModeSupport: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
9
|
-
export declare const ListModeMarketing: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
10
|
-
export declare const AllCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
11
|
-
export declare const CustomTitles: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
12
|
-
export declare const WithSomeCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface PostLiveChecklistItemProps {
|
|
3
|
-
isCompleted: boolean;
|
|
4
|
-
header: string;
|
|
5
|
-
subHeader?: string;
|
|
6
|
-
isOpen?: boolean;
|
|
7
|
-
onSetup?: () => void;
|
|
8
|
-
image?: string;
|
|
9
|
-
}
|
|
10
|
-
export declare const PostLiveChecklistItem: React.FC<PostLiveChecklistItemProps>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/CheckIndicatorIcon.js"),t=require("../../assets/icons/chevronDownOutline.svg.js"),i=require("../../assets/icons/chevronUpOutline.svg.js"),n=require("react"),r=require("../button/Button.js"),c=require("../TypographyStyle.js"),o=require("../../constants/Theme.js");exports.PostLiveChecklistItem=l=>{const{isCompleted:d,header:a,subHeader:u,isOpen:j=!1}=l,{onSetup:x}=l,[h,p]=n.useState(j);return n.useEffect((()=>{p(j)}),[j]),e.jsxs("div",Object.assign({style:{backgroundColor:h?o.COLORS.surface.subdued:o.COLORS.surface.standard,borderRadius:8}},{children:[e.jsxs("div",Object.assign({style:{color:o.COLORS.surface.standard,padding:16,display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",cursor:d?"default":"pointer"},onClick:()=>!d&&p(!h)},{children:[e.jsx(c.TitleSmall,Object.assign({color:h?"#4B1583":o.COLORS.content.primary},{children:a})),d?e.jsx(s.CheckIndicatorIcon,{}):h?e.jsx(i.default,{width:24,height:24,color:o.COLORS.content.secondary}):e.jsx(t.default,{width:24,height:24,color:o.COLORS.content.secondary})]})),e.jsx("div",{children:h&&e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:e.jsxs("div",Object.assign({style:{padding:16,paddingTop:0,gap:16,display:"flex",flexDirection:"column"}},{children:[e.jsx("div",Object.assign({style:{height:200,backgroundColor:"#EFE6F9",borderRadius:8,overflow:"hidden"}},{children:e.jsx("img",{src:l.image,alt:"checklist item",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{flex:2}},{children:e.jsx(c.BodyCaption,Object.assign({color:o.COLORS.content.secondary,numberOfLines:3},{children:u}))})),e.jsx("div",Object.assign({style:{flex:1,display:"flex",justifyContent:"flex-end"}},{children:e.jsx(r.Button,{buttonType:"primary",size:"small",buttonText:"Setup",onClick:()=>{x&&x()}})}))]}))]}))}))})]}))};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './PostLiveChecklistItem';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as i,jsx as l}from"react/jsx-runtime";const t=t=>i("svg",Object.assign({width:"36",height:"44",viewBox:"0 0 36 44",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t,{children:[l("rect",{y:"4",width:"36",height:"36",rx:"18",fill:"#EFE6F9"}),i("g",Object.assign({clipPath:"url(#clip0_8_5197)"},{children:[l("path",{d:"M14.9583 21.167C14.268 21.167 13.7083 21.7266 13.7083 22.417C13.7083 23.1073 14.268 23.667 14.9583 23.667C15.6487 23.667 16.2083 23.1073 16.2083 22.417C16.2083 21.7266 15.6487 21.167 14.9583 21.167Z",fill:"#4B1583"}),l("path",{d:"M20.7916 21.167C20.1013 21.167 19.5416 21.7266 19.5416 22.417C19.5416 23.1073 20.1013 23.667 20.7916 23.667C21.482 23.667 22.0416 23.1073 22.0416 22.417C22.0416 21.7266 21.482 21.167 20.7916 21.167Z",fill:"#4B1583"}),l("path",{d:"M16.2083 25.3337C15.7481 25.3337 15.375 25.7068 15.375 26.167C15.375 26.6272 15.7481 27.0003 16.2083 27.0003H19.5416C20.0019 27.0003 20.375 26.6272 20.375 26.167C20.375 25.7068 20.0019 25.3337 19.5416 25.3337H16.2083Z",fill:"#4B1583"}),l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.5416 14.5003C14.5416 14.0401 14.9147 13.667 15.375 13.667H20.375C20.8352 13.667 21.2083 14.0401 21.2083 14.5003C21.2083 14.9606 20.8352 15.3337 20.375 15.3337H18.7083V17.0003H22.875C25.1762 17.0003 27.0416 18.8658 27.0416 21.167V26.167C27.0416 28.4682 25.1762 30.3337 22.875 30.3337H12.875C10.5738 30.3337 8.70831 28.4682 8.70831 26.167V21.167C8.70831 18.8658 10.5738 17.0003 12.875 17.0003H17.0416V15.3337H15.375C14.9147 15.3337 14.5416 14.9606 14.5416 14.5003ZM12.875 18.667C11.4943 18.667 10.375 19.7863 10.375 21.167V26.167C10.375 27.5477 11.4943 28.667 12.875 28.667H22.875C24.2557 28.667 25.375 27.5477 25.375 26.167V21.167C25.375 19.7863 24.2557 18.667 22.875 18.667H12.875Z",fill:"#4B1583"})]})),l("defs",{children:l("clipPath",Object.assign({id:"clip0_8_5197"},{children:l("rect",{width:"20",height:"20",fill:"white",transform:"translate(7.875 12)"})}))})]}));export{t as ActiveChecklistIcon,t as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const CheckIndicatorIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i}from"react/jsx-runtime";const t=()=>e("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[i("rect",{x:"3",y:"3",width:"18",height:"18",rx:"9",fill:"#1A872C"}),i("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.6819 8.06064C17.0724 8.45117 17.0724 9.08433 16.6819 9.47486L11.025 15.1317C10.6345 15.5223 10.0013 15.5223 9.6108 15.1317L7.48968 13.0106C7.09916 12.6201 7.09916 11.9869 7.48968 11.5964C7.88021 11.2059 8.51337 11.2059 8.9039 11.5964L10.3179 13.0104L15.2677 8.06064C15.6582 7.67012 16.2914 7.67012 16.6819 8.06064Z",fill:"white"})]}));export{t as CheckIndicatorIcon};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";const i=i=>e("svg",Object.assign({width:"36",height:"36",viewBox:"0 0 36 36",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i,{children:[t("rect",{width:"36",height:"36",rx:"18",fill:"#1A872C"}),t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M25.1309 12.4106C25.4564 12.736 25.4564 13.2637 25.1309 13.5891L15.9643 22.7558C15.6388 23.0812 15.1112 23.0812 14.7857 22.7558L10.6191 18.5891C10.2936 18.2637 10.2936 17.736 10.6191 17.4106C10.9445 17.0851 11.4722 17.0851 11.7976 17.4106L15.375 20.988L23.9524 12.4106C24.2778 12.0851 24.8055 12.0851 25.1309 12.4106Z",fill:"white"})]}));export{i as CompletedChecklistIcon,i as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as i,jsx as l}from"react/jsx-runtime";const t=t=>i("svg",Object.assign({width:"36",height:"44",viewBox:"0 0 36 44",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t,{children:[l("rect",{y:"4",width:"36",height:"36",rx:"18",fill:"#E0E0E0"}),i("g",Object.assign({clipPath:"url(#clip0_8_5196)"},{children:[l("path",{d:"M14.9583 21.167C14.268 21.167 13.7083 21.7266 13.7083 22.417C13.7083 23.1073 14.268 23.667 14.9583 23.667C15.6487 23.667 16.2083 23.1073 16.2083 22.417C16.2083 21.7266 15.6487 21.167 14.9583 21.167Z",fill:"#BDBDBD"}),l("path",{d:"M20.7916 21.167C20.1013 21.167 19.5416 21.7266 19.5416 22.417C19.5416 23.1073 20.1013 23.667 20.7916 23.667C21.482 23.667 22.0416 23.1073 22.0416 22.417C22.0416 21.7266 21.482 21.167 20.7916 21.167Z",fill:"#BDBDBD"}),l("path",{d:"M16.2083 25.3337C15.7481 25.3337 15.375 25.7068 15.375 26.167C15.375 26.6272 15.7481 27.0003 16.2083 27.0003H19.5416C20.0019 27.0003 20.375 26.6272 20.375 26.167C20.375 25.7068 20.0019 25.3337 19.5416 25.3337H16.2083Z",fill:"#BDBDBD"}),l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.5416 14.5003C14.5416 14.0401 14.9147 13.667 15.375 13.667H20.375C20.8352 13.667 21.2083 14.0401 21.2083 14.5003C21.2083 14.9606 20.8352 15.3337 20.375 15.3337H18.7083V17.0003H22.875C25.1762 17.0003 27.0416 18.8658 27.0416 21.167V26.167C27.0416 28.4682 25.1762 30.3337 22.875 30.3337H12.875C10.5738 30.3337 8.70831 28.4682 8.70831 26.167V21.167C8.70831 18.8658 10.5738 17.0003 12.875 17.0003H17.0416V15.3337H15.375C14.9147 15.3337 14.5416 14.9606 14.5416 14.5003ZM12.875 18.667C11.4943 18.667 10.375 19.7863 10.375 21.167V26.167C10.375 27.5477 11.4943 28.667 12.875 28.667H22.875C24.2557 28.667 25.375 27.5477 25.375 26.167V21.167C25.375 19.7863 24.2557 18.667 22.875 18.667H12.875Z",fill:"#BDBDBD"})]})),l("defs",{children:l("clipPath",Object.assign({id:"clip0_8_5196"},{children:l("rect",{width:"20",height:"20",fill:"white",transform:"translate(7.875 12)"})}))})]}));export{t as InactiveChecklistIcon,t as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";const l=l=>e("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},l,{children:e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.91058 4.41058C7.23602 4.08514 7.76366 4.08514 8.08909 4.41058L13.0891 9.41058C13.4145 9.73602 13.4145 10.2637 13.0891 10.5891L8.08909 15.5891C7.76366 15.9145 7.23602 15.9145 6.91058 15.5891C6.58514 15.2637 6.58514 14.736 6.91058 14.4106L11.3213 9.99984L6.91058 5.58909C6.58514 5.26366 6.58514 4.73602 6.91058 4.41058Z",fill:"#616161"})}));export{l as SmallCheckIcon,l as default};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { MultiChecklistItemType } from './ProgressChecklist';
|
|
3
|
-
interface MultiChecklistItemProps {
|
|
4
|
-
item: MultiChecklistItemType;
|
|
5
|
-
children?: React.ReactNode;
|
|
6
|
-
isOpen?: boolean;
|
|
7
|
-
onToggle?: (open: boolean) => void;
|
|
8
|
-
}
|
|
9
|
-
declare const MultiChecklistItem: React.FC<MultiChecklistItemProps>;
|
|
10
|
-
export default MultiChecklistItem;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{BikAccordion as o}from"../accordion/Accordion.js";import i from"./SimpleChecklistItem.js";const r=r=>{let{item:t,children:c,isOpen:n,onToggle:s}=r;const d="boolean"==typeof n?n:!!t.isActive,a=e(i,{header:t.header,subheader:t.subheader,icon:t.icon,activeIcon:t.activeIcon,completedIcon:t.completedIcon,isCompleted:t.isCompleted,isActive:t.isActive,tag:t.tag});return e(o,Object.assign({header:a,headerStyles:{height:"auto",cursor:"pointer"},onToggleAccordion:s||(()=>{}),isOpen:d,skipHoverHeader:!0,showBorders:!0,borderRadius:"8px"},{children:c?e("div",Object.assign({style:{border:"none",padding:16}},{children:c})):null}))};export{r as default};
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ALERT_TYPES } from '../alerts';
|
|
3
|
-
export interface ChecklistItemType {
|
|
4
|
-
id: string;
|
|
5
|
-
label: string;
|
|
6
|
-
description?: string;
|
|
7
|
-
completed?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export interface SingleChecklistItemType {
|
|
10
|
-
id: string;
|
|
11
|
-
header: string;
|
|
12
|
-
subheader: string;
|
|
13
|
-
icon?: React.ReactNode;
|
|
14
|
-
activeIcon?: React.ReactNode;
|
|
15
|
-
completedIcon?: React.ReactNode;
|
|
16
|
-
isActive?: boolean;
|
|
17
|
-
isCompleted?: boolean;
|
|
18
|
-
onSetup?: () => void;
|
|
19
|
-
alertText?: string | React.ReactNode;
|
|
20
|
-
alertType?: ALERT_TYPES;
|
|
21
|
-
tag?: {
|
|
22
|
-
tagText: string | number;
|
|
23
|
-
variant?: 'regular' | 'circle' | 'compressed';
|
|
24
|
-
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
25
|
-
theme?: 'light' | 'dark';
|
|
26
|
-
};
|
|
27
|
-
type: 'single';
|
|
28
|
-
buttonType?: 'primary' | 'secondary' | 'tertiary';
|
|
29
|
-
buttonText?: string;
|
|
30
|
-
buttonDisabled?: boolean;
|
|
31
|
-
hideRedirectButton?: boolean;
|
|
32
|
-
hideSetupButton?: boolean;
|
|
33
|
-
}
|
|
34
|
-
export interface MultiChecklistItemType {
|
|
35
|
-
id: string;
|
|
36
|
-
header: string;
|
|
37
|
-
subheader?: string;
|
|
38
|
-
icon?: React.ReactNode;
|
|
39
|
-
activeIcon?: React.ReactNode;
|
|
40
|
-
completedIcon?: React.ReactNode;
|
|
41
|
-
isActive?: boolean;
|
|
42
|
-
isCompleted?: boolean;
|
|
43
|
-
onSetup?: () => void;
|
|
44
|
-
tag?: {
|
|
45
|
-
tagText: string | number;
|
|
46
|
-
variant?: 'regular' | 'circle' | 'compressed';
|
|
47
|
-
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
48
|
-
theme?: 'light' | 'dark';
|
|
49
|
-
};
|
|
50
|
-
type: 'multiple';
|
|
51
|
-
alertType?: ALERT_TYPES;
|
|
52
|
-
steps?: Array<{
|
|
53
|
-
id?: string;
|
|
54
|
-
text: string;
|
|
55
|
-
onClick?: () => void;
|
|
56
|
-
isCompleted?: boolean;
|
|
57
|
-
}>;
|
|
58
|
-
buttonType?: 'primary' | 'secondary' | 'tertiary';
|
|
59
|
-
}
|
|
60
|
-
export interface ProgressChecklistProps {
|
|
61
|
-
header?: string;
|
|
62
|
-
subheader?: string;
|
|
63
|
-
items?: Array<SingleChecklistItemType | MultiChecklistItemType>;
|
|
64
|
-
progressBarColor?: string;
|
|
65
|
-
headerAction?: React.ReactNode;
|
|
66
|
-
/** Whether to render the progress bar. Defaults to true. */
|
|
67
|
-
showProgressBar?: boolean;
|
|
68
|
-
}
|
|
69
|
-
declare const ProgressChecklist: React.FC<ProgressChecklistProps>;
|
|
70
|
-
export default ProgressChecklist;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useEffect as s}from"react";import{COLORS as r}from"../../constants/Theme.js";import{ActiveChecklistIcon as o}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as l}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as n}from"../../assets/icons/InactiveChecklistIcon.js";import{SmallCheckIcon as c}from"../../assets/icons/SmallCheckIcon.js";import{Alert as a}from"../alerts/Alert.js";import{ALERT_TYPES as d,CONTENT_POSITION as p}from"../alerts/AlertHelper.js";import{Button as m}from"../button/Button.js";import{ProgressBarV2 as h,ProgressBarType as g}from"../progress-bar-v2/ProgressBarV2.js";import{Tag as u}from"../tag/Tag.js";import{TitleMedium as f,BodySecondary as v,TitleSmall as y}from"../TypographyStyle.js";import b from"./MultiChecklistItem.js";import{ProgressChecklistContainer as x,HeaderSection as j,ProgressBarSection as C,SingleChecklistItem as T,SingleChecklistMainRow as A,SingleChecklistIconWrapper as I,SingleChecklistContent as k,SingleChecklistHeader as O,SingleChecklistSubheader as B,SingleChecklistActionWrapper as S,SingleChecklistAlertRow as P}from"./ProgressChecklist.style.js";import $ from"./ProgressStepper.js";const w=w=>{let{header:D,subheader:N,items:R=[],progressBarColor:V,headerAction:W,showProgressBar:L=!0}=w;const[M,E]=i(R);s((()=>{E(R)}),[R]);const G=M.filter((e=>e.isCompleted)).length,H=M.length,q=H>0?G/H*100:0;return e(x,{children:[e(j,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[t(f,{children:D}),W&&t("div",{children:W})]})),t(v,Object.assign({color:r.content.secondary},{children:N}))]}),L&&e(C,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[t("div",Object.assign({style:{flex:1}},{children:t(h,{progress:Math.round(q),type:g.LINE,matchParentWidth:!0,showProgress:!1,color:null!=V?V:r.background.positive.vibrant,progressBarThickness:12})})),t("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e(y,Object.assign({style:{color:r.content.secondary,textAlign:"right"}},{children:[G," / ",H]}))}))]})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:M.map((i=>{var s,r,h,g,f,v,y,x;if("single"===i.type)return e(T,Object.assign({isActive:i.isActive||!1},{children:[e(A,{children:[t(I,{children:i.isCompleted?null!==(s=i.completedIcon)&&void 0!==s?s:t(l,{}):i.isActive?null!==(r=i.activeIcon)&&void 0!==r?r:t(o,{}):null!==(h=i.icon)&&void 0!==h?h:t(n,{})}),e(k,{children:[e("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[t(O,Object.assign({completed:!!i.isCompleted,isActive:!!i.isActive},{children:i.header})),(null===(g=i.tag)||void 0===g?void 0:g.tagText)&&t(u,{tagText:i.tag.tagText,variant:i.tag.variant,type:i.tag.type,theme:i.tag.theme})]})),t(B,{children:i.subheader})]}),i.isCompleted&&!i.hideRedirectButton&&t("div",Object.assign({onClick:i.onSetup,style:{cursor:"pointer"}},{children:t(c,{style:{marginLeft:"12px"}})})),!i.isCompleted&&i.isActive&&!i.hideSetupButton&&t(S,{children:t(m,{buttonText:null!==(f=i.buttonText)&&void 0!==f?f:"Setup",buttonType:null!==(v=i.buttonType)&&void 0!==v?v:"primary",onClick:i.onSetup,disabled:null!==(y=i.buttonDisabled)&&void 0!==y&&y})})]}),i.alertText&&t(P,{children:t(a,{text:i.alertText,type:null!==(x=i.alertType)&&void 0!==x?x:d.WARNING,contentPosition:p.START,textColor:i.alertType===d.BRAND?"#4B1583":""})})]}),i.id);if("multiple"===i.type){const e=i.steps&&i.steps.length>0?i.steps.map(((e,t)=>{var s;return{id:null!==(s=e.id)&&void 0!==s?s:`${i.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${i.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${i.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${i.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return t(b,Object.assign({item:i},{children:t($,{steps:e,isStepperActive:i.isActive})}),i.id)}}))}))]})};export{w as default};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
export declare const ProgressChecklistContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const HeaderSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
-
export declare const ProgressBarSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export declare const ChecklistItemsSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
-
export declare const ChecklistItem: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
-
completed?: boolean | undefined;
|
|
7
|
-
}, never>;
|
|
8
|
-
export declare const ChecklistCheckbox: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
9
|
-
export declare const ChecklistItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
-
export declare const ChecklistItemText: import("styled-components").StyledComponent<"p", any, {
|
|
11
|
-
completed?: boolean | undefined;
|
|
12
|
-
}, never>;
|
|
13
|
-
export declare const ChecklistItemDescription: import("styled-components").StyledComponent<"p", any, {
|
|
14
|
-
completed?: boolean | undefined;
|
|
15
|
-
}, never>;
|
|
16
|
-
export declare const SingleChecklistItem: import("styled-components").StyledComponent<"div", any, {
|
|
17
|
-
isActive: boolean;
|
|
18
|
-
}, never>;
|
|
19
|
-
export declare const SingleChecklistMainRow: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
|
-
export declare const SingleChecklistIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
21
|
-
export declare const SingleChecklistContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
|
-
export declare const SingleChecklistHeader: import("styled-components").StyledComponent<"div", any, {
|
|
23
|
-
completed?: boolean | undefined;
|
|
24
|
-
isActive?: boolean | undefined;
|
|
25
|
-
}, never>;
|
|
26
|
-
export declare const SingleChecklistSubheader: import("styled-components").StyledComponent<"div", any, {
|
|
27
|
-
isActive?: boolean | undefined;
|
|
28
|
-
}, never>;
|
|
29
|
-
export declare const SingleChecklistActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
30
|
-
export declare const SingleChecklistAlertRow: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const o=e.div`
|
|
2
|
-
border-radius: 8px;
|
|
3
|
-
border: 1px solid #e0e0e0;
|
|
4
|
-
padding: 24px;
|
|
5
|
-
display: flex;
|
|
6
|
-
flex-direction: column;
|
|
7
|
-
gap: 10px;
|
|
8
|
-
background: ${i.surface.standard};
|
|
9
|
-
|
|
10
|
-
.accordion__overview {
|
|
11
|
-
padding: 16px !important;
|
|
12
|
-
border-bottom: none;
|
|
13
|
-
}
|
|
14
|
-
`,r=e.div`
|
|
15
|
-
display: flex;
|
|
16
|
-
flex-direction: column;
|
|
17
|
-
gap: 8px;
|
|
18
|
-
`,t=e.div`
|
|
19
|
-
display: flex;
|
|
20
|
-
flex-direction: row;
|
|
21
|
-
gap: 12px;
|
|
22
|
-
`;e.div`
|
|
23
|
-
display: flex;
|
|
24
|
-
flex-direction: column;
|
|
25
|
-
gap: 16px;
|
|
26
|
-
overflow-y: auto;
|
|
27
|
-
flex: 1;
|
|
28
|
-
|
|
29
|
-
&::-webkit-scrollbar {
|
|
30
|
-
width: 6px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&::-webkit-scrollbar-track {
|
|
34
|
-
background: transparent;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&::-webkit-scrollbar-thumb {
|
|
38
|
-
background: ${i.stroke.primary};
|
|
39
|
-
border-radius: 3px;
|
|
40
|
-
}
|
|
41
|
-
`,e.div`
|
|
42
|
-
display: flex;
|
|
43
|
-
align-items: flex-start;
|
|
44
|
-
gap: 12px;
|
|
45
|
-
padding: 12px;
|
|
46
|
-
background: ${e=>e.completed?"#F0F7F4":i.surface.standard};
|
|
47
|
-
border: 1px solid
|
|
48
|
-
${e=>e.completed?"#D4E9E3":i.stroke.primary};
|
|
49
|
-
border-radius: 6px;
|
|
50
|
-
cursor: pointer;
|
|
51
|
-
transition: all 0.2s ease;
|
|
52
|
-
|
|
53
|
-
&:hover {
|
|
54
|
-
background: ${e=>e.completed?"#E8F4F0":i.background.base};
|
|
55
|
-
}
|
|
56
|
-
`,e.input`
|
|
57
|
-
width: 18px;
|
|
58
|
-
height: 18px;
|
|
59
|
-
margin-top: 2px;
|
|
60
|
-
cursor: pointer;
|
|
61
|
-
flex-shrink: 0;
|
|
62
|
-
`,e.div`
|
|
63
|
-
display: flex;
|
|
64
|
-
flex-direction: column;
|
|
65
|
-
gap: 4px;
|
|
66
|
-
flex: 1;
|
|
67
|
-
`,e.p`
|
|
68
|
-
margin: 0;
|
|
69
|
-
font-size: 14px;
|
|
70
|
-
font-weight: 500;
|
|
71
|
-
line-height: 20px;
|
|
72
|
-
color: ${e=>e.completed?i.content.secondary:i.content.primary};
|
|
73
|
-
text-decoration: ${e=>e.completed?"line-through":"none"};
|
|
74
|
-
`,e.p`
|
|
75
|
-
margin: 0;
|
|
76
|
-
font-size: 12px;
|
|
77
|
-
font-weight: 400;
|
|
78
|
-
line-height: 16px;
|
|
79
|
-
color: ${i.content.secondary};
|
|
80
|
-
opacity: ${e=>e.completed?.6:1};
|
|
81
|
-
`;const n=e.div`
|
|
82
|
-
border-radius: 8px;
|
|
83
|
-
border: 1px solid
|
|
84
|
-
${e=>e.isActive?i.stroke.primary:"#E0E0E0"};
|
|
85
|
-
padding: 16px;
|
|
86
|
-
display: flex;
|
|
87
|
-
flex-direction: column;
|
|
88
|
-
gap: 12px;
|
|
89
|
-
background: ${i.surface.standard};
|
|
90
|
-
transition: all 0.2s ease;
|
|
91
|
-
|
|
92
|
-
&:hover {
|
|
93
|
-
border-color: ${e=>e.isActive?i.stroke.primary:"#D0D0D0"};
|
|
94
|
-
}
|
|
95
|
-
`,p=e.div`
|
|
96
|
-
display: flex;
|
|
97
|
-
align-items: center;
|
|
98
|
-
gap: 16px;
|
|
99
|
-
width: 100%;
|
|
100
|
-
`,a=e.div`
|
|
101
|
-
display: flex;
|
|
102
|
-
align-items: center;
|
|
103
|
-
justify-content: center;
|
|
104
|
-
flex-shrink: 0;
|
|
105
|
-
`,d=e.div`
|
|
106
|
-
display: flex;
|
|
107
|
-
flex-direction: column;
|
|
108
|
-
gap: 4px;
|
|
109
|
-
flex: 1;
|
|
110
|
-
`,l=e.div`
|
|
111
|
-
font-size: 16px;
|
|
112
|
-
font-weight: 600;
|
|
113
|
-
line-height: 24px;
|
|
114
|
-
color: ${e=>e.completed?i.background.positive.vibrant:e.isActive?i.content.primary:i.content.placeholder} !important;
|
|
115
|
-
margin: 0;
|
|
116
|
-
display: flex;
|
|
117
|
-
flex-direction: row;
|
|
118
|
-
gap: 12px;
|
|
119
|
-
`,c=e.div`
|
|
120
|
-
font-size: 14px;
|
|
121
|
-
font-weight: 400;
|
|
122
|
-
line-height: 20px;
|
|
123
|
-
color: ${e=>e.isActive?i.content.secondary:i.content.placeholder};
|
|
124
|
-
margin: 0;
|
|
125
|
-
`,s=e.div`
|
|
126
|
-
display: flex;
|
|
127
|
-
align-items: center;
|
|
128
|
-
gap: 8px;
|
|
129
|
-
flex-shrink: 0;
|
|
130
|
-
`,x=e.div`
|
|
131
|
-
width: 100%;
|
|
132
|
-
margin-top: 8px;
|
|
133
|
-
`;export{r as HeaderSection,t as ProgressBarSection,o as ProgressChecklistContainer,s as SingleChecklistActionWrapper,x as SingleChecklistAlertRow,d as SingleChecklistContent,l as SingleChecklistHeader,a as SingleChecklistIconWrapper,n as SingleChecklistItem,p as SingleChecklistMainRow,c as SingleChecklistSubheader};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface StepItem {
|
|
3
|
-
id?: string;
|
|
4
|
-
text: string;
|
|
5
|
-
label?: string;
|
|
6
|
-
onClick?: () => void;
|
|
7
|
-
isCompleted?: boolean;
|
|
8
|
-
}
|
|
9
|
-
interface ProgressStepperProps {
|
|
10
|
-
steps?: StepItem[];
|
|
11
|
-
onStepClick?: (id: string) => void;
|
|
12
|
-
isStepperActive?: boolean;
|
|
13
|
-
}
|
|
14
|
-
declare const _default: React.NamedExoticComponent<ProgressStepperProps>;
|
|
15
|
-
export default _default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{useState as l}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";const o=o=>{let{steps:s=[],onStepClick:r,isStepperActive:a}=o;var c,p;const h=s.length>0?s:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[g,v]=l(null!==(p=null===(c=h[0])||void 0===c?void 0:c.id)&&void 0!==p?p: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(((l,o)=>{var s,c,p,u,m,x,C;return t(i.Fragment,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var i;const n=(0===o||(null===(i=h[o-1])||void 0===i?void 0:i.isCompleted))&&!0===a,d=!0===l.isCompleted;return e("div",d?Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:t("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",fill:"#EFE6F9"}),e("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",stroke:"#4B1583"}),e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.8047 7.52851C18.0651 7.78886 18.0651 8.21097 17.8047 8.47132L10.4714 15.8047C10.2111 16.065 9.78894 16.065 9.5286 15.8047L6.19526 12.4713C5.93491 12.211 5.93491 11.7889 6.19526 11.5285C6.45561 11.2682 6.87772 11.2682 7.13807 11.5285L10 14.3904L16.8619 7.52851C17.1223 7.26816 17.5444 7.26816 17.8047 7.52851Z",fill:"#4B1583"})]}))}):Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:n?"#4B1583":"transparent",color:n?"#FFFFFF":"#BDBDBD",border:"1px solid "+(n?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:o+1}))}))})(),e("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(c=null!==(s=l.label)&&void 0!==s?s:l.text)&&void 0!==c?c:`step ${o+1}`}`},{children:e(d,{buttonText:null!==(u=null!==(p=l.label)&&void 0!==p?p:l.text)&&void 0!==u?u:`Step ${o+1}`,buttonType:"text",buttonTextColor:l.isCompleted?n.text.secondary:0!==o&&!0!==(null===(m=h[o-1])||void 0===m?void 0:m.isCompleted)||!a?n.content.inactive:"#4B1583",matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,t;v(null!==(e=l.id)&&void 0!==e?e:g),l.isCompleted||!a||0!==o&&!0!==(null===(t=h[o-1])||void 0===t?void 0:t.isCompleted)||(l.onClick?l.onClick():l.id&&(null==r||r(l.id)))}})})),!l.isCompleted&&(0===o||!0===(null===(x=h[o-1])||void 0===x?void 0:x.isCompleted))&&a&&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;v(null!==(t=l.id)&&void 0!==t?t:g),l.isCompleted||!a||0!==o&&!0!==(null===(i=h[o-1])||void 0===i?void 0:i.isCompleted)||(l.onClick?l.onClick():l.id&&(null==r||r(l.id)))}},{children:e("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.83333 6.66667C5.3731 6.66667 5 6.29357 5 5.83333C5 5.3731 5.3731 5 5.83333 5H14.1667C14.6269 5 15 5.3731 15 5.83333V14.1667C15 14.6269 14.6269 15 14.1667 15C13.7064 15 13.3333 14.6269 13.3333 14.1667V7.84518L6.42259 14.7559C6.09715 15.0814 5.56951 15.0814 5.24408 14.7559C4.91864 14.4305 4.91864 13.9028 5.24408 13.5774L12.1548 6.66667H5.83333Z",fill:"#4B1583"})}))}))]})),o!==h.length-1&&e("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(C=l.id)&&void 0!==C?C:`step-${o}`)}))}))}))};var s=i.memo(o);export{s as default};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface TagProps {
|
|
3
|
-
tagText: string | number;
|
|
4
|
-
variant?: 'regular' | 'circle' | 'compressed';
|
|
5
|
-
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
6
|
-
theme?: 'light' | 'dark';
|
|
7
|
-
}
|
|
8
|
-
interface SimpleChecklistItemProps {
|
|
9
|
-
header: string;
|
|
10
|
-
subheader?: string;
|
|
11
|
-
icon?: React.ReactNode;
|
|
12
|
-
activeIcon?: React.ReactNode;
|
|
13
|
-
completedIcon?: React.ReactNode;
|
|
14
|
-
isActive?: boolean;
|
|
15
|
-
isCompleted?: boolean;
|
|
16
|
-
tag?: TagProps;
|
|
17
|
-
}
|
|
18
|
-
declare const SimpleChecklistItem: React.FC<SimpleChecklistItemProps>;
|
|
19
|
-
export default SimpleChecklistItem;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsx as e,jsxs 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 c}from"../../assets/icons/InactiveChecklistIcon.js";import{Tag as n}from"../tag/Tag.js";import{SingleChecklistMainRow as r,SingleChecklistIconWrapper as l,SingleChecklistContent as o,SingleChecklistHeader as a,SingleChecklistSubheader as m}from"./ProgressChecklist.style.js";const d=d=>{let{header:h,subheader:p,icon:g,activeIcon:v,completedIcon:j,isActive:f,isCompleted:u,tag:I}=d;return e("div",{children:t(r,{children:[e(l,{children:u?null!=j?j:e(s,{}):f?null!=v?v:e(i,{}):null!=g?g:e(c,{})}),t(o,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e(a,Object.assign({completed:u,isActive:f},{children:h})),(null==I?void 0:I.tagText)&&e(n,{tagText:I.tagText,variant:I.variant,type:I.type,theme:I.theme})]})),p&&e(m,Object.assign({isActive:f},{children:p}))]})]})})};export{d as default};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface ChecklistItem {
|
|
3
|
-
id: string;
|
|
4
|
-
isCompleted: boolean;
|
|
5
|
-
isOpen?: boolean;
|
|
6
|
-
header: string;
|
|
7
|
-
image?: string;
|
|
8
|
-
subHeader?: string;
|
|
9
|
-
}
|
|
10
|
-
export interface ButtonGroupItem {
|
|
11
|
-
id: string;
|
|
12
|
-
title: string;
|
|
13
|
-
icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
14
|
-
}
|
|
15
|
-
export interface PostLiveChecklistProps {
|
|
16
|
-
title?: string;
|
|
17
|
-
subtitle?: string;
|
|
18
|
-
marketingChecklist?: ChecklistItem[];
|
|
19
|
-
supportChecklist?: ChecklistItem[];
|
|
20
|
-
onChecklistSetup?: (itemId: string, analyticsButtonId: string) => void;
|
|
21
|
-
useCaseType?: 'marketing' | 'support' | 'both' | string;
|
|
22
|
-
}
|
|
23
|
-
export declare const PostLiveChecklist: React.FC<PostLiveChecklistProps>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{useState as r,useEffect as s}from"react";import{ButtonGroup as o}from"../buttonGroup/ButtonGroup.js";import{PostLiveChecklistItem as n}from"../post-live-checklist-item/PostLiveChecklistItem.js";import{TitleRegular as a,BodySecondary as l}from"../TypographyStyle.js";import{COLORS as p}from"../../constants/Theme.js";const d=d=>{let{title:m="Boost Performance",subtitle:c="Enable these features to make your assistant smarter",marketingChecklist:u=[],supportChecklist:g=[],onChecklistSetup:h,useCaseType:b}=d;var f;const[k,C]=r("marketing"),[y,j]=r("none"),[v,O]=r("marketing");s((()=>{const e=u.filter((e=>!e.isCompleted)).length,t=g.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?j("tabs"):(j("list"),e>0&&O("marketing"),t>0&&O("support")):j("none")}),[u,g]);const x=(()=>{const e=[{id:"marketing",title:"Marketing"},{id:"support",title:"Support"}];if(!b)return e;return"support"===String(b).toLowerCase()?[e[1],e[0]]:e})();s((()=>{"tabs"===y&&x.length>0&&C(x[0].id)}),[y,b]);const S=e=>e.toUpperCase(),T=(e,t)=>{h&&h(e,t)};if("none"===y)return null;const B="tabs"===y?"marketing"===k?u:g:"marketing"===v?u:g;return e("div",Object.assign({style:{padding:16,border:`1px solid ${p.stroke.primary}`,backgroundColor:p.surface.standard,borderRadius:8}},{children:[e("div",{children:[t(a,Object.assign({color:"#4B1583"},{children:m})),t(l,Object.assign({color:(null===(f=p.content)||void 0===f?void 0:f.secondary)||"#666666"},{children:c}))]}),t("div",Object.assign({style:{marginTop:12}},{children:"tabs"===y?e(i,{children:[t(o,{size:"medium",gap:"12px",onButtonClick:e=>C(e),activeButtonId:k,buttonGroup:x}),t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:B.map((e=>t(n,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>T(e.id,S(k))},e.id)))}))]}):t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:B.map((e=>t(n,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>T(e.id,S(v))},e.id)))}))}))]}))};export{d as PostLiveChecklist};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
3
|
-
declare const _default: ComponentMeta<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const Default: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
6
|
-
export declare const WithBothChecklists: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
7
|
-
export declare const SupportFirstOrdering: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
8
|
-
export declare const ListModeSupport: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
9
|
-
export declare const ListModeMarketing: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
10
|
-
export declare const AllCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
11
|
-
export declare const CustomTitles: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|
|
12
|
-
export declare const WithSomeCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
|