@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.
Files changed (99) hide show
  1. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
  2. package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -1
  3. package/dist/cjs/components/feature-announcements/styles/minorPopup.styles.js +1 -1
  4. package/dist/cjs/index.d.ts +0 -3
  5. package/dist/cjs/index.js +1 -1
  6. package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
  7. package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +1 -1
  8. package/dist/esm/components/feature-announcements/styles/minorPopup.styles.js +1 -1
  9. package/dist/esm/index.d.ts +0 -3
  10. package/dist/esm/index.js +1 -1
  11. package/package.json +1 -1
  12. package/dist/cjs/assets/icons/ActiveChecklistIcon.d.ts +0 -3
  13. package/dist/cjs/assets/icons/ActiveChecklistIcon.js +0 -1
  14. package/dist/cjs/assets/icons/CheckIndicatorIcon.d.ts +0 -1
  15. package/dist/cjs/assets/icons/CheckIndicatorIcon.js +0 -1
  16. package/dist/cjs/assets/icons/CompletedChecklistIcon.d.ts +0 -3
  17. package/dist/cjs/assets/icons/CompletedChecklistIcon.js +0 -1
  18. package/dist/cjs/assets/icons/CustomiseIcon.d.ts +0 -7
  19. package/dist/cjs/assets/icons/EnableIcon.d.ts +0 -7
  20. package/dist/cjs/assets/icons/GoLiveIcon.d.ts +0 -7
  21. package/dist/cjs/assets/icons/InactiveChecklistIcon.d.ts +0 -3
  22. package/dist/cjs/assets/icons/InactiveChecklistIcon.js +0 -1
  23. package/dist/cjs/assets/icons/MarketingIcon.d.ts +0 -6
  24. package/dist/cjs/assets/icons/MarketingIconSmall.d.ts +0 -6
  25. package/dist/cjs/assets/icons/MarketingIconTab.d.ts +0 -6
  26. package/dist/cjs/assets/icons/MarketingIconTab.js +0 -1
  27. package/dist/cjs/assets/icons/NudgesIcon.d.ts +0 -7
  28. package/dist/cjs/assets/icons/OrderTrackingIcon.d.ts +0 -7
  29. package/dist/cjs/assets/icons/ProgressBadgeIcon.d.ts +0 -3
  30. package/dist/cjs/assets/icons/ShoppingIcon.d.ts +0 -7
  31. package/dist/cjs/assets/icons/SmallCheckIcon.d.ts +0 -3
  32. package/dist/cjs/assets/icons/SmallCheckIcon.js +0 -1
  33. package/dist/cjs/assets/icons/SupportIcon.d.ts +0 -7
  34. package/dist/cjs/assets/icons/SupportIconSmall.d.ts +0 -6
  35. package/dist/cjs/assets/icons/SupportIconTab.d.ts +0 -6
  36. package/dist/cjs/assets/icons/SupportIconTab.js +0 -1
  37. package/dist/cjs/assets/icons/TrainingIcon.d.ts +0 -7
  38. package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.d.ts +0 -10
  39. package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.js +0 -1
  40. package/dist/cjs/components/ProgressChecklist/ProgressChecklist.d.ts +0 -75
  41. package/dist/cjs/components/ProgressChecklist/ProgressChecklist.js +0 -1
  42. package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.d.ts +0 -32
  43. package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.js +0 -133
  44. package/dist/cjs/components/ProgressChecklist/ProgressStepper.d.ts +0 -15
  45. package/dist/cjs/components/ProgressChecklist/ProgressStepper.js +0 -1
  46. package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.d.ts +0 -21
  47. package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.js +0 -1
  48. package/dist/cjs/components/ProgressChecklist/index.d.ts +0 -2
  49. package/dist/cjs/components/post-live-checklist/PostLiveChecklist.d.ts +0 -23
  50. package/dist/cjs/components/post-live-checklist/PostLiveChecklist.js +0 -1
  51. package/dist/cjs/components/post-live-checklist/PostLiveChecklist.stories.d.ts +0 -12
  52. package/dist/cjs/components/post-live-checklist/index.d.ts +0 -2
  53. package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.d.ts +0 -10
  54. package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.js +0 -1
  55. package/dist/cjs/components/post-live-checklist-item/index.d.ts +0 -1
  56. package/dist/esm/assets/icons/ActiveChecklistIcon.d.ts +0 -3
  57. package/dist/esm/assets/icons/ActiveChecklistIcon.js +0 -1
  58. package/dist/esm/assets/icons/CheckIndicatorIcon.d.ts +0 -1
  59. package/dist/esm/assets/icons/CheckIndicatorIcon.js +0 -1
  60. package/dist/esm/assets/icons/CompletedChecklistIcon.d.ts +0 -3
  61. package/dist/esm/assets/icons/CompletedChecklistIcon.js +0 -1
  62. package/dist/esm/assets/icons/CustomiseIcon.d.ts +0 -7
  63. package/dist/esm/assets/icons/EnableIcon.d.ts +0 -7
  64. package/dist/esm/assets/icons/GoLiveIcon.d.ts +0 -7
  65. package/dist/esm/assets/icons/InactiveChecklistIcon.d.ts +0 -3
  66. package/dist/esm/assets/icons/InactiveChecklistIcon.js +0 -1
  67. package/dist/esm/assets/icons/MarketingIcon.d.ts +0 -6
  68. package/dist/esm/assets/icons/MarketingIconSmall.d.ts +0 -6
  69. package/dist/esm/assets/icons/MarketingIconTab.d.ts +0 -6
  70. package/dist/esm/assets/icons/MarketingIconTab.js +0 -1
  71. package/dist/esm/assets/icons/NudgesIcon.d.ts +0 -7
  72. package/dist/esm/assets/icons/OrderTrackingIcon.d.ts +0 -7
  73. package/dist/esm/assets/icons/ProgressBadgeIcon.d.ts +0 -3
  74. package/dist/esm/assets/icons/ShoppingIcon.d.ts +0 -7
  75. package/dist/esm/assets/icons/SmallCheckIcon.d.ts +0 -3
  76. package/dist/esm/assets/icons/SmallCheckIcon.js +0 -1
  77. package/dist/esm/assets/icons/SupportIcon.d.ts +0 -7
  78. package/dist/esm/assets/icons/SupportIconSmall.d.ts +0 -6
  79. package/dist/esm/assets/icons/SupportIconTab.d.ts +0 -6
  80. package/dist/esm/assets/icons/SupportIconTab.js +0 -1
  81. package/dist/esm/assets/icons/TrainingIcon.d.ts +0 -7
  82. package/dist/esm/components/ProgressChecklist/MultiChecklistItem.d.ts +0 -10
  83. package/dist/esm/components/ProgressChecklist/MultiChecklistItem.js +0 -1
  84. package/dist/esm/components/ProgressChecklist/ProgressChecklist.d.ts +0 -75
  85. package/dist/esm/components/ProgressChecklist/ProgressChecklist.js +0 -1
  86. package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.d.ts +0 -32
  87. package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.js +0 -133
  88. package/dist/esm/components/ProgressChecklist/ProgressStepper.d.ts +0 -15
  89. package/dist/esm/components/ProgressChecklist/ProgressStepper.js +0 -1
  90. package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.d.ts +0 -21
  91. package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.js +0 -1
  92. package/dist/esm/components/ProgressChecklist/index.d.ts +0 -2
  93. package/dist/esm/components/post-live-checklist/PostLiveChecklist.d.ts +0 -23
  94. package/dist/esm/components/post-live-checklist/PostLiveChecklist.js +0 -1
  95. package/dist/esm/components/post-live-checklist/PostLiveChecklist.stories.d.ts +0 -12
  96. package/dist/esm/components/post-live-checklist/index.d.ts +0 -2
  97. package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.d.ts +0 -10
  98. package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.js +0 -1
  99. 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");const t=t=>e.jsxs("svg",Object.assign({width:"36",height:"44",viewBox:"0 0 36 44",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t,{children:[e.jsx("rect",{y:"4",width:"36",height:"36",rx:"18",fill:"#E0E0E0"}),e.jsxs("g",Object.assign({clipPath:"url(#clip0_8_5196)"},{children:[e.jsx("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"}),e.jsx("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"}),e.jsx("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"}),e.jsx("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"})]})),e.jsx("defs",{children:e.jsx("clipPath",Object.assign({id:"clip0_8_5196"},{children:e.jsx("rect",{width:"20",height:"20",fill:"white",transform:"translate(7.875 12)"})}))})]}));exports.InactiveChecklistIcon=t,exports.default=t;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- color?: string;
