@bikdotai/bik-component-library 0.0.754-beta.2 → 0.0.754-beta.4
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/ProgressChecklist/ProgressChecklist.d.ts +3 -0
- package/dist/cjs/components/ProgressChecklist/ProgressChecklist.js +1 -1
- package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.d.ts +2 -0
- package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.js +1 -1
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.d.ts +3 -0
- package/dist/esm/components/ProgressChecklist/ProgressChecklist.js +1 -1
- package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.d.ts +2 -0
- package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.js +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ALERT_TYPES } from '../alerts';
|
|
3
|
+
import { TooltipProps } from '../tooltips/Tooltip';
|
|
3
4
|
export interface ChecklistItemType {
|
|
4
5
|
id: string;
|
|
5
6
|
label: string;
|
|
@@ -23,6 +24,7 @@ export interface SingleChecklistItemType {
|
|
|
23
24
|
variant?: 'regular' | 'circle' | 'compressed';
|
|
24
25
|
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
25
26
|
theme?: 'light' | 'dark';
|
|
27
|
+
tooltip?: Omit<TooltipProps, 'children'>;
|
|
26
28
|
};
|
|
27
29
|
type: 'single';
|
|
28
30
|
buttonType?: 'primary' | 'secondary' | 'tertiary';
|
|
@@ -46,6 +48,7 @@ export interface MultiChecklistItemType {
|
|
|
46
48
|
variant?: 'regular' | 'circle' | 'compressed';
|
|
47
49
|
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
48
50
|
theme?: 'light' | 'dark';
|
|
51
|
+
tooltip?: Omit<TooltipProps, 'children'>;
|
|
49
52
|
};
|
|
50
53
|
type: 'multiple';
|
|
51
54
|
alertType?: ALERT_TYPES;
|
|
@@ -1 +1 @@
|
|
|
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"),
|
|
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,9 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { TooltipProps } from '../tooltips/Tooltip';
|
|
2
3
|
interface TagProps {
|
|
3
4
|
tagText: string | number;
|
|
4
5
|
variant?: 'regular' | 'circle' | 'compressed';
|
|
5
6
|
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
6
7
|
theme?: 'light' | 'dark';
|
|
8
|
+
tooltip?: Omit<TooltipProps, 'children'>;
|
|
7
9
|
}
|
|
8
10
|
interface SimpleChecklistItemProps {
|
|
9
11
|
header: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
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,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ALERT_TYPES } from '../alerts';
|
|
3
|
+
import { TooltipProps } from '../tooltips/Tooltip';
|
|
3
4
|
export interface ChecklistItemType {
|
|
4
5
|
id: string;
|
|
5
6
|
label: string;
|
|
@@ -23,6 +24,7 @@ export interface SingleChecklistItemType {
|
|
|
23
24
|
variant?: 'regular' | 'circle' | 'compressed';
|
|
24
25
|
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
25
26
|
theme?: 'light' | 'dark';
|
|
27
|
+
tooltip?: Omit<TooltipProps, 'children'>;
|
|
26
28
|
};
|
|
27
29
|
type: 'single';
|
|
28
30
|
buttonType?: 'primary' | 'secondary' | 'tertiary';
|
|
@@ -46,6 +48,7 @@ export interface MultiChecklistItemType {
|
|
|
46
48
|
variant?: 'regular' | 'circle' | 'compressed';
|
|
47
49
|
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
48
50
|
theme?: 'light' | 'dark';
|
|
51
|
+
tooltip?: Omit<TooltipProps, 'children'>;
|
|
49
52
|
};
|
|
50
53
|
type: 'multiple';
|
|
51
54
|
alertType?: ALERT_TYPES;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useEffect as s}from"react";import{COLORS as r}from"../../constants/Theme.js";import{ActiveChecklistIcon as o}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as n}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as l}from"../../assets/icons/InactiveChecklistIcon.js";import c from"../../assets/icons/info.svg.js";import{SmallCheckIcon as a}from"../../assets/icons/SmallCheckIcon.js";import{Alert as d}from"../alerts/Alert.js";import{ALERT_TYPES as p,CONTENT_POSITION as m}from"../alerts/AlertHelper.js";import{Button as g}from"../button/Button.js";import{ProgressBarV2 as h,ProgressBarType as u}from"../progress-bar-v2/ProgressBarV2.js";import{Tag as f}from"../tag/Tag.js";import{TitleMedium as b,BodySecondary as v,TitleSmall as
|
|
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,9 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { TooltipProps } from '../tooltips/Tooltip';
|
|
2
3
|
interface TagProps {
|
|
3
4
|
tagText: string | number;
|
|
4
5
|
variant?: 'regular' | 'circle' | 'compressed';
|
|
5
6
|
type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
|
|
6
7
|
theme?: 'light' | 'dark';
|
|
8
|
+
tooltip?: Omit<TooltipProps, 'children'>;
|
|
7
9
|
}
|
|
8
10
|
interface SimpleChecklistItemProps {
|
|
9
11
|
header: string;
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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};
|