@bikdotai/bik-component-library 0.0.830-beta.0 → 0.0.830-beta.2
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/tabs/Tabs.js +1 -1
- package/dist/cjs/components/tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/tabs/Tabs.styles.js +3 -2
- package/dist/cjs/components/tabs/Tabs.styles.js.map +1 -1
- package/dist/esm/components/tabs/Tabs.js +59 -57
- package/dist/esm/components/tabs/Tabs.js.map +1 -1
- package/dist/esm/components/tabs/Tabs.model.d.ts +2 -0
- package/dist/esm/components/tabs/Tabs.styles.js +9 -8
- package/dist/esm/components/tabs/Tabs.styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-dev-runtime"),v=require("react"),g=require("../../constants/Theme.js"),o=require("./Tabs.styles.js"),y=require("../tag/Tag.js"),C=e=>{const{tabs:s,initialTab:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-dev-runtime"),v=require("react"),g=require("../../constants/Theme.js"),o=require("./Tabs.styles.js"),y=require("../tag/Tag.js"),C=e=>{const{tabs:s,initialTab:c,onTabSelected:i,TabItemStyledProps:b,selectedTab:n,extendedBorder:l,rightComponent:d,size:k="default",isSquared:p=!1,containerStyles:T,gap:a}=e,[r,m]=v.useState(c||s[0].key),{colorsV2:f}=g.DEFAULT_THEME;v.useEffect(()=>{n&&n!==r&&m(n)},[n,r]);const D=e.backgroundColor,E=e.selectedTextColor??f.background.brand,S=e.textColor??f.content.secondary;return t.jsxDEV(o.TabHeader,{style:T??{},bgColor:D,tabGap:a,"data-test":e["data-test"],children:[s.map((u,x)=>t.jsxDEV(h,{hasEqualSpacing:e.hasEqualSpacing,uniformBorder:!!a,selectedTextColor:E,textColor:S,tab:u,currentTab:r,TabItemStyledProps:b,IconComponent:u.icon,size:k,setCurrentTab:N=>{m(N),i&&i(N)},isSquared:p,isFirstlement:x==0,isLastElement:x==s.length-1,iconPosition:u.iconPosition??"left"},u.key,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:50,columnNumber:5},void 0)),l&&t.jsxDEV(o.EmptyTab,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:73,columnNumber:23},void 0),t.jsxDEV(o.RightComponent,{children:d},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:74,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:43,columnNumber:3},void 0)},h=e=>{const{tab:s,currentTab:c,setCurrentTab:i,TabItemStyledProps:b,IconComponent:n,iconPosition:l="left",size:d="default",isSquared:k=!1,isFirstlement:p,isLastElement:T}=e,a=s.key===c,{colorsV2:r}=g.DEFAULT_THEME,m=v.useCallback(()=>({...b,borderRadius:e.isSquared?p?"4px 0px 0px 4px":T?"0px 4px 4px 0px":"":""}),[]);return t.jsxDEV(o.TabItem,{style:m(),selected:a,uniformBorder:e.uniformBorder,hasEqualSpacing:e.hasEqualSpacing,onClick:()=>i(e.tab.key),selectedTextColor:e.selectedTextColor,isSquared:k,"data-test":e["data-test"],children:[n&&l==="left"&&t.jsxDEV(n,{selected:a?r.background.brand:r.content.secondary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:121,columnNumber:5},void 0),s.leadingNumber!==void 0&&s.leadingNumber!==null&&t.jsxDEV(o.TrailingNumberContainer,{selected:a,children:t.jsxDEV(y.Tag,{tagText:s?.leadingNumber??0,theme:"dark",type:s.numberTagType,variant:"circle",color:r.content.primaryInverse},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:129,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:128,columnNumber:5},void 0),t.jsxDEV(o.TabItemText,{style:d==="small"?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:e.textColor,selectedTextColor:e.selectedTextColor,selected:a,children:s.title},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:138,columnNumber:4},void 0),s.trailingNumber!==void 0&&s.trailingNumber!==null&&t.jsxDEV(o.TrailingNumberContainer,{selected:a,children:t.jsxDEV(y.Tag,{tagText:s?.trailingNumber??0,theme:"dark",type:s.numberTagType,variant:"circle",color:r.content.primaryInverse},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:152,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:151,columnNumber:5},void 0),n&&l==="right"&&t.jsxDEV(n,{selected:a?r.background.brand:r.content.secondary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:162,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",lineNumber:110,columnNumber:3},void 0)};C.displayName="Tabs";h.displayName="TabItemComponent";exports.TabItemComponent=h;exports.Tabs=C;
|
|
2
2
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t\tgap,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab || tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\ttabGap={gap}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","gap","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxDEV","TabHeader","tab","index","TabItemComponent","tabKey","this","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"2OAaaA,EAAsCC,GAAU,CAC5D,KAAM,CACL,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,eAAAC,EACA,eAAAC,EACA,KAAAC,EAAO,UACP,UAAAC,EAAY,GACZ,gBAAAC,EACA,IAAAC,CAAA,EACGX,EACE,CAACY,EAAYC,CAAa,EAAIC,EAAAA,SAASZ,GAAcD,EAAK,CAAC,EAAE,GAAG,EAChE,CAAE,SAAAc,GAAaC,EAAAA,cAErBC,EAAAA,UAAU,IAAM,CACXZ,GAAeA,IAAgBO,GAClCC,EAAcR,CAAW,CAE3B,EAAG,CAACA,EAAaO,CAAU,CAAC,EAE5B,MAAMM,EAAkBlB,EAAM,gBACxBmB,EACLnB,EAAM,mBAAqBe,EAAS,WAAW,MAC1CK,EAAYpB,EAAM,WAAae,EAAS,QAAQ,UAEtD,OACCM,EAAAA,OAACC,EAAAA,UAAA,CACA,MAAOZ,GAAmB,CAAA,EAC1B,QAASQ,EACT,OAAQP,EACR,YAAWX,EAAM,WAAW,EAE3B,SAAA,CAAAC,EAAK,IAAI,CAACsB,EAAKC,IACfH,EAAAA,OAACI,EAAA,CACA,gBAAiBzB,EAAM,gBACvB,
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t\tgap,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab || tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\ttabGap={gap}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tuniformBorder={!!gap}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\tuniformBorder={props.uniformBorder}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","gap","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxDEV","TabHeader","tab","index","TabItemComponent","tabKey","this","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"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"}
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
right: 0;
|
|
14
14
|
height: 1px;
|
|
15
15
|
background: ${t.DEFAULT_THEME.colorsV2.background.inactive};
|
|
16
|
+
z-index: -1;
|
|
16
17
|
}
|
|
17
18
|
`:""}
|
|
18
19
|
`,n=o.default.div`
|
|
@@ -24,8 +25,8 @@
|
|
|
24
25
|
align-items: center;
|
|
25
26
|
justify-content: center;
|
|
26
27
|
width: ${e=>e.hasEqualSpacing?"50%":"auto"};
|
|
27
|
-
border-bottom-color: ${e=>e.isSquared?"":e.selected?e.selectedTextColor:t.DEFAULT_THEME.colorsV2.background.inactive};
|
|
28
|
-
border-bottom-width: ${e=>e.isSquared?"":e.selected?"2px":"1px"};
|
|
28
|
+
border-bottom-color: ${e=>e.isSquared?"":e.selected?e.selectedTextColor:e.uniformBorder?"transparent":t.DEFAULT_THEME.colorsV2.background.inactive};
|
|
29
|
+
border-bottom-width: ${e=>e.isSquared?"":e.selected||e.uniformBorder?"2px":"1px"};
|
|
29
30
|
border-bottom-style: ${e=>e.isSquared?"":"solid"};
|
|
30
31
|
border: ${e=>e.isSquared?e.selected?`1px solid ${e.selectedTextColor}`:`1px solid ${t.DEFAULT_THEME.colorsV2.background.inactive}`:""};
|
|
31
32
|
flex-direction: row;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string; tabGap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n\t${(props) =>\n\t\tprops.tabGap\n\t\t\t? `\n\t\tgap: ${props.tabGap}px;\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 1px;\n\t\t\tbackground: ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared
|
|
1
|
+
{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string; tabGap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n\t${(props) =>\n\t\tprops.tabGap\n\t\t\t? `\n\t\tgap: ${props.tabGap}px;\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 1px;\n\t\t\tbackground: ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\t\tz-index: -1;\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: props.uniformBorder\n\t\t\t? 'transparent'\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected || props.uniformBorder\n\t\t\t? '2px'\n\t\t\t: '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","DEFAULT_THEME","TabItem","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":"6PAKaA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA,qBAGVC,GAAUA,EAAM,OAAO;AAAA,GACzCA,GACFA,EAAM,OACH;AAAA,SACIA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASJC,gBAAc,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,GAItD,EAAE;AAAA,EAGMC,EAAUH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,YAIjBC,GAAWA,EAAM,UAAY,WAAa,qBAAsB;AAAA,mBACzDA,GAClBA,EAAM,UAAY,GAAKA,EAAM,SAAW,OAAS,MAAM;AAAA;AAAA;AAAA,UAG9CA,GAAWA,EAAM,gBAAkB,MAAQ,MAAO;AAAA,wBACpCA,GACvBA,EAAM,UACH,GACAA,EAAM,SACNA,EAAM,kBACNA,EAAM,cACN,cACAC,EAAAA,cAAc,SAAS,WAAW,QAAQ;AAAA,wBACtBD,GACvBA,EAAM,UACH,GACAA,EAAM,UAAYA,EAAM,cACxB,MACA,KAAK;AAAA,wBACeA,GAAWA,EAAM,UAAY,GAAK,OAAQ;AAAA,WACvDA,GACVA,EAAM,UACHA,EAAM,SACL,aAAaA,EAAM,iBAAiB,GACpC,aAAaC,gBAAc,SAAS,WAAW,QAAQ,GACxD,EAAE;AAAA;AAAA;AAAA,cAGQD,GAAWA,EAAM,UAAY,QAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAInCA,GACpBA,EAAM,WACHA,EAAM,SACL,GAAGC,EAAAA,cAAc,SAAS,WAAW,UAAU,GAEhD,EAAE;AAAA,EAGME,EAA0BJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU9BC,GACdA,EAAM,SACHC,EAAAA,cAAc,SAAS,WAAW,aAClCA,EAAAA,cAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,gBAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,EAI1CG,EAAcL,EAAAA,QAAOM,aAAW;AAAA,UAClCL,GACTA,EAAM,SAAWA,EAAM,kBAAoBA,EAAM,SAAS;AAAA,EAG/CM,EAAWP,EAAAA,QAAO;AAAA;AAAA,4BAEHE,gBAAc,SAAS,WAAW,QAAQ;AAAA,EAGzDM,EAAiBR,EAAAA,QAAO;AAAA;AAAA;AAAA,4BAGTE,gBAAc,SAAS,WAAW,QAAQ;AAAA"}
|
|
@@ -1,51 +1,52 @@
|
|
|
1
|
-
import { jsxDEV as
|
|
1
|
+
import { jsxDEV as t } from "react/jsx-dev-runtime";
|
|
2
2
|
import { useCallback as D, useState as U, useEffect as W } from "react";
|
|
3
3
|
import { DEFAULT_THEME as x } from "../../constants/Theme.js";
|
|
4
4
|
import { TabItem as w, TrailingNumberContainer as T, TabItemText as E, TabHeader as I, EmptyTab as q, RightComponent as P } from "./Tabs.styles.js";
|
|
5
5
|
import { Tag as N } from "../tag/Tag.js";
|
|
6
|
-
const
|
|
6
|
+
const B = (e) => {
|
|
7
7
|
const {
|
|
8
|
-
tabs:
|
|
8
|
+
tabs: r,
|
|
9
9
|
initialTab: c,
|
|
10
10
|
onTabSelected: o,
|
|
11
|
-
TabItemStyledProps:
|
|
11
|
+
TabItemStyledProps: u,
|
|
12
12
|
selectedTab: a,
|
|
13
13
|
extendedBorder: i,
|
|
14
|
-
rightComponent:
|
|
14
|
+
rightComponent: b,
|
|
15
15
|
size: d = "default",
|
|
16
|
-
isSquared:
|
|
17
|
-
containerStyles:
|
|
16
|
+
isSquared: k = !1,
|
|
17
|
+
containerStyles: p,
|
|
18
18
|
gap: n
|
|
19
|
-
} = e, [
|
|
19
|
+
} = e, [s, l] = U(c || r[0].key), { colorsV2: f } = x;
|
|
20
20
|
W(() => {
|
|
21
|
-
a && a !==
|
|
22
|
-
}, [a,
|
|
23
|
-
const g = e.backgroundColor, C = e.selectedTextColor ??
|
|
24
|
-
return /* @__PURE__ */
|
|
21
|
+
a && a !== s && l(a);
|
|
22
|
+
}, [a, s]);
|
|
23
|
+
const g = e.backgroundColor, C = e.selectedTextColor ?? f.background.brand, S = e.textColor ?? f.content.secondary;
|
|
24
|
+
return /* @__PURE__ */ t(
|
|
25
25
|
I,
|
|
26
26
|
{
|
|
27
|
-
style:
|
|
27
|
+
style: p ?? {},
|
|
28
28
|
bgColor: g,
|
|
29
29
|
tabGap: n,
|
|
30
30
|
"data-test": e["data-test"],
|
|
31
31
|
children: [
|
|
32
|
-
|
|
32
|
+
r.map((m, v) => /* @__PURE__ */ t(
|
|
33
33
|
y,
|
|
34
34
|
{
|
|
35
35
|
hasEqualSpacing: e.hasEqualSpacing,
|
|
36
|
+
uniformBorder: !!n,
|
|
36
37
|
selectedTextColor: C,
|
|
37
38
|
textColor: S,
|
|
38
39
|
tab: m,
|
|
39
|
-
currentTab:
|
|
40
|
-
TabItemStyledProps:
|
|
40
|
+
currentTab: s,
|
|
41
|
+
TabItemStyledProps: u,
|
|
41
42
|
IconComponent: m.icon,
|
|
42
43
|
size: d,
|
|
43
44
|
setCurrentTab: (h) => {
|
|
44
45
|
l(h), o && o(h);
|
|
45
46
|
},
|
|
46
|
-
isSquared:
|
|
47
|
-
isFirstlement:
|
|
48
|
-
isLastElement:
|
|
47
|
+
isSquared: k,
|
|
48
|
+
isFirstlement: v == 0,
|
|
49
|
+
isLastElement: v == r.length - 1,
|
|
49
50
|
iconPosition: m.iconPosition ?? "left"
|
|
50
51
|
},
|
|
51
52
|
m.key,
|
|
@@ -57,14 +58,14 @@ const z = (e) => {
|
|
|
57
58
|
},
|
|
58
59
|
void 0
|
|
59
60
|
)),
|
|
60
|
-
i && /* @__PURE__ */
|
|
61
|
+
i && /* @__PURE__ */ t(q, {}, void 0, !1, {
|
|
61
62
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
62
|
-
lineNumber:
|
|
63
|
+
lineNumber: 73,
|
|
63
64
|
columnNumber: 23
|
|
64
65
|
}, void 0),
|
|
65
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ t(P, { children: b }, void 0, !1, {
|
|
66
67
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
67
|
-
lineNumber:
|
|
68
|
+
lineNumber: 74,
|
|
68
69
|
columnNumber: 4
|
|
69
70
|
}, void 0)
|
|
70
71
|
]
|
|
@@ -80,117 +81,118 @@ const z = (e) => {
|
|
|
80
81
|
);
|
|
81
82
|
}, y = (e) => {
|
|
82
83
|
const {
|
|
83
|
-
tab:
|
|
84
|
+
tab: r,
|
|
84
85
|
currentTab: c,
|
|
85
86
|
setCurrentTab: o,
|
|
86
|
-
TabItemStyledProps:
|
|
87
|
+
TabItemStyledProps: u,
|
|
87
88
|
IconComponent: a,
|
|
88
89
|
iconPosition: i = "left",
|
|
89
|
-
size:
|
|
90
|
+
size: b = "default",
|
|
90
91
|
isSquared: d = !1,
|
|
91
|
-
isFirstlement:
|
|
92
|
-
isLastElement:
|
|
93
|
-
} = e, n =
|
|
94
|
-
...
|
|
95
|
-
borderRadius: e.isSquared ?
|
|
92
|
+
isFirstlement: k,
|
|
93
|
+
isLastElement: p
|
|
94
|
+
} = e, n = r.key === c, { colorsV2: s } = x, l = D(() => ({
|
|
95
|
+
...u,
|
|
96
|
+
borderRadius: e.isSquared ? k ? "4px 0px 0px 4px" : p ? "0px 4px 4px 0px" : "" : ""
|
|
96
97
|
}), []);
|
|
97
|
-
return /* @__PURE__ */
|
|
98
|
+
return /* @__PURE__ */ t(
|
|
98
99
|
w,
|
|
99
100
|
{
|
|
100
101
|
style: l(),
|
|
101
102
|
selected: n,
|
|
103
|
+
uniformBorder: e.uniformBorder,
|
|
102
104
|
hasEqualSpacing: e.hasEqualSpacing,
|
|
103
105
|
onClick: () => o(e.tab.key),
|
|
104
106
|
selectedTextColor: e.selectedTextColor,
|
|
105
107
|
isSquared: d,
|
|
106
108
|
"data-test": e["data-test"],
|
|
107
109
|
children: [
|
|
108
|
-
a && i === "left" && /* @__PURE__ */
|
|
110
|
+
a && i === "left" && /* @__PURE__ */ t(
|
|
109
111
|
a,
|
|
110
112
|
{
|
|
111
|
-
selected: n ?
|
|
113
|
+
selected: n ? s.background.brand : s.content.secondary
|
|
112
114
|
},
|
|
113
115
|
void 0,
|
|
114
116
|
!1,
|
|
115
117
|
{
|
|
116
118
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
117
|
-
lineNumber:
|
|
119
|
+
lineNumber: 121,
|
|
118
120
|
columnNumber: 5
|
|
119
121
|
},
|
|
120
122
|
void 0
|
|
121
123
|
),
|
|
122
|
-
|
|
124
|
+
r.leadingNumber !== void 0 && r.leadingNumber !== null && /* @__PURE__ */ t(T, { selected: n, children: /* @__PURE__ */ t(
|
|
123
125
|
N,
|
|
124
126
|
{
|
|
125
|
-
tagText:
|
|
127
|
+
tagText: r?.leadingNumber ?? 0,
|
|
126
128
|
theme: "dark",
|
|
127
|
-
type:
|
|
129
|
+
type: r.numberTagType,
|
|
128
130
|
variant: "circle",
|
|
129
|
-
color:
|
|
131
|
+
color: s.content.primaryInverse
|
|
130
132
|
},
|
|
131
133
|
void 0,
|
|
132
134
|
!1,
|
|
133
135
|
{
|
|
134
136
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
135
|
-
lineNumber:
|
|
137
|
+
lineNumber: 129,
|
|
136
138
|
columnNumber: 6
|
|
137
139
|
},
|
|
138
140
|
void 0
|
|
139
141
|
) }, void 0, !1, {
|
|
140
142
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
141
|
-
lineNumber:
|
|
143
|
+
lineNumber: 128,
|
|
142
144
|
columnNumber: 5
|
|
143
145
|
}, void 0),
|
|
144
|
-
/* @__PURE__ */
|
|
146
|
+
/* @__PURE__ */ t(
|
|
145
147
|
E,
|
|
146
148
|
{
|
|
147
|
-
style:
|
|
149
|
+
style: b === "small" ? { fontSize: 14, fontStyle: "normal", fontWeight: 600 } : void 0,
|
|
148
150
|
textColor: e.textColor,
|
|
149
151
|
selectedTextColor: e.selectedTextColor,
|
|
150
152
|
selected: n,
|
|
151
|
-
children:
|
|
153
|
+
children: r.title
|
|
152
154
|
},
|
|
153
155
|
void 0,
|
|
154
156
|
!1,
|
|
155
157
|
{
|
|
156
158
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
157
|
-
lineNumber:
|
|
159
|
+
lineNumber: 138,
|
|
158
160
|
columnNumber: 4
|
|
159
161
|
},
|
|
160
162
|
void 0
|
|
161
163
|
),
|
|
162
|
-
|
|
164
|
+
r.trailingNumber !== void 0 && r.trailingNumber !== null && /* @__PURE__ */ t(T, { selected: n, children: /* @__PURE__ */ t(
|
|
163
165
|
N,
|
|
164
166
|
{
|
|
165
|
-
tagText:
|
|
167
|
+
tagText: r?.trailingNumber ?? 0,
|
|
166
168
|
theme: "dark",
|
|
167
|
-
type:
|
|
169
|
+
type: r.numberTagType,
|
|
168
170
|
variant: "circle",
|
|
169
|
-
color:
|
|
171
|
+
color: s.content.primaryInverse
|
|
170
172
|
},
|
|
171
173
|
void 0,
|
|
172
174
|
!1,
|
|
173
175
|
{
|
|
174
176
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
175
|
-
lineNumber:
|
|
177
|
+
lineNumber: 152,
|
|
176
178
|
columnNumber: 6
|
|
177
179
|
},
|
|
178
180
|
void 0
|
|
179
181
|
) }, void 0, !1, {
|
|
180
182
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
181
|
-
lineNumber:
|
|
183
|
+
lineNumber: 151,
|
|
182
184
|
columnNumber: 5
|
|
183
185
|
}, void 0),
|
|
184
|
-
a && i === "right" && /* @__PURE__ */
|
|
186
|
+
a && i === "right" && /* @__PURE__ */ t(
|
|
185
187
|
a,
|
|
186
188
|
{
|
|
187
|
-
selected: n ?
|
|
189
|
+
selected: n ? s.background.brand : s.content.secondary
|
|
188
190
|
},
|
|
189
191
|
void 0,
|
|
190
192
|
!1,
|
|
191
193
|
{
|
|
192
194
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
193
|
-
lineNumber:
|
|
195
|
+
lineNumber: 162,
|
|
194
196
|
columnNumber: 5
|
|
195
197
|
},
|
|
196
198
|
void 0
|
|
@@ -201,16 +203,16 @@ const z = (e) => {
|
|
|
201
203
|
!0,
|
|
202
204
|
{
|
|
203
205
|
fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/tabs/Tabs.tsx",
|
|
204
|
-
lineNumber:
|
|
206
|
+
lineNumber: 110,
|
|
205
207
|
columnNumber: 3
|
|
206
208
|
},
|
|
207
209
|
void 0
|
|
208
210
|
);
|
|
209
211
|
};
|
|
210
|
-
|
|
212
|
+
B.displayName = "Tabs";
|
|
211
213
|
y.displayName = "TabItemComponent";
|
|
212
214
|
export {
|
|
213
215
|
y as TabItemComponent,
|
|
214
|
-
|
|
216
|
+
B as Tabs
|
|
215
217
|
};
|
|
216
218
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t\tgap,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab || tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\ttabGap={gap}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","gap","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxDEV","TabHeader","tab","index","TabItemComponent","tabKey","this","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":";;;;;AAaO,MAAMA,IAAqC,CAACC,MAAU;AAC5D,QAAM;AAAA,IACL,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,IACA,KAAAC;AAAA,EAAA,IACGX,GACE,CAACY,GAAYC,CAAa,IAAIC,EAASZ,KAAcD,EAAK,CAAC,EAAE,GAAG,GAChE,EAAE,UAAAc,MAAaC;AAErB,EAAAC,EAAU,MAAM;AACf,IAAIZ,KAAeA,MAAgBO,KAClCC,EAAcR,CAAW;AAAA,EAE3B,GAAG,CAACA,GAAaO,CAAU,CAAC;AAE5B,QAAMM,IAAkBlB,EAAM,iBACxBmB,IACLnB,EAAM,qBAAqBe,EAAS,WAAW,OAC1CK,IAAYpB,EAAM,aAAae,EAAS,QAAQ;AAEtD,SACC,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAOZ,KAAmB,CAAA;AAAA,MAC1B,SAASQ;AAAA,MACT,QAAQP;AAAA,MACR,aAAWX,EAAM,WAAW;AAAA,MAE3B,UAAA;AAAA,QAAAC,EAAK,IAAI,CAACsB,GAAKC,MACf,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACA,iBAAiBzB,EAAM;AAAA,YACvB,
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t\tgap,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab || tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\ttabGap={gap}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tuniformBorder={!!gap}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\tuniformBorder={props.uniformBorder}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","gap","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxDEV","TabHeader","tab","index","TabItemComponent","tabKey","this","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ export interface TabItemProps {
|
|
|
5
5
|
selected: boolean;
|
|
6
6
|
selectedTextColor: string;
|
|
7
7
|
isSquared?: boolean;
|
|
8
|
+
uniformBorder?: boolean;
|
|
8
9
|
}
|
|
9
10
|
export interface TabItemTextProps {
|
|
10
11
|
selected: boolean;
|
|
@@ -46,6 +47,7 @@ export interface TabViewHeaderProps {
|
|
|
46
47
|
}
|
|
47
48
|
export interface TabItemComponentProps {
|
|
48
49
|
hasEqualSpacing?: boolean;
|
|
50
|
+
uniformBorder?: boolean;
|
|
49
51
|
tab: TabInterface;
|
|
50
52
|
currentTab: string;
|
|
51
53
|
setCurrentTab: (tabKey: string) => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import t from "styled-components";
|
|
2
2
|
import { DEFAULT_THEME as o } from "../../constants/Theme.js";
|
|
3
3
|
import { ButtonLarge as r } from "../TypographyStyle.js";
|
|
4
|
-
const
|
|
4
|
+
const c = t.div`
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: row;
|
|
7
7
|
background-color: ${(e) => e.bgColor};
|
|
@@ -16,6 +16,7 @@ const n = t.div`
|
|
|
16
16
|
right: 0;
|
|
17
17
|
height: 1px;
|
|
18
18
|
background: ${o.colorsV2.background.inactive};
|
|
19
|
+
z-index: -1;
|
|
19
20
|
}
|
|
20
21
|
` : ""}
|
|
21
22
|
`, a = t.div`
|
|
@@ -27,8 +28,8 @@ const n = t.div`
|
|
|
27
28
|
align-items: center;
|
|
28
29
|
justify-content: center;
|
|
29
30
|
width: ${(e) => e.hasEqualSpacing ? "50%" : "auto"};
|
|
30
|
-
border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : o.colorsV2.background.inactive};
|
|
31
|
-
border-bottom-width: ${(e) => e.isSquared ? "" : e.selected ? "2px" : "1px"};
|
|
31
|
+
border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : e.uniformBorder ? "transparent" : o.colorsV2.background.inactive};
|
|
32
|
+
border-bottom-width: ${(e) => e.isSquared ? "" : e.selected || e.uniformBorder ? "2px" : "1px"};
|
|
32
33
|
border-bottom-style: ${(e) => e.isSquared ? "" : "solid"};
|
|
33
34
|
border: ${(e) => e.isSquared ? e.selected ? `1px solid ${e.selectedTextColor}` : `1px solid ${o.colorsV2.background.inactive}` : ""};
|
|
34
35
|
flex-direction: row;
|
|
@@ -51,18 +52,18 @@ const n = t.div`
|
|
|
51
52
|
border-radius: 10px;
|
|
52
53
|
`, s = t(r)`
|
|
53
54
|
color: ${(e) => e.selected ? e.selectedTextColor : e.textColor};
|
|
54
|
-
`,
|
|
55
|
+
`, x = t.div`
|
|
55
56
|
flex-grow: 1;
|
|
56
57
|
border-bottom: 1px solid ${o.colorsV2.background.inactive};
|
|
57
|
-
`,
|
|
58
|
+
`, b = t.div`
|
|
58
59
|
display: flex;
|
|
59
60
|
align-items: center;
|
|
60
61
|
border-bottom: 1px solid ${o.colorsV2.background.inactive};
|
|
61
62
|
`;
|
|
62
63
|
export {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
x as EmptyTab,
|
|
65
|
+
b as RightComponent,
|
|
66
|
+
c as TabHeader,
|
|
66
67
|
a as TabItem,
|
|
67
68
|
s as TabItemText,
|
|
68
69
|
l as TrailingNumberContainer
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string; tabGap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n\t${(props) =>\n\t\tprops.tabGap\n\t\t\t? `\n\t\tgap: ${props.tabGap}px;\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 1px;\n\t\t\tbackground: ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared
|
|
1
|
+
{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string; tabGap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n\t${(props) =>\n\t\tprops.tabGap\n\t\t\t? `\n\t\tgap: ${props.tabGap}px;\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 1px;\n\t\t\tbackground: ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\t\tz-index: -1;\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: props.uniformBorder\n\t\t\t? 'transparent'\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected || props.uniformBorder\n\t\t\t? '2px'\n\t\t\t: '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","DEFAULT_THEME","TabItem","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":";;;AAKO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,qBAGX,CAACC,MAAUA,EAAM,OAAO;AAAA,GAC1C,CAACA,MACFA,EAAM,SACH;AAAA,SACIA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASJC,EAAc,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,KAItD,EAAE;AAAA,GAGMC,IAAUH,EAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,CAACC,MAAWA,EAAM,YAAY,aAAa,qBAAsB;AAAA,mBAC1D,CAACA,MAClBA,EAAM,YAAY,KAAKA,EAAM,WAAW,SAAS,MAAM;AAAA;AAAA;AAAA,UAG/C,CAACA,MAAWA,EAAM,kBAAkB,QAAQ,MAAO;AAAA,wBACrC,CAACA,MACvBA,EAAM,YACH,KACAA,EAAM,WACNA,EAAM,oBACNA,EAAM,gBACN,gBACAC,EAAc,SAAS,WAAW,QAAQ;AAAA,wBACvB,CAACD,MACvBA,EAAM,YACH,KACAA,EAAM,YAAYA,EAAM,gBACxB,QACA,KAAK;AAAA,wBACc,CAACA,MAAWA,EAAM,YAAY,KAAK,OAAQ;AAAA,WACxD,CAACA,MACVA,EAAM,YACHA,EAAM,WACL,aAAaA,EAAM,iBAAiB,KACpC,aAAaC,EAAc,SAAS,WAAW,QAAQ,KACxD,EAAE;AAAA;AAAA;AAAA,cAGO,CAACD,MAAWA,EAAM,YAAY,UAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAIpC,CAACA,MACpBA,EAAM,aACHA,EAAM,WACL,GAAGC,EAAc,SAAS,WAAW,UAAU,KAEhD,EAAE;AAAA,GAGME,IAA0BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU/B,CAACC,MACdA,EAAM,WACHC,EAAc,SAAS,WAAW,eAClCA,EAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,EAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,GAI1CG,IAAcL,EAAOM,CAAW;AAAA,UACnC,CAACL,MACTA,EAAM,WAAWA,EAAM,oBAAoBA,EAAM,SAAS;AAAA,GAG/CM,IAAWP,EAAO;AAAA;AAAA,4BAEHE,EAAc,SAAS,WAAW,QAAQ;AAAA,GAGzDM,IAAiBR,EAAO;AAAA;AAAA;AAAA,4BAGTE,EAAc,SAAS,WAAW,QAAQ;AAAA;"}
|