@bikdotai/bik-component-library 0.0.722 → 0.0.724

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.
@@ -22,6 +22,7 @@ export type StateComponentProps = {
22
22
  states: StateInterface;
23
23
  heading: string;
24
24
  subline: string;
25
+ errorText?: string;
25
26
  icon?: JSX.Element;
26
27
  isButtonEnabled: boolean;
27
28
  type?: ButtonTypes;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,s,n=require("../../node_modules/react/jsx-runtime.js"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/retryIcon.svg.js"),a=require("../../assets/icons/successIcon.svg.js"),x=require("../../assets/icons/warningIcon.svg.js"),c=require("../../assets/icons/state_icon.svg.js"),u=require("../button/Button.js"),p=require("../spinner/Spinner.js"),j=require("../TypographyStyle.js"),d=require("./StateComponent.styled.js");exports.StateInterface=void 0,(t=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",t.ERROR="error",t.WARNING="warning",t.LOADING="loading",t.RETRY="retry",t.INFO="info",exports.ButtonActions=void 0,(e=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",e.OTHER="other",exports.ButtonTypes=void 0,(s=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",s.DOUBLE="DOUBLE";exports.StateComponent=t=>{var e;const s=()=>l==exports.StateInterface.SUCCESS?n.jsxRuntimeExports.jsx(a.default,{}):l==exports.StateInterface.WARNING?n.jsxRuntimeExports.jsx(x.default,{}):l==exports.StateInterface.ERROR?n.jsxRuntimeExports.jsx(o.default,{}):l===exports.StateInterface.LOADING?n.jsxRuntimeExports.jsx(p.Spinner,{size:"large"}):l===exports.StateInterface.RETRY?n.jsxRuntimeExports.jsx(i.default,{}):l==exports.StateInterface.INFO?n.jsxRuntimeExports.jsx(c.default,{}):void 0,{states:l,heading:R,subline:m,icon:E=s(),isButtonEnabled:S,type:h,buttonText:g,buttonType:y,onButtonClick:I,leadingIcon:B,width:O,headerImage:L,iconWidth:T,iconHeight:C,closeButtonType:b,secondaryButtonText:f,"data-test":A}=t;return n.jsxRuntimeExports.jsxs(d.StateComponentContainer,Object.assign({width:O,"data-test":A},{children:[n.jsxRuntimeExports.jsx(d.StateIcon,Object.assign({iconWidth:T,iconHeight:C},{children:L?n.jsxRuntimeExports.jsx("img",{src:L,width:"100%",height:"auto",alt:""}):E})),n.jsxRuntimeExports.jsxs(d.StateHeading,Object.assign({size:t.size},{children:["SMALL"===t.size&&n.jsxRuntimeExports.jsx(j.TitleRegular,{children:R}),"SMALL"!==t.size&&n.jsxRuntimeExports.jsx(j.TitleMedium,{children:R})]})),n.jsxRuntimeExports.jsxs(d.StateSubline,{children:["SMALL"!==t.size&&n.jsxRuntimeExports.jsx(j.BodyPrimary,Object.assign({color:r.COLORS.content.secondary},{children:m})),"SMALL"===t.size&&n.jsxRuntimeExports.jsx(j.BodySecondary,Object.assign({color:r.COLORS.content.secondary},{children:m}))]}),null!==(e=t.children)&&void 0!==e?e:n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{}),S&&n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:n.jsxRuntimeExports.jsxs(d.ButtonContainer,Object.assign({size:t.size},{children:[h==exports.ButtonTypes.DOUBLE&&n.jsxRuntimeExports.jsx(u.Button,{"data-test":`${A}-cancel`,onClick:()=>I&&I(exports.ButtonActions.CANCEL),buttonType:b||"secondary",buttonText:f||"Cancel",matchParentWidth:!0}),n.jsxRuntimeExports.jsx(u.Button,{"data-test":`${A}-primary`,onClick:()=>I&&I(exports.ButtonActions.OTHER),buttonType:null!=y?y:"primary",LeadingIcon:B,buttonText:null!=g?g:"Retry",matchParentWidth:!0})]}))})]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,s,n=require("../../node_modules/react/jsx-runtime.js"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/retryIcon.svg.js"),a=require("../../assets/icons/state_icon.svg.js"),x=require("../../assets/icons/successIcon.svg.js"),c=require("../../assets/icons/warningIcon.svg.js"),u=require("../button/Button.js"),p=require("../spinner/Spinner.js"),j=require("../TypographyStyle.js"),d=require("./StateComponent.styled.js");exports.StateInterface=void 0,(t=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",t.ERROR="error",t.WARNING="warning",t.LOADING="loading",t.RETRY="retry",t.INFO="info",exports.ButtonActions=void 0,(e=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",e.OTHER="other",exports.ButtonTypes=void 0,(s=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",s.DOUBLE="DOUBLE";exports.StateComponent=t=>{var e;const s=()=>l==exports.StateInterface.SUCCESS?n.jsxRuntimeExports.jsx(x.default,{}):l==exports.StateInterface.WARNING?n.jsxRuntimeExports.jsx(c.default,{}):l==exports.StateInterface.ERROR?n.jsxRuntimeExports.jsx(o.default,{}):l===exports.StateInterface.LOADING?n.jsxRuntimeExports.jsx(p.Spinner,{size:"large"}):l===exports.StateInterface.RETRY?n.jsxRuntimeExports.jsx(i.default,{}):l==exports.StateInterface.INFO?n.jsxRuntimeExports.jsx(a.default,{}):void 0,{states:l,heading:R,subline:m,errorText:E,icon:S=s(),isButtonEnabled:g,type:h,buttonText:y,buttonType:I,onButtonClick:O,leadingIcon:B,width:T,headerImage:L,iconWidth:C,iconHeight:b,closeButtonType:f,secondaryButtonText:A,"data-test":v}=t;return n.jsxRuntimeExports.jsxs(d.StateComponentContainer,Object.assign({width:T,"data-test":v},{children:[n.jsxRuntimeExports.jsx(d.StateIcon,Object.assign({iconWidth:C,iconHeight:b},{children:L?n.jsxRuntimeExports.jsx("img",{src:L,width:"100%",height:"auto",alt:""}):S})),n.jsxRuntimeExports.jsxs(d.StateHeading,Object.assign({size:t.size},{children:["SMALL"===t.size&&n.jsxRuntimeExports.jsx(j.TitleRegular,{children:R}),"SMALL"!==t.size&&n.jsxRuntimeExports.jsx(j.TitleMedium,{children:R})]})),n.jsxRuntimeExports.jsxs(d.StateSubline,{children:["SMALL"!==t.size&&n.jsxRuntimeExports.jsx(j.BodyPrimary,Object.assign({color:r.COLORS.content.secondary},{children:m})),"SMALL"===t.size&&n.jsxRuntimeExports.jsx(j.BodySecondary,Object.assign({color:r.COLORS.content.secondary},{children:m})),E&&n.jsxRuntimeExports.jsx(j.BodySecondary,Object.assign({color:r.COLORS.content.negative,style:{marginTop:8,whiteSpace:"pre-line"}},{children:E}))]}),null!==(e=t.children)&&void 0!==e?e:n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{}),g&&n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:n.jsxRuntimeExports.jsxs(d.ButtonContainer,Object.assign({size:t.size},{children:[h==exports.ButtonTypes.DOUBLE&&n.jsxRuntimeExports.jsx(u.Button,{"data-test":`${v}-cancel`,onClick:()=>O&&O(exports.ButtonActions.CANCEL),buttonType:f||"secondary",buttonText:A||"Cancel",matchParentWidth:!0}),n.jsxRuntimeExports.jsx(u.Button,{"data-test":`${v}-primary`,onClick:()=>O&&O(exports.ButtonActions.OTHER),buttonType:null!=I?I:"primary",LeadingIcon:B,buttonText:null!=y?y:"Retry",matchParentWidth:!0})]}))})]}))};
@@ -1,5 +1,5 @@
1
1
  import { TagProps } from './model';
2
2
  export declare const Tag: {
3
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: TagProps): import("react/jsx-runtime").JSX.Element;
3
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: TagProps): import("react/jsx-runtime").JSX.Element;
4
4
  displayName: string;
5
5
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),i=require("react"),t=require("../tooltips/Tooltip.js"),n=require("../TypographyStyle.js"),s=require("./model.js"),a=require("./Tag.styled.js"),r=require("./themes.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=o(i);const l=i=>{let{tagText:o,LeadingIcon:l,TrailingIcon:d,onLeadingIconClicked:g,leadingIconId:p,trailingIconId:j,onTrailingIconClicked:u,theme:x="light",type:m="neutral",variant:b="regular",version:h,cursor:O,alignIcon:y,noBorder:T,tagHtmlText:E,contentPadding:I,leadingIconTooltip:C,trailingIconTooltip:R,tagColor:f}=i,w=o;const v=x;let N=m;s.ValidTagTypeMap[b][m]||(N="neutral"),"circle"===b&&"number"==typeof w&&w>99&&(w="99+");const k={height:"compressed"===b?12:16,width:"compressed"===b?12:16,color:r.getTagIconColor(x,N),style:{display:"block"}};return e.jsxRuntimeExports.jsx(a.Tag,Object.assign({cursor:O,theme:v,type:m,variant:b,version:h,alignIcon:y,noBorder:T,contentPadding:I},{children:e.jsxRuntimeExports.jsxs("div",Object.assign({className:"container"},{children:[l&&(C?e.jsxRuntimeExports.jsx(t.Tooltip,Object.assign({},C,{children:e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:c.default.createElement(l,Object.assign(Object.assign({},k),{id:p||"leading-icon"}))}))})):e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:c.default.createElement(l,Object.assign(Object.assign({},k),{id:p||"leading-icon"}))}))),E&&("ai"===m&&"light"===x?e.jsxRuntimeExports.jsx(n.AiBodyCaption,{children:E}):e.jsxRuntimeExports.jsx(n.BodyCaption,Object.assign({className:"text"},{children:E}))),!E&&""!==w&&("ai"===m&&"light"===x?e.jsxRuntimeExports.jsx(n.AiBodyCaption,{children:w}):e.jsxRuntimeExports.jsx(n.BodyCaption,Object.assign({className:"text",color:f},{children:w}))),d&&(R?e.jsxRuntimeExports.jsx(t.Tooltip,Object.assign({},R,{children:e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${j}-wrapper`||"trailing-icon-wrapper"},{children:c.default.createElement(d,Object.assign(Object.assign({},k),{id:j||"trailing-icon"}))}))})):e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${j}-wrapper`||"trailing-icon-wrapper"},{children:c.default.createElement(d,Object.assign(Object.assign({},k),{id:j||"trailing-icon"}))})))]}))}))};l.displayName="Tag",exports.Tag=l;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),i=require("react"),n=require("../tooltips/Tooltip.js"),t=require("../TypographyStyle.js"),s=require("./model.js"),r=require("./Tag.styled.js"),a=require("./themes.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=o(i);const l=i=>{let{tagText:o,LeadingIcon:l,TrailingIcon:d,onLeadingIconClicked:g,leadingIconId:j,trailingIconId:p,onTrailingIconClicked:u,theme:x="light",type:m="neutral",variant:b="regular",version:O,cursor:h,alignIcon:y,noBorder:T,tagHtmlText:E,contentPadding:f,leadingIconTooltip:I,trailingIconTooltip:C,tagColor:R,numberOfLines:w}=i,v=o;const N=x;let k=m;s.ValidTagTypeMap[b][m]||(k="neutral"),"circle"===b&&"number"==typeof v&&v>99&&(v="99+");const q={height:"compressed"===b?12:16,width:"compressed"===b?12:16,color:a.getTagIconColor(x,k),style:{display:"block"}};return e.jsxRuntimeExports.jsx(r.Tag,Object.assign({cursor:h,theme:N,type:m,variant:b,version:O,alignIcon:y,noBorder:T,contentPadding:f},{children:e.jsxRuntimeExports.jsxs("div",Object.assign({className:"container"},{children:[l&&(I?e.jsxRuntimeExports.jsx(n.Tooltip,Object.assign({},I,{children:e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:c.default.createElement(l,Object.assign(Object.assign({},q),{id:j||"leading-icon"}))}))})):e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:c.default.createElement(l,Object.assign(Object.assign({},q),{id:j||"leading-icon"}))}))),E&&("ai"===m&&"light"===x?e.jsxRuntimeExports.jsx(t.AiBodyCaption,Object.assign({numberOfLines:w},{children:E})):e.jsxRuntimeExports.jsx(t.BodyCaption,Object.assign({className:"text",numberOfLines:w},{children:E}))),!E&&""!==v&&("ai"===m&&"light"===x?e.jsxRuntimeExports.jsx(t.AiBodyCaption,Object.assign({numberOfLines:w},{children:v})):e.jsxRuntimeExports.jsx(t.BodyCaption,Object.assign({className:"text",color:R,numberOfLines:w},{children:v}))),d&&(C?e.jsxRuntimeExports.jsx(n.Tooltip,Object.assign({},C,{children:e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${p}-wrapper`||"trailing-icon-wrapper"},{children:c.default.createElement(d,Object.assign(Object.assign({},q),{id:p||"trailing-icon"}))}))})):e.jsxRuntimeExports.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${p}-wrapper`||"trailing-icon-wrapper"},{children:c.default.createElement(d,Object.assign(Object.assign({},q),{id:p||"trailing-icon"}))})))]}))}))};l.displayName="Tag",exports.Tag=l;
@@ -1,22 +1,22 @@
1
1
  import { ComponentMeta, ComponentStory } from '@storybook/react';
2
2
  declare const _default: ComponentMeta<{
3
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
3
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
4
4
  displayName: string;
5
5
  }>;
6
6
  export default _default;
7
7
  export declare const Default: ComponentStory<{
8
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
8
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
9
9
  displayName: string;
10
10
  }>;
11
11
  export declare const WithIcons: ComponentStory<{
12
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
12
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
13
13
  displayName: string;
14
14
  }>;
15
15
  export declare const WithIconTooltips: ComponentStory<{
16
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
16
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
17
17
  displayName: string;
18
18
  }>;
19
19
  export declare const DarkTheme: ComponentStory<{
20
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
20
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
21
21
  displayName: string;
22
22
  }>;
@@ -99,4 +99,5 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
99
99
  tagHtmlText?: JSX.Element;
100
100
  contentPadding?: number;
101
101
  tagColor?: string;
102
+ numberOfLines?: number;
102
103
  }
@@ -22,6 +22,7 @@ export type StateComponentProps = {
22
22
  states: StateInterface;
23
23
  heading: string;
24
24
  subline: string;
25
+ errorText?: string;
25
26
  icon?: JSX.Element;
26
27
  isButtonEnabled: boolean;
27
28
  type?: ButtonTypes;
@@ -1 +1 @@
1
- import{j as s}from"../../node_modules/react/jsx-runtime.js";import{COLORS as t}from"../../constants/Theme.js";import n from"../../assets/icons/errorIcon.svg.js";import e from"../../assets/icons/retryIcon.svg.js";import o from"../../assets/icons/successIcon.svg.js";import i from"../../assets/icons/warningIcon.svg.js";import r from"../../assets/icons/state_icon.svg.js";import{Button as c}from"../button/Button.js";import{Spinner as a}from"../spinner/Spinner.js";import{TitleRegular as j,TitleMedium as d,BodyPrimary as l,BodySecondary as m}from"../TypographyStyle.js";import{StateComponentContainer as h,StateIcon as g,StateHeading as x,StateSubline as u,ButtonContainer as p}from"./StateComponent.styled.js";var y,L,O;!function(s){s.SUCCESS="success",s.ERROR="error",s.WARNING="warning",s.LOADING="loading",s.RETRY="retry",s.INFO="info"}(y||(y={})),function(s){s.CANCEL="cancel",s.OTHER="other"}(L||(L={})),function(s){s.SINGLE="SINGLE",s.DOUBLE="DOUBLE"}(O||(O={}));const E=E=>{var b;const f=()=>I==y.SUCCESS?s.jsx(o,{}):I==y.WARNING?s.jsx(i,{}):I==y.ERROR?s.jsx(n,{}):I===y.LOADING?s.jsx(a,{size:"large"}):I===y.RETRY?s.jsx(e,{}):I==y.INFO?s.jsx(r,{}):void 0,{states:I,heading:R,subline:S,icon:T=f(),isButtonEnabled:C,type:N,buttonText:A,buttonType:v,onButtonClick:z,leadingIcon:B,width:G,headerImage:W,iconWidth:w,iconHeight:D,closeButtonType:U,secondaryButtonText:F,"data-test":H}=E;return s.jsxs(h,Object.assign({width:G,"data-test":H},{children:[s.jsx(g,Object.assign({iconWidth:w,iconHeight:D},{children:W?s.jsx("img",{src:W,width:"100%",height:"auto",alt:""}):T})),s.jsxs(x,Object.assign({size:E.size},{children:["SMALL"===E.size&&s.jsx(j,{children:R}),"SMALL"!==E.size&&s.jsx(d,{children:R})]})),s.jsxs(u,{children:["SMALL"!==E.size&&s.jsx(l,Object.assign({color:t.content.secondary},{children:S})),"SMALL"===E.size&&s.jsx(m,Object.assign({color:t.content.secondary},{children:S}))]}),null!==(b=E.children)&&void 0!==b?b:s.jsx(s.Fragment,{}),C&&s.jsx(s.Fragment,{children:s.jsxs(p,Object.assign({size:E.size},{children:[N==O.DOUBLE&&s.jsx(c,{"data-test":`${H}-cancel`,onClick:()=>z&&z(L.CANCEL),buttonType:U||"secondary",buttonText:F||"Cancel",matchParentWidth:!0}),s.jsx(c,{"data-test":`${H}-primary`,onClick:()=>z&&z(L.OTHER),buttonType:null!=v?v:"primary",LeadingIcon:B,buttonText:null!=A?A:"Retry",matchParentWidth:!0})]}))})]}))};export{L as ButtonActions,O as ButtonTypes,E as StateComponent,y as StateInterface};
1
+ import{j as t}from"../../node_modules/react/jsx-runtime.js";import{COLORS as s}from"../../constants/Theme.js";import e from"../../assets/icons/errorIcon.svg.js";import n from"../../assets/icons/retryIcon.svg.js";import o from"../../assets/icons/state_icon.svg.js";import i from"../../assets/icons/successIcon.svg.js";import r from"../../assets/icons/warningIcon.svg.js";import{Button as c}from"../button/Button.js";import{Spinner as a}from"../spinner/Spinner.js";import{TitleRegular as j,TitleMedium as l,BodyPrimary as d,BodySecondary as m}from"../TypographyStyle.js";import{StateComponentContainer as h,StateIcon as g,StateHeading as x,StateSubline as p,ButtonContainer as u}from"./StateComponent.styled.js";var y,L,O;!function(t){t.SUCCESS="success",t.ERROR="error",t.WARNING="warning",t.LOADING="loading",t.RETRY="retry",t.INFO="info"}(y||(y={})),function(t){t.CANCEL="cancel",t.OTHER="other"}(L||(L={})),function(t){t.SINGLE="SINGLE",t.DOUBLE="DOUBLE"}(O||(O={}));const b=b=>{var E;const S=()=>T==y.SUCCESS?t.jsx(i,{}):T==y.WARNING?t.jsx(r,{}):T==y.ERROR?t.jsx(e,{}):T===y.LOADING?t.jsx(a,{size:"large"}):T===y.RETRY?t.jsx(n,{}):T==y.INFO?t.jsx(o,{}):void 0,{states:T,heading:f,subline:I,errorText:R,icon:C=S(),isButtonEnabled:N,type:v,buttonText:A,buttonType:z,onButtonClick:B,leadingIcon:w,width:G,headerImage:W,iconWidth:D,iconHeight:U,closeButtonType:F,secondaryButtonText:H,"data-test":M}=b;return t.jsxs(h,Object.assign({width:G,"data-test":M},{children:[t.jsx(g,Object.assign({iconWidth:D,iconHeight:U},{children:W?t.jsx("img",{src:W,width:"100%",height:"auto",alt:""}):C})),t.jsxs(x,Object.assign({size:b.size},{children:["SMALL"===b.size&&t.jsx(j,{children:f}),"SMALL"!==b.size&&t.jsx(l,{children:f})]})),t.jsxs(p,{children:["SMALL"!==b.size&&t.jsx(d,Object.assign({color:s.content.secondary},{children:I})),"SMALL"===b.size&&t.jsx(m,Object.assign({color:s.content.secondary},{children:I})),R&&t.jsx(m,Object.assign({color:s.content.negative,style:{marginTop:8,whiteSpace:"pre-line"}},{children:R}))]}),null!==(E=b.children)&&void 0!==E?E:t.jsx(t.Fragment,{}),N&&t.jsx(t.Fragment,{children:t.jsxs(u,Object.assign({size:b.size},{children:[v==O.DOUBLE&&t.jsx(c,{"data-test":`${M}-cancel`,onClick:()=>B&&B(L.CANCEL),buttonType:F||"secondary",buttonText:H||"Cancel",matchParentWidth:!0}),t.jsx(c,{"data-test":`${M}-primary`,onClick:()=>B&&B(L.OTHER),buttonType:null!=z?z:"primary",LeadingIcon:w,buttonText:null!=A?A:"Retry",matchParentWidth:!0})]}))})]}))};export{L as ButtonActions,O as ButtonTypes,b as StateComponent,y as StateInterface};
@@ -1,5 +1,5 @@
1
1
  import { TagProps } from './model';
2
2
  export declare const Tag: {
3
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: TagProps): import("react/jsx-runtime").JSX.Element;
3
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: TagProps): import("react/jsx-runtime").JSX.Element;
4
4
  displayName: string;
5
5
  };
@@ -1 +1 @@
1
- import{j as i}from"../../node_modules/react/jsx-runtime.js";import e from"react";import{Tooltip as n}from"../tooltips/Tooltip.js";import{AiBodyCaption as t,BodyCaption as a}from"../TypographyStyle.js";import{ValidTagTypeMap as s}from"./model.js";import{Tag as r}from"./Tag.styled.js";import{getTagIconColor as c}from"./themes.js";const o=o=>{let{tagText:l,LeadingIcon:g,TrailingIcon:d,onLeadingIconClicked:j,leadingIconId:p,trailingIconId:m,onTrailingIconClicked:b,theme:h="light",type:x="neutral",variant:O="regular",version:u,cursor:I,alignIcon:T,noBorder:y,tagHtmlText:w,contentPadding:f,leadingIconTooltip:N,trailingIconTooltip:k,tagColor:C}=o,v=l;const E=h;let $=x;s[O][x]||($="neutral"),"circle"===O&&"number"==typeof v&&v>99&&(v="99+");const B={height:"compressed"===O?12:16,width:"compressed"===O?12:16,color:c(h,$),style:{display:"block"}};return i.jsx(r,Object.assign({cursor:I,theme:E,type:x,variant:O,version:u,alignIcon:T,noBorder:y,contentPadding:f},{children:i.jsxs("div",Object.assign({className:"container"},{children:[g&&(N?i.jsx(n,Object.assign({},N,{children:i.jsx("button",Object.assign({className:"icon-leading",onClick:j,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:e.createElement(g,Object.assign(Object.assign({},B),{id:p||"leading-icon"}))}))})):i.jsx("button",Object.assign({className:"icon-leading",onClick:j,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:e.createElement(g,Object.assign(Object.assign({},B),{id:p||"leading-icon"}))}))),w&&("ai"===x&&"light"===h?i.jsx(t,{children:w}):i.jsx(a,Object.assign({className:"text"},{children:w}))),!w&&""!==v&&("ai"===x&&"light"===h?i.jsx(t,{children:v}):i.jsx(a,Object.assign({className:"text",color:C},{children:v}))),d&&(k?i.jsx(n,Object.assign({},k,{children:i.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${m}-wrapper`||"trailing-icon-wrapper"},{children:e.createElement(d,Object.assign(Object.assign({},B),{id:m||"trailing-icon"}))}))})):i.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${m}-wrapper`||"trailing-icon-wrapper"},{children:e.createElement(d,Object.assign(Object.assign({},B),{id:m||"trailing-icon"}))})))]}))}))};o.displayName="Tag";export{o as Tag};
1
+ import{j as e}from"../../node_modules/react/jsx-runtime.js";import i from"react";import{Tooltip as n}from"../tooltips/Tooltip.js";import{AiBodyCaption as s,BodyCaption as t}from"../TypographyStyle.js";import{ValidTagTypeMap as a}from"./model.js";import{Tag as r}from"./Tag.styled.js";import{getTagIconColor as c}from"./themes.js";const o=o=>{let{tagText:l,LeadingIcon:g,TrailingIcon:d,onLeadingIconClicked:m,leadingIconId:j,trailingIconId:p,onTrailingIconClicked:b,theme:O="light",type:h="neutral",variant:u="regular",version:x,cursor:f,alignIcon:I,noBorder:T,tagHtmlText:y,contentPadding:w,leadingIconTooltip:N,trailingIconTooltip:k,tagColor:C,numberOfLines:L}=o,v=l;const E=O;let $=h;a[u][h]||($="neutral"),"circle"===u&&"number"==typeof v&&v>99&&(v="99+");const B={height:"compressed"===u?12:16,width:"compressed"===u?12:16,color:c(O,$),style:{display:"block"}};return e.jsx(r,Object.assign({cursor:f,theme:E,type:h,variant:u,version:x,alignIcon:I,noBorder:T,contentPadding:w},{children:e.jsxs("div",Object.assign({className:"container"},{children:[g&&(N?e.jsx(n,Object.assign({},N,{children:e.jsx("button",Object.assign({className:"icon-leading",onClick:m,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:i.createElement(g,Object.assign(Object.assign({},B),{id:j||"leading-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-leading",onClick:m,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:i.createElement(g,Object.assign(Object.assign({},B),{id:j||"leading-icon"}))}))),y&&("ai"===h&&"light"===O?e.jsx(s,Object.assign({numberOfLines:L},{children:y})):e.jsx(t,Object.assign({className:"text",numberOfLines:L},{children:y}))),!y&&""!==v&&("ai"===h&&"light"===O?e.jsx(s,Object.assign({numberOfLines:L},{children:v})):e.jsx(t,Object.assign({className:"text",color:C,numberOfLines:L},{children:v}))),d&&(k?e.jsx(n,Object.assign({},k,{children:e.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${p}-wrapper`||"trailing-icon-wrapper"},{children:i.createElement(d,Object.assign(Object.assign({},B),{id:p||"trailing-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${p}-wrapper`||"trailing-icon-wrapper"},{children:i.createElement(d,Object.assign(Object.assign({},B),{id:p||"trailing-icon"}))})))]}))}))};o.displayName="Tag";export{o as Tag};
@@ -1,22 +1,22 @@
1
1
  import { ComponentMeta, ComponentStory } from '@storybook/react';
2
2
  declare const _default: ComponentMeta<{
3
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
3
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
4
4
  displayName: string;
5
5
  }>;
6
6
  export default _default;
7
7
  export declare const Default: ComponentStory<{
8
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
8
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
9
9
  displayName: string;
10
10
  }>;
11
11
  export declare const WithIcons: ComponentStory<{
12
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
12
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
13
13
  displayName: string;
14
14
  }>;
15
15
  export declare const WithIconTooltips: ComponentStory<{
16
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
16
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
17
17
  displayName: string;
18
18
  }>;
19
19
  export declare const DarkTheme: ComponentStory<{
20
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
20
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
21
21
  displayName: string;
22
22
  }>;
@@ -99,4 +99,5 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
99
99
  tagHtmlText?: JSX.Element;
100
100
  contentPadding?: number;
101
101
  tagColor?: string;
102
+ numberOfLines?: number;
102
103
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.722",
3
+ "version": "0.0.724",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",