wex-ui-lib 1.4.1 → 1.4.3
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/index.cjs.js +35 -27
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +4 -4
- package/dist/index.esm.js +35 -27
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Footer/Footer.types.d.ts +2 -1
- package/dist/types/components/Navbar/Navbar.stories.d.ts +1 -0
- package/dist/types/components/Navbar/Navbar.types.d.ts +1 -2
- package/dist/types/components/Tabs/Tabs.d.ts +2 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -2194,9 +2194,9 @@ var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4
|
|
|
2194
2194
|
function Navbar(props) {
|
|
2195
2195
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
2196
2196
|
return (React.createElement(React.Fragment, null,
|
|
2197
|
-
React.createElement(NavbarContainer, {
|
|
2197
|
+
React.createElement(NavbarContainer, __assign({}, props),
|
|
2198
2198
|
React.createElement(Logo$1, { src: logo === null || logo === undefined ? undefined : logo.url, width: logo === null || logo === undefined ? undefined : logo.width, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
|
|
2199
|
-
React.createElement(ItemsContainer,
|
|
2199
|
+
React.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
|
|
2200
2200
|
var _a, _b;
|
|
2201
2201
|
return (React.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
|
|
2202
2202
|
e.preventDefault();
|
|
@@ -2213,12 +2213,12 @@ function Navbar(props) {
|
|
|
2213
2213
|
} }, subitem.label)));
|
|
2214
2214
|
})))));
|
|
2215
2215
|
})),
|
|
2216
|
-
button
|
|
2216
|
+
button && (React.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))));
|
|
2217
2217
|
}
|
|
2218
|
-
var NavbarContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n
|
|
2219
|
-
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 100%;\n
|
|
2220
|
-
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"], ["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"])), function (props) { var _a; return ((_a = props.config
|
|
2221
|
-
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"], ["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"])), function (props) { return props.width || '130px'; }, function (props) { return props.width || '130px'; });
|
|
2218
|
+
var NavbarContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n ", ";\n ", ";\n grid-template-rows: 100%;\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n grid-area: button;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n ", ";\n ", ";\n grid-template-rows: 100%;\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n grid-area: button;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.background) || theme.black; }, function (props) { var _a; return ((_a = props.config) === null || _a === undefined ? undefined : _a.height) || '80px'; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-columns: auto auto auto" : "grid-template-columns: auto auto"; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-areas: \"logo items button\"" : "grid-template-areas: \"logo items\""; });
|
|
2219
|
+
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"], ["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"])));
|
|
2220
|
+
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"], ["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, theme.gray, disappearAnimation, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.textHover) || theme.primary; }, appearAnimation, function (props) { var _a, _b; return !props.hasSubitems ? ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.borderHover) || "white" : "transparent"; }, appearAnimation);
|
|
2221
|
+
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n grid-area: logo;\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"], ["\n grid-area: logo;\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"])), function (props) { return props.width || '130px'; }, function (props) { return props.width || '130px'; });
|
|
2222
2222
|
var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"], ["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"])));
|
|
2223
2223
|
var templateObject_1$9, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
|
|
2224
2224
|
|
|
@@ -2451,21 +2451,21 @@ function Footer(props) {
|
|
|
2451
2451
|
var _a = props.logo, logo = _a === undefined ? {
|
|
2452
2452
|
url: "",
|
|
2453
2453
|
callback: function () { }
|
|
2454
|
-
} : _a, subtitle = props.subtitle,
|
|
2454
|
+
} : _a, subtitle = props.subtitle, _b = props.colors, colors = _b === undefined ? {} : _b, _c = props.socialMediaUrls, socialMediaUrls = _c === undefined ? {
|
|
2455
2455
|
instagram: "",
|
|
2456
2456
|
twitter: "",
|
|
2457
2457
|
facebook: "",
|
|
2458
2458
|
linkedin: "",
|
|
2459
2459
|
youtube: ""
|
|
2460
|
-
} :
|
|
2460
|
+
} : _c, _d = props.contactData, contactData = _d === undefined ? {
|
|
2461
2461
|
phone: "",
|
|
2462
2462
|
phone2: "",
|
|
2463
2463
|
email: "",
|
|
2464
2464
|
email2: "",
|
|
2465
2465
|
address: "",
|
|
2466
2466
|
address2: "",
|
|
2467
|
-
} :
|
|
2468
|
-
return (React.createElement(Container$3, {
|
|
2467
|
+
} : _d, navItems = props.navItems;
|
|
2468
|
+
return (React.createElement(Container$3, { colors: colors },
|
|
2469
2469
|
React.createElement(Logo, { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
|
|
2470
2470
|
React.createElement(Subtitle, null, subtitle),
|
|
2471
2471
|
React.createElement(SocialMedia, null,
|
|
@@ -2488,7 +2488,7 @@ function Footer(props) {
|
|
|
2488
2488
|
contactData.email2 && React.createElement("p", null, contactData.email2)),
|
|
2489
2489
|
React.createElement(Nav, null, navItems && navItems.map(function (item, index) { return React.createElement("a", { key: index, onClick: item.callback }, item.label); }))));
|
|
2490
2490
|
}
|
|
2491
|
-
var Container$3 = newStyled.footer(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n
|
|
2491
|
+
var Container$3 = newStyled.footer(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n border-top: 2px solid ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n display: grid;\n gap: 18px;\n grid-template-columns: auto auto auto;\n grid-template-rows: auto auto auto;\n grid-template-areas: \n \"logo . contactData\"\n \"subtitle . contactData\"\n \"socialMedia . nav\"\n ;\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 34px 4vw;\n gap: 40px;\n grid-template-areas: \n \"logo\"\n \"subtitle\"\n \"nav\"\n \"contactData\"\n \"socialMedia\"\n ;\n }\n"], ["\n width: 100%;\n background-color: ", ";\n border-top: 2px solid ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n display: grid;\n gap: 18px;\n grid-template-columns: auto auto auto;\n grid-template-rows: auto auto auto;\n grid-template-areas: \n \"logo . contactData\"\n \"subtitle . contactData\"\n \"socialMedia . nav\"\n ;\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 34px 4vw;\n gap: 40px;\n grid-template-areas: \n \"logo\"\n \"subtitle\"\n \"nav\"\n \"contactData\"\n \"socialMedia\"\n ;\n }\n"])), function (props) { return props.colors.background || theme.black2; }, function (props) { return props.colors.border || theme.black2; });
|
|
2492
2492
|
var Logo = newStyled.img(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n grid-area: logo;\n max-width: 160px;\n cursor: pointer;\n transition: 200ms;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n grid-area: logo;\n max-width: 160px;\n cursor: pointer;\n transition: 200ms;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
|
|
2493
2493
|
var Subtitle = newStyled.h5(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n grid-area: subtitle;\n font-size: 16px;\n letter-spacing: .5px;\n"], ["\n grid-area: subtitle;\n font-size: 16px;\n letter-spacing: .5px;\n"])));
|
|
2494
2494
|
var SocialMedia = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n grid-area: socialMedia;\n display: flex;\n gap: 12px;\n"], ["\n grid-area: socialMedia;\n display: flex;\n gap: 12px;\n"])));
|
|
@@ -2556,29 +2556,37 @@ var ItemContent = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __ma
|
|
|
2556
2556
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
|
|
2557
2557
|
|
|
2558
2558
|
var Tabs = function (_a) {
|
|
2559
|
-
var
|
|
2560
|
-
var
|
|
2561
|
-
var
|
|
2559
|
+
var _b, _c;
|
|
2560
|
+
var tabs = _a.tabs, font = _a.font, _d = _a.displayMode, displayMode = _d === undefined ? "dark" : _d, accentColor = _a.accentColor, tabPadding = _a.tabPadding, onTabChange = _a.onTabChange, activeTabId = _a.activeTabId;
|
|
2561
|
+
var _e = React.useState((_b = tabs[0]) === null || _b === undefined ? undefined : _b.id), internalActiveTabId = _e[0], setInternalActiveTabId = _e[1];
|
|
2562
|
+
var isControlled = activeTabId !== undefined;
|
|
2563
|
+
var activeTab = isControlled ? activeTabId : internalActiveTabId;
|
|
2564
|
+
var _f = React.useState({ left: 0, width: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
|
|
2562
2565
|
var tabRefs = React.useRef([]);
|
|
2563
2566
|
React.useEffect(function () {
|
|
2564
|
-
onTabChange && onTabChange(
|
|
2565
|
-
var updateIndicator = function (
|
|
2566
|
-
var
|
|
2567
|
-
if (
|
|
2568
|
-
|
|
2567
|
+
onTabChange && onTabChange(activeTab);
|
|
2568
|
+
var updateIndicator = function () {
|
|
2569
|
+
var index = tabs.findIndex(function (tab) { return tab.id === activeTab; });
|
|
2570
|
+
if (index !== -1) {
|
|
2571
|
+
var tab = tabRefs.current[index];
|
|
2572
|
+
if (tab) {
|
|
2573
|
+
setIndicatorStyle({ left: tab.offsetLeft, width: tab.offsetWidth });
|
|
2574
|
+
}
|
|
2569
2575
|
}
|
|
2570
2576
|
};
|
|
2571
|
-
updateIndicator(
|
|
2577
|
+
updateIndicator();
|
|
2572
2578
|
}, [activeTab]);
|
|
2579
|
+
var handleTabClick = function (id) {
|
|
2580
|
+
if (!isControlled) {
|
|
2581
|
+
setInternalActiveTabId(id);
|
|
2582
|
+
}
|
|
2583
|
+
onTabChange === null || onTabChange === undefined ? undefined : onTabChange(id);
|
|
2584
|
+
};
|
|
2573
2585
|
return (React.createElement(TabsContainer, null,
|
|
2574
2586
|
React.createElement(TabsList, null,
|
|
2575
|
-
tabs.map(function (tab, index) { return (React.createElement(Tab
|
|
2576
|
-
// @ts-ignore
|
|
2577
|
-
, {
|
|
2578
|
-
// @ts-ignore
|
|
2579
|
-
ref: function (el) { return (tabRefs.current[index] = el); }, key: index, active: activeTab === index, onClick: function () { return setActiveTab(index); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
|
|
2587
|
+
tabs.map(function (tab, index) { return (React.createElement(Tab, { ref: function (el) { tabRefs.current[index] = el; }, key: tab.id, active: activeTab === tab.id, onClick: function () { return handleTabClick(tab.id); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
|
|
2580
2588
|
React.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
|
|
2581
|
-
React.createElement(TabPanel, null, tabs
|
|
2589
|
+
React.createElement(TabPanel, null, (_c = tabs.find(function (tab) { return tab.id === activeTab; })) === null || _c === undefined ? undefined : _c.content)));
|
|
2582
2590
|
};
|
|
2583
2591
|
var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n"], ["\n width: 100%;\n position: relative;\n"])));
|
|
2584
2592
|
var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n position: relative;\n"], ["\n display: flex;\n justify-content: center;\n position: relative;\n"])));
|