@bikdotai/bik-component-library 0.0.786-beta.7 → 0.0.786-beta.9
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/SidebarV2Styles.js +4 -4
- package/dist/cjs/components/icon-button/IconButton.js +1 -1
- package/dist/cjs/components/icon-button/IconButton.styled.d.ts +1 -0
- package/dist/cjs/components/icon-button/IconButton.styled.js +3 -3
- package/dist/cjs/components/icon-button/model.d.ts +5 -0
- package/dist/cjs/components/whats-new/WhatsNew.d.ts +1 -0
- package/dist/cjs/components/whats-new/WhatsNew.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNew.types.d.ts +1 -0
- package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +9 -9
- package/dist/esm/components/icon-button/IconButton.js +1 -1
- package/dist/esm/components/icon-button/IconButton.styled.d.ts +1 -0
- package/dist/esm/components/icon-button/IconButton.styled.js +1 -1
- package/dist/esm/components/icon-button/model.d.ts +5 -0
- package/dist/esm/components/whats-new/WhatsNew.d.ts +1 -0
- package/dist/esm/components/whats-new/WhatsNew.js +1 -1
- package/dist/esm/components/whats-new/WhatsNew.types.d.ts +1 -0
- package/dist/esm/components/whats-new/WhatsNewButton.js +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
top: 0;
|
|
7
7
|
left: 0;
|
|
8
8
|
z-index: 10;
|
|
9
|
-
overflow-y:
|
|
9
|
+
overflow-y: hidden;
|
|
10
10
|
height: 100vh;
|
|
11
11
|
|
|
12
12
|
.bik-header-logo {
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
`,a=o.default.div`
|
|
27
27
|
margin: 0px 0px 16px;
|
|
28
28
|
`,d=o.default.div``,s=o.default.div`
|
|
29
|
-
|
|
30
|
-
padding: 0px
|
|
29
|
+
position: relative;
|
|
30
|
+
padding: 0px 6px;
|
|
31
31
|
margin-bottom: 6px;
|
|
32
32
|
> * {
|
|
33
33
|
gap: 4px;
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
position: absolute;
|
|
162
162
|
right: 100%;
|
|
163
163
|
top: 0;
|
|
164
|
-
width:
|
|
164
|
+
width: 6px;
|
|
165
165
|
height: 100%;
|
|
166
166
|
}
|
|
167
167
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),i=require("../tooltips/Tooltip.js"),r=require("./IconButton.styled.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),i=require("../tooltips/Tooltip.js"),r=require("./IconButton.styled.js"),d=require("./theme.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(o);const s=o.forwardRef(((o,l)=>{var{id:s,iconButtonType:c="default",Icon:a,height:u=20,width:b=20,bordered:y,disabled:p,isSelected:j,style:g,svgStyle:h,iconColor:f,iconPadding:v,disabledTooltip:B}=o,I=e.__rest(o,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","iconPadding","disabledTooltip"]);const T=d.getIconColor(c,p,j),q=t.jsx(r.IconButton,Object.assign({id:s,ref:l,style:g,iconButtonType:c,bordered:y,disabled:p,isSelected:j,iconPadding:v},I,{children:n.default.createElement(a,{height:u,width:b,color:f||T,style:Object.assign({display:"block"},null!=h?h:{})})}));return p&&B?t.jsx(i.Tooltip,Object.assign({body:B},{children:t.jsx("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:q}))})):q}));s.displayName="IconButton",exports.IconButton=s;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),
|
|
2
|
-
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding:
|
|
3
|
-
`;exports.IconButton=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./theme.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const r=o(t).default.button`
|
|
2
|
+
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${void 0!==t.iconPadding?t.iconPadding:6}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.COLORS.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${e.generateBackgroundColor(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
|
|
3
|
+
`;exports.IconButton=r;
|
|
@@ -40,5 +40,10 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
40
40
|
*/
|
|
41
41
|
isSelected?: boolean;
|
|
42
42
|
iconColor?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Custom padding for the icon button container
|
|
45
|
+
* @default 6
|
|
46
|
+
*/
|
|
47
|
+
iconPadding?: number;
|
|
43
48
|
disabledTooltip?: string;
|
|
44
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./WhatsNewButton.js"),o=require("./WhatsNewPanel.js"),s=require("./WhatsNewProvider.js");exports.WhatsNew=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./WhatsNewButton.js"),o=require("./WhatsNewPanel.js"),s=require("./WhatsNewProvider.js");exports.WhatsNew=i=>{let{title:r="What's new",tooltip:a="What's new",searchPlaceholder:c="Search posts",emptyStateTitle:u="Nothing new!",emptyStateDescription:h="There are no new updates or features at the moment. Check back soon!",noResultsText:l="Sorry, no results found.",width:d="480px",onContentClick:w,renderCustomContent:C,buttonTestId:p="whats-new-button",iconWidth:m=24,iconHeight:W=24,iconColor:x,iconPadding:g,customIcon:N}=i;const[j,P]=t.useState(!1),{whatsNewContent:S,isLoading:y,newContentCount:T}=s.useWhatsNewContext();return e.jsxs(e.Fragment,{children:[e.jsx(n.WhatsNewButton,{onClick:()=>P(!0),newContentCount:T,isOpen:j,isLoading:y,tooltip:a,testId:p,iconWidth:m,iconHeight:W,iconColor:x,iconPadding:g,customIcon:N}),e.jsx(o.WhatsNewPanel,{isOpen:j,onClose:()=>P(!1),content:S,isLoading:y,title:r,searchPlaceholder:c,emptyStateTitle:u,emptyStateDescription:h,noResultsText:l,width:d,onContentClick:e=>{w&&w(e)},renderCustomContent:C})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),n=require("../../constants/Theme.js"),s=require("../icon-button/IconButton.js"),i=require("../tooltips/Tooltip.js"),o=require("./WhatsNew.styles.js");exports.WhatsNewButton=r=>{let{onClick:a,newContentCount:c=0,isOpen:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),n=require("../../constants/Theme.js"),s=require("../icon-button/IconButton.js"),i=require("../tooltips/Tooltip.js"),o=require("./WhatsNew.styles.js");exports.WhatsNewButton=r=>{let{onClick:a,newContentCount:c=0,isOpen:d=!1,isLoading:l=!1,tooltip:u="What's new",testId:h="whats-new-button",iconWidth:j=24,iconHeight:p=24,iconColor:x,iconPadding:b,customIcon:g}=r;return l?t.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t.jsxs(o.WhatsNewIconContainer,Object.assign({count:c},{children:[t.jsx(i.Tooltip,Object.assign({body:u,placement:"bottom"},{children:t.jsx(s.IconButton,{Icon:null!=g?g:e.default,width:j,height:p,isSelected:d,iconColor:null!=x?x:d?n.COLORS.content.brand:n.COLORS.content.primary,onClick:a,"data-testid":h})})),c>0&&t.jsx("div",Object.assign({className:"notification--count"},{children:t.jsx("div",Object.assign({className:"count--text"},{children:c}))}))]}))};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as o,BASE_COLORS as r,FONTS as n}from"../../../constants/Theme.js";const
|
|
1
|
+
import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as o,BASE_COLORS as r,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;
|
|
@@ -6,7 +6,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
6
6
|
top: 0;
|
|
7
7
|
left: 0;
|
|
8
8
|
z-index: 10;
|
|
9
|
-
overflow-y:
|
|
9
|
+
overflow-y: hidden;
|
|
10
10
|
height: 100vh;
|
|
11
11
|
|
|
12
12
|
.bik-header-logo {
|
|
@@ -23,11 +23,11 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
23
23
|
object-fit: container;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
`,
|
|
26
|
+
`,a=e.div`
|
|
27
27
|
margin: 0px 0px 16px;
|
|
28
28
|
`,p=e.div``,s=e.div`
|
|
29
|
-
|
|
30
|
-
padding: 0px
|
|
29
|
+
position: relative;
|
|
30
|
+
padding: 0px 6px;
|
|
31
31
|
margin-bottom: 6px;
|
|
32
32
|
> * {
|
|
33
33
|
gap: 4px;
|
|
@@ -120,11 +120,11 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
120
120
|
width: 85%;
|
|
121
121
|
}
|
|
122
122
|
`}}
|
|
123
|
-
`,
|
|
123
|
+
`,l=e.div`
|
|
124
124
|
display: flex;
|
|
125
125
|
flex-direction: row;
|
|
126
126
|
cursor: pointer;
|
|
127
|
-
`,
|
|
127
|
+
`,u=e(i)`
|
|
128
128
|
user-select: none;
|
|
129
129
|
color: ${e=>{let{isActive:t}=e;return t?o.content.primaryInverse:o.content.secondaryInverse}};
|
|
130
130
|
margin-bottom: 0px;
|
|
@@ -161,7 +161,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
161
161
|
position: absolute;
|
|
162
162
|
right: 100%;
|
|
163
163
|
top: 0;
|
|
164
|
-
width:
|
|
164
|
+
width: 6px;
|
|
165
165
|
height: 100%;
|
|
166
166
|
}
|
|
167
167
|
}
|
|
@@ -279,4 +279,4 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
279
279
|
border-radius: 8px;
|
|
280
280
|
}
|
|
281
281
|
}
|
|
282
|
-
`;export{
|
|
282
|
+
`;export{a as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,d as SideBarV2Container,c as SidebarLockedChannel,s as SidebarMainMenu,l as SidebarMenuItemContainer,x as SidebarMenuItemInner,u as SidebarMenuItemText,b as SidebarNewTag,m as SidebarV2PopupContainer,g as SimpleSidebarV2Container};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as
|
|
1
|
+
import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as d}from"../tooltips/Tooltip.js";import{IconButton as l}from"./IconButton.styled.js";import{getIconColor as n}from"./theme.js";const s=i(((i,s)=>{var{id:r,iconButtonType:c="default",Icon:a,height:p=20,width:b=20,bordered:m,disabled:y,isSelected:h,style:g,svgStyle:u,iconColor:j,iconPadding:f,disabledTooltip:B}=i,T=t(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","iconPadding","disabledTooltip"]);const I=n(c,y,h),S=e(l,Object.assign({id:r,ref:s,style:g,iconButtonType:c,bordered:m,disabled:y,isSelected:h,iconPadding:f},T,{children:o.createElement(a,{height:p,width:b,color:j||I,style:Object.assign({display:"block"},null!=u?u:{})})}));return y&&B?e(d,Object.assign({body:B},{children:e("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:S}))})):S}));s.displayName="IconButton";export{s as IconButton};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import t from"styled-components";import{COLORS as n}from"../../constants/Theme.js";import{generateBackgroundColor as o}from"./theme.js";const r=t.button`
|
|
2
|
-
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding:
|
|
2
|
+
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${void 0!==t.iconPadding?t.iconPadding:6}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
|
|
3
3
|
`;export{r as IconButton};
|
|
@@ -40,5 +40,10 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
40
40
|
*/
|
|
41
41
|
isSelected?: boolean;
|
|
42
42
|
iconColor?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Custom padding for the icon button container
|
|
45
|
+
* @default 6
|
|
46
|
+
*/
|
|
47
|
+
iconPadding?: number;
|
|
43
48
|
disabledTooltip?: string;
|
|
44
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const c=c=>{let{title:a="What's new",tooltip:h="What's new",searchPlaceholder:l="Search posts",emptyStateTitle:
|
|
1
|
+
import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const c=c=>{let{title:a="What's new",tooltip:h="What's new",searchPlaceholder:l="Search posts",emptyStateTitle:d="Nothing new!",emptyStateDescription:m="There are no new updates or features at the moment. Check back soon!",noResultsText:p="Sorry, no results found.",width:C="480px",onContentClick:u,renderCustomContent:w,buttonTestId:g="whats-new-button",iconWidth:f=24,iconHeight:W=24,iconColor:P,iconPadding:S,customIcon:T}=c;const[k,x]=n(!1),{whatsNewContent:y,isLoading:N,newContentCount:j}=r();return t(e,{children:[o(i,{onClick:()=>x(!0),newContentCount:j,isOpen:k,isLoading:N,tooltip:h,testId:g,iconWidth:f,iconHeight:W,iconColor:P,iconPadding:S,customIcon:T}),o(s,{isOpen:k,onClose:()=>x(!1),content:y,isLoading:N,title:a,searchPlaceholder:l,emptyStateTitle:d,emptyStateDescription:m,noResultsText:p,width:C,onContentClick:t=>{u&&u(t)},renderCustomContent:w})]})};export{c as WhatsNew};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/whatsNew.svg.js";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as e}from"../icon-button/IconButton.js";import{Tooltip as s}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as r}from"./WhatsNew.styles.js";const c=c=>{let{onClick:a,newContentCount:
|
|
1
|
+
import{jsxs as t,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/whatsNew.svg.js";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as e}from"../icon-button/IconButton.js";import{Tooltip as s}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as r}from"./WhatsNew.styles.js";const c=c=>{let{onClick:a,newContentCount:d=0,isOpen:l=!1,isLoading:m=!1,tooltip:p="What's new",testId:h="whats-new-button",iconWidth:f=24,iconHeight:g=24,iconColor:b,iconPadding:u,customIcon:j}=c;return m?t("div",Object.assign({style:{margin:"0px 8px"}},{children:[n("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),n("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t(r,Object.assign({count:d},{children:[n(s,Object.assign({body:p,placement:"bottom"},{children:n(e,{Icon:null!=j?j:o,width:f,height:g,isSelected:l,iconColor:null!=b?b:l?i.content.brand:i.content.primary,onClick:a,"data-testid":h})})),d>0&&n("div",Object.assign({className:"notification--count"},{children:n("div",Object.assign({className:"count--text"},{children:d}))}))]}))};export{c as WhatsNewButton};
|