@dfx.swiss/react-components 1.3.0-beta.4 → 1.3.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/stories/StyledTab.d.ts +3 -1
- package/dist/stories/StyledTab.d.ts.map +1 -1
- package/dist/stories/StyledTab.js +12 -4
- package/dist/stories/StyledTab.js.map +1 -1
- package/dist/stories/StyledTabContainer.d.ts +3 -1
- package/dist/stories/StyledTabContainer.d.ts.map +1 -1
- package/dist/stories/StyledTabContainer.js +4 -4
- package/dist/stories/StyledTabContainer.js.map +1 -1
- package/package.json +2 -2
|
@@ -7,7 +7,9 @@ interface StyledTabProps extends PropsWithChildren {
|
|
|
7
7
|
icon?: IconVariant;
|
|
8
8
|
flagWord1?: string;
|
|
9
9
|
flagWord2?: string;
|
|
10
|
+
darkTheme?: boolean;
|
|
11
|
+
spread?: boolean;
|
|
10
12
|
}
|
|
11
|
-
export default function StyledTab({ children, active, setActive, deactivated, icon, flagWord1, flagWord2, }: StyledTabProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default function StyledTab({ children, active, setActive, deactivated, icon, flagWord1, flagWord2, darkTheme, spread, }: StyledTabProps): import("react/jsx-runtime").JSX.Element;
|
|
12
14
|
export {};
|
|
13
15
|
//# sourceMappingURL=StyledTab.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledTab.d.ts","sourceRoot":"","sources":["../../src/stories/StyledTab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAgB,EAAuB,WAAW,EAAE,MAAM,WAAW,CAAC;AAEtE,UAAU,cAAe,SAAQ,iBAAiB;IAChD,SAAS,EAAE,MAAM,GAAG,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"StyledTab.d.ts","sourceRoot":"","sources":["../../src/stories/StyledTab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAgB,EAAuB,WAAW,EAAE,MAAM,WAAW,CAAC;AAEtE,UAAU,cAAe,SAAQ,iBAAiB;IAChD,SAAS,EAAE,MAAM,GAAG,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,WAAmB,EACnB,IAAI,EACJ,SAAS,EACT,SAAS,EACT,SAAS,EACT,MAAM,GACP,EAAE,cAAc,2CAsChB"}
|
|
@@ -12,15 +12,23 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import DfxIcon, { IconColor, IconSize } from './DfxIcon';
|
|
14
14
|
export default function StyledTab(_a) {
|
|
15
|
-
var children = _a.children, active = _a.active, setActive = _a.setActive, _b = _a.deactivated, deactivated = _b === void 0 ? false : _b, icon = _a.icon, flagWord1 = _a.flagWord1, flagWord2 = _a.flagWord2;
|
|
16
|
-
var tabClasses = 'text-2xl font-black px-12 py-2 rounded-t-lg block flex gap-2 ';
|
|
15
|
+
var children = _a.children, active = _a.active, setActive = _a.setActive, _b = _a.deactivated, deactivated = _b === void 0 ? false : _b, icon = _a.icon, flagWord1 = _a.flagWord1, flagWord2 = _a.flagWord2, darkTheme = _a.darkTheme, spread = _a.spread;
|
|
16
|
+
var tabClasses = 'text-2xl font-black px-12 py-2 rounded-t-lg block flex items-center gap-2 w-full h-full ';
|
|
17
17
|
if (!deactivated) {
|
|
18
|
-
|
|
18
|
+
if (active) {
|
|
19
|
+
tabClasses += darkTheme ? 'bg-dfxGray-500' : 'bg-white';
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
tabClasses += darkTheme
|
|
23
|
+
? 'hover:bg-dfxGray-500/30 focus:bg-dfxGray-500/30'
|
|
24
|
+
: 'hover:bg-white/10 focus:bg-white/10';
|
|
25
|
+
}
|
|
19
26
|
}
|
|
20
27
|
else {
|
|
21
28
|
tabClasses += 'cursor-default text-dfxBlue-800/70';
|
|
22
29
|
}
|
|
23
|
-
|
|
30
|
+
spread && (tabClasses += ' justify-center');
|
|
31
|
+
return (_jsx("li", __assign({ className: "flex-".concat(spread ? '1' : 'none', " text-center") }, { children: _jsxs("a", __assign({ className: tabClasses, onClick: function (e) {
|
|
24
32
|
e.preventDefault();
|
|
25
33
|
if (!deactivated) {
|
|
26
34
|
setActive();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledTab.js","sourceRoot":"","sources":["../../src/stories/StyledTab.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,OAAO,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAe,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"StyledTab.js","sourceRoot":"","sources":["../../src/stories/StyledTab.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,OAAO,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAe,MAAM,WAAW,CAAC;AAatE,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAUjB;QATf,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,SAAS,eAAA,EACT,mBAAmB,EAAnB,WAAW,mBAAG,KAAK,KAAA,EACnB,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,SAAS,eAAA,EACT,SAAS,eAAA,EACT,MAAM,YAAA;IAEN,IAAI,UAAU,GAAG,0FAA0F,CAAC;IAC5G,IAAI,CAAC,WAAW,EAAE;QAChB,IAAI,MAAM,EAAE;YACV,UAAU,IAAI,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC;SACzD;aAAM;YACL,UAAU,IAAI,SAAS;gBACrB,CAAC,CAAC,iDAAiD;gBACnD,CAAC,CAAC,qCAAqC,CAAC;SAC3C;KACF;SAAM;QACL,UAAU,IAAI,oCAAoC,CAAC;KACpD;IAED,MAAM,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAC,CAAC;IAE5C,OAAO,CACL,sBAAI,SAAS,EAAE,eAAQ,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,iBAAc,gBACxD,sBACE,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,UAAC,CAAC;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,EAAE;oBAChB,SAAS,EAAE,CAAC;iBACb;YACH,CAAC,iBACW,KAAK,EACjB,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,SAAS,iBAEb,QAAQ,EAER,IAAI,KAAK,SAAS,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,EAE9C,SAAS,KAAK,SAAS,IAAI,KAAC,WAAW,IAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAI,KAC7E,IACD,CACN,CAAC;AACJ,CAAC;AAOD,SAAS,WAAW,CAAC,EAAkC;QAAhC,KAAK,WAAA,EAAE,KAAK,WAAA;IACjC,IAAI,WAAW,GAAG,yDAAyD,CAAC;IAE5E,IAAI,KAAK,KAAK,SAAS,EAAE;QACvB,WAAW,IAAI,oBAAoB,CAAC;KACrC;SAAM;QACL,WAAW,IAAI,wBAAwB,CAAC;KACzC;IAED,OAAO,CACL,wBAAK,SAAS,EAAE,WAAW,iBACxB,KAAK,EACL,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,cAAM,CAAC,CAAC,CAAC,IAAI,EACnC,KAAK,KACF,CACP,CAAC;AACJ,CAAC;AAMD,SAAS,QAAQ,CAAC,EAAuB;QAArB,IAAI,UAAA;IACtB,OAAO,CACL,uBAAK,SAAS,EAAC,wBAAwB,gBACrC,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,IAC7D,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -3,6 +3,8 @@ import { IconVariant } from './DfxIcon';
|
|
|
3
3
|
interface StyledTabContainerProps {
|
|
4
4
|
tabs: Array<StyledTabProps>;
|
|
5
5
|
activeTab?: number;
|
|
6
|
+
darkTheme?: boolean;
|
|
7
|
+
spread?: boolean;
|
|
6
8
|
}
|
|
7
9
|
export interface StyledTabProps {
|
|
8
10
|
title: string;
|
|
@@ -13,6 +15,6 @@ export interface StyledTabProps {
|
|
|
13
15
|
flagWord2?: string;
|
|
14
16
|
onActivate?: () => void;
|
|
15
17
|
}
|
|
16
|
-
export default function StyledTabContainer({ tabs, activeTab }: StyledTabContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export default function StyledTabContainer({ tabs, activeTab, darkTheme, spread }: StyledTabContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
17
19
|
export {};
|
|
18
20
|
//# sourceMappingURL=StyledTabContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledTabContainer.d.ts","sourceRoot":"","sources":["../../src/stories/StyledTabContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,UAAU,uBAAuB;IAC/B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"StyledTabContainer.d.ts","sourceRoot":"","sources":["../../src/stories/StyledTabContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,UAAU,uBAAuB;IAC/B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,IAAI,EAAE,SAAa,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,uBAAuB,2CA2C7G"}
|
|
@@ -13,14 +13,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
13
13
|
import { useState } from 'react';
|
|
14
14
|
import StyledTab from './StyledTab';
|
|
15
15
|
export default function StyledTabContainer(_a) {
|
|
16
|
-
var tabs = _a.tabs, _b = _a.activeTab, activeTab = _b === void 0 ? 0 : _b;
|
|
16
|
+
var tabs = _a.tabs, _b = _a.activeTab, activeTab = _b === void 0 ? 0 : _b, darkTheme = _a.darkTheme, spread = _a.spread;
|
|
17
17
|
var _c = useState(activeTab), active = _c[0], setActive = _c[1];
|
|
18
|
-
return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "flex flex-wrap text-dfxBlue-800
|
|
18
|
+
return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "flex flex-wrap text-dfxBlue-800" }, { children: _jsxs("div", __assign({ className: "w-full rounded-lg ".concat(darkTheme ? 'border border-dfxGray-400' : '') }, { children: [_jsx("ul", __assign({ className: "flex mb-0 rounded-t-lg list-none flex-wrap p-0 flex-row ".concat(darkTheme ? 'bg-dfxGray-400' : 'bg-white/50'), role: "tablist" }, { children: tabs.map(function (tab, index) {
|
|
19
19
|
return (_jsx(StyledTab, __assign({ setActive: function () {
|
|
20
20
|
var _a;
|
|
21
21
|
setActive(index);
|
|
22
22
|
(_a = tab.onActivate) === null || _a === void 0 ? void 0 : _a.call(tab);
|
|
23
|
-
}, active: index === active, deactivated: tab.deactivated, icon: tab.icon, flagWord1: tab.flagWord1, flagWord2: tab.flagWord2 }, { children: tab.title }), index));
|
|
24
|
-
}) })), _jsx("div", __assign({ className: "relative flex flex-col min-w-0 break-words bg-white w-full
|
|
23
|
+
}, active: index === active, deactivated: tab.deactivated, icon: tab.icon, flagWord1: tab.flagWord1, flagWord2: tab.flagWord2, darkTheme: darkTheme, spread: spread }, { children: tab.title }), index));
|
|
24
|
+
}) })), _jsx("div", __assign({ className: "relative flex flex-col min-w-0 break-words bg-white w-full rounded-b-lg" }, { children: _jsx("div", __assign({ className: "p-8 flex-auto" }, { children: _jsx("div", __assign({ className: "tab-content tab-space" }, { children: tabs[active].content })) })) }))] })) })) }));
|
|
25
25
|
}
|
|
26
26
|
//# sourceMappingURL=StyledTabContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledTabContainer.js","sourceRoot":"","sources":["../../src/stories/StyledTabContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,SAAS,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"StyledTabContainer.js","sourceRoot":"","sources":["../../src/stories/StyledTabContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,SAAS,MAAM,aAAa,CAAC;AAmBpC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAmE;QAAjE,IAAI,UAAA,EAAE,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA;IAC3E,IAAA,KAAsB,QAAQ,CAAC,SAAS,CAAC,EAAxC,MAAM,QAAA,EAAE,SAAS,QAAuB,CAAC;IAEhD,OAAO,CACL,4BACE,uBAAK,SAAS,EAAC,iCAAiC,gBAC9C,wBAAK,SAAS,EAAE,4BAAqB,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,CAAE,iBACjF,sBACE,SAAS,EAAE,kEACT,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAC5C,EACF,IAAI,EAAC,SAAS,gBAEb,IAAI,CAAC,GAAG,CAAC,UAAC,GAAmB,EAAE,KAAa;4BAC3C,OAAO,CACL,KAAC,SAAS,aACR,SAAS,EAAE;;oCACT,SAAS,CAAC,KAAK,CAAC,CAAC;oCACjB,MAAA,GAAG,CAAC,UAAU,mDAAI,CAAC;gCACrB,CAAC,EACD,MAAM,EAAE,KAAK,KAAK,MAAM,EACxB,WAAW,EAAE,GAAG,CAAC,WAAW,EAE5B,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,gBAEb,GAAG,CAAC,KAAK,KAPL,KAAK,CAQA,CACb,CAAC;wBACJ,CAAC,CAAC,IACC,EACL,uBAAK,SAAS,EAAC,yEAAyE,gBACtF,uBAAK,SAAS,EAAC,eAAe,gBAC5B,uBAAK,SAAS,EAAC,uBAAuB,gBAAE,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,IAAO,IAC/D,IACF,KACF,IACF,GACL,CACJ,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"private": false,
|
|
3
3
|
"name": "@dfx.swiss/react-components",
|
|
4
|
-
"version": "1.3.0-beta.
|
|
4
|
+
"version": "1.3.0-beta.6",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"tailwindcss": "^3.2.4",
|
|
89
89
|
"webpack": "^5.75.0"
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "b52681b9678fd2e06f7892653953c5100d17bf61"
|
|
92
92
|
}
|