@cerebruminc/cerebellum 16.5.0 → 16.5.1
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/lib/cjs/Footer.cjs
CHANGED
|
@@ -18,17 +18,22 @@ require('./ButtonColorFamilyEnum.cjs');
|
|
|
18
18
|
require('./colors-BudXQEyU.js');
|
|
19
19
|
|
|
20
20
|
var MOBILE_LAYOUT_BREAKPOINT = 900;
|
|
21
|
-
var FooterBase = styled.styled.div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n align-items: center;\n border-top: solid 1px ", ";\n display: flex;\n justify-content:
|
|
21
|
+
var FooterBase = styled.styled.div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n align-items: center;\n border-top: solid 1px ", ";\n display: flex;\n justify-content: ", ";\n max-width: ", "px;\n margin: 0 auto;\n position: relative;\n transition: none;\n width: 100%;\n @media all and (max-width: 1700px) {\n width: 84%;\n margin: 0 8%;\n }\n @media all and (max-width: ", "px) {\n border-color: transparent;\n display: grid;\n grid-template-rows: ", ";\n grid-template-columns: 1fr;\n\t\tjustify-content: space-between;\n padding: 0;\n &:after {\n content: \"\";\n position: absolute;\n top: ", "px;\n height: 1px;\n background-color: ", ";\n left: 0;\n right: 0;\n }\n }\n"], ["\n align-items: center;\n border-top: solid 1px ", ";\n display: flex;\n justify-content: ", ";\n max-width: ", "px;\n margin: 0 auto;\n position: relative;\n transition: none;\n width: 100%;\n @media all and (max-width: 1700px) {\n width: 84%;\n margin: 0 8%;\n }\n @media all and (max-width: ", "px) {\n border-color: transparent;\n display: grid;\n grid-template-rows: ", ";\n grid-template-columns: 1fr;\n\t\tjustify-content: space-between;\n padding: 0;\n &:after {\n content: \"\";\n position: absolute;\n top: ", "px;\n height: 1px;\n background-color: ", ";\n left: 0;\n right: 0;\n }\n }\n"])), function (_a) {
|
|
22
22
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
23
23
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderColor) || theme.footer.borderColor;
|
|
24
|
+
}, function (_a) {
|
|
25
|
+
var $centerLinks = _a.$centerLinks;
|
|
26
|
+
return ($centerLinks ? "center" : "space-between");
|
|
24
27
|
}, function (_a) {
|
|
25
28
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
26
29
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.maxFooterWidth) || theme.footer.maxFooterWidth;
|
|
27
30
|
}, MOBILE_LAYOUT_BREAKPOINT, function (_a) {
|
|
28
|
-
var $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
29
|
-
return $
|
|
30
|
-
? "[
|
|
31
|
-
:
|
|
31
|
+
var $centerLinks = _a.$centerLinks, $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
32
|
+
return $centerLinks
|
|
33
|
+
? "[logo-start] 100px [text-start] 70px [text-end]"
|
|
34
|
+
: $stackSocialOnMobile
|
|
35
|
+
? "[social-start] 104px [logo-start] 142px [text-start] 70px [text-end]"
|
|
36
|
+
: "[logo-start] 100px [social-start] 80px [text-start] 70px [text-end]";
|
|
32
37
|
}, function (_a) {
|
|
33
38
|
var $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
34
39
|
return ($stackSocialOnMobile ? 104 : 0);
|
|
@@ -36,9 +41,12 @@ var FooterBase = styled.styled.div(templateObject_1 || (templateObject_1 = _tsli
|
|
|
36
41
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
37
42
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderColor) || theme.footer.borderColor;
|
|
38
43
|
});
|
|
39
|
-
var LogoBox = styled.styled.div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n position:
|
|
40
|
-
var $
|
|
41
|
-
return ($
|
|
44
|
+
var LogoBox = styled.styled.div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n position: ", ";\n\tleft: 0px;\n @media all and (max-width: ", "px) {\n\t\tgrid-row-start: logo-start;\n grid-row-end: ", ";\n padding-top: ", "px;\n\t\tposition: relative;\n }\n"], ["\n position: ", ";\n\tleft: 0px;\n @media all and (max-width: ", "px) {\n\t\tgrid-row-start: logo-start;\n grid-row-end: ", ";\n padding-top: ", "px;\n\t\tposition: relative;\n }\n"])), function (_a) {
|
|
45
|
+
var $centerLinks = _a.$centerLinks;
|
|
46
|
+
return ($centerLinks ? "absolute" : "relative");
|
|
47
|
+
}, MOBILE_LAYOUT_BREAKPOINT, function (_a) {
|
|
48
|
+
var $centerLinks = _a.$centerLinks, $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
49
|
+
return ($stackSocialOnMobile || $centerLinks ? "text-start" : "social-start");
|
|
42
50
|
}, function (_a) {
|
|
43
51
|
var $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
44
52
|
return ($stackSocialOnMobile ? 0 : 30);
|
|
@@ -57,10 +65,22 @@ var FooterLink = styled.styled.a(templateObject_4 || (templateObject_4 = _tslib.
|
|
|
57
65
|
var theme = _a.theme;
|
|
58
66
|
return focusAfter.focusAfter({ focusColor: theme.focusColor, offset: -3 });
|
|
59
67
|
});
|
|
60
|
-
var DetailsBox = styled.styled.div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 1 1 0%;\n height: 117px;\n justify-content:
|
|
61
|
-
var
|
|
68
|
+
var DetailsBox = styled.styled.div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 1 1 0%;\n\tgap: ", "px;\n height: 117px;\n justify-content: ", ";\n max-width: 712px;\n @media (max-width: 1365px) {\n max-width: ", "px;\n }\n @media (max-width: 1265px) {\n flex-direction: column;\n gap: 20px;\n height: 140px;\n justify-content: center;\n padding-top: 0;\n }\n @media all and (max-width: ", "px) {\n flex-direction: row;\n grid-row-start: text-start;\n grid-row-end: text-end;\n justify-content: center;\n height: 70px;\n max-width: 100%;\n }\n @media all and (max-width: 780px) {\n flex-direction: column;\n justify-content: space-between;\n height: 60px;\n }\n"], ["\n align-items: center;\n display: flex;\n flex: 1 1 0%;\n\tgap: ", "px;\n height: 117px;\n justify-content: ", ";\n max-width: 712px;\n @media (max-width: 1365px) {\n max-width: ", "px;\n }\n @media (max-width: 1265px) {\n flex-direction: column;\n gap: 20px;\n height: 140px;\n justify-content: center;\n padding-top: 0;\n }\n @media all and (max-width: ", "px) {\n flex-direction: row;\n grid-row-start: text-start;\n grid-row-end: text-end;\n justify-content: center;\n height: 70px;\n max-width: 100%;\n }\n @media all and (max-width: 780px) {\n flex-direction: column;\n justify-content: space-between;\n height: 60px;\n }\n"])), function (_a) {
|
|
69
|
+
var $oneTerm = _a.$oneTerm;
|
|
70
|
+
return ($oneTerm ? 30 : 0);
|
|
71
|
+
}, function (_a) {
|
|
72
|
+
var $oneTerm = _a.$oneTerm;
|
|
73
|
+
return ($oneTerm ? "center" : "space-between");
|
|
74
|
+
}, function (_a) {
|
|
75
|
+
var $centerLinks = _a.$centerLinks;
|
|
76
|
+
return ($centerLinks ? 670 : 640);
|
|
77
|
+
}, MOBILE_LAYOUT_BREAKPOINT);
|
|
78
|
+
var TermsBox = styled.styled.div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n color: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 70px;\n justify-content: space-between;\n letter-spacing: 0.824px;\n\tpadding-left: ", "px;\n position: relative;\n\t@media (max-width: 1265px) {\n\t\tpadding-left: 0;\n\t}\n @media all and (max-width: ", "px) {\n gap: 25px;\n }\n"], ["\n color: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 70px;\n justify-content: space-between;\n letter-spacing: 0.824px;\n\tpadding-left: ", "px;\n position: relative;\n\t@media (max-width: 1265px) {\n\t\tpadding-left: 0;\n\t}\n @media all and (max-width: ", "px) {\n gap: 25px;\n }\n"])), function (_a) {
|
|
62
79
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
63
80
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.footerLinksColor) || theme.footer.footerLinksColor;
|
|
81
|
+
}, function (_a) {
|
|
82
|
+
var $centerLinks = _a.$centerLinks;
|
|
83
|
+
return ($centerLinks ? 200 : 0);
|
|
64
84
|
}, MOBILE_LAYOUT_BREAKPOINT);
|
|
65
85
|
var Copyright = styled.styled.p(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n color: ", ";\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0.824px;\n position: relative;\n"], ["\n color: ", ";\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0.824px;\n position: relative;\n"])), function (_a) {
|
|
66
86
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
@@ -89,7 +109,11 @@ var Footer = function (_a) {
|
|
|
89
109
|
var companyName = _a.companyName, gitHubUrl = _a.gitHubUrl, linkedInUrl = _a.linkedInUrl, Logo = _a.Logo, _b = _a.logoUrl, logoUrl = _b === void 0 ? "/" : _b, privacyUrl = _a.privacyUrl, stackSocialOnMobile = _a.stackSocialOnMobile, termsUrl = _a.termsUrl, themeOverride = _a.themeOverride, twitterUrl = _a.twitterUrl;
|
|
90
110
|
var theme = styled.useTheme();
|
|
91
111
|
var socialColorFamily = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.socialColor) || theme.footer.socialColor;
|
|
92
|
-
|
|
112
|
+
var socialSkills = twitterUrl || linkedInUrl || gitHubUrl;
|
|
113
|
+
var oneTerm = (privacyUrl && !termsUrl) || (!privacyUrl && termsUrl);
|
|
114
|
+
// Center everything except the logo. ie, the links are uneven, and we want the line in the center
|
|
115
|
+
var centerLinks = Boolean(oneTerm && !socialSkills);
|
|
116
|
+
return (jsxRuntime.jsxs(FooterBase, { "$themeOverride": themeOverride, "$stackSocialOnMobile": stackSocialOnMobile, "$centerLinks": centerLinks, children: [jsxRuntime.jsx(LogoBox, { "$stackSocialOnMobile": stackSocialOnMobile, "$centerLinks": centerLinks, children: jsxRuntime.jsx(LogoLink, { href: logoUrl, children: jsxRuntime.jsx(Logo, {}) }) }), jsxRuntime.jsxs(DetailsBox, { "$oneTerm": Boolean(oneTerm), "$centerLinks": centerLinks, children: [jsxRuntime.jsxs(TermsBox, { "$themeOverride": themeOverride, "$centerLinks": centerLinks, children: [privacyUrl && jsxRuntime.jsx(FooterLink, { href: privacyUrl, children: "Privacy Policy" }), privacyUrl && termsUrl && jsxRuntime.jsx(MobileLine, {}), termsUrl && jsxRuntime.jsx(FooterLink, { href: termsUrl, children: "Terms & Conditions" })] }), jsxRuntime.jsx(Line, { "$themeOverride": themeOverride }), jsxRuntime.jsx(Copyright, { "$themeOverride": themeOverride, children: "".concat(companyName, " \u00A9 ").concat(new Date().getFullYear(), " All rights reserved.") })] }), socialSkills && (jsxRuntime.jsx(SocialLinks, { "$stackSocialOnMobile": stackSocialOnMobile, children: jsxRuntime.jsxs(SocialGrid, { children: [twitterUrl && (jsxRuntime.jsx(Link, { href: twitterUrl, target: "_blank", tabIndex: -1, children: jsxRuntime.jsx(IconButton.IconButton, { Icon: Twitter.Twitter, size: 40, colorFamily: socialColorFamily, ariaLabel: "Twitter link" }) })), linkedInUrl && (jsxRuntime.jsx(Link, { href: linkedInUrl, target: "_blank", tabIndex: -1, children: jsxRuntime.jsx(IconButton.IconButton, { Icon: LinkedIn.LinkedIn, size: 40, colorFamily: socialColorFamily, ariaLabel: "LinkedIn link" }) })), gitHubUrl && (jsxRuntime.jsx(Link, { href: gitHubUrl, target: "_blank", tabIndex: -1, children: jsxRuntime.jsx(IconButton.IconButton, { Icon: GitHub.GitHub, size: 40, colorFamily: socialColorFamily, ariaLabel: "GitHub link" }) }))] }) }))] }));
|
|
93
117
|
};
|
|
94
118
|
|
|
95
119
|
exports.Footer = Footer;
|
package/lib/cjs/Footer.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Footer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/lib/esm/Footer.js
CHANGED
|
@@ -16,17 +16,22 @@ import './ButtonColorFamilyEnum.js';
|
|
|
16
16
|
import './colors-D-UTb8yU.js';
|
|
17
17
|
|
|
18
18
|
var MOBILE_LAYOUT_BREAKPOINT = 900;
|
|
19
|
-
var FooterBase = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n border-top: solid 1px ", ";\n display: flex;\n justify-content:
|
|
19
|
+
var FooterBase = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n border-top: solid 1px ", ";\n display: flex;\n justify-content: ", ";\n max-width: ", "px;\n margin: 0 auto;\n position: relative;\n transition: none;\n width: 100%;\n @media all and (max-width: 1700px) {\n width: 84%;\n margin: 0 8%;\n }\n @media all and (max-width: ", "px) {\n border-color: transparent;\n display: grid;\n grid-template-rows: ", ";\n grid-template-columns: 1fr;\n\t\tjustify-content: space-between;\n padding: 0;\n &:after {\n content: \"\";\n position: absolute;\n top: ", "px;\n height: 1px;\n background-color: ", ";\n left: 0;\n right: 0;\n }\n }\n"], ["\n align-items: center;\n border-top: solid 1px ", ";\n display: flex;\n justify-content: ", ";\n max-width: ", "px;\n margin: 0 auto;\n position: relative;\n transition: none;\n width: 100%;\n @media all and (max-width: 1700px) {\n width: 84%;\n margin: 0 8%;\n }\n @media all and (max-width: ", "px) {\n border-color: transparent;\n display: grid;\n grid-template-rows: ", ";\n grid-template-columns: 1fr;\n\t\tjustify-content: space-between;\n padding: 0;\n &:after {\n content: \"\";\n position: absolute;\n top: ", "px;\n height: 1px;\n background-color: ", ";\n left: 0;\n right: 0;\n }\n }\n"])), function (_a) {
|
|
20
20
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
21
21
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderColor) || theme.footer.borderColor;
|
|
22
|
+
}, function (_a) {
|
|
23
|
+
var $centerLinks = _a.$centerLinks;
|
|
24
|
+
return ($centerLinks ? "center" : "space-between");
|
|
22
25
|
}, function (_a) {
|
|
23
26
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
24
27
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.maxFooterWidth) || theme.footer.maxFooterWidth;
|
|
25
28
|
}, MOBILE_LAYOUT_BREAKPOINT, function (_a) {
|
|
26
|
-
var $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
27
|
-
return $
|
|
28
|
-
? "[
|
|
29
|
-
:
|
|
29
|
+
var $centerLinks = _a.$centerLinks, $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
30
|
+
return $centerLinks
|
|
31
|
+
? "[logo-start] 100px [text-start] 70px [text-end]"
|
|
32
|
+
: $stackSocialOnMobile
|
|
33
|
+
? "[social-start] 104px [logo-start] 142px [text-start] 70px [text-end]"
|
|
34
|
+
: "[logo-start] 100px [social-start] 80px [text-start] 70px [text-end]";
|
|
30
35
|
}, function (_a) {
|
|
31
36
|
var $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
32
37
|
return ($stackSocialOnMobile ? 104 : 0);
|
|
@@ -34,9 +39,12 @@ var FooterBase = styled.div(templateObject_1 || (templateObject_1 = __makeTempla
|
|
|
34
39
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
35
40
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderColor) || theme.footer.borderColor;
|
|
36
41
|
});
|
|
37
|
-
var LogoBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position:
|
|
38
|
-
var $
|
|
39
|
-
return ($
|
|
42
|
+
var LogoBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: ", ";\n\tleft: 0px;\n @media all and (max-width: ", "px) {\n\t\tgrid-row-start: logo-start;\n grid-row-end: ", ";\n padding-top: ", "px;\n\t\tposition: relative;\n }\n"], ["\n position: ", ";\n\tleft: 0px;\n @media all and (max-width: ", "px) {\n\t\tgrid-row-start: logo-start;\n grid-row-end: ", ";\n padding-top: ", "px;\n\t\tposition: relative;\n }\n"])), function (_a) {
|
|
43
|
+
var $centerLinks = _a.$centerLinks;
|
|
44
|
+
return ($centerLinks ? "absolute" : "relative");
|
|
45
|
+
}, MOBILE_LAYOUT_BREAKPOINT, function (_a) {
|
|
46
|
+
var $centerLinks = _a.$centerLinks, $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
47
|
+
return ($stackSocialOnMobile || $centerLinks ? "text-start" : "social-start");
|
|
40
48
|
}, function (_a) {
|
|
41
49
|
var $stackSocialOnMobile = _a.$stackSocialOnMobile;
|
|
42
50
|
return ($stackSocialOnMobile ? 0 : 30);
|
|
@@ -55,10 +63,22 @@ var FooterLink = styled.a(templateObject_4 || (templateObject_4 = __makeTemplate
|
|
|
55
63
|
var theme = _a.theme;
|
|
56
64
|
return focusAfter({ focusColor: theme.focusColor, offset: -3 });
|
|
57
65
|
});
|
|
58
|
-
var DetailsBox = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 1 1 0%;\n height: 117px;\n justify-content:
|
|
59
|
-
var
|
|
66
|
+
var DetailsBox = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 1 1 0%;\n\tgap: ", "px;\n height: 117px;\n justify-content: ", ";\n max-width: 712px;\n @media (max-width: 1365px) {\n max-width: ", "px;\n }\n @media (max-width: 1265px) {\n flex-direction: column;\n gap: 20px;\n height: 140px;\n justify-content: center;\n padding-top: 0;\n }\n @media all and (max-width: ", "px) {\n flex-direction: row;\n grid-row-start: text-start;\n grid-row-end: text-end;\n justify-content: center;\n height: 70px;\n max-width: 100%;\n }\n @media all and (max-width: 780px) {\n flex-direction: column;\n justify-content: space-between;\n height: 60px;\n }\n"], ["\n align-items: center;\n display: flex;\n flex: 1 1 0%;\n\tgap: ", "px;\n height: 117px;\n justify-content: ", ";\n max-width: 712px;\n @media (max-width: 1365px) {\n max-width: ", "px;\n }\n @media (max-width: 1265px) {\n flex-direction: column;\n gap: 20px;\n height: 140px;\n justify-content: center;\n padding-top: 0;\n }\n @media all and (max-width: ", "px) {\n flex-direction: row;\n grid-row-start: text-start;\n grid-row-end: text-end;\n justify-content: center;\n height: 70px;\n max-width: 100%;\n }\n @media all and (max-width: 780px) {\n flex-direction: column;\n justify-content: space-between;\n height: 60px;\n }\n"])), function (_a) {
|
|
67
|
+
var $oneTerm = _a.$oneTerm;
|
|
68
|
+
return ($oneTerm ? 30 : 0);
|
|
69
|
+
}, function (_a) {
|
|
70
|
+
var $oneTerm = _a.$oneTerm;
|
|
71
|
+
return ($oneTerm ? "center" : "space-between");
|
|
72
|
+
}, function (_a) {
|
|
73
|
+
var $centerLinks = _a.$centerLinks;
|
|
74
|
+
return ($centerLinks ? 670 : 640);
|
|
75
|
+
}, MOBILE_LAYOUT_BREAKPOINT);
|
|
76
|
+
var TermsBox = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 70px;\n justify-content: space-between;\n letter-spacing: 0.824px;\n\tpadding-left: ", "px;\n position: relative;\n\t@media (max-width: 1265px) {\n\t\tpadding-left: 0;\n\t}\n @media all and (max-width: ", "px) {\n gap: 25px;\n }\n"], ["\n color: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 70px;\n justify-content: space-between;\n letter-spacing: 0.824px;\n\tpadding-left: ", "px;\n position: relative;\n\t@media (max-width: 1265px) {\n\t\tpadding-left: 0;\n\t}\n @media all and (max-width: ", "px) {\n gap: 25px;\n }\n"])), function (_a) {
|
|
60
77
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
61
78
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.footerLinksColor) || theme.footer.footerLinksColor;
|
|
79
|
+
}, function (_a) {
|
|
80
|
+
var $centerLinks = _a.$centerLinks;
|
|
81
|
+
return ($centerLinks ? 200 : 0);
|
|
62
82
|
}, MOBILE_LAYOUT_BREAKPOINT);
|
|
63
83
|
var Copyright = styled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0.824px;\n position: relative;\n"], ["\n color: ", ";\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0.824px;\n position: relative;\n"])), function (_a) {
|
|
64
84
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
@@ -87,7 +107,11 @@ var Footer = function (_a) {
|
|
|
87
107
|
var companyName = _a.companyName, gitHubUrl = _a.gitHubUrl, linkedInUrl = _a.linkedInUrl, Logo = _a.Logo, _b = _a.logoUrl, logoUrl = _b === void 0 ? "/" : _b, privacyUrl = _a.privacyUrl, stackSocialOnMobile = _a.stackSocialOnMobile, termsUrl = _a.termsUrl, themeOverride = _a.themeOverride, twitterUrl = _a.twitterUrl;
|
|
88
108
|
var theme = useTheme();
|
|
89
109
|
var socialColorFamily = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.socialColor) || theme.footer.socialColor;
|
|
90
|
-
|
|
110
|
+
var socialSkills = twitterUrl || linkedInUrl || gitHubUrl;
|
|
111
|
+
var oneTerm = (privacyUrl && !termsUrl) || (!privacyUrl && termsUrl);
|
|
112
|
+
// Center everything except the logo. ie, the links are uneven, and we want the line in the center
|
|
113
|
+
var centerLinks = Boolean(oneTerm && !socialSkills);
|
|
114
|
+
return (jsxs(FooterBase, { "$themeOverride": themeOverride, "$stackSocialOnMobile": stackSocialOnMobile, "$centerLinks": centerLinks, children: [jsx(LogoBox, { "$stackSocialOnMobile": stackSocialOnMobile, "$centerLinks": centerLinks, children: jsx(LogoLink, { href: logoUrl, children: jsx(Logo, {}) }) }), jsxs(DetailsBox, { "$oneTerm": Boolean(oneTerm), "$centerLinks": centerLinks, children: [jsxs(TermsBox, { "$themeOverride": themeOverride, "$centerLinks": centerLinks, children: [privacyUrl && jsx(FooterLink, { href: privacyUrl, children: "Privacy Policy" }), privacyUrl && termsUrl && jsx(MobileLine, {}), termsUrl && jsx(FooterLink, { href: termsUrl, children: "Terms & Conditions" })] }), jsx(Line, { "$themeOverride": themeOverride }), jsx(Copyright, { "$themeOverride": themeOverride, children: "".concat(companyName, " \u00A9 ").concat(new Date().getFullYear(), " All rights reserved.") })] }), socialSkills && (jsx(SocialLinks, { "$stackSocialOnMobile": stackSocialOnMobile, children: jsxs(SocialGrid, { children: [twitterUrl && (jsx(Link, { href: twitterUrl, target: "_blank", tabIndex: -1, children: jsx(IconButton, { Icon: Twitter, size: 40, colorFamily: socialColorFamily, ariaLabel: "Twitter link" }) })), linkedInUrl && (jsx(Link, { href: linkedInUrl, target: "_blank", tabIndex: -1, children: jsx(IconButton, { Icon: LinkedIn, size: 40, colorFamily: socialColorFamily, ariaLabel: "LinkedIn link" }) })), gitHubUrl && (jsx(Link, { href: gitHubUrl, target: "_blank", tabIndex: -1, children: jsx(IconButton, { Icon: GitHub, size: 40, colorFamily: socialColorFamily, ariaLabel: "GitHub link" }) }))] }) }))] }));
|
|
91
115
|
};
|
|
92
116
|
|
|
93
117
|
export { Footer };
|
package/lib/esm/Footer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Footer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { CopyrightProps, FooterBaseProps, FooterLinkProps, LineProps, LogoBoxProps, SocialLinksProps, TermsBoxProps } from "./types";
|
|
1
|
+
import { CopyrightProps, DetailsBoxProps, FooterBaseProps, FooterLinkProps, LineProps, LogoBoxProps, SocialLinksProps, TermsBoxProps } from "./types";
|
|
2
2
|
export declare const FooterBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FooterBaseProps>> & string;
|
|
3
3
|
export declare const LogoBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LogoBoxProps>> & string;
|
|
4
4
|
export declare const LogoLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
|
|
5
5
|
export declare const FooterLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, FooterLinkProps>> & string;
|
|
6
|
-
export declare const DetailsBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").
|
|
6
|
+
export declare const DetailsBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DetailsBoxProps>> & string;
|
|
7
7
|
export declare const TermsBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TermsBoxProps>> & string;
|
|
8
8
|
export declare const Copyright: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, CopyrightProps>> & string;
|
|
9
9
|
export declare const Line: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LineProps>> & string;
|
|
@@ -30,16 +30,23 @@ export interface ThemeOverride {
|
|
|
30
30
|
maxFooterWidth?: number;
|
|
31
31
|
}
|
|
32
32
|
export interface FooterBaseProps {
|
|
33
|
+
$centerLinks: boolean;
|
|
33
34
|
$stackSocialOnMobile?: boolean;
|
|
34
35
|
$themeOverride?: ThemeOverride;
|
|
35
36
|
}
|
|
36
37
|
export interface LogoBoxProps {
|
|
38
|
+
$centerLinks: boolean;
|
|
37
39
|
$stackSocialOnMobile?: boolean;
|
|
38
40
|
}
|
|
39
41
|
export interface FooterLinkProps {
|
|
40
42
|
$themeOverride?: ThemeOverride;
|
|
41
43
|
}
|
|
44
|
+
export interface DetailsBoxProps {
|
|
45
|
+
$centerLinks: boolean;
|
|
46
|
+
$oneTerm: boolean;
|
|
47
|
+
}
|
|
42
48
|
export interface TermsBoxProps {
|
|
49
|
+
$centerLinks: boolean;
|
|
43
50
|
$themeOverride?: ThemeOverride;
|
|
44
51
|
}
|
|
45
52
|
export interface CopyrightProps {
|