@bikdotai/bik-component-library 0.0.825-2 → 0.0.825-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/whats-new/WhatsNew.styles.js +10 -7
- package/dist/cjs/components/whats-new/WhatsNew.styles.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNewButton.js +2 -2
- package/dist/cjs/components/whats-new/WhatsNewButton.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNew.styles.js +21 -18
- package/dist/esm/components/whats-new/WhatsNew.styles.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNewButton.js +11 -11
- package/dist/esm/components/whats-new/WhatsNewButton.js.map +1 -1
- package/package.json +1 -1
|
@@ -19,24 +19,27 @@
|
|
|
19
19
|
background: ${t.COLORS.background.base};
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
/* tag-circle badge — Figma node 9496:35458 */
|
|
22
23
|
.notification--count {
|
|
23
24
|
box-sizing: border-box;
|
|
24
25
|
position: absolute;
|
|
25
|
-
right:
|
|
26
|
-
top:
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
right: 4px;
|
|
27
|
+
top: 2px;
|
|
28
|
+
min-width: 12px;
|
|
29
|
+
height: 12px;
|
|
30
|
+
padding: 2px 3px;
|
|
31
|
+
border-radius: 12px;
|
|
30
32
|
background: ${t.COLORS.background.negative.vibrant};
|
|
31
|
-
border:
|
|
33
|
+
border: 1px solid ${t.COLORS.surface.standard};
|
|
32
34
|
display: flex;
|
|
33
35
|
justify-content: center;
|
|
34
36
|
align-items: center;
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
.count--text {
|
|
40
|
+
font-family: 'Inter';
|
|
38
41
|
font-size: 8px;
|
|
39
|
-
line-height:
|
|
42
|
+
line-height: 8px;
|
|
40
43
|
font-weight: 400;
|
|
41
44
|
color: ${t.COLORS.surface.standard};
|
|
42
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright:
|
|
1
|
+
{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t/* tag-circle badge — Figma node 9496:35458 */\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: 4px;\n\t\ttop: 2px;\n\t\tmin-width: 12px;\n\t\theight: 12px;\n\t\tpadding: 2px 3px;\n\t\tborder-radius: 12px;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.count--text {\n\t\tfont-family: 'Inter';\n\t\tfont-size: 8px;\n\t\tline-height: 8px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.surface.standard};\n\t}\n`;\n\nexport const WhatsNewWrapper = styled.div`\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tmax-height: calc(100vh - 60px);\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 6px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground: ${COLORS.content.inactive};\n\t\tborder-radius: 3px;\n\t\tmin-height: 30px;\n\t}\n\n\t.icon--wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.base};\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.no--data--found {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\theight: 300px;\n\t\ttext-align: center;\n\t\tpadding: 24px;\n\t}\n\n\t.text--align {\n\t\ttext-align: center;\n\t}\n\n\t.scroller {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 16px;\n\t\tpadding: 16px 0;\n\t}\n\n\t.full--width {\n\t\twidth: 100%;\n\t}\n\n\t.flex {\n\t\tdisplay: flex;\n\t}\n\n\t.flex--row {\n\t\tflex-direction: row;\n\t}\n\n\t.flex--column {\n\t\tflex-direction: column;\n\t}\n\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt-20 {\n\t\tmargin-top: 20px;\n\t}\n\n\t.mt--8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt--12 {\n\t\tmargin-top: 12px;\n\t}\n\n\t.mb-mt-8 {\n\t\tmargin-bottom: 8px;\n\t\tmargin-top: 8px;\n\t}\n\n\t.padding--16 {\n\t\tpadding: 16px;\n\t}\n\n\t.card--desc {\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tfont-size: 12px;\n\t\tcolor: ${COLORS.content.secondary};\n\n\t\tp {\n\t\t\tmargin-bottom: 0px;\n\t\t}\n\t}\n\n\t.created--at {\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n\n\t.new--content--tag {\n\t\tpadding: 2px 6px;\n\t\tgap: 4px;\n\t\tborder-radius: 14px;\n\t\tbackground: ${COLORS.background.warning.vibrant};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin-right: 8px;\n\t}\n`;\n\nexport const MainContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport const MainCardContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t}\n`;\n\nexport const BackgroundImageContainer = styled.div<{\n\timageUrl: string;\n\theight?: string;\n\twidth?: string;\n}>`\n\tbackground-image: url(${(props) => props.imageUrl});\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\theight: ${(props) => props.height || '200px'};\n\twidth: ${(props) => props.width || '100%'};\n\tborder-radius: 4px;\n`;\n"],"names":["WhatsNewIconContainer","styled","COLORS","WhatsNewWrapper","MainContainer","MainCardContainer","BackgroundImageContainer","props"],"mappings":"0NAGaA,EAAwBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAc5BC,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,gBAI5BA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBA,SAAO,WAAW,SAAS,OAAO;AAAA,sBAC5BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWlCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAIrBC,EAAkBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYvBA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsE3BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBnBA,SAAO,WAAW,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCE,EAAgBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBI,EAAoBJ,EAAAA,QAAO;AAAA,eACzBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY7BI,EAA2BL,EAAAA,QAAO;AAAA,yBAKrBM,GAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,WAItCA,GAAUA,EAAM,QAAU,OAAO;AAAA,UAClCA,GAAUA,EAAM,OAAS,MAAM;AAAA;AAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("../../constants/Theme.js"),h=require("./WhatsNew.styles.js"),m=require("../tooltips/Tooltip.js"),x=require("../icon-button/IconButton.js"),f=require("../../icons/Legacy - Bikayi specific/Services/Marketing.js"),p=({onClick:o,newContentCount:e=0,isOpen:i=!1,isLoading:s=!1,tooltip:r="What's new",testId:a="whats-new-button",iconWidth:c=24,iconHeight:d=24,iconColor:l,iconPadding:j,customIcon:u})=>s?t.jsxs("div",{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:`
|
|
2
2
|
@keyframes spin {
|
|
3
3
|
0% { transform: rotate(0deg); }
|
|
4
4
|
100% { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
|
-
`})]}):t.jsxs(
|
|
6
|
+
`})]}):t.jsxs(h.WhatsNewIconContainer,{count:e,children:[t.jsx(m.Tooltip,{body:r,placement:"bottom",children:t.jsx(x.IconButton,{Icon:u??f.default,width:c,height:d,isSelected:i,iconColor:l??(i?n.COLORS.content.brand:n.COLORS.content.primary),onClick:o,"data-testid":a})}),e>0&&t.jsx("div",{className:"notification--count",children:t.jsx("div",{className:"count--text",children:e})})]});exports.WhatsNewButton=p;
|
|
7
7
|
//# sourceMappingURL=WhatsNewButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport
|
|
1
|
+
{"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { Marketing } from '../../icons';\nimport { IconButton } from '../icon-button';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\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`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div className=\"notification--count\">\n\t\t\t\t\t<div className=\"count--text\">{newContentCount}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","CustomIcon","jsx","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":"mVAQaA,EAAgD,CAAC,CAC7D,QAAAC,EACA,gBAAAC,EAAkB,EAClB,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,QAAAC,EAAU,aACV,OAAAC,EAAS,mBACT,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,EACA,YAAAC,EACA,WAAYC,CACb,IACKP,SAED,MAAA,CAAI,MAAO,CAAE,OAAQ,WAErB,SAAA,CAAAQ,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,GACP,OAAQ,GACR,OAAQ,oBACR,UAAW,oBACX,aAAc,MACd,UAAW,yBAAA,CACZ,CAAA,QAEA,QAAA,CACC,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,CAMF,CAAA,EACD,EAKDC,EAAAA,KAACC,EAAAA,sBAAA,CAAsB,MAAOZ,EAC7B,SAAA,CAAAU,EAAAA,IAACG,EAAAA,QAAA,CAAQ,KAAMV,EAAS,UAAW,SAClC,SAAAO,EAAAA,IAACI,EAAAA,WAAA,CACA,KACEL,GAAcM,EAAAA,QAIhB,MAAOV,EACP,OAAQC,EACR,WAAYL,EACZ,UACCM,IACCN,EAASe,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,SAEjD,QAAAjB,EACA,cAAaK,CAAA,CAAA,EAEf,EACCJ,EAAkB,GAClBU,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACd,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAV,CAAA,CAAgB,CAAA,CAC/C,CAAA,EAEF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from "styled-components";
|
|
2
2
|
import { COLORS as e } from "../../constants/Theme.js";
|
|
3
|
-
const
|
|
3
|
+
const a = t.div`
|
|
4
4
|
cursor: pointer;
|
|
5
5
|
position: relative;
|
|
6
6
|
|
|
@@ -21,28 +21,31 @@ const o = i.div`
|
|
|
21
21
|
background: ${e.background.base};
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
+
/* tag-circle badge — Figma node 9496:35458 */
|
|
24
25
|
.notification--count {
|
|
25
26
|
box-sizing: border-box;
|
|
26
27
|
position: absolute;
|
|
27
|
-
right:
|
|
28
|
-
top:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
right: 4px;
|
|
29
|
+
top: 2px;
|
|
30
|
+
min-width: 12px;
|
|
31
|
+
height: 12px;
|
|
32
|
+
padding: 2px 3px;
|
|
33
|
+
border-radius: 12px;
|
|
32
34
|
background: ${e.background.negative.vibrant};
|
|
33
|
-
border:
|
|
35
|
+
border: 1px solid ${e.surface.standard};
|
|
34
36
|
display: flex;
|
|
35
37
|
justify-content: center;
|
|
36
38
|
align-items: center;
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
.count--text {
|
|
42
|
+
font-family: 'Inter';
|
|
40
43
|
font-size: 8px;
|
|
41
|
-
line-height:
|
|
44
|
+
line-height: 8px;
|
|
42
45
|
font-weight: 400;
|
|
43
46
|
color: ${e.surface.standard};
|
|
44
47
|
}
|
|
45
|
-
`,
|
|
48
|
+
`, o = t.div`
|
|
46
49
|
overflow-y: auto;
|
|
47
50
|
display: flex;
|
|
48
51
|
flex-direction: column;
|
|
@@ -159,11 +162,11 @@ const o = i.div`
|
|
|
159
162
|
align-items: center;
|
|
160
163
|
margin-right: 8px;
|
|
161
164
|
}
|
|
162
|
-
`, d =
|
|
165
|
+
`, d = t.div`
|
|
163
166
|
display: flex;
|
|
164
167
|
flex-direction: column;
|
|
165
168
|
height: 100%;
|
|
166
|
-
`, c =
|
|
169
|
+
`, c = t.div`
|
|
167
170
|
background: ${e.surface.standard};
|
|
168
171
|
border-radius: 8px;
|
|
169
172
|
border: 1px solid ${e.stroke.primary};
|
|
@@ -176,20 +179,20 @@ const o = i.div`
|
|
|
176
179
|
&:hover {
|
|
177
180
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
178
181
|
}
|
|
179
|
-
`, p =
|
|
180
|
-
background-image: url(${(
|
|
182
|
+
`, p = t.div`
|
|
183
|
+
background-image: url(${(i) => i.imageUrl});
|
|
181
184
|
background-size: cover;
|
|
182
185
|
background-position: center;
|
|
183
186
|
background-repeat: no-repeat;
|
|
184
|
-
height: ${(
|
|
185
|
-
width: ${(
|
|
187
|
+
height: ${(i) => i.height || "200px"};
|
|
188
|
+
width: ${(i) => i.width || "100%"};
|
|
186
189
|
border-radius: 4px;
|
|
187
190
|
`;
|
|
188
191
|
export {
|
|
189
192
|
p as BackgroundImageContainer,
|
|
190
193
|
c as MainCardContainer,
|
|
191
194
|
d as MainContainer,
|
|
192
|
-
|
|
193
|
-
|
|
195
|
+
a as WhatsNewIconContainer,
|
|
196
|
+
o as WhatsNewWrapper
|
|
194
197
|
};
|
|
195
198
|
//# sourceMappingURL=WhatsNew.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright:
|
|
1
|
+
{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t/* tag-circle badge — Figma node 9496:35458 */\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: 4px;\n\t\ttop: 2px;\n\t\tmin-width: 12px;\n\t\theight: 12px;\n\t\tpadding: 2px 3px;\n\t\tborder-radius: 12px;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.count--text {\n\t\tfont-family: 'Inter';\n\t\tfont-size: 8px;\n\t\tline-height: 8px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.surface.standard};\n\t}\n`;\n\nexport const WhatsNewWrapper = styled.div`\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tmax-height: calc(100vh - 60px);\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 6px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground: ${COLORS.content.inactive};\n\t\tborder-radius: 3px;\n\t\tmin-height: 30px;\n\t}\n\n\t.icon--wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.base};\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.no--data--found {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\theight: 300px;\n\t\ttext-align: center;\n\t\tpadding: 24px;\n\t}\n\n\t.text--align {\n\t\ttext-align: center;\n\t}\n\n\t.scroller {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 16px;\n\t\tpadding: 16px 0;\n\t}\n\n\t.full--width {\n\t\twidth: 100%;\n\t}\n\n\t.flex {\n\t\tdisplay: flex;\n\t}\n\n\t.flex--row {\n\t\tflex-direction: row;\n\t}\n\n\t.flex--column {\n\t\tflex-direction: column;\n\t}\n\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt-20 {\n\t\tmargin-top: 20px;\n\t}\n\n\t.mt--8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt--12 {\n\t\tmargin-top: 12px;\n\t}\n\n\t.mb-mt-8 {\n\t\tmargin-bottom: 8px;\n\t\tmargin-top: 8px;\n\t}\n\n\t.padding--16 {\n\t\tpadding: 16px;\n\t}\n\n\t.card--desc {\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tfont-size: 12px;\n\t\tcolor: ${COLORS.content.secondary};\n\n\t\tp {\n\t\t\tmargin-bottom: 0px;\n\t\t}\n\t}\n\n\t.created--at {\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n\n\t.new--content--tag {\n\t\tpadding: 2px 6px;\n\t\tgap: 4px;\n\t\tborder-radius: 14px;\n\t\tbackground: ${COLORS.background.warning.vibrant};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin-right: 8px;\n\t}\n`;\n\nexport const MainContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport const MainCardContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t}\n`;\n\nexport const BackgroundImageContainer = styled.div<{\n\timageUrl: string;\n\theight?: string;\n\twidth?: string;\n}>`\n\tbackground-image: url(${(props) => props.imageUrl});\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\theight: ${(props) => props.height || '200px'};\n\twidth: ${(props) => props.width || '100%'};\n\tborder-radius: 4px;\n`;\n"],"names":["WhatsNewIconContainer","styled","COLORS","WhatsNewWrapper","MainContainer","MainCardContainer","BackgroundImageContainer","props"],"mappings":";;AAGO,MAAMA,IAAwBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAc5BC,EAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,gBAI5BA,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBA,EAAO,WAAW,SAAS,OAAO;AAAA,sBAC5BA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWlCA,EAAO,QAAQ,QAAQ;AAAA;AAAA,GAIrBC,IAAkBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYvBA,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsE3BA,EAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBnBA,EAAO,WAAW,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQpCE,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA,GAMvBI,IAAoBJ,EAAO;AAAA,eACzBC,EAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAY7BI,IAA2BL,EAAO;AAAA,yBAKtB,CAACM,MAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,WAIvC,CAACA,MAAUA,EAAM,UAAU,OAAO;AAAA,UACnC,CAACA,MAAUA,EAAM,SAAS,MAAM;AAAA;AAAA;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs as r, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import h from "../../assets/icons/whatsNew.svg.js";
|
|
3
2
|
import { COLORS as e } from "../../constants/Theme.js";
|
|
4
|
-
import { WhatsNewIconContainer as
|
|
5
|
-
import { Tooltip as
|
|
6
|
-
import { IconButton as
|
|
7
|
-
|
|
3
|
+
import { WhatsNewIconContainer as h } from "./WhatsNew.styles.js";
|
|
4
|
+
import { Tooltip as p } from "../tooltips/Tooltip.js";
|
|
5
|
+
import { IconButton as g } from "../icon-button/IconButton.js";
|
|
6
|
+
import u from "../../icons/Legacy - Bikayi specific/Services/Marketing.js";
|
|
7
|
+
const S = ({
|
|
8
8
|
onClick: n,
|
|
9
9
|
newContentCount: o = 0,
|
|
10
10
|
isOpen: i = !1,
|
|
@@ -14,7 +14,7 @@ const W = ({
|
|
|
14
14
|
iconWidth: c = 24,
|
|
15
15
|
iconHeight: m = 24,
|
|
16
16
|
iconColor: l,
|
|
17
|
-
iconPadding:
|
|
17
|
+
iconPadding: x,
|
|
18
18
|
customIcon: f
|
|
19
19
|
}) => a ? /* @__PURE__ */ r("div", { style: { margin: "0px 8px" }, children: [
|
|
20
20
|
/* @__PURE__ */ t(
|
|
@@ -36,11 +36,11 @@ const W = ({
|
|
|
36
36
|
100% { transform: rotate(360deg); }
|
|
37
37
|
}
|
|
38
38
|
` })
|
|
39
|
-
] }) : /* @__PURE__ */ r(
|
|
40
|
-
/* @__PURE__ */ t(
|
|
41
|
-
|
|
39
|
+
] }) : /* @__PURE__ */ r(h, { count: o, children: [
|
|
40
|
+
/* @__PURE__ */ t(p, { body: s, placement: "bottom", children: /* @__PURE__ */ t(
|
|
41
|
+
g,
|
|
42
42
|
{
|
|
43
|
-
Icon: f ??
|
|
43
|
+
Icon: f ?? u,
|
|
44
44
|
width: c,
|
|
45
45
|
height: m,
|
|
46
46
|
isSelected: i,
|
|
@@ -52,6 +52,6 @@ const W = ({
|
|
|
52
52
|
o > 0 && /* @__PURE__ */ t("div", { className: "notification--count", children: /* @__PURE__ */ t("div", { className: "count--text", children: o }) })
|
|
53
53
|
] });
|
|
54
54
|
export {
|
|
55
|
-
|
|
55
|
+
S as WhatsNewButton
|
|
56
56
|
};
|
|
57
57
|
//# sourceMappingURL=WhatsNewButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport
|
|
1
|
+
{"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { Marketing } from '../../icons';\nimport { IconButton } from '../icon-button';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\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`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div className=\"notification--count\">\n\t\t\t\t\t<div className=\"count--text\">{newContentCount}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","CustomIcon","jsx","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":";;;;;;AAQO,MAAMA,IAAgD,CAAC;AAAA,EAC7D,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAYC;AACb,MACKP,sBAED,OAAA,EAAI,OAAO,EAAE,QAAQ,aAErB,UAAA;AAAA,EAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc;AAAA,QACd,WAAW;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAAA,oBAEA,SAAA,EACC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMF;AAAA,GACD,IAKD,gBAAAC,EAACC,GAAA,EAAsB,OAAOZ,GAC7B,UAAA;AAAA,EAAA,gBAAAU,EAACG,GAAA,EAAQ,MAAMV,GAAS,WAAW,UAClC,UAAA,gBAAAO;AAAA,IAACI;AAAA,IAAA;AAAA,MACA,MACEL,KAAcM;AAAAA,MAIhB,OAAOV;AAAA,MACP,QAAQC;AAAA,MACR,YAAYL;AAAA,MACZ,WACCM,MACCN,IAASe,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,MAEjD,SAAAjB;AAAA,MACA,eAAaK;AAAA,IAAA;AAAA,EAAA,GAEf;AAAA,EACCJ,IAAkB,KAClB,gBAAAU,EAAC,OAAA,EAAI,WAAU,uBACd,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAV,EAAA,CAAgB,EAAA,CAC/C;AAAA,GAEF;"}
|