4
- }
5
- declare const MarketingIconTab: React.FC<IconProps>;
6
- export default MarketingIconTab;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- color?: string;
4
- }
5
- declare const MarketingIcon: React.FC<IconProps>;
6
- export default MarketingIcon;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- color?: string;
4
- }
5
- declare const MarketingIconTab: React.FC<IconProps>;
6
- export default MarketingIconTab;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),l=require("react/jsx-runtime");exports.default=C=>{var{color:i="#616161"}=C,s=e.__rest(C,["color"]);return l.jsxs("svg",Object.assign({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s,{children:[l.jsxs("g",Object.assign({clipPath:"url(#clip0_4450_30211)"},{children:[l.jsx("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:i}),l.jsx("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:i}),l.jsx("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:i}),l.jsx("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:i})]})),l.jsx("defs",{children:l.jsx("clipPath",Object.assign({id:"clip0_4450_30211"},{children:l.jsx("rect",{width:"16",height:"16",fill:"white"})}))})]}))};
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- bgColor?: string;
4
- strokeColor?: string;
5
- }
6
- declare const NudgesIcon: React.FC<IconProps>;
7
- export default NudgesIcon;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- bgColor?: string;
4
- strokeColor?: string;
5
- }
6
- declare const OrderTrackingIcon: React.FC<IconProps>;
7
- export default OrderTrackingIcon;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- export declare const ProgressBadgeIcon: React.FC;
3
- export default ProgressBadgeIcon;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- bgColor?: string;
4
- strokeColor?: string;
5
- }
6
- declare const ShoppingIcon: React.FC<IconProps>;
7
- export default ShoppingIcon;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- export declare const SmallCheckIcon: React.FC<React.SVGProps<SVGSVGElement>>;
3
- export default SmallCheckIcon;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");const t=t=>e.jsx("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t,{children:e.jsx("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"})}));exports.SmallCheckIcon=t,exports.default=t;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- bgColor?: string;
4
- strokeColor?: string;
5
- }
6
- declare const SupportIcon: React.FC<IconProps>;
7
- export default SupportIcon;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- color?: string;
4
- }
5
- declare const SupportIcon: React.FC<IconProps>;
6
- export default SupportIcon;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- color?: string;
4
- }
5
- declare const SupportIconTab: React.FC<IconProps>;
6
- export default SupportIconTab;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime");exports.default=t=>{var{color:C="#616161"}=t,s=e.__rest(t,["color"]);return r.jsx("svg",Object.assign({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s,{children:r.jsx("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:C,strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round"})}))};
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- bgColor?: string;
4
- strokeColor?: string;
5
- }
6
- declare const TrainingIcon: React.FC<IconProps>;
7
- export default TrainingIcon;
@@ -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
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../accordion/Accordion.js"),i=require("./SimpleChecklistItem.js");exports.default=o=>{let{item:t,children:s,isOpen:c,onToggle:d}=o;const n="boolean"==typeof c?c:!!t.isActive,a=e.jsx(i.default,{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.jsx(r.BikAccordion,Object.assign({header:a,headerStyles:{height:"auto",cursor:"pointer"},onToggleAccordion:d||(()=>{}),isOpen:n,skipHoverHeader:!0,showBorders:!0,borderRadius:"8px"},{children:s?e.jsx("div",Object.assign({style:{border:"none",padding:16}},{children:s})):null}))};
@@ -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
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../constants/Theme.js"),i=require("../../assets/icons/ActiveChecklistIcon.js"),r=require("../../assets/icons/CompletedChecklistIcon.js"),l=require("../../assets/icons/InactiveChecklistIcon.js"),n=require("../../assets/icons/info.svg.js"),o=require("../../assets/icons/SmallCheckIcon.js"),c=require("../alerts/Alert.js"),a=require("../alerts/AlertHelper.js"),d=require("../button/Button.js"),p=require("../progress-bar-v2/ProgressBarV2.js"),g=require("../tag/Tag.js"),u=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),x=require("./MultiChecklistItem.js"),h=require("./ProgressChecklist.style.js"),C=require("./ProgressStepper.js");exports.default=y=>{let{header:v,subheader:b,items:m=[],progressBarColor:T,headerAction:S,showProgressBar:f=!0,noBorder:O=!1}=y;const[k,I]=t.useState(m);t.useEffect((()=>{I(m)}),[m]);const A=k.filter((e=>e.isCompleted)).length,q=k.length,B=q>0?A/q*100:0;return e.jsxs(h.ProgressChecklistContainer,Object.assign({noBorder:O},{children:[e.jsxs(h.HeaderSection,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsx(j.TitleMedium,{children:v}),S&&e.jsx("div",{children:S})]})),e.jsx(j.BodySecondary,Object.assign({color:s.COLORS.content.secondary},{children:b}))]}),f&&e.jsxs(h.ProgressBarSection,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(p.ProgressBarV2,{progress:Math.round(B),type:p.ProgressBarType.LINE,matchParentWidth:!0,showProgress:!1,color:null!=T?T:s.COLORS.background.positive.vibrant,progressBarThickness:12})})),e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e.jsxs(j.TitleSmall,Object.assign({style:{color:s.COLORS.content.secondary,textAlign:"right"}},{children:[A," / ",q]}))}))]})),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:k.map((t=>{var s,p,j,y,v,b,m,T;if("single"===t.type)return e.jsxs(h.SingleChecklistItem,Object.assign({isActive:t.isActive||!1},{children:[e.jsxs(h.SingleChecklistMainRow,{children:[e.jsx(h.SingleChecklistIconWrapper,{children:t.isCompleted?null!==(s=t.completedIcon)&&void 0!==s?s:e.jsx(r.CompletedChecklistIcon,{}):t.isActive?null!==(p=t.activeIcon)&&void 0!==p?p:e.jsx(i.ActiveChecklistIcon,{}):null!==(j=t.icon)&&void 0!==j?j:e.jsx(l.InactiveChecklistIcon,{})}),e.jsxs(h.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(h.SingleChecklistHeader,Object.assign({completed:!!t.isCompleted,isActive:!!t.isActive},{children:t.header})),(null===(y=t.tag)||void 0===y?void 0:y.tagText)&&(t.tag.tooltip?e.jsx(u.Tooltip,Object.assign({},t.tag.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(g.Tag,{tagText:t.tag.tagText,variant:t.tag.variant,type:t.tag.type,theme:t.tag.theme})}))})):e.jsx(g.Tag,{tagText:t.tag.tagText,variant:t.tag.variant,type:t.tag.type,theme:t.tag.theme}))]})),e.jsx(h.SingleChecklistSubheader,{children:t.subheader})]}),t.isCompleted&&!t.hideRedirectButton&&e.jsx("div",Object.assign({onClick:t.onSetup,style:{cursor:"pointer"}},{children:e.jsx(o.SmallCheckIcon,{style:{marginLeft:"12px"}})})),!t.isCompleted&&t.isActive&&!t.hideSetupButton&&e.jsx(h.SingleChecklistActionWrapper,{children:e.jsx(d.Button,{buttonText:null!==(v=t.buttonText)&&void 0!==v?v:"Setup",buttonType:null!==(b=t.buttonType)&&void 0!==b?b:"primary",onClick:t.onSetup,disabled:null!==(m=t.buttonDisabled)&&void 0!==m&&m})})]}),t.alertText&&e.jsx(h.SingleChecklistAlertRow,{children:e.jsx(c.Alert,{text:t.alertText,type:null!==(T=t.alertType)&&void 0!==T?T:a.ALERT_TYPES.WARNING,contentPosition:a.CONTENT_POSITION.START,textColor:t.alertType===a.ALERT_TYPES.BRAND?"#4B1583":"",icon:t=>e.jsx(n.default,Object.assign({},t))})})]}),t.id);if("multiple"===t.type){const s=t.steps&&t.steps.length>0?t.steps.map(((e,s)=>{var i;return{id:null!==(i=e.id)&&void 0!==i?i:`${t.id}-sub-${s+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${t.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${t.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${t.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return e.jsx(x.default,Object.assign({item:t},{children:e.jsx(C.default,{steps:s,isStepperActive:t.isActive})}),t.id)}}))}))]}))};
@@ -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
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const o=i.default.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: ${t.COLORS.surface.standard};
9
-
10
- .accordion__overview {
11
- padding: 16px !important;
12
- border-bottom: none;
13
- }
14
- `,n=i.default.div`
15
- display: flex;
16
- flex-direction: column;
17
- gap: 8px;
18
- `,l=i.default.div`
19
- display: flex;
20
- flex-direction: row;
21
- gap: 12px;
22
- `;i.default.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: ${t.COLORS.stroke.primary};
39
- border-radius: 3px;
40
- }
41
- `,i.default.div`
42
- display: flex;
43
- align-items: flex-start;
44
- gap: 12px;
45
- padding: 12px;
46
- background: ${e=>e.completed?"#F0F7F4":t.COLORS.surface.standard};
47
- border: 1px solid
48
- ${e=>e.completed?"#D4E9E3":t.COLORS.stroke.primary};
49
- border-radius: 6px;
50
- cursor: pointer;
51
- transition: all 0.2s ease;
52
-
53
- &:hover {
54
- background: ${e=>e.completed?"#E8F4F0":t.COLORS.background.base};
55
- }
56
- `,i.default.input`
57
- width: 18px;
58
- height: 18px;
59
- margin-top: 2px;
60
- cursor: pointer;
61
- flex-shrink: 0;
62
- `,i.default.div`
63
- display: flex;
64
- flex-direction: column;
65
- gap: 4px;
66
- flex: 1;
67
- `,i.default.p`
68
- margin: 0;
69
- font-size: 14px;
70
- font-weight: 500;
71
- line-height: 20px;
72
- color: ${e=>e.completed?t.COLORS.content.secondary:t.COLORS.content.primary};
73
- text-decoration: ${e=>e.completed?"line-through":"none"};
74
- `,i.default.p`
75
- margin: 0;
76
- font-size: 12px;
77
- font-weight: 400;
78
- line-height: 16px;
79
- color: ${t.COLORS.content.secondary};
80
- opacity: ${e=>e.completed?.6:1};
81
- `;const a=i.default.div`
82
- border-radius: 8px;
83
- border: 1px solid
84
- ${e=>e.isActive?t.COLORS.stroke.primary:"#E0E0E0"};
85
- padding: 16px;
86
- display: flex;
87
- flex-direction: column;
88
- gap: 12px;
89
- background: ${t.COLORS.surface.standard};
90
- transition: all 0.2s ease;
91
-
92
- &:hover {
93
- border-color: ${e=>e.isActive?t.COLORS.stroke.primary:"#D0D0D0"};
94
- }
95
- `,d=i.default.div`
96
- display: flex;
97
- align-items: center;
98
- gap: 16px;
99
- width: 100%;
100
- `,p=i.default.div`
101
- display: flex;
102
- align-items: center;
103
- justify-content: center;
104
- flex-shrink: 0;
105
- `,s=i.default.div`
106
- display: flex;
107
- flex-direction: column;
108
- gap: 4px;
109
- flex: 1;
110
- `,c=i.default.div`
111
- font-size: 16px;
112
- font-weight: 600;
113
- line-height: 24px;
114
- color: ${e=>e.completed?t.COLORS.background.positive.vibrant:e.isActive?t.COLORS.content.primary:t.COLORS.content.placeholder} !important;
115
- margin: 0;
116
- display: flex;
117
- flex-direction: row;
118
- gap: 12px;
119
- `,x=i.default.div`
120
- font-size: 14px;
121
- font-weight: 400;
122
- line-height: 20px;
123
- color: ${e=>e.isActive?t.COLORS.content.secondary:t.COLORS.content.placeholder};
124
- margin: 0;
125
- `,f=i.default.div`
126
- display: flex;
127
- align-items: center;
128
- gap: 8px;
129
- flex-shrink: 0;
130
- `,u=i.default.div`
131
- width: 100%;
132
- margin-top: 8px;
133
- `;exports.HeaderSection=n,exports.ProgressBarSection=l,exports.ProgressChecklistContainer=o,exports.SingleChecklistActionWrapper=f,exports.SingleChecklistAlertRow=u,exports.SingleChecklistContent=s,exports.SingleChecklistHeader=c,exports.SingleChecklistIconWrapper=p,exports.SingleChecklistItem=a,exports.SingleChecklistMainRow=d,exports.SingleChecklistSubheader=x;
@@ -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
- "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 p=s.length>0?s:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[u,x]=t.useState(null!==(c=null===(a=p[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:p.map(((t,n)=>{var s,a,c,h,v,g,C;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=p[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=p[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:u),(!t.isCompleted&&r&&(0===n||!0===(null===(i=p[n-1])||void 0===i?void 0:i.isCompleted))||t.isCompleted)&&(t.onClick?t.onClick():t.id&&(null==o||o(t.id)))}})})),!t.isCompleted&&(0===n||!0===(null===(g=p[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:u),t.isCompleted||!r||0!==n&&!0!==(null===(l=p[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!==p.length-1&&e.jsx("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(C=t.id)&&void 0!==C?C:`step-${n}`)}))}))}))};var o=d.default.memo(s);exports.default=o;
@@ -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
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js"),l=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),n=require("./ProgressChecklist.style.js");exports.default=r=>{let{header:a,subheader:o,icon:h,activeIcon:j,completedIcon:d,isActive:x,isCompleted:g,tag:p}=r;return e.jsx("div",{children:e.jsxs(n.SingleChecklistMainRow,{children:[e.jsx(n.SingleChecklistIconWrapper,{children:g?null!=d?d:e.jsx(s.CompletedChecklistIcon,{}):x?null!=j?j:e.jsx(t.ActiveChecklistIcon,{}):null!=h?h:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(n.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(n.SingleChecklistHeader,Object.assign({completed:g,isActive:x},{children:a})),(null==p?void 0:p.tagText)&&(p.tooltip?e.jsx(c.Tooltip,Object.assign({},p.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(l.Tag,{tagText:p.tagText,variant:p.variant,type:p.type,theme:p.theme})}))})):e.jsx(l.Tag,{tagText:p.tagText,variant:p.variant,type:p.type,theme:p.theme}))]})),o&&e.jsx(n.SingleChecklistSubheader,Object.assign({isActive:x},{children:o}))]})]})})};
@@ -1,2 +0,0 @@
1
- export { default as ProgressChecklist } from './ProgressChecklist';
2
- export type { ChecklistItemType } from './ProgressChecklist';
@@ -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("../../assets/icons/MarketingIconTab.js"),s=require("../../assets/icons/SupportIconTab.js"),i=require("react"),r=require("../buttonGroup/ButtonGroup.js"),n=require("../post-live-checklist-item/PostLiveChecklistItem.js"),o=require("../TypographyStyle.js"),a=require("../../constants/Theme.js");exports.PostLiveChecklist=l=>{let{title:u="Boost Performance",subtitle:c="Enable these features to make your assistant smarter",marketingChecklist:d=[],supportChecklist:p=[],onChecklistSetup:m,useCaseType:g}=l;var h;const[j,b]=i.useState("marketing"),[k,C]=i.useState("none"),[x,f]=i.useState("marketing");i.useEffect((()=>{const e=d.filter((e=>!e.isCompleted)).length,t=p.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?C("tabs"):(C("list"),e>0&&f("marketing"),t>0&&f("support")):C("none")}),[d,p]);const O=(()=>{const e=[{id:"marketing",title:"Marketing",icon:t.default},{id:"support",title:"Support",icon:s.default}];if(!g)return e;return"support"===String(g).toLowerCase()?[e[1],e[0]]:e})();i.useEffect((()=>{"tabs"===k&&O.length>0&&b(O[0].id)}),[k,g]);const v=e=>e.toUpperCase(),y=(e,t)=>{m&&m(e,t)};if("none"===k)return null;const S="tabs"===k?"marketing"===j?d:p:"marketing"===x?d:p;return e.jsxs("div",Object.assign({style:{padding:16,border:`1px solid ${a.COLORS.stroke.primary}`,backgroundColor:a.COLORS.surface.standard,borderRadius:8}},{children:[e.jsxs("div",{children:[e.jsx(o.TitleRegular,Object.assign({color:"#4B1583"},{children:u})),e.jsx(o.BodySecondary,Object.assign({color:(null===(h=a.COLORS.content)||void 0===h?void 0:h.secondary)||"#666666"},{children:c}))]}),e.jsx("div",Object.assign({style:{marginTop:12}},{children:"tabs"===k?e.jsxs(e.Fragment,{children:[e.jsx(r.ButtonGroup,{size:"medium",gap:"12px",iconPosition:"left",onButtonClick:e=>b(e),activeButtonId:j,buttonGroup:O}),e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:S.map((t=>e.jsx(n.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>y(t.id,v(j))},t.id)))}))]}):e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:S.map((t=>e.jsx(n.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>y(t.id,v(x))},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,2 +0,0 @@
1
- export { PostLiveChecklist } from './PostLiveChecklist';
2
- export type { PostLiveChecklistProps, ChecklistItem, } from './PostLiveChecklist';
@@ -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,3 +0,0 @@
1
- import React from 'react';
2
- export declare const ActiveChecklistIcon: React.FC<React.SVGProps<SVGSVGElement>>;
3
- export default ActiveChecklistIcon;
@@ -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,3 +0,0 @@
1
- import React from 'react';
2
- export declare const CompletedChecklistIcon: React.FC<React.SVGProps<SVGSVGElement>>;
3
- export default CompletedChecklistIcon;
@@ -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,7 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- bgColor?: string;
4
- strokeColor?: string;
5
- }
6
- declare const CustomiseIcon: React.FC<IconProps>;
7
- export default CustomiseIcon;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- bgColor?: string;
4
- strokeColor?: string;
5
- }
6
- declare const EnableIcon: React.FC<IconProps>;
7
- export default EnableIcon;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- bgColor?: string;
4
- strokeColor?: string;
5
- }
6
- declare const GoLiveIcon: React.FC<IconProps>;
7
- export default GoLiveIcon;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- export declare const InactiveChecklistIcon: React.FC<React.SVGProps<SVGSVGElement>>;
3
- export default InactiveChecklistIcon;
@@ -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,6 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- color?: string;
4
- }
5
- declare const MarketingIconTab: React.FC<IconProps>;
6
- export default MarketingIconTab;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IconProps extends React.SVGProps<SVGSVGElement> {
3
- color?: string;
4
- }
5
- declare const MarketingIcon: React.FC<IconProps>;
6
- export default MarketingIcon;