wex-ui-lib 1.1.0 → 1.1.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/index.cjs.js +31 -23
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +31 -23
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Slider/Slider.stories.d.ts +1 -0
- package/dist/types/components/Slider/Slider.types.d.ts +2 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -2006,8 +2006,8 @@ function Button(props) {
|
|
|
2006
2006
|
var DefaultButton = newStyled.button(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"], ["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.backgroundHover) ? "background-color: ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.backgroundHover) : "filter: brightness(1.4)"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { return props.hasArrow ? "unset" : "none"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; });
|
|
2007
2007
|
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"], ["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || 'transparent'; }, function (props) { return props.color || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; });
|
|
2008
2008
|
var PillButton = newStyled(DefaultButton)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "], ["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "])));
|
|
2009
|
-
var RoundedButton = newStyled(DefaultButton)(templateObject_4$
|
|
2010
|
-
var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$
|
|
2009
|
+
var RoundedButton = newStyled(DefaultButton)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
2010
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$2;
|
|
2011
2011
|
|
|
2012
2012
|
function insertWithoutScoping(cache, serialized) {
|
|
2013
2013
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2152,10 +2152,10 @@ var _createEmotion = createEmotion({
|
|
|
2152
2152
|
var appearAnimation = keyframes(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"], ["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"])));
|
|
2153
2153
|
var disappearAnimation = keyframes(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"], ["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"])));
|
|
2154
2154
|
var fadeInFromLeft = keyframes(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2155
|
-
var fadeInFromRight = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2156
|
-
var fadeInFromTop = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2155
|
+
var fadeInFromRight = keyframes(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2156
|
+
var fadeInFromTop = keyframes(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2157
2157
|
var fadeInFromBottom = keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2158
|
-
var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6;
|
|
2158
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
2159
2159
|
|
|
2160
2160
|
function Navbar(props) {
|
|
2161
2161
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
@@ -2190,11 +2190,11 @@ function Hero(props) {
|
|
|
2190
2190
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
2191
2191
|
var _b = useState(imageUrls && imageUrls[0] ? imageUrls[0] : ""), activeBackgroundUrl = _b[0]; _b[1];
|
|
2192
2192
|
return (React__default.createElement(React__default.Fragment, null,
|
|
2193
|
-
React__default.createElement(Container$
|
|
2193
|
+
React__default.createElement(Container$3, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
|
|
2194
2194
|
overlay && (React__default.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
|
2195
2195
|
React__default.createElement(HeroContent, null, children))));
|
|
2196
2196
|
}
|
|
2197
|
-
var Container$
|
|
2197
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"])), function (props) { return "calc(".concat(props.height, " - ").concat(props.marginTop, ")"); }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; });
|
|
2198
2198
|
var Overlay = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
|
|
2199
2199
|
var HeroContent = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n z-index: 2;\n"])));
|
|
2200
2200
|
var templateObject_1$4, templateObject_2$3, templateObject_3$1;
|
|
@@ -2267,7 +2267,7 @@ function Fade(props) {
|
|
|
2267
2267
|
root: document,
|
|
2268
2268
|
rootMargin: "-10% 0% -10% 0%"
|
|
2269
2269
|
}), isIntersecting = _b.isIntersecting, ref = _b.ref;
|
|
2270
|
-
return (React__default.createElement(Container$
|
|
2270
|
+
return (React__default.createElement(Container$2, { ref: ref, isVisible: isIntersecting, animation: function () {
|
|
2271
2271
|
switch (type) {
|
|
2272
2272
|
case 'bottom-to-top':
|
|
2273
2273
|
return fadeInFromBottom;
|
|
@@ -2280,14 +2280,14 @@ function Fade(props) {
|
|
|
2280
2280
|
}
|
|
2281
2281
|
} }, children));
|
|
2282
2282
|
}
|
|
2283
|
-
var Container$
|
|
2283
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
|
2284
2284
|
var templateObject_1$3;
|
|
2285
2285
|
|
|
2286
2286
|
function Slider(props) {
|
|
2287
|
-
var children = props.children, forwardedRef = props.forwardedRef, autoplayTicTime = props.autoplayTicTime, _a = props.visibleInactiveSlides, visibleInactiveSlides = _a === undefined ? false : _a, _b = props.showArrowKeys, showArrowKeys = _b === undefined ? false : _b, onSlideChange = props.onSlideChange;
|
|
2287
|
+
var children = props.children, forwardedRef = props.forwardedRef, autoplayTicTime = props.autoplayTicTime, _a = props.visibleInactiveSlides, visibleInactiveSlides = _a === undefined ? false : _a, _b = props.showArrowKeys, showArrowKeys = _b === undefined ? false : _b, _c = props.showRadioButtons, showRadioButtons = _c === undefined ? false : _c, radioButtonsColor = props.radioButtonsColor, onSlideChange = props.onSlideChange;
|
|
2288
2288
|
var wrapperRef = useRef(null);
|
|
2289
|
-
var
|
|
2290
|
-
var
|
|
2289
|
+
var _d = useState(1), currentSlide = _d[0], setCurrentSlide = _d[1];
|
|
2290
|
+
var _e = useState(0), translateX = _e[0], setTranslateX = _e[1];
|
|
2291
2291
|
useImperativeHandle(forwardedRef, function () {
|
|
2292
2292
|
return {
|
|
2293
2293
|
goTo: function (option) { return goTo(option); },
|
|
@@ -2302,7 +2302,7 @@ function Slider(props) {
|
|
|
2302
2302
|
React__default.createElement(Slide, { key: children.length + 2, style: { backgroundColor: "red" } }, children[0])
|
|
2303
2303
|
], false);
|
|
2304
2304
|
}
|
|
2305
|
-
return React__default.createElement(Slide, null, children[0]);
|
|
2305
|
+
return [React__default.createElement(Slide, null, children[0])];
|
|
2306
2306
|
}, []);
|
|
2307
2307
|
useLayoutEffect(function () {
|
|
2308
2308
|
setTranslateX(wrapperRef.current.clientWidth * currentSlide);
|
|
@@ -2335,6 +2335,10 @@ function Slider(props) {
|
|
|
2335
2335
|
setCurrentSlide(function (next) { return ++next; });
|
|
2336
2336
|
}
|
|
2337
2337
|
break;
|
|
2338
|
+
default:
|
|
2339
|
+
setTranslateX(wrapperRef.current.clientWidth * (option));
|
|
2340
|
+
setCurrentSlide(option);
|
|
2341
|
+
break;
|
|
2338
2342
|
}
|
|
2339
2343
|
}, [children, currentSlide]);
|
|
2340
2344
|
useEffect(function () {
|
|
@@ -2360,16 +2364,20 @@ function Slider(props) {
|
|
|
2360
2364
|
}, autoplayTicTime);
|
|
2361
2365
|
}
|
|
2362
2366
|
}, [goTo, autoplayTicTime]);
|
|
2363
|
-
return (React__default.createElement(
|
|
2364
|
-
React__default.createElement(
|
|
2365
|
-
|
|
2366
|
-
React__default.createElement(
|
|
2367
|
-
|
|
2367
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
2368
|
+
React__default.createElement(SliderContainer, { visibleInactiveSlides: visibleInactiveSlides },
|
|
2369
|
+
React__default.createElement(SlidesWrapper, { ref: wrapperRef, translateX: translateX }, items),
|
|
2370
|
+
showArrowKeys && (React__default.createElement(React__default.Fragment, null,
|
|
2371
|
+
React__default.createElement(Icon, { callback: function () { return goTo('prev'); }, color: 'black', icon: 'arrow-long' }),
|
|
2372
|
+
React__default.createElement(Icon, { callback: function () { return goTo('next'); }, color: 'black', icon: 'arrow-long' })))),
|
|
2373
|
+
showRadioButtons && (React__default.createElement(RadiosContainer, null, children.map(function (item, index) { return (React__default.createElement(RadioButton, { key: index, onClick: function () { return goTo(index + 1); }, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
|
|
2368
2374
|
}
|
|
2369
|
-
var
|
|
2375
|
+
var SliderContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\n width: 100%;\n & > button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"], ["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\n width: 100%;\n & > button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"])), function (props) { return props.visibleInactiveSlides ? 'visible' : 'hidden'; });
|
|
2370
2376
|
var SlidesWrapper = newStyled.ul(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"], ["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"])), function (props) { return -props.translateX; });
|
|
2371
2377
|
var Slide = newStyled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
2372
|
-
var
|
|
2378
|
+
var RadiosContainer = newStyled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n transform: translateY(20px);\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 58px;\n cursor: pointer;\n list-style: none;\n"], ["\n position: relative;\n display: flex;\n transform: translateY(20px);\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 58px;\n cursor: pointer;\n list-style: none;\n"])));
|
|
2379
|
+
var RadioButton = newStyled.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n width: 7px; \n height: 7px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: -4px;\n width: 12px;\n height: 12px;\n border-radius: 50px;\n background-color: transparent;\n border: 2px solid ", ";\n opacity: 80%;\n z-index: -1;\n }\n"], ["\n position: relative;\n width: 7px; \n height: 7px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: -4px;\n width: 12px;\n height: 12px;\n border-radius: 50px;\n background-color: transparent;\n border: 2px solid ", ";\n opacity: 80%;\n z-index: -1;\n }\n"])), function (props) { return props.radioButtonsColor || theme.black; }, function (props) { return props.isSelected ? props.radioButtonsColor || theme.black : "unset"; });
|
|
2380
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3, templateObject_4, templateObject_5;
|
|
2373
2381
|
|
|
2374
2382
|
function Showcase(props) {
|
|
2375
2383
|
var items = props.items, backgroundColor = props.backgroundColor;
|
|
@@ -2396,7 +2404,7 @@ var ShowcaseItem = newStyled.a(templateObject_2$1 || (templateObject_2$1 = __mak
|
|
|
2396
2404
|
var templateObject_1$1, templateObject_2$1;
|
|
2397
2405
|
|
|
2398
2406
|
function Footer(props) {
|
|
2399
|
-
var logoUrl = props.logoUrl, subtitle = props.subtitle
|
|
2407
|
+
var logoUrl = props.logoUrl, subtitle = props.subtitle, backgroundColor = props.backgroundColor, _a = props.socialMediaUrls, socialMediaUrls = _a === undefined ? {
|
|
2400
2408
|
instagram: "",
|
|
2401
2409
|
twitter: "",
|
|
2402
2410
|
facebook: "",
|
|
@@ -2409,7 +2417,7 @@ function Footer(props) {
|
|
|
2409
2417
|
address: "",
|
|
2410
2418
|
address2: "",
|
|
2411
2419
|
} : _b, navItems = props.navItems;
|
|
2412
|
-
return (React__default.createElement(Container,
|
|
2420
|
+
return (React__default.createElement(Container, { backgroundColor: backgroundColor },
|
|
2413
2421
|
React__default.createElement("div", { className: 'left' },
|
|
2414
2422
|
React__default.createElement("img", { src: logoUrl, alt: "logo" }),
|
|
2415
2423
|
React__default.createElement("h5", null, subtitle),
|
|
@@ -2428,7 +2436,7 @@ function Footer(props) {
|
|
|
2428
2436
|
contactData.email2 && React__default.createElement("p", null, contactData.email2)),
|
|
2429
2437
|
React__default.createElement("nav", null, navItems && navItems.map(function (item) { return React__default.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); })))));
|
|
2430
2438
|
}
|
|
2431
|
-
var Container = newStyled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"], ["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"])), theme.black2, theme.primary);
|
|
2439
|
+
var Container = newStyled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"], ["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"])), function (props) { return props.backgroundColor || theme.black2; }, theme.primary);
|
|
2432
2440
|
newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
2433
2441
|
var templateObject_1, templateObject_2;
|
|
2434
2442
|
|