@bikdotai/bik-component-library 0.0.754-beta.2 → 0.0.754-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/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/cjs/index.d.ts +0 -3
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.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/MarketingIcon.d.ts +0 -6
- package/dist/cjs/assets/icons/MarketingIconSmall.d.ts +0 -6
- package/dist/cjs/assets/icons/MarketingIconTab.d.ts +0 -6
- package/dist/cjs/assets/icons/MarketingIconTab.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/SupportIconSmall.d.ts +0 -6
- package/dist/cjs/assets/icons/SupportIconTab.d.ts +0 -6
- package/dist/cjs/assets/icons/SupportIconTab.js +0 -1
- 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 -72
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.js +0 -1
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.d.ts +0 -32
- 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/MarketingIcon.d.ts +0 -6
- package/dist/esm/assets/icons/MarketingIconSmall.d.ts +0 -6
- package/dist/esm/assets/icons/MarketingIconTab.d.ts +0 -6
- package/dist/esm/assets/icons/MarketingIconTab.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/SupportIconSmall.d.ts +0 -6
- package/dist/esm/assets/icons/SupportIconTab.d.ts +0 -6
- package/dist/esm/assets/icons/SupportIconTab.js +0 -1
- 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 -72
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.js +0 -1
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.d.ts +0 -32
- 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,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,72 +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
|
-
/** Whether to remove border, border-radius, and padding. Defaults to false. */
|
|
69
|
-
noBorder?: boolean;
|
|
70
|
-
}
|
|
71
|
-
declare const ProgressChecklist: React.FC<ProgressChecklistProps>;
|
|
72
|
-
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 n}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as l}from"../../assets/icons/InactiveChecklistIcon.js";import c from"../../assets/icons/info.svg.js";import{SmallCheckIcon as a}from"../../assets/icons/SmallCheckIcon.js";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 f}from"../tag/Tag.js";import{TitleMedium as b,BodySecondary as v,TitleSmall as y}from"../TypographyStyle.js";import j from"./MultiChecklistItem.js";import{ProgressChecklistContainer as x,HeaderSection as C,ProgressBarSection as T,SingleChecklistItem as A,SingleChecklistMainRow as I,SingleChecklistIconWrapper as O,SingleChecklistContent as k,SingleChecklistHeader as B,SingleChecklistSubheader as S,SingleChecklistActionWrapper as P,SingleChecklistAlertRow as $}from"./ProgressChecklist.style.js";import w from"./ProgressStepper.js";const D=D=>{let{header:N,subheader:R,items:V=[],progressBarColor:W,headerAction:L,showProgressBar:M=!0,noBorder:E=!1}=D;const[G,H]=i(V);s((()=>{H(V)}),[V]);const q=G.filter((e=>e.isCompleted)).length,z=G.length,F=z>0?q/z*100:0;return e(x,Object.assign({noBorder:E},{children:[e(C,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[t(b,{children:N}),L&&t("div",{children:L})]})),t(v,Object.assign({color:r.content.secondary},{children:R}))]}),M&&e(T,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!=W?W: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:[q," / ",z]}))}))]})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:G.map((i=>{var s,r,h,u,b,v,y,x;if("single"===i.type)return e(A,Object.assign({isActive:i.isActive||!1},{children:[e(I,{children:[t(O,{children:i.isCompleted?null!==(s=i.completedIcon)&&void 0!==s?s:t(n,{}):i.isActive?null!==(r=i.activeIcon)&&void 0!==r?r:t(o,{}):null!==(h=i.icon)&&void 0!==h?h:t(l,{})}),e(k,{children:[e("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[t(B,Object.assign({completed:!!i.isCompleted,isActive:!!i.isActive},{children:i.header})),(null===(u=i.tag)||void 0===u?void 0:u.tagText)&&t(f,{tagText:i.tag.tagText,variant:i.tag.variant,type:i.tag.type,theme:i.tag.theme})]})),t(S,{children:i.subheader})]}),i.isCompleted&&!i.hideRedirectButton&&t("div",Object.assign({onClick:i.onSetup,style:{cursor:"pointer"}},{children:t(a,{style:{marginLeft:"12px"}})})),!i.isCompleted&&i.isActive&&!i.hideSetupButton&&t(P,{children:t(g,{buttonText:null!==(b=i.buttonText)&&void 0!==b?b:"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($,{children:t(d,{text:i.alertText,type:null!==(x=i.alertType)&&void 0!==x?x:p.WARNING,contentPosition:m.START,textColor:i.alertType===p.BRAND?"#4B1583":"",icon:e=>t(c,Object.assign({},e))})})]}),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(j,Object.assign({item:i},{children:t(w,{steps:e,isStepperActive:i.isActive})}),i.id)}}))}))]}))};export{D as default};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
export declare const ProgressChecklistContainer: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
-
noBorder?: boolean | undefined;
|
|
3
|
-
}, never>;
|
|
4
|
-
export declare const HeaderSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
-
export declare const ProgressBarSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export declare const ChecklistItemsSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
-
export declare const ChecklistItem: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
-
completed?: boolean | undefined;
|
|
9
|
-
}, never>;
|
|
10
|
-
export declare const ChecklistCheckbox: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
11
|
-
export declare const ChecklistItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
|
-
export declare const ChecklistItemText: import("styled-components").StyledComponent<"p", any, {
|
|
13
|
-
completed?: boolean | undefined;
|
|
14
|
-
}, never>;
|
|
15
|
-
export declare const ChecklistItemDescription: import("styled-components").StyledComponent<"p", any, {
|
|
16
|
-
completed?: boolean | undefined;
|
|
17
|
-
}, never>;
|
|
18
|
-
export declare const SingleChecklistItem: import("styled-components").StyledComponent<"div", any, {
|
|
19
|
-
isActive: boolean;
|
|
20
|
-
}, never>;
|
|
21
|
-
export declare const SingleChecklistMainRow: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
|
-
export declare const SingleChecklistIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
23
|
-
export declare const SingleChecklistContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
24
|
-
export declare const SingleChecklistHeader: import("styled-components").StyledComponent<"div", any, {
|
|
25
|
-
completed?: boolean | undefined;
|
|
26
|
-
isActive?: boolean | undefined;
|
|
27
|
-
}, never>;
|
|
28
|
-
export declare const SingleChecklistSubheader: import("styled-components").StyledComponent<"div", any, {
|
|
29
|
-
isActive?: boolean | undefined;
|
|
30
|
-
}, never>;
|
|
31
|
-
export declare const SingleChecklistActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
32
|
-
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: ${e=>e.noBorder?"0":"8px"};
|
|
3
|
-
border: ${e=>e.noBorder?"none":"1px solid #e0e0e0"};
|
|
4
|
-
padding: ${e=>e.noBorder?"0":"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
|
-
`,d=e.div`
|
|
96
|
-
display: flex;
|
|
97
|
-
align-items: center;
|
|
98
|
-
gap: 16px;
|
|
99
|
-
width: 100%;
|
|
100
|
-
`,p=e.div`
|
|
101
|
-
display: flex;
|
|
102
|
-
align-items: center;
|
|
103
|
-
justify-content: center;
|
|
104
|
-
flex-shrink: 0;
|
|
105
|
-
`,a=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,a as SingleChecklistContent,l as SingleChecklistHeader,p as SingleChecklistIconWrapper,n as SingleChecklistItem,d 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.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 o from"../../assets/icons/MarketingIconTab.js";import r from"../../assets/icons/SupportIconTab.js";import{useState as s,useEffect as n}from"react";import{ButtonGroup as a}from"../buttonGroup/ButtonGroup.js";import{PostLiveChecklistItem as p}from"../post-live-checklist-item/PostLiveChecklistItem.js";import{TitleRegular as l,BodySecondary as c}from"../TypographyStyle.js";import{COLORS as d}from"../../constants/Theme.js";const m=m=>{let{title:u="Boost Performance",subtitle:g="Enable these features to make your assistant smarter",marketingChecklist:b=[],supportChecklist:h=[],onChecklistSetup:f,useCaseType:k}=m;var C;const[j,y]=s("marketing"),[v,O]=s("none"),[x,T]=s("marketing");n((()=>{const e=b.filter((e=>!e.isCompleted)).length,t=h.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?O("tabs"):(O("list"),e>0&&T("marketing"),t>0&&T("support")):O("none")}),[b,h]);const S=(()=>{const e=[{id:"marketing",title:"Marketing",icon:o},{id:"support",title:"Support",icon:r}];if(!k)return e;return"support"===String(k).toLowerCase()?[e[1],e[0]]:e})();n((()=>{"tabs"===v&&S.length>0&&y(S[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?b:h:"marketing"===x?b:h;return e("div",Object.assign({style:{padding:16,border:`1px solid ${d.stroke.primary}`,backgroundColor:d.surface.standard,borderRadius:8}},{children:[e("div",{children:[t(l,Object.assign({color:"#4B1583"},{children:u})),t(c,Object.assign({color:(null===(C=d.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(a,{size:"medium",gap:"12px",iconPosition:"left",onButtonClick:e=>y(e),activeButtonId:j,buttonGroup:S}),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{m 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>>;
|
|
@@ -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
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{CheckIndicatorIcon as i}from"../../assets/icons/CheckIndicatorIcon.js";import s from"../../assets/icons/chevronDownOutline.svg.js";import n from"../../assets/icons/chevronUpOutline.svg.js";import{useState as r,useEffect as o}from"react";import{Button as c}from"../button/Button.js";import{TitleSmall as l,BodyCaption as d}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";const p=p=>{const{isCompleted:m,header:f,subHeader:g,isOpen:h=!1}=p,{onSetup:u}=p,[y,b]=r(h);return o((()=>{b(h)}),[h]),e("div",Object.assign({style:{backgroundColor:y?a.surface.subdued:a.surface.standard,borderRadius:8}},{children:[e("div",Object.assign({style:{color:a.surface.standard,padding:16,display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",cursor:m?"default":"pointer"},onClick:()=>!m&&b(!y)},{children:[t(l,Object.assign({color:y?"#4B1583":a.content.primary},{children:f})),m?t(i,{}):t(y?n:s,{width:24,height:24,color:a.content.secondary})]})),t("div",{children:y&&t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:e("div",Object.assign({style:{padding:16,paddingTop:0,gap:16,display:"flex",flexDirection:"column"}},{children:[t("div",Object.assign({style:{height:200,backgroundColor:"#EFE6F9",borderRadius:8,overflow:"hidden"}},{children:t("img",{src:p.image,alt:"checklist item",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:16}},{children:[t("div",Object.assign({style:{flex:2}},{children:t(d,Object.assign({color:a.content.secondary,numberOfLines:3},{children:g}))})),t("div",Object.assign({style:{flex:1,display:"flex",justifyContent:"flex-end"}},{children:t(c,{buttonType:"primary",size:"small",buttonText:"Setup",onClick:()=>{u&&u()}})}))]}))]}))}))})]}))};export{p as PostLiveChecklistItem};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './PostLiveChecklistItem';
|