@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
211 lines (210 loc) • 6.54 kB
JavaScript
import e from "../node_modules/clsx/dist/clsx.js";
import { Stack as t } from "../Stack/Stack.js";
import { Text as n } from "../Text/Text.js";
import { LogoGithubIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import { ColorModesEnum as i } from "../ThemeProvider/ThemeProvider.js";
import { useTheme as a } from "../ThemeProvider/useTheme.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes-DhME9i-y.css';/* empty css */
import o from "./MinimalFooter.module.js";
import s from "react";
import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
//#region src/MinimalFooter/MinimalFooter.tsx
var d = {
x: {
fullName: "X",
url: "https://x.com/github",
icon: "https://github.githubassets.com/images/modules/site/icons/footer/x.svg",
iconWidth: 20,
iconHeight: 16
},
github: {
fullName: "GitHub",
url: "https://github.com/github",
icon: "https://github.githubassets.com/images/modules/site/icons/footer/github-mark.svg",
iconWidth: 20,
iconHeight: 20
},
linkedin: {
fullName: "LinkedIn",
url: "https://www.linkedin.com/company/github",
icon: "https://github.githubassets.com/images/modules/site/icons/footer/linkedin.svg",
iconWidth: 19,
iconHeight: 18
},
youtube: {
fullName: "YouTube",
url: "https://www.youtube.com/github",
icon: "https://github.githubassets.com/images/modules/site/icons/footer/youtube.svg",
iconWidth: 23,
iconHeight: 16
},
facebook: {
fullName: "Facebook",
url: "https://www.facebook.com/GitHub",
icon: "https://github.githubassets.com/images/modules/site/icons/footer/facebook.svg",
iconWidth: 18,
iconHeight: 18
},
twitch: {
fullName: "Twitch",
url: "https://www.twitch.tv/github",
icon: "https://github.githubassets.com/images/modules/site/icons/footer/twitch.svg",
iconWidth: 18,
iconHeight: 18
},
tiktok: {
fullName: "TikTok",
url: "https://www.tiktok.com/@github",
icon: "https://github.githubassets.com/images/modules/site/icons/footer/tiktok.svg",
iconWidth: 18,
iconHeight: 18
},
instagram: {
fullName: "Instagram",
url: "https://www.instagram.com/github/",
icon: "https://github.githubassets.com/images/modules/site/icons/footer/instagram.svg",
iconWidth: 24,
iconHeight: 24
}
}, f = Object.keys(d);
function p({ className: r, children: i, copyrightStatement: a, logoHref: d = "https://github.com", socialLinks: f, ...p }) {
let h = () => s.Children.toArray(i).find((e) => {
if (!s.isValidElement(e)) return !1;
if (e.type && e.type === m) return !0;
}), v = s.Children.toArray(i).filter((e) => {
if (s.isValidElement(e) && e.type === _) return e;
}).slice(0, 5), y = (/* @__PURE__ */ new Date()).getFullYear();
return /* @__PURE__ */ u("footer", {
className: e(o.Footer, r),
...p,
children: [
h(),
/* @__PURE__ */ l(g, {
socialLinks: f,
logoHref: d
}),
/* @__PURE__ */ l("section", { children: /* @__PURE__ */ l("div", {
className: o["Footer__legal-and-links"],
children: /* @__PURE__ */ l("div", {
className: o.Footer__container,
children: /* @__PURE__ */ u(t, {
direction: {
narrow: "vertical",
regular: "horizontal"
},
gap: "normal",
padding: "none",
justifyContent: "space-between",
children: [/* @__PURE__ */ l(t, {
padding: "none",
gap: "condensed",
justifyContent: {
narrow: "center",
regular: "flex-end"
},
direction: {
narrow: "vertical",
regular: "horizontal"
},
className: o.Footer__links,
children: /* @__PURE__ */ l(c, { children: v })
}), /* @__PURE__ */ l(n, {
as: "p",
size: "200",
variant: "muted",
className: o.Footer__copyright,
children: a || `\u00A9 ${y} GitHub. All rights reserved.`
})]
})
})
}) })
]
});
}
function m({ children: t, className: r }) {
let i = s.Children.map(t, (t) => {
if (s.isValidElement(t) && t.type === n) {
let n = t, r = {
variant: "muted",
size: "100",
className: e(o["Footer__terms-item"], n.props.className)
};
return n.props.as || (r.as = "p"), s.cloneElement(n, r);
}
return null;
});
return /* @__PURE__ */ l("section", {
className: o.Footer__container,
children: /* @__PURE__ */ l("div", {
className: e(o.Footer__terms, r),
children: i
})
});
}
var h = ({ name: e }) => {
let t = d[e];
return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ u("a", {
href: t.url,
className: o["Footer__social-link"],
"data-analytics-event": `{"category":"Footer","action":"go to ${t.fullName}","label":"text:${e}"}`,
children: [/* @__PURE__ */ l("img", {
className: o["Footer__social-icon"],
src: t.icon,
height: t.iconHeight,
width: t.iconWidth,
loading: "lazy",
decoding: "async",
alt: ""
}), /* @__PURE__ */ u("span", {
className: "visually-hidden",
children: ["GitHub on ", t.fullName]
})]
}) }, e);
};
function g({ socialLinks: n = f, logoHref: s }) {
let { colorMode: c } = a();
return /* @__PURE__ */ l("section", {
className: e(o.Footer__logomarks),
children: /* @__PURE__ */ l("div", {
className: o.Footer__container,
children: /* @__PURE__ */ u(t, {
alignItems: "center",
direction: {
narrow: "vertical",
regular: "horizontal"
},
gap: "normal",
padding: "none",
justifyContent: "space-between",
children: [/* @__PURE__ */ l("div", { children: /* @__PURE__ */ l("a", {
href: s,
"data-analytics-event": "{\"category\":\"Footer\",\"action\":\"go to home\",\"label\":\"text:home\"}",
"aria-label": "GitHub",
children: /* @__PURE__ */ l(r, {
fill: c === i.DARK ? "white" : "black",
size: "medium"
})
}) }), n ? /* @__PURE__ */ l("ul", {
className: o["Footer__social-links"],
children: n.map((e) => /* @__PURE__ */ l(h, { name: e }, e))
}) : null]
})
})
});
}
var _ = ({ as: e, children: t, ...r }) => /* @__PURE__ */ l(e || "a", {
className: o.Footer__link,
"data-analytics-event": r.href ? `{"category":"Footer","action":"go to ${r.href}","label":"text:${t}"}` : void 0,
...r,
children: /* @__PURE__ */ l(n, {
variant: "muted",
size: "200",
children: t
})
}), v = Object.assign(p, {
Footnotes: m,
Link: _
});
//#endregion
export { v as MinimalFooter };
//# sourceMappingURL=MinimalFooter.js.map