@bikdotai/bik-component-library 0.0.796-beta.1 → 0.0.796-beta.11
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/bik-layout/BikSidebarV2/BikSidebarV2.js +1 -1
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +50 -44
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- 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 +3 -1
- package/dist/cjs/components/tag/Tag.styled.js +1 -1
- package/dist/cjs/components/tag/model.d.ts +5 -1
- package/dist/esm/components/bik-layout/BikSidebarV2/BikSidebarV2.js +1 -1
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +37 -31
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -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 +3 -1
- package/dist/esm/components/tag/Tag.styled.js +1 -1
- package/dist/esm/components/tag/model.d.ts +5 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/Bik_logo.svg.js"),n=require("../../../assets/icons/locked.svg.js"),t=require("react"),o=require("../../progress-bar/CircularProgressBar.js"),s=require("../../../constants/Theme.js"),r=require("../../navigation-hyperlink/NavigationHyperlink.js"),l=require("./SidebarV2Popup.js"),u=require("./SidebarV2Styles.js"),d=require("./SimpleSidebarV2.js");const a=i=>{const{icon:n,isActive:t,activeStateIcon:o}=i,r=n,l=o;return e.jsx(e.Fragment,{children:t?e.jsx(l,{width:16,height:16,color:s.COLORS.content.primaryInverse}):e.jsx(r,{width:16,height:16,color:s.COLORS.content.secondaryInverse})})},c=i=>{let{option:t,index:o,onClickMainMenuLogic:s,setHandleHoverForFullLayout:r,isDisabled:l,mainActiveMenu:d,hoveredComp:c,popupMenu:v,onMouseLeaveMenuItem:p}=i;var g,h,k,y,S
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/Bik_logo.svg.js"),n=require("../../../assets/icons/locked.svg.js"),t=require("react"),o=require("../../progress-bar/CircularProgressBar.js"),s=require("../../../constants/Theme.js"),r=require("../../navigation-hyperlink/NavigationHyperlink.js"),l=require("./SidebarV2Popup.js"),u=require("./SidebarV2Styles.js"),d=require("./SimpleSidebarV2.js");const a=i=>{const{icon:n,isActive:t,activeStateIcon:o}=i,r=n,l=o;return e.jsx(e.Fragment,{children:t?e.jsx(l,{width:16,height:16,color:s.COLORS.content.primaryInverse}):e.jsx(r,{width:16,height:16,color:s.COLORS.content.secondaryInverse})})},c=i=>{let{option:t,index:o,onClickMainMenuLogic:s,setHandleHoverForFullLayout:r,isDisabled:l,mainActiveMenu:d,hoveredComp:c,popupMenu:v,onMouseLeaveMenuItem:p}=i;var g,h,k,y,M,S;return e.jsx(u.SibeBarV2MenuItem,{children:e.jsxs(u.SidebarMainMenu,Object.assign({id:(null===(h=null===(g=t.displayName)||void 0===g?void 0:g.split(" "))||void 0===h?void 0:h.join(""))||t.key.toString(),onClick:()=>!l&&s(t),onMouseEnter:()=>{r(t)},onMouseLeave:p,onFocus:()=>{},"aria-hidden":"true"},{children:[t.isNew&&e.jsx(u.SidebarNewTag,Object.assign({isLastSticky:t.isLastSticky},{children:"NEW"})),t.isLocked&&e.jsx(u.SidebarLockedChannel,Object.assign({isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky},{children:e.jsx(n.default,{height:16,width:16})})),e.jsxs(u.SidebarMenuItemInner,Object.assign({id:(null===(y=null===(k=t.displayName)||void 0===k?void 0:k.split(" "))||void 0===y?void 0:y.join(""))+"_sub"||t.key.toString()+"_sub",isActive:(null==d?void 0:d.key)===t.key,"data-active":(null==d?void 0:d.key)===t.key?"true":void 0,isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky,isHovered:t.key===(null==c?void 0:c.key),isNew:t.isNew,onMouseEnter:()=>r(t),onMouseLeave:p},{children:[e.jsx(a,{icon:t.icon,isActive:t.key==(null==d?void 0:d.key),activeStateIcon:null!==(M=t.activeIcon)&&void 0!==M?M:{},hoverStateIcon:null!==(S=t.hoverIcon)&&void 0!==S?S:{},isHovered:t.key==(null==c?void 0:c.key)||t.key==(null==v?void 0:v.key)}),e.jsx(u.SidebarMenuItemContainer,{children:e.jsx(u.SidebarMenuItemText,Object.assign({isActive:(null==t?void 0:t.key)===(null==d?void 0:d.key)},{children:t.displayName}))})]}),o)]}),o)})};exports.BikSidebarV2=n=>{const{logoSvg:s,allMenuList:a,activeMainMenu:v,activeSubMenu:p,router:g,onClickingMainMenu:h,onClickingSubMenu:k,onClickingAccessUpgradePanel:y,onClickingPopupMenuItem:M,popupMinHeight:S,isNewSidebar:m,menuStyle:b}=n,[j,L]=t.useState(v),[x,C]=t.useState(),[w,f]=t.useState(p),[I,H]=t.useState(!1),[O,N]=t.useState(),[B,E]=t.useState(),[P,q]=t.useState(),A=t.useRef(null),F=t.useMemo((()=>a.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[a]);t.useEffect((()=>{L(v)}),[v]),t.useEffect((()=>{f(p)}),[p]);const V=t.useCallback((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(N(void 0),C(void 0),H(!0),L(e),e.path||h(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?f(null==e?void 0:e.children[0]):f({}),C(void 0),setTimeout((()=>{H(!1)}),1e3))}),[h]),_=t.useCallback((e=>{var i,n;if(D(),C(void 0),N(void 0),"popup"==(null==e?void 0:e.layout)){const i=z();i&&E(i),N(e)}else{const t=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(t){const i=R(t,e);q(i)}C(e)}}),[]),R=(e,i)=>{const n=e.getBoundingClientRect();let t=n.top;if(window.innerHeight<=768)return t;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;t=n.top+e-200}return t};t.useEffect((()=>{const e=()=>{const e=z();e&&E(e),T()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const T=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},D=t.useCallback((()=>{A.current&&(clearTimeout(A.current),A.current=null)}),[]),U=t.useCallback((()=>{D(),A.current=setTimeout((()=>{C(void 0),N(void 0)}),150)}),[D]),z=()=>{var e,i;if(O){const n=(null===(i=null===(e=O.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||O.key.toString()+"_sub",t=document.getElementById(n);if(t){const e=t.getBoundingClientRect();let i=e.top;const n=null!=S?S:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e.jsxs(u.SideBarV2Container,{children:[e.jsx("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:s||e.jsx(i.default,{})})),e.jsxs(u.MainSideBarV2MenuWrapper,Object.assign({style:b},{children:[null==a?void 0:a.map(((i,n)=>{var o,s;return e.jsxs(t.Fragment,{children:[i.path?e.jsx(r.NavigationHyperlink,Object.assign({href:i.path,router:g},{children:e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:I,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:x,popupMenu:O,onMouseLeaveMenuItem:U})})):e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:I,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:x,popupMenu:O,onMouseLeaveMenuItem:U}),e.jsxs(e.Fragment,{children:["popup"===i.layout&&(null===(o=null==O?void 0:O.children)||void 0===o?void 0:o.length)&&e.jsx(l.SidebarV2Popup,{top:null!=B?B:void 0,menuList:null==O?void 0:O.children,onClickingPopupMenu:e=>{M&&M(e),N(void 0)},onMouseEnterOnMenu:D,onMouseLeaveOnMenu:U}),(null===(s=null==x?void 0:x.children)||void 0===s?void 0:s.length)&&e.jsx(d.SimpleSidebarV2,{menuList:null==x?void 0:x.children,width:200,activeMenu:w,onMouseEnterOnMenu:D,onMouseLeaveOnMenu:()=>C(void 0),left:78,postion:"fixed",header:x.displayName,theme:"brand",router:g,showAccessUpgradePanel:x.showAccessUpgradePanel,onMenuClick:(e,i)=>{f(e),L(x),C(void 0),N(void 0),i&&k(e)},onUpgrade:y,top:m&&P||0,isNewSidebar:m})]})]},n)})),"number"==typeof n.onboardingPercentage&&e.jsx(u.SibeBarV2MenuItem,{children:e.jsx(u.SidebarMainMenu,{children:e.jsx(u.SidebarMenuItemInner,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===F?0:1===F?64:128},{children:e.jsx(o.default,{percentage:n.onboardingPercentage,width:48})}))})})]}))]})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e);const n=o.default.div`
|
|
2
2
|
background-color: #28034e;
|
|
3
3
|
width: 72px;
|
|
4
4
|
justify-content: space-between;
|
|
@@ -35,14 +35,14 @@
|
|
|
35
35
|
`,p=o.default.div`
|
|
36
36
|
position: absolute;
|
|
37
37
|
right: 5px;
|
|
38
|
-
background: ${
|
|
38
|
+
background: ${r.COLORS.stroke.warning.vibrant} !important;
|
|
39
39
|
font-size: 7.7px;
|
|
40
40
|
font-family: 'Inter';
|
|
41
41
|
line-height: 10px;
|
|
42
42
|
padding: 2px 9.27px 2px 9.27px;
|
|
43
43
|
border-radius: 16px 16px 0px 16px;
|
|
44
|
-
background: ${
|
|
45
|
-
${t=>{let{isLastSticky:
|
|
44
|
+
background: ${r.COLORS.background.inverse};
|
|
45
|
+
${t=>{let{isLastSticky:r}=t;return r&&e.css`
|
|
46
46
|
@media (min-height: 768px) {
|
|
47
47
|
bottom: 116px;
|
|
48
48
|
z-index: 1;
|
|
@@ -52,13 +52,13 @@
|
|
|
52
52
|
position: absolute;
|
|
53
53
|
right: 10px;
|
|
54
54
|
margin-top: -5px;
|
|
55
|
-
${t=>{let{isLastSticky:
|
|
55
|
+
${t=>{let{isLastSticky:r}=t;return r&&e.css`
|
|
56
56
|
@media (min-height: 768px) {
|
|
57
57
|
bottom: 116px;
|
|
58
58
|
z-index: 1;
|
|
59
59
|
}
|
|
60
60
|
`}}
|
|
61
|
-
${t=>{let{is2ndLastSticky:
|
|
61
|
+
${t=>{let{is2ndLastSticky:r}=t;return r&&e.css`
|
|
62
62
|
@media (min-height: 768px) {
|
|
63
63
|
bottom: 48px;
|
|
64
64
|
z-index: 1;
|
|
@@ -74,32 +74,36 @@
|
|
|
74
74
|
> * {
|
|
75
75
|
gap: 10px;
|
|
76
76
|
}
|
|
77
|
-
padding: 8px;
|
|
77
|
+
padding: 8px 0px;
|
|
78
78
|
|
|
79
|
-
${t=>{let{isNew:
|
|
79
|
+
${t=>{let{isNew:r}=t;return r&&e.css`
|
|
80
80
|
padding-top: 14px;
|
|
81
81
|
`}}
|
|
82
82
|
|
|
83
|
-
${t=>{let{isActive:
|
|
83
|
+
${t=>{let{isActive:i}=t;return i&&e.css`
|
|
84
84
|
border-radius: 8px;
|
|
85
|
-
background-color: ${
|
|
86
|
-
color: ${
|
|
87
|
-
box-shadow: inset 0 0 0 1px ${
|
|
85
|
+
background-color: ${r.BASE_COLORS.brand[850]};
|
|
86
|
+
color: ${r.COLORS.content.primaryInverse};
|
|
87
|
+
box-shadow: inset 0 0 0 1px ${r.COLORS.stroke.brandSubdued};
|
|
88
88
|
`}}
|
|
89
89
|
|
|
90
|
-
${t=>{let{isHovered:
|
|
91
|
-
background: ${
|
|
90
|
+
${t=>{let{isHovered:i}=t;return i&&e.css`
|
|
91
|
+
background: ${r.COLORS.background.brandHovered};
|
|
92
92
|
border-radius: 8px;
|
|
93
93
|
`}}
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
&:hover:not([data-active='true']) {
|
|
96
|
+
background: ${r.COLORS.background.brandHovered};
|
|
97
|
+
border-radius: 8px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
${t=>{let{isActive:i,isHovered:o}=t;return i&&o&&e.css`
|
|
96
101
|
border-radius: 8px;
|
|
97
|
-
|
|
98
|
-
background-color: ${
|
|
102
|
+
box-shadow: inset 0 0 0 1px ${r.BASE_COLORS.brand[700]};
|
|
103
|
+
background-color: ${r.BASE_COLORS.brand[800]};
|
|
99
104
|
`}}
|
|
100
105
|
|
|
101
|
-
|
|
102
|
-
${t=>{let{isLastSticky:i}=t;return i&&e.css`
|
|
106
|
+
${t=>{let{isLastSticky:r}=t;return r&&e.css`
|
|
103
107
|
@media (min-height: 768px) {
|
|
104
108
|
position: absolute;
|
|
105
109
|
bottom: 72px;
|
|
@@ -108,7 +112,7 @@
|
|
|
108
112
|
}
|
|
109
113
|
`}}
|
|
110
114
|
|
|
111
|
-
${t=>{let{is2ndLastSticky:
|
|
115
|
+
${t=>{let{is2ndLastSticky:r}=t;return r&&e.css`
|
|
112
116
|
@media (min-height: 768px) {
|
|
113
117
|
position: absolute;
|
|
114
118
|
bottom: 8px;
|
|
@@ -117,21 +121,23 @@
|
|
|
117
121
|
}
|
|
118
122
|
`}}
|
|
119
123
|
|
|
120
|
-
${t=>{let{stickyBottom:
|
|
124
|
+
${t=>{let{stickyBottom:r}=t;return void 0!==r&&e.css`
|
|
121
125
|
@media (min-height: 768px) {
|
|
122
126
|
position: absolute;
|
|
123
|
-
bottom: ${
|
|
127
|
+
bottom: ${r}px;
|
|
124
128
|
left: 6px;
|
|
125
129
|
right: 6px;
|
|
126
130
|
}
|
|
127
131
|
`}}
|
|
128
|
-
`,
|
|
132
|
+
`,u=o.default.div`
|
|
129
133
|
display: flex;
|
|
130
134
|
flex-direction: row;
|
|
135
|
+
width: 100%;
|
|
131
136
|
cursor: pointer;
|
|
132
|
-
`,
|
|
137
|
+
`,c=o.default(t.BodyTiny)`
|
|
133
138
|
user-select: none;
|
|
134
|
-
|
|
139
|
+
width: 100%;
|
|
140
|
+
color: ${e=>{let{isActive:t}=e;return t?r.COLORS.content.primaryInverse:r.COLORS.content.secondaryInverse}};
|
|
135
141
|
margin-bottom: 0px;
|
|
136
142
|
text-align: center;
|
|
137
143
|
`,l=o.default.div`
|
|
@@ -155,7 +161,7 @@
|
|
|
155
161
|
left: ${e=>e.left?e.left:0}px; //72
|
|
156
162
|
width: ${e=>e.width?e.width:240}px;
|
|
157
163
|
z-index: ${e=>e.zIndex?e.zIndex:2};
|
|
158
|
-
background-color: ${e=>"brand"==e.theme?
|
|
164
|
+
background-color: ${e=>"brand"==e.theme?r.COLORS.background.inverse:r.COLORS.surface.standard};
|
|
159
165
|
height: ${e=>e.isNewSidebar?"fit-content":"100vh"};
|
|
160
166
|
display: flex;
|
|
161
167
|
flex-direction: column;
|
|
@@ -177,15 +183,15 @@
|
|
|
177
183
|
justify-content: flex-start;
|
|
178
184
|
margin-bottom: ${e=>e.isNewSidebar?"":"8px"};
|
|
179
185
|
cursor: pointer;
|
|
180
|
-
background: ${e=>"brand"==e.theme?
|
|
186
|
+
background: ${e=>"brand"==e.theme?r.COLORS.background.inverse:"transparent"};
|
|
181
187
|
border-radius: 4px;
|
|
182
188
|
.sub-child-text {
|
|
183
|
-
color: ${e=>"brand"==e.theme?
|
|
189
|
+
color: ${e=>"brand"==e.theme?r.COLORS.surface.standard:""};
|
|
184
190
|
margin-bottom: 0px;
|
|
185
191
|
padding: 8px 12px;
|
|
186
|
-
font-size: ${
|
|
187
|
-
line-height: ${
|
|
188
|
-
font-weight: ${
|
|
192
|
+
font-size: ${r.FONTS.caption.fontSize}px;
|
|
193
|
+
line-height: ${r.FONTS.caption.lineHeight}px;
|
|
194
|
+
font-weight: ${r.FONTS.caption.fontWeight};
|
|
189
195
|
white-space: nowrap;
|
|
190
196
|
overflow: hidden;
|
|
191
197
|
text-overflow: ellipsis;
|
|
@@ -205,35 +211,35 @@
|
|
|
205
211
|
}
|
|
206
212
|
.active-bold-weight {
|
|
207
213
|
font-weight: 600;
|
|
208
|
-
color: ${e=>e.isNewSidebar?
|
|
214
|
+
color: ${e=>e.isNewSidebar?r.COLORS.background.warning.vibrant:""};
|
|
209
215
|
}
|
|
210
216
|
.sub-child-active-menu-style {
|
|
211
|
-
color: ${e=>e.isNewSidebar?
|
|
217
|
+
color: ${e=>e.isNewSidebar?r.COLORS.background.warning.vibrant:""};
|
|
212
218
|
}
|
|
213
219
|
}
|
|
214
220
|
.sub-child-menu:hover {
|
|
215
|
-
background: ${e=>"brand"==e.theme?
|
|
221
|
+
background: ${e=>"brand"==e.theme?r.COLORS.background.brandHovered:r.COLORS.background.base};
|
|
216
222
|
border-radius: 4px;
|
|
217
223
|
}
|
|
218
224
|
.sub-child-active-menu {
|
|
219
|
-
background: ${e=>"brand"==e.theme?
|
|
225
|
+
background: ${e=>"brand"==e.theme?r.COLORS.background.brandHovered:r.COLORS.background.base};
|
|
220
226
|
border-radius: 4px;
|
|
221
|
-
border: ${e=>"brand"==e.theme?`1px solid ${
|
|
227
|
+
border: ${e=>"brand"==e.theme?`1px solid ${r.COLORS.stroke.brandSubdued}`:"none"};
|
|
222
228
|
.sub-child-active-text {
|
|
223
|
-
background: ${e=>"brand"==e.theme?
|
|
229
|
+
background: ${e=>"brand"==e.theme?r.COLORS.stroke.brandSubdued:r.COLORS.background.warning.vibrant};
|
|
224
230
|
}
|
|
225
231
|
}
|
|
226
232
|
.sub-child-active-menu:hover {
|
|
227
|
-
background: ${e=>"brand"==e.theme?
|
|
233
|
+
background: ${e=>"brand"==e.theme?r.COLORS.background.inverseLight:r.COLORS.background.base};
|
|
228
234
|
border-radius: 4px;
|
|
229
|
-
border: ${e=>"brand"==e.theme?`1px solid ${
|
|
235
|
+
border: ${e=>"brand"==e.theme?`1px solid ${r.COLORS.stroke.brandSubdued}`:"none"};
|
|
230
236
|
.sub-child-active-text {
|
|
231
|
-
background: ${e=>"brand"==e.theme?
|
|
237
|
+
background: ${e=>"brand"==e.theme?r.COLORS.stroke.brandSubdued:r.COLORS.background.warning.vibrant};
|
|
232
238
|
}
|
|
233
239
|
}
|
|
234
240
|
.sub-child-display-name {
|
|
235
241
|
padding: 14px 12px;
|
|
236
|
-
color: ${e=>"brand"==e.theme?
|
|
242
|
+
color: ${e=>"brand"==e.theme?r.COLORS.content.secondaryInverse:r.COLORS.text.secondary};
|
|
237
243
|
}
|
|
238
244
|
.lower-sticky-panel {
|
|
239
245
|
position: ${e=>e.isNewSidebar?"relative":"absolute"};
|
|
@@ -261,7 +267,7 @@
|
|
|
261
267
|
bottom: 10px;
|
|
262
268
|
left: ${e=>e.left?e.left:0}px; //72
|
|
263
269
|
z-index: ${e=>e.zIndex?e.zIndex:2};
|
|
264
|
-
background-color: ${e=>"brand"==e.theme?"#381062":
|
|
270
|
+
background-color: ${e=>"brand"==e.theme?"#381062":r.COLORS.surface.standard};
|
|
265
271
|
display: flex;
|
|
266
272
|
flex-direction: column;
|
|
267
273
|
padding: 4px;
|
|
@@ -280,8 +286,8 @@
|
|
|
280
286
|
cursor: pointer;
|
|
281
287
|
max-width: 320px;
|
|
282
288
|
&:hover {
|
|
283
|
-
background-color: ${
|
|
289
|
+
background-color: ${r.COLORS.background.base};
|
|
284
290
|
border-radius: 8px;
|
|
285
291
|
}
|
|
286
292
|
}
|
|
287
|
-
`;exports.MainSideBarV2MenuWrapper=a,exports.SibeBarV2MenuItem=d,exports.SideBarV2Container=n,exports.SidebarLockedChannel=b,exports.SidebarMainMenu=s,exports.SidebarMenuItemContainer=
|
|
293
|
+
`;exports.MainSideBarV2MenuWrapper=a,exports.SibeBarV2MenuItem=d,exports.SideBarV2Container=n,exports.SidebarLockedChannel=b,exports.SidebarMainMenu=s,exports.SidebarMenuItemContainer=u,exports.SidebarMenuItemInner=x,exports.SidebarMenuItemText=c,exports.SidebarNewTag=p,exports.SidebarV2PopupContainer=g,exports.SimpleSidebarV2Container=l;
|
|
@@ -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, 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"),
|
|
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, 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, 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, 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, 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, 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
|
}>;
|
|
@@ -7,11 +7,13 @@ export declare const Tag: import("@emotion/styled").StyledComponent<{
|
|
|
7
7
|
theme: TagTheme;
|
|
8
8
|
type: TagType;
|
|
9
9
|
variant: TagVariant;
|
|
10
|
-
version?: "1.0" | "2.0" | "3.0" |
|
|
10
|
+
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
11
11
|
cursor?: string | undefined;
|
|
12
12
|
alignIcon?: string | undefined;
|
|
13
13
|
noBorder?: boolean | undefined;
|
|
14
14
|
contentPadding?: number | undefined;
|
|
15
|
+
padding?: string | undefined;
|
|
16
|
+
height?: number | undefined;
|
|
15
17
|
backgroundColor?: string | undefined;
|
|
16
18
|
borderRadius?: string | number | undefined;
|
|
17
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;
|
|
@@ -92,7 +92,11 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
|
|
|
92
92
|
*/
|
|
93
93
|
leadingIconTooltip?: Omit<TooltipProps, 'children'>;
|
|
94
94
|
tagText: string | number;
|
|
95
|
-
version?: '1.0' | '2.0' | '3.0'
|
|
95
|
+
version?: '1.0' | '2.0' | '3.0';
|
|
96
|
+
/** Custom CSS padding string, e.g. '4px 8px' */
|
|
97
|
+
padding?: string;
|
|
98
|
+
/** Custom height in px */
|
|
99
|
+
height?: number;
|
|
96
100
|
cursor?: string;
|
|
97
101
|
alignIcon?: string;
|
|
98
102
|
noBorder?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../../assets/icons/Bik_logo.svg.js";import t from"../../../assets/icons/locked.svg.js";import{useState as l,useRef as s,useMemo as r,useEffect as d,useCallback as
|
|
1
|
+
import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../../assets/icons/Bik_logo.svg.js";import t from"../../../assets/icons/locked.svg.js";import{useState as l,useRef as s,useMemo as r,useEffect as d,useCallback as u,Fragment as c}from"react";import a from"../../progress-bar/CircularProgressBar.js";import{COLORS as v}from"../../../constants/Theme.js";import{NavigationHyperlink as p}from"../../navigation-hyperlink/NavigationHyperlink.js";import{SidebarV2Popup as g}from"./SidebarV2Popup.js";import{SideBarV2Container as h,MainSideBarV2MenuWrapper as m,SibeBarV2MenuItem as y,SidebarMainMenu as k,SidebarMenuItemInner as M,SidebarNewTag as b,SidebarLockedChannel as L,SidebarMenuItemContainer as S,SidebarMenuItemText as w}from"./SidebarV2Styles.js";import{SimpleSidebarV2 as j}from"./SimpleSidebarV2.js";const f=t=>{const{logoSvg:v,allMenuList:b,activeMainMenu:L,activeSubMenu:S,router:w,onClickingMainMenu:f,onClickingSubMenu:C,onClickingAccessUpgradePanel:I,onClickingPopupMenuItem:N,popupMinHeight:O,isNewSidebar:P,menuStyle:A}=t,[E,B]=l(L),[F,_]=l(),[x,D]=l(S),[T,U]=l(!1),[R,V]=l(),[z,K]=l(),[W,q]=l(),G=s(null),J=r((()=>b.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[b]);d((()=>{B(L)}),[L]),d((()=>{D(S)}),[S]);const Q=u((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(V(void 0),_(void 0),U(!0),B(e),e.path||f(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?D(null==e?void 0:e.children[0]):D({}),_(void 0),setTimeout((()=>{U(!1)}),1e3))}),[f]),X=u((e=>{var i,n;if($(),_(void 0),V(void 0),"popup"==(null==e?void 0:e.layout)){const i=ie();i&&K(i),V(e)}else{const o=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(o){const i=Y(o,e);q(i)}_(e)}}),[]),Y=(e,i)=>{const n=e.getBoundingClientRect();let o=n.top;if(window.innerHeight<=768)return o;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;o=n.top+e-200}return o};d((()=>{const e=()=>{const e=ie();e&&K(e),Z()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const Z=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},$=u((()=>{G.current&&(clearTimeout(G.current),G.current=null)}),[]),ee=u((()=>{$(),G.current=setTimeout((()=>{_(void 0),V(void 0)}),150)}),[$]),ie=()=>{var e,i;if(R){const n=(null===(i=null===(e=R.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||R.key.toString()+"_sub",o=document.getElementById(n);if(o){const e=o.getBoundingClientRect();let i=e.top;const n=null!=O?O:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e(h,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:v||i(o,{})})),e(m,Object.assign({style:A},{children:[null==b?void 0:b.map(((o,t)=>{var l,s;return e(c,{children:[o.path?i(p,Object.assign({href:o.path,router:w},{children:i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:E,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee})})):i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:E,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee}),e(n,{children:["popup"===o.layout&&(null===(l=null==R?void 0:R.children)||void 0===l?void 0:l.length)&&i(g,{top:null!=z?z:void 0,menuList:null==R?void 0:R.children,onClickingPopupMenu:e=>{N&&N(e),V(void 0)},onMouseEnterOnMenu:$,onMouseLeaveOnMenu:ee}),(null===(s=null==F?void 0:F.children)||void 0===s?void 0:s.length)&&i(j,{menuList:null==F?void 0:F.children,width:200,activeMenu:x,onMouseEnterOnMenu:$,onMouseLeaveOnMenu:()=>_(void 0),left:78,postion:"fixed",header:F.displayName,theme:"brand",router:w,showAccessUpgradePanel:F.showAccessUpgradePanel,onMenuClick:(e,i)=>{D(e),B(F),_(void 0),V(void 0),i&&C(e)},onUpgrade:I,top:P&&W||0,isNewSidebar:P})]})]},t)})),"number"==typeof t.onboardingPercentage&&i(y,{children:i(k,{children:i(M,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===J?0:1===J?64:128},{children:i(a,{percentage:t.onboardingPercentage,width:48})}))})})]}))]})},C=e=>{const{icon:o,isActive:t,activeStateIcon:l}=e,s=o;return i(n,{children:t?i(l,{width:16,height:16,color:v.content.primaryInverse}):i(s,{width:16,height:16,color:v.content.secondaryInverse})})},H=n=>{let{option:o,index:l,onClickMainMenuLogic:s,setHandleHoverForFullLayout:r,isDisabled:d,mainActiveMenu:u,hoveredComp:c,popupMenu:a,onMouseLeaveMenuItem:v}=n;var p,g,h,m,j,f;return i(y,{children:e(k,Object.assign({id:(null===(g=null===(p=o.displayName)||void 0===p?void 0:p.split(" "))||void 0===g?void 0:g.join(""))||o.key.toString(),onClick:()=>!d&&s(o),onMouseEnter:()=>{r(o)},onMouseLeave:v,onFocus:()=>{},"aria-hidden":"true"},{children:[o.isNew&&i(b,Object.assign({isLastSticky:o.isLastSticky},{children:"NEW"})),o.isLocked&&i(L,Object.assign({isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky},{children:i(t,{height:16,width:16})})),e(M,Object.assign({id:(null===(m=null===(h=o.displayName)||void 0===h?void 0:h.split(" "))||void 0===m?void 0:m.join(""))+"_sub"||o.key.toString()+"_sub",isActive:(null==u?void 0:u.key)===o.key,"data-active":(null==u?void 0:u.key)===o.key?"true":void 0,isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky,isHovered:o.key===(null==c?void 0:c.key),isNew:o.isNew,onMouseEnter:()=>r(o),onMouseLeave:v},{children:[i(C,{icon:o.icon,isActive:o.key==(null==u?void 0:u.key),activeStateIcon:null!==(j=o.activeIcon)&&void 0!==j?j:{},hoverStateIcon:null!==(f=o.hoverIcon)&&void 0!==f?f:{},isHovered:o.key==(null==c?void 0:c.key)||o.key==(null==a?void 0:a.key)}),i(S,{children:i(w,Object.assign({isActive:(null==o?void 0:o.key)===(null==u?void 0:u.key)},{children:o.displayName}))})]}),l)]}),l)})};export{f as BikSidebarV2};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as
|
|
1
|
+
import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as r,BASE_COLORS as o,FONTS as n}from"../../../constants/Theme.js";const d=e.div`
|
|
2
2
|
background-color: #28034e;
|
|
3
3
|
width: 72px;
|
|
4
4
|
justify-content: space-between;
|
|
@@ -35,13 +35,13 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
35
35
|
`,b=e.div`
|
|
36
36
|
position: absolute;
|
|
37
37
|
right: 5px;
|
|
38
|
-
background: ${
|
|
38
|
+
background: ${r.stroke.warning.vibrant} !important;
|
|
39
39
|
font-size: 7.7px;
|
|
40
40
|
font-family: 'Inter';
|
|
41
41
|
line-height: 10px;
|
|
42
42
|
padding: 2px 9.27px 2px 9.27px;
|
|
43
43
|
border-radius: 16px 16px 0px 16px;
|
|
44
|
-
background: ${
|
|
44
|
+
background: ${r.background.inverse};
|
|
45
45
|
${e=>{let{isLastSticky:i}=e;return i&&t`
|
|
46
46
|
@media (min-height: 768px) {
|
|
47
47
|
bottom: 116px;
|
|
@@ -74,7 +74,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
74
74
|
> * {
|
|
75
75
|
gap: 10px;
|
|
76
76
|
}
|
|
77
|
-
padding: 8px;
|
|
77
|
+
padding: 8px 0px;
|
|
78
78
|
|
|
79
79
|
${e=>{let{isNew:i}=e;return i&&t`
|
|
80
80
|
padding-top: 14px;
|
|
@@ -82,23 +82,27 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
82
82
|
|
|
83
83
|
${e=>{let{isActive:i}=e;return i&&t`
|
|
84
84
|
border-radius: 8px;
|
|
85
|
-
background-color: ${
|
|
86
|
-
color: ${
|
|
87
|
-
box-shadow: inset 0 0 0 1px ${
|
|
85
|
+
background-color: ${o.brand[850]};
|
|
86
|
+
color: ${r.content.primaryInverse};
|
|
87
|
+
box-shadow: inset 0 0 0 1px ${r.stroke.brandSubdued};
|
|
88
88
|
`}}
|
|
89
89
|
|
|
90
90
|
${e=>{let{isHovered:i}=e;return i&&t`
|
|
91
|
-
background: ${
|
|
91
|
+
background: ${r.background.brandHovered};
|
|
92
92
|
border-radius: 8px;
|
|
93
93
|
`}}
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
&:hover:not([data-active='true']) {
|
|
96
|
+
background: ${r.background.brandHovered};
|
|
97
|
+
border-radius: 8px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
${e=>{let{isActive:i,isHovered:r}=e;return i&&r&&t`
|
|
96
101
|
border-radius: 8px;
|
|
97
|
-
|
|
98
|
-
background-color: ${
|
|
102
|
+
box-shadow: inset 0 0 0 1px ${o.brand[700]};
|
|
103
|
+
background-color: ${o.brand[800]};
|
|
99
104
|
`}}
|
|
100
105
|
|
|
101
|
-
|
|
102
106
|
${e=>{let{isLastSticky:i}=e;return i&&t`
|
|
103
107
|
@media (min-height: 768px) {
|
|
104
108
|
position: absolute;
|
|
@@ -125,13 +129,15 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
125
129
|
right: 6px;
|
|
126
130
|
}
|
|
127
131
|
`}}
|
|
128
|
-
`,
|
|
132
|
+
`,u=e.div`
|
|
129
133
|
display: flex;
|
|
130
134
|
flex-direction: row;
|
|
135
|
+
width: 100%;
|
|
131
136
|
cursor: pointer;
|
|
132
|
-
`,
|
|
137
|
+
`,l=e(i)`
|
|
133
138
|
user-select: none;
|
|
134
|
-
|
|
139
|
+
width: 100%;
|
|
140
|
+
color: ${e=>{let{isActive:t}=e;return t?r.content.primaryInverse:r.content.secondaryInverse}};
|
|
135
141
|
margin-bottom: 0px;
|
|
136
142
|
text-align: center;
|
|
137
143
|
`,g=e.div`
|
|
@@ -155,7 +161,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
155
161
|
left: ${e=>e.left?e.left:0}px; //72
|
|
156
162
|
width: ${e=>e.width?e.width:240}px;
|
|
157
163
|
z-index: ${e=>e.zIndex?e.zIndex:2};
|
|
158
|
-
background-color: ${e=>"brand"==e.theme?
|
|
164
|
+
background-color: ${e=>"brand"==e.theme?r.background.inverse:r.surface.standard};
|
|
159
165
|
height: ${e=>e.isNewSidebar?"fit-content":"100vh"};
|
|
160
166
|
display: flex;
|
|
161
167
|
flex-direction: column;
|
|
@@ -177,10 +183,10 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
177
183
|
justify-content: flex-start;
|
|
178
184
|
margin-bottom: ${e=>e.isNewSidebar?"":"8px"};
|
|
179
185
|
cursor: pointer;
|
|
180
|
-
background: ${e=>"brand"==e.theme?
|
|
186
|
+
background: ${e=>"brand"==e.theme?r.background.inverse:"transparent"};
|
|
181
187
|
border-radius: 4px;
|
|
182
188
|
.sub-child-text {
|
|
183
|
-
color: ${e=>"brand"==e.theme?
|
|
189
|
+
color: ${e=>"brand"==e.theme?r.surface.standard:""};
|
|
184
190
|
margin-bottom: 0px;
|
|
185
191
|
padding: 8px 12px;
|
|
186
192
|
font-size: ${n.caption.fontSize}px;
|
|
@@ -205,35 +211,35 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
205
211
|
}
|
|
206
212
|
.active-bold-weight {
|
|
207
213
|
font-weight: 600;
|
|
208
|
-
color: ${e=>e.isNewSidebar?
|
|
214
|
+
color: ${e=>e.isNewSidebar?r.background.warning.vibrant:""};
|
|
209
215
|
}
|
|
210
216
|
.sub-child-active-menu-style {
|
|
211
|
-
color: ${e=>e.isNewSidebar?
|
|
217
|
+
color: ${e=>e.isNewSidebar?r.background.warning.vibrant:""};
|
|
212
218
|
}
|
|
213
219
|
}
|
|
214
220
|
.sub-child-menu:hover {
|
|
215
|
-
background: ${e=>"brand"==e.theme?
|
|
221
|
+
background: ${e=>"brand"==e.theme?r.background.brandHovered:r.background.base};
|
|
216
222
|
border-radius: 4px;
|
|
217
223
|
}
|
|
218
224
|
.sub-child-active-menu {
|
|
219
|
-
background: ${e=>"brand"==e.theme?
|
|
225
|
+
background: ${e=>"brand"==e.theme?r.background.brandHovered:r.background.base};
|
|
220
226
|
border-radius: 4px;
|
|
221
|
-
border: ${e=>"brand"==e.theme?`1px solid ${
|
|
227
|
+
border: ${e=>"brand"==e.theme?`1px solid ${r.stroke.brandSubdued}`:"none"};
|
|
222
228
|
.sub-child-active-text {
|
|
223
|
-
background: ${e=>"brand"==e.theme?
|
|
229
|
+
background: ${e=>"brand"==e.theme?r.stroke.brandSubdued:r.background.warning.vibrant};
|
|
224
230
|
}
|
|
225
231
|
}
|
|
226
232
|
.sub-child-active-menu:hover {
|
|
227
|
-
background: ${e=>"brand"==e.theme?
|
|
233
|
+
background: ${e=>"brand"==e.theme?r.background.inverseLight:r.background.base};
|
|
228
234
|
border-radius: 4px;
|
|
229
|
-
border: ${e=>"brand"==e.theme?`1px solid ${
|
|
235
|
+
border: ${e=>"brand"==e.theme?`1px solid ${r.stroke.brandSubdued}`:"none"};
|
|
230
236
|
.sub-child-active-text {
|
|
231
|
-
background: ${e=>"brand"==e.theme?
|
|
237
|
+
background: ${e=>"brand"==e.theme?r.stroke.brandSubdued:r.background.warning.vibrant};
|
|
232
238
|
}
|
|
233
239
|
}
|
|
234
240
|
.sub-child-display-name {
|
|
235
241
|
padding: 14px 12px;
|
|
236
|
-
color: ${e=>"brand"==e.theme?
|
|
242
|
+
color: ${e=>"brand"==e.theme?r.content.secondaryInverse:r.text.secondary};
|
|
237
243
|
}
|
|
238
244
|
.lower-sticky-panel {
|
|
239
245
|
position: ${e=>e.isNewSidebar?"relative":"absolute"};
|
|
@@ -261,7 +267,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
261
267
|
bottom: 10px;
|
|
262
268
|
left: ${e=>e.left?e.left:0}px; //72
|
|
263
269
|
z-index: ${e=>e.zIndex?e.zIndex:2};
|
|
264
|
-
background-color: ${e=>"brand"==e.theme?"#381062":
|
|
270
|
+
background-color: ${e=>"brand"==e.theme?"#381062":r.surface.standard};
|
|
265
271
|
display: flex;
|
|
266
272
|
flex-direction: column;
|
|
267
273
|
padding: 4px;
|
|
@@ -280,8 +286,8 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
280
286
|
cursor: pointer;
|
|
281
287
|
max-width: 320px;
|
|
282
288
|
&:hover {
|
|
283
|
-
background-color: ${
|
|
289
|
+
background-color: ${r.background.base};
|
|
284
290
|
border-radius: 8px;
|
|
285
291
|
}
|
|
286
292
|
}
|
|
287
|
-
`;export{a as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,d as SideBarV2Container,x as SidebarLockedChannel,s as SidebarMainMenu,
|
|
293
|
+
`;export{a as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,d as SideBarV2Container,x as SidebarLockedChannel,s as SidebarMainMenu,u as SidebarMenuItemContainer,c as SidebarMenuItemInner,l as SidebarMenuItemText,b as SidebarNewTag,m as SidebarV2PopupContainer,g as SimpleSidebarV2Container};
|
|
@@ -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, 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, 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, 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, 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, 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, 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
|
}>;
|
|
@@ -7,11 +7,13 @@ export declare const Tag: import("@emotion/styled").StyledComponent<{
|
|
|
7
7
|
theme: TagTheme;
|
|
8
8
|
type: TagType;
|
|
9
9
|
variant: TagVariant;
|
|
10
|
-
version?: "1.0" | "2.0" | "3.0" |
|
|
10
|
+
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
11
11
|
cursor?: string | undefined;
|
|
12
12
|
alignIcon?: string | undefined;
|
|
13
13
|
noBorder?: boolean | undefined;
|
|
14
14
|
contentPadding?: number | undefined;
|
|
15
|
+
padding?: string | undefined;
|
|
16
|
+
height?: number | undefined;
|
|
15
17
|
backgroundColor?: string | undefined;
|
|
16
18
|
borderRadius?: string | number | undefined;
|
|
17
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};
|
|
@@ -92,7 +92,11 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
|
|
|
92
92
|
*/
|
|
93
93
|
leadingIconTooltip?: Omit<TooltipProps, 'children'>;
|
|
94
94
|
tagText: string | number;
|
|
95
|
-
version?: '1.0' | '2.0' | '3.0'
|
|
95
|
+
version?: '1.0' | '2.0' | '3.0';
|
|
96
|
+
/** Custom CSS padding string, e.g. '4px 8px' */
|
|
97
|
+
padding?: string;
|
|
98
|
+
/** Custom height in px */
|
|
99
|
+
height?: number;
|
|
96
100
|
cursor?: string;
|
|
97
101
|
alignIcon?: string;
|
|
98
102
|
noBorder?: boolean;
|