@bikdotai/bik-component-library 0.0.754-beta.4 → 0.0.754-beta.5
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/MajorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/styles/minorPopup.styles.js +1 -1
- package/dist/cjs/index.d.ts +0 -3
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/styles/minorPopup.styles.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 -75
- 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 -21
- 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 -75
- 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 -21
- 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
|
-
import{__rest as C}from"../../_virtual/_tslib.js";import{jsxs as l,jsx as i}from"react/jsx-runtime";const t=t=>{var{color:L="#616161"}=t,e=C(t,["color"]);return l("svg",Object.assign({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e,{children:[l("g",Object.assign({clipPath:"url(#clip0_4450_30211)"},{children:[i("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.33818 1.7326L9.33763 1.73208C9.19604 1.59761 9.00261 1.53199 8.80843 1.55253C8.61424 1.57307 8.43882 1.67772 8.3285 1.83883L5.08025 6.58239L2.24242 7.84587C0.784872 8.49482 0.129366 10.2025 0.778309 11.66C1.39684 13.0493 2.97717 13.7099 4.38602 13.2068L5.14078 14.902C5.29054 15.2384 5.68461 15.3897 6.02097 15.2399C6.35733 15.0902 6.5086 14.6961 6.35884 14.3597L5.60751 12.6722L7.43028 11.8607L13.1289 12.6208C13.3225 12.6466 13.5176 12.5863 13.6628 12.4557C13.808 12.3252 13.8887 12.1375 13.8835 11.9423L13.8835 11.9415L13.8834 11.9379L13.8831 11.9301L13.8821 11.904C13.8812 11.8821 13.8797 11.8512 13.8774 11.8118C13.8727 11.7329 13.8647 11.6199 13.851 11.4766C13.8236 11.1901 13.7737 10.7819 13.6829 10.2832C13.5015 9.28705 13.1558 7.92246 12.4969 6.44257C11.838 4.96269 11.0552 3.79268 10.4363 2.99131C10.1265 2.59014 9.85656 2.27989 9.66196 2.06787C9.56463 1.96182 9.48601 1.88022 9.43052 1.82398C9.40277 1.79586 9.38079 1.77406 9.36513 1.75871L9.34645 1.74053L9.34078 1.73508L9.33818 1.7326ZM2.78474 9.06393L5.18586 7.99489L6.45126 10.837L4.05014 11.9061C3.26531 12.2555 2.3458 11.9025 1.99637 11.1177C1.64694 10.3329 1.9999 9.41337 2.78474 9.06393ZM12.4762 11.1886L7.78893 10.5634L6.28431 7.18393L8.95607 3.28225C9.08237 3.43031 9.22589 3.6054 9.38106 3.80631C9.95043 4.54352 10.6723 5.62263 11.2788 6.98489C11.8853 8.34714 12.2042 9.60568 12.3711 10.5221C12.4166 10.7718 12.4507 10.9957 12.4762 11.1886Z",fill:L}),i("path",{d:"M12.1498 3.24192C11.885 3.49769 11.8776 3.91974 12.1334 4.18459C12.3892 4.44944 12.8112 4.45681 13.0761 4.20104L13.5556 3.73794C13.8205 3.48217 13.8278 3.06013 13.5721 2.79527C13.3163 2.53042 12.8943 2.52305 12.6294 2.77882L12.1498 3.24192Z",fill:L}),i("path",{d:"M13.2969 5.35668C12.9605 5.50644 12.8093 5.90051 12.959 6.23687C13.1088 6.57323 13.5029 6.7245 13.8392 6.57474L15.0573 6.03243C15.3936 5.88267 15.5449 5.4886 15.3951 5.15224C15.2454 4.81588 14.8513 4.66461 14.515 4.81437L13.2969 5.35668Z",fill:L}),i("path",{d:"M13.9427 8.48327C13.917 8.11598 14.1939 7.79741 14.5612 7.77172L15.2263 7.72522C15.5936 7.69954 15.9121 7.97647 15.9378 8.34376C15.9635 8.71105 15.6866 9.02962 15.3193 9.05531L14.6543 9.10181C14.287 9.12749 13.9684 8.85057 13.9427 8.48327Z",fill:L})]})),i("defs",{children:i("clipPath",Object.assign({id:"clip0_4450_30211"},{children:i("rect",{width:"16",height:"16",fill:"white"})}))})]}))};export{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 +0,0 @@
|
|
|
1
|
-
import{__rest as C}from"../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";const t=t=>{var{color:o="#616161"}=t,e=C(t,["color"]);return r("svg",Object.assign({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e,{children:r("path",{d:"M2 7.33398H4C4.35362 7.33398 4.69276 7.47446 4.94281 7.72451C5.19286 7.97456 5.33333 8.3137 5.33333 8.66732V10.6673C5.33333 11.0209 5.19286 11.3601 4.94281 11.6101C4.69276 11.8602 4.35362 12.0007 4 12.0007H3.33333C2.97971 12.0007 2.64057 11.8602 2.39052 11.6101C2.14048 11.3601 2 11.0209 2 10.6673V7.33398ZM2 7.33398C2 6.54605 2.15519 5.76584 2.45672 5.03788C2.75825 4.30993 3.20021 3.64849 3.75736 3.09134C4.31451 2.53419 4.97595 2.09224 5.7039 1.79071C6.43185 1.48918 7.21207 1.33398 8 1.33398C8.78793 1.33398 9.56815 1.48918 10.2961 1.79071C11.0241 2.09224 11.6855 2.53419 12.2426 3.09134C12.7998 3.64849 13.2417 4.30993 13.5433 5.03788C13.8448 5.76584 14 6.54605 14 7.33398M14 7.33398V10.6673M14 7.33398H12C11.6464 7.33398 11.3072 7.47446 11.0572 7.72451C10.8071 7.97456 10.6667 8.3137 10.6667 8.66732V10.6673C10.6667 11.0209 10.8071 11.3601 11.0572 11.6101C11.3072 11.8602 11.6464 12.0007 12 12.0007H12.6667C13.0203 12.0007 13.3594 11.8602 13.6095 11.6101C13.8595 11.3601 14 11.0209 14 10.6673M14 10.6673V12.0007C14 12.7079 13.719 13.3862 13.219 13.8863C12.7189 14.3864 12.0406 14.6673 11.3333 14.6673H8",stroke:o,strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round"})}))};export{t 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,75 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ALERT_TYPES } from '../alerts';
|
|
3
|
-
import { TooltipProps } from '../tooltips/Tooltip';
|
|
4
|
-
export interface ChecklistItemType {
|
|
5
|
-
id: string;
|
|
6
|
-
label: string;
|
|
7
|
-
description?: string;
|
|
8
|
-
completed?: boolean;
|
|
9
|
-
}
|
|
10
|
-
export interface SingleChecklistItemType {
|
|
11
|
-
id: string;
|
|
12
|
-
header: string;
|
|
13
|
-
subheader: string;
|
|
14
|
-
icon?: React.ReactNode;
|
|
15
|
-
activeIcon?: React.ReactNode;
|
|
16
|
-
completedIcon?: React.ReactNode;
|
|
17
|
-
isActive?: boolean;
|
|
18
|
-
isCompleted?: boolean;
|
|
19
|
-
onSetup?: () => void;
|
|
20
|
-
alertText?: string | React.ReactNode;
|
|
21
|
-
alertType?: ALERT_TYPES;
|
|
22
|
-
tag?: {
|
|
23
|
-
tagText: string | number;
|
|
24
|
-
variant?: 'regular' | 'circle' | 'compressed';
|
|
25
|
-
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
26
|
-
theme?: 'light' | 'dark';
|
|
27
|
-
tooltip?: Omit<TooltipProps, 'children'>;
|
|
28
|
-
};
|
|
29
|
-
type: 'single';
|
|
30
|
-
buttonType?: 'primary' | 'secondary' | 'tertiary';
|
|
31
|
-
buttonText?: string;
|
|
32
|
-
buttonDisabled?: boolean;
|
|
33
|
-
hideRedirectButton?: boolean;
|
|
34
|
-
hideSetupButton?: boolean;
|
|
35
|
-
}
|
|
36
|
-
export interface MultiChecklistItemType {
|
|
37
|
-
id: string;
|
|
38
|
-
header: string;
|
|
39
|
-
subheader?: string;
|
|
40
|
-
icon?: React.ReactNode;
|
|
41
|
-
activeIcon?: React.ReactNode;
|
|
42
|
-
completedIcon?: React.ReactNode;
|
|
43
|
-
isActive?: boolean;
|
|
44
|
-
isCompleted?: boolean;
|
|
45
|
-
onSetup?: () => void;
|
|
46
|
-
tag?: {
|
|
47
|
-
tagText: string | number;
|
|
48
|
-
variant?: 'regular' | 'circle' | 'compressed';
|
|
49
|
-
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
50
|
-
theme?: 'light' | 'dark';
|
|
51
|
-
tooltip?: Omit<TooltipProps, 'children'>;
|
|
52
|
-
};
|
|
53
|
-
type: 'multiple';
|
|
54
|
-
alertType?: ALERT_TYPES;
|
|
55
|
-
steps?: Array<{
|
|
56
|
-
id?: string;
|
|
57
|
-
text: string;
|
|
58
|
-
onClick?: () => void;
|
|
59
|
-
isCompleted?: boolean;
|
|
60
|
-
}>;
|
|
61
|
-
buttonType?: 'primary' | 'secondary' | 'tertiary';
|
|
62
|
-
}
|
|
63
|
-
export interface ProgressChecklistProps {
|
|
64
|
-
header?: string;
|
|
65
|
-
subheader?: string;
|
|
66
|
-
items?: Array<SingleChecklistItemType | MultiChecklistItemType>;
|
|
67
|
-
progressBarColor?: string;
|
|
68
|
-
headerAction?: React.ReactNode;
|
|
69
|
-
/** Whether to render the progress bar. Defaults to true. */
|
|
70
|
-
showProgressBar?: boolean;
|
|
71
|
-
/** Whether to remove border, border-radius, and padding. Defaults to false. */
|
|
72
|
-
noBorder?: boolean;
|
|
73
|
-
}
|
|
74
|
-
declare const ProgressChecklist: React.FC<ProgressChecklistProps>;
|
|
75
|
-
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{Tooltip as y}from"../tooltips/Tooltip.js";import{TitleMedium as b,BodySecondary as v,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 I,SingleChecklistIconWrapper as k,SingleChecklistContent as B,SingleChecklistHeader as S,SingleChecklistSubheader as P,SingleChecklistActionWrapper as $,SingleChecklistAlertRow as w}from"./ProgressChecklist.style.js";import D from"./ProgressStepper.js";const N=N=>{let{header:R,subheader:V,items:W=[],progressBarColor:L,headerAction:M,showProgressBar:E=!0,noBorder:G=!1}=N;const[H,q]=i(W);s((()=>{q(W)}),[W]);const z=H.filter((e=>e.isCompleted)).length,F=H.length,J=F>0?z/F*100:0;return e(C,Object.assign({noBorder:G},{children:[e(T,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[t(b,{children:R}),M&&t("div",{children:M})]})),t(v,Object.assign({color:r.content.secondary},{children:V}))]}),E&&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(J),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:[z," / ",F]}))}))]})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:H.map((i=>{var s,r,h,u,b,v,j,C;if("single"===i.type)return e(O,Object.assign({isActive:i.isActive||!1},{children:[e(I,{children:[t(k,{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(B,{children:[e("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[t(S,Object.assign({completed:!!i.isCompleted,isActive:!!i.isActive},{children:i.header})),(null===(u=i.tag)||void 0===u?void 0:u.tagText)&&(i.tag.tooltip?t(y,Object.assign({},i.tag.tooltip,{children:t("span",Object.assign({style:{display:"inline-flex"}},{children:t(f,{tagText:i.tag.tagText,variant:i.tag.variant,type:i.tag.type,theme:i.tag.theme})}))})):t(f,{tagText:i.tag.tagText,variant:i.tag.variant,type:i.tag.type,theme:i.tag.theme}))]})),t(P,{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($,{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!==(j=i.buttonDisabled)&&void 0!==j&&j})})]}),i.alertText&&t(w,{children:t(d,{text:i.alertText,type:null!==(C=i.alertType)&&void 0!==C?C: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(x,Object.assign({item:i},{children:t(D,{steps:e,isStepperActive:i.isActive})}),i.id)}}))}))]}))};export{N 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,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { TooltipProps } from '../tooltips/Tooltip';
|
|
3
|
-
interface TagProps {
|
|
4
|
-
tagText: string | number;
|
|
5
|
-
variant?: 'regular' | 'circle' | 'compressed';
|
|
6
|
-
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
7
|
-
theme?: 'light' | 'dark';
|
|
8
|
-
tooltip?: Omit<TooltipProps, 'children'>;
|
|
9
|
-
}
|
|
10
|
-
interface SimpleChecklistItemProps {
|
|
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
|
-
tag?: TagProps;
|
|
19
|
-
}
|
|
20
|
-
declare const SimpleChecklistItem: React.FC<SimpleChecklistItemProps>;
|
|
21
|
-
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 l}from"../../assets/icons/InactiveChecklistIcon.js";import{Tag as n}from"../tag/Tag.js";import{Tooltip as o}from"../tooltips/Tooltip.js";import{SingleChecklistMainRow as c,SingleChecklistIconWrapper as r,SingleChecklistContent as a,SingleChecklistHeader as m,SingleChecklistSubheader as p}from"./ProgressChecklist.style.js";const d=d=>{let{header:h,subheader:g,icon:v,activeIcon:j,completedIcon:f,isActive:x,isCompleted:y,tag:u}=d;return e("div",{children:t(c,{children:[e(r,{children:y?null!=f?f:e(s,{}):x?null!=j?j:e(i,{}):null!=v?v:e(l,{})}),t(a,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e(m,Object.assign({completed:y,isActive:x},{children:h})),(null==u?void 0:u.tagText)&&(u.tooltip?e(o,Object.assign({},u.tooltip,{children:e("span",Object.assign({style:{display:"inline-flex"}},{children:e(n,{tagText:u.tagText,variant:u.variant,type:u.type,theme:u.theme})}))})):e(n,{tagText:u.tagText,variant:u.variant,type:u.type,theme:u.theme}))]})),g&&e(p,Object.assign({isActive:x},{children:g}))]})]})})};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';
|