@bikdotai/bik-component-library 0.0.796-beta.4 → 0.0.796-beta.6
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/tag/Tag.d.ts +1 -1
- package/dist/cjs/components/tag/Tag.js +1 -1
- package/dist/cjs/components/tag/Tag.stories.d.ts +5 -5
- package/dist/cjs/components/tag/Tag.styled.d.ts +1 -0
- package/dist/cjs/components/tag/Tag.styled.js +1 -1
- package/dist/cjs/components/tag/model.d.ts +2 -0
- package/dist/esm/components/tag/Tag.d.ts +1 -1
- package/dist/esm/components/tag/Tag.js +1 -1
- package/dist/esm/components/tag/Tag.stories.d.ts +5 -5
- package/dist/esm/components/tag/Tag.styled.d.ts +1 -0
- package/dist/esm/components/tag/Tag.styled.js +1 -1
- package/dist/esm/components/tag/model.d.ts +2 -0
- package/package.json +1 -1
|
@@ -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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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("react/jsx-runtime"),i=require("react"),n=require("../tooltips/Tooltip.js"),a=require("../TypographyStyle.js"),s=require("./model.js"),t=require("./Tag.styled.js"),r=require("./themes.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(i);const o=i=>{let{tagText:c,LeadingIcon:o,TrailingIcon:d,onLeadingIconClicked:g,leadingIconId:j,trailingIconId:b,onTrailingIconClicked:u,theme:p="light",type:m="neutral",variant:O="regular",version:h,cursor:x,alignIcon:y,noBorder:T,tagHtmlText:f,contentPadding:C,padding:I,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),n=require("../tooltips/Tooltip.js"),a=require("../TypographyStyle.js"),s=require("./model.js"),t=require("./Tag.styled.js"),r=require("./themes.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(i);const o=i=>{let{tagText:c,LeadingIcon:o,TrailingIcon:d,onLeadingIconClicked:g,leadingIconId:j,trailingIconId:b,onTrailingIconClicked:u,theme:p="light",type:m="neutral",variant:O="regular",version:h,cursor:x,alignIcon:y,noBorder:T,tagHtmlText:f,contentPadding:C,padding:I,height:L,leadingIconTooltip:B,trailingIconTooltip:N,tagColor:k,numberOfLines:w,backgroundColor:v,borderRadius:q,size:A="regular"}=i,E=c;const $=p;let P=m;s.ValidTagTypeMap[O][m]||(P="neutral"),"circle"===O&&"number"==typeof E&&E>99&&(E="99+");const z={height:"compressed"===O?12:16,width:"compressed"===O?12:16,color:r.getTagIconColor(p,P),style:{display:"block"}};return e.jsx(t.Tag,Object.assign({cursor:x,theme:$,type:P,variant:O,version:h,alignIcon:y,noBorder:T,contentPadding:C,padding:I,height:L,backgroundColor:v,borderRadius:q,size:A},{children:e.jsxs("div",Object.assign({className:"container"},{children:[o&&(B?e.jsx(n.Tooltip,Object.assign({},B,{children:e.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:l.default.createElement(o,Object.assign(Object.assign({},z),{id:j||"leading-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-leading",onClick:g,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:l.default.createElement(o,Object.assign(Object.assign({},z),{id:j||"leading-icon"}))}))),f&&("ai"===m&&"light"===p?"small"===A?e.jsx(a.AiBodyTiny,Object.assign({numberOfLines:w},{children:f})):e.jsx(a.AiBodyCaption,Object.assign({numberOfLines:w},{children:f})):"small"===A?e.jsx(a.BodyTiny,Object.assign({className:"text",numberOfLines:w},{children:f})):e.jsx(a.BodyCaption,Object.assign({className:"text",numberOfLines:w},{children:f}))),!f&&""!==E&&("ai"===m&&"light"===p?"small"===A?e.jsx(a.AiBodyTiny,Object.assign({numberOfLines:w},{children:E})):e.jsx(a.AiBodyCaption,Object.assign({numberOfLines:w},{children:E})):"small"===A?e.jsx(a.BodyTiny,Object.assign({className:"text",color:k,numberOfLines:w},{children:E})):e.jsx(a.BodyCaption,Object.assign({className:"text",color:k,numberOfLines:w},{children:E}))),d&&(N?e.jsx(n.Tooltip,Object.assign({},N,{children:e.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${b}-wrapper`||"trailing-icon-wrapper"},{children:l.default.createElement(d,Object.assign(Object.assign({},z),{id:b||"trailing-icon"}))}))})):e.jsx("button",Object.assign({className:"icon-trailing",onClick:u,id:`${b}-wrapper`||"trailing-icon-wrapper"},{children:l.default.createElement(d,Object.assign(Object.assign({},z),{id:b||"trailing-icon"}))})))]}))}))};o.displayName="Tag",exports.Tag=o;
|
|
@@ -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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
}>;
|
|
@@ -13,6 +13,7 @@ export declare const Tag: import("@emotion/styled").StyledComponent<{
|
|
|
13
13
|
noBorder?: boolean | undefined;
|
|
14
14
|
contentPadding?: number | undefined;
|
|
15
15
|
padding?: string | undefined;
|
|
16
|
+
height?: number | undefined;
|
|
16
17
|
backgroundColor?: string | undefined;
|
|
17
18
|
borderRadius?: string | number | undefined;
|
|
18
19
|
size?: "small" | "regular" | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),g=require("./themes.js");function I(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}const b=I(c).default("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var g;return null!==(g=c.cursor)&&void 0!==g?g:"default"}),";",(c=>"small"!==c.size&&("regular"===c.variant?"display: block;\n\t\t min-height: 26px;\n\t\t":"min-height: 20px;"))," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;",(c=>c.height?`height: ${c.height}px; box-sizing: border-box;`:"small"===c.size?"height: 16px; box-sizing: border-box;":"")," padding:",(c=>c.padding?c.padding:"small"===c.size?"2px 6px":c.contentPadding?`${c.contentPadding}px`:g.getPadding(c.variant)),";background:",(c=>{var I;return null!==(I=c.backgroundColor)&&void 0!==I?I:g.getBackgroundColor(c.theme,c.type)}),";border-radius:",(c=>void 0!==c.borderRadius?"number"==typeof c.borderRadius?`${c.borderRadius}px`:c.borderRadius:"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${g.generateBorder(c.type,c.theme)};`)," .text{color:",(c=>g.getTextColor(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnNpemUgIT09ICdzbWFsbCcgJiZcclxuICAgIChwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/IGBkaXNwbGF5OiBibG9jaztcblx0XHQgICAgIG1pbi1oZWlnaHQ6IDI2cHg7XG5cdFx0YFxyXG4gICAgICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YCl9XG5cdC5jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYWxpZ25JY29uID8gcHJvcHMuYWxpZ25JY29uIDogJ2NlbnRlcicpfTtcblx0XHRnYXA6IDZweDtcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuaGVpZ2h0XHJcbiAgICA/IGBoZWlnaHQ6ICR7cHJvcHMuaGVpZ2h0fXB4OyBib3gtc2l6aW5nOiBib3JkZXItYm94O2BcclxuICAgIDogcHJvcHMuc2l6ZSA9PT0gJ3NtYWxsJ1xyXG4gICAgICAgID8gJ2hlaWdodDogMTZweDsgYm94LXNpemluZzogYm9yZGVyLWJveDsnXHJcbiAgICAgICAgOiAnJ31cblx0XHRwYWRkaW5nOiAkeyhwcm9wcykgPT4gcHJvcHMucGFkZGluZ1xyXG4gICAgPyBwcm9wcy5wYWRkaW5nXHJcbiAgICA6IHByb3BzLnNpemUgPT09ICdzbWFsbCdcclxuICAgICAgICA/ICcycHggNnB4J1xyXG4gICAgICAgIDogcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgICAgICAgICAgPyBgJHtwcm9wcy5jb250ZW50UGFkZGluZ31weGBcclxuICAgICAgICAgICAgOiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4geyB2YXIgX2E7IHJldHVybiAoX2EgPSBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IpICE9PSBudWxsICYmIF9hICE9PSB2b2lkIDAgPyBfYSA6IGdldEJhY2tncm91bmRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSk7IH19O1xuXG5cdFx0Ym9yZGVyLXJhZGl1czogJHsocHJvcHMpID0+IHByb3BzLmJvcmRlclJhZGl1cyAhPT0gdW5kZWZpbmVkXHJcbiAgICA/IHR5cGVvZiBwcm9wcy5ib3JkZXJSYWRpdXMgPT09ICdudW1iZXInXHJcbiAgICAgICAgPyBgJHtwcm9wcy5ib3JkZXJSYWRpdXN9cHhgXHJcbiAgICAgICAgOiBwcm9wcy5ib3JkZXJSYWRpdXNcclxuICAgIDogcHJvcHMudmFyaWFudCA9PT0gJ3JlZ3VsYXInXHJcbiAgICAgICAgPyAnNHB4J1xyXG4gICAgICAgIDogJzEycHgnfTtcblxuXHRcdCR7KHByb3BzKSA9PiAhcHJvcHMubm9Cb3JkZXIgJiZcclxuICAgIHByb3BzLnRoZW1lID09PSAnbGlnaHQnICYmXHJcbiAgICBgYm9yZGVyOiAke3Byb3BzLnZlcnNpb24gPT09ICcyLjAnID8gMC41IDogMX1weCBzb2xpZCAke2dlbmVyYXRlQm9yZGVyKHByb3BzLnR5cGUsIHByb3BzLnRoZW1lKX07YH1cblxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0VGV4dENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cdFx0fVxuXG5cdFx0Lmljb24tdHJhaWxpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXG5cdFx0Lmljb24tbGVhZGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRhZy5zdHlsZWQuanMubWFwIl19 */"));exports.Tag=b;
|
|
@@ -95,6 +95,8 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
|
|
|
95
95
|
version?: '1.0' | '2.0' | '3.0';
|
|
96
96
|
/** Custom CSS padding string, e.g. '4px 8px' */
|
|
97
97
|
padding?: string;
|
|
98
|
+
/** Custom height in px */
|
|
99
|
+
height?: number;
|
|
98
100
|
cursor?: string;
|
|
99
101
|
alignIcon?: string;
|
|
100
102
|
noBorder?: boolean;
|
|
@@ -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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: TagProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as a}from"../tooltips/Tooltip.js";import{AiBodyTiny as r,AiBodyCaption as t,BodyTiny as s,BodyCaption as c}from"../TypographyStyle.js";import{ValidTagTypeMap as o}from"./model.js";import{Tag as l}from"./Tag.styled.js";import{getTagIconColor as g}from"./themes.js";const d=d=>{let{tagText:m,LeadingIcon:p,TrailingIcon:b,onLeadingIconClicked:
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as a}from"../tooltips/Tooltip.js";import{AiBodyTiny as r,AiBodyCaption as t,BodyTiny as s,BodyCaption as c}from"../TypographyStyle.js";import{ValidTagTypeMap as o}from"./model.js";import{Tag as l}from"./Tag.styled.js";import{getTagIconColor as g}from"./themes.js";const d=d=>{let{tagText:m,LeadingIcon:p,TrailingIcon:b,onLeadingIconClicked:h,leadingIconId:j,trailingIconId:O,onTrailingIconClicked:u,theme:f="light",type:I="neutral",variant:T="regular",version:y,cursor:k,alignIcon:w,noBorder:C,tagHtmlText:N,contentPadding:L,padding:x,height:v,leadingIconTooltip:E,trailingIconTooltip:$,tagColor:z,numberOfLines:B,backgroundColor:P,borderRadius:R,size:H="regular"}=d,S=m;const q=f;let A=I;o[T][I]||(A="neutral"),"circle"===T&&"number"==typeof S&&S>99&&(S="99+");const D={height:"compressed"===T?12:16,width:"compressed"===T?12:16,color:g(f,A),style:{display:"block"}};return e(l,Object.assign({cursor:k,theme:q,type:A,variant:T,version:y,alignIcon:w,noBorder:C,contentPadding:L,padding:x,height:v,backgroundColor:P,borderRadius:R,size:H},{children:i("div",Object.assign({className:"container"},{children:[p&&(E?e(a,Object.assign({},E,{children:e("button",Object.assign({className:"icon-leading",onClick:h,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},D),{id:j||"leading-icon"}))}))})):e("button",Object.assign({className:"icon-leading",onClick:h,id:`${j}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(p,Object.assign(Object.assign({},D),{id:j||"leading-icon"}))}))),N&&("ai"===I&&"light"===f?e("small"===H?r:t,Object.assign({numberOfLines:B},{children:N})):e("small"===H?s:c,Object.assign({className:"text",numberOfLines:B},{children:N}))),!N&&""!==S&&("ai"===I&&"light"===f?e("small"===H?r:t,Object.assign({numberOfLines:B},{children:S})):e("small"===H?s:c,Object.assign({className:"text",color:z,numberOfLines:B},{children:S}))),b&&($?e(a,Object.assign({},$,{children:e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${O}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},D),{id:O||"trailing-icon"}))}))})):e("button",Object.assign({className:"icon-trailing",onClick:u,id:`${O}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(b,Object.assign(Object.assign({},D),{id:O||"trailing-icon"}))})))]}))}))};d.displayName="Tag";export{d 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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: 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, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
}>;
|
|
@@ -13,6 +13,7 @@ export declare const Tag: import("@emotion/styled").StyledComponent<{
|
|
|
13
13
|
noBorder?: boolean | undefined;
|
|
14
14
|
contentPadding?: number | undefined;
|
|
15
15
|
padding?: string | undefined;
|
|
16
|
+
height?: number | undefined;
|
|
16
17
|
backgroundColor?: string | undefined;
|
|
17
18
|
borderRadius?: string | number | undefined;
|
|
18
19
|
size?: "small" | "regular" | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import c from"@emotion/styled/base";import{getPadding as
|
|
1
|
+
import c from"@emotion/styled/base";import{getPadding as g,getBackgroundColor as I,generateBorder as b,getTextColor as l}from"./themes.js";const i=c("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var g;return null!==(g=c.cursor)&&void 0!==g?g:"default"}),";",(c=>"small"!==c.size&&("regular"===c.variant?"display: block;\n\t\t min-height: 26px;\n\t\t":"min-height: 20px;"))," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;",(c=>c.height?`height: ${c.height}px; box-sizing: border-box;`:"small"===c.size?"height: 16px; box-sizing: border-box;":"")," padding:",(c=>c.padding?c.padding:"small"===c.size?"2px 6px":c.contentPadding?`${c.contentPadding}px`:g(c.variant)),";background:",(c=>{var g;return null!==(g=c.backgroundColor)&&void 0!==g?g:I(c.theme,c.type)}),";border-radius:",(c=>void 0!==c.borderRadius?"number"==typeof c.borderRadius?`${c.borderRadius}px`:c.borderRadius:"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${b(c.type,c.theme)};`)," .text{color:",(c=>l(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnNpemUgIT09ICdzbWFsbCcgJiZcclxuICAgIChwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/IGBkaXNwbGF5OiBibG9jaztcblx0XHQgICAgIG1pbi1oZWlnaHQ6IDI2cHg7XG5cdFx0YFxyXG4gICAgICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YCl9XG5cdC5jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYWxpZ25JY29uID8gcHJvcHMuYWxpZ25JY29uIDogJ2NlbnRlcicpfTtcblx0XHRnYXA6IDZweDtcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuaGVpZ2h0XHJcbiAgICA/IGBoZWlnaHQ6ICR7cHJvcHMuaGVpZ2h0fXB4OyBib3gtc2l6aW5nOiBib3JkZXItYm94O2BcclxuICAgIDogcHJvcHMuc2l6ZSA9PT0gJ3NtYWxsJ1xyXG4gICAgICAgID8gJ2hlaWdodDogMTZweDsgYm94LXNpemluZzogYm9yZGVyLWJveDsnXHJcbiAgICAgICAgOiAnJ31cblx0XHRwYWRkaW5nOiAkeyhwcm9wcykgPT4gcHJvcHMucGFkZGluZ1xyXG4gICAgPyBwcm9wcy5wYWRkaW5nXHJcbiAgICA6IHByb3BzLnNpemUgPT09ICdzbWFsbCdcclxuICAgICAgICA/ICcycHggNnB4J1xyXG4gICAgICAgIDogcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgICAgICAgICAgPyBgJHtwcm9wcy5jb250ZW50UGFkZGluZ31weGBcclxuICAgICAgICAgICAgOiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4geyB2YXIgX2E7IHJldHVybiAoX2EgPSBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IpICE9PSBudWxsICYmIF9hICE9PSB2b2lkIDAgPyBfYSA6IGdldEJhY2tncm91bmRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSk7IH19O1xuXG5cdFx0Ym9yZGVyLXJhZGl1czogJHsocHJvcHMpID0+IHByb3BzLmJvcmRlclJhZGl1cyAhPT0gdW5kZWZpbmVkXHJcbiAgICA/IHR5cGVvZiBwcm9wcy5ib3JkZXJSYWRpdXMgPT09ICdudW1iZXInXHJcbiAgICAgICAgPyBgJHtwcm9wcy5ib3JkZXJSYWRpdXN9cHhgXHJcbiAgICAgICAgOiBwcm9wcy5ib3JkZXJSYWRpdXNcclxuICAgIDogcHJvcHMudmFyaWFudCA9PT0gJ3JlZ3VsYXInXHJcbiAgICAgICAgPyAnNHB4J1xyXG4gICAgICAgIDogJzEycHgnfTtcblxuXHRcdCR7KHByb3BzKSA9PiAhcHJvcHMubm9Cb3JkZXIgJiZcclxuICAgIHByb3BzLnRoZW1lID09PSAnbGlnaHQnICYmXHJcbiAgICBgYm9yZGVyOiAke3Byb3BzLnZlcnNpb24gPT09ICcyLjAnID8gMC41IDogMX1weCBzb2xpZCAke2dlbmVyYXRlQm9yZGVyKHByb3BzLnR5cGUsIHByb3BzLnRoZW1lKX07YH1cblxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0VGV4dENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cdFx0fVxuXG5cdFx0Lmljb24tdHJhaWxpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXG5cdFx0Lmljb24tbGVhZGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRhZy5zdHlsZWQuanMubWFwIl19 */"));export{i as Tag};
|
|
@@ -95,6 +95,8 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
|
|
|
95
95
|
version?: '1.0' | '2.0' | '3.0';
|
|
96
96
|
/** Custom CSS padding string, e.g. '4px 8px' */
|
|
97
97
|
padding?: string;
|
|
98
|
+
/** Custom height in px */
|
|
99
|
+
height?: number;
|
|
98
100
|
cursor?: string;
|
|
99
101
|
alignIcon?: string;
|
|
100
102
|
noBorder?: boolean;
|