@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
139 lines (138 loc) • 5.91 kB
JavaScript
import e from "../node_modules/clsx/dist/clsx.js";
import { Grid as t } from "../Grid/Grid.js";
import { Text as n } from "../Text/Text.js";
import { Heading as r } from "../Heading/Heading.js";
import { Image as i } from "../Image/Image.js";
import { ButtonGroup as a } from "../ButtonGroup/ButtonGroup.js";
import { Link as o } from "../Link/Link.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes-B9zRp3WA.css';/* empty css */
import s from "./CTABanner.module.js";
import c, { forwardRef as l, useCallback as u, useMemo as d } from "react";
import { jsx as f, jsxs as p } from "react/jsx-runtime";
//#region src/CTABanner/CTABanner.tsx
var m = ["default", "subtle"], h = l(({ align: n = "center", hasBorder: r = !1, hasGridLines: i = !1, hasShadow: a = !1, hasBackground: o = !0, backgroundColor: l = "var(--brand-CTABanner-bgColor)", backgroundImageSrc: h, backgroundImagePosition: g = "center", backgroundImageSize: y = "cover", className: S, children: C, leadingComponent: w, trailingComponent: T, style: E, variant: D = "default", ...O }, k) => {
let A = u((e, t) => t === "background-image-src" ? `url(${e})` : t === "background-color" && typeof e == "string" && m.includes(e) ? `var(--brand-color-canvas-${e})` : e, []), j = u((e, t) => typeof t == "string" || Array.isArray(t) ? { [`--brand-CTABanner-${e}`]: A(t, e) } : {
[`--brand-CTABanner-narrow-${e}`]: A(t?.narrow, e),
[`--brand-CTABanner-regular-${e}`]: A(t?.regular, e),
[`--brand-CTABanner-wide-${e}`]: A(t?.wide, e)
}, [A]), M = d(() => {
let e = {}, t = (t, n) => {
n && Object.assign(e, j(t, n));
};
return t("background-color", l), t("background-image-src", h), t("background-image-position", g), t("background-image-size", y), e;
}, [
l,
h,
g,
y,
j
]), { ImageChild: N, ButtonGroupChild: P, restChildren: F, hasImageChild: I } = d(() => c.Children.toArray(C).reduce((e, t) => {
if (c.isValidElement(t)) if (t.type === x) e.hasImageChild = !0, D === "balanced" ? e.ImageChild = t : D !== "minimal" && e.restChildren.push(t);
else if (D === "minimal" && t.type === b) e.ButtonGroupChild = t;
else if (t.type === v) {
let n = t;
e.restChildren.push(n.props.size === void 0 ? c.cloneElement(n, { size: D === "minimal" ? "6" : _ }) : n);
} else e.restChildren.push(t);
return e;
}, {
ImageChild: void 0,
ButtonGroupChild: void 0,
restChildren: [],
hasImageChild: !1
}), [C, D]), L = D === "balanced" && N || D === "minimal" && P, R = i ? ({ children: e }) => /* @__PURE__ */ f("div", {
className: s["CTABanner-outer-container--border"],
children: e
}) : c.Fragment, z = D === "balanced" || D === "minimal" ? "start" : n, B = typeof l == "string" && m.includes(l);
return (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && (D === "balanced" && !N && console.warn("CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly."), D === "minimal" && I && console.warn("CTABanner: Image child is not supported in minimal variant and will not be rendered.")), /* @__PURE__ */ f(R, { children: /* @__PURE__ */ f("section", {
ref: k,
className: e(s.CTABanner, a && s["CTABanner--shadow"], s[`CTABanner--variant-${D}`], B && s[`CTABanner--bgColor-${l}`], S),
style: {
...M,
...E
},
...O,
children: /* @__PURE__ */ f("div", {
className: e(s["CTABanner-container"], r && s["CTABanner-container--border"], i && s["CTABanner-container--border-gridlines"], o && s["CTABanner-container--background"]),
children: L ? /* @__PURE__ */ p(t, {
className: s["CTABanner-grid"],
children: [/* @__PURE__ */ f(t.Column, {
span: {
xsmall: 12,
large: 6
},
className: s["CTABanner-grid-column--primary"],
children: /* @__PURE__ */ p("div", {
className: e(s["CTABanner-content"], z === "center" && s["CTABanner-content--center"]),
children: [
w && /* @__PURE__ */ f(w, {}),
F,
T && /* @__PURE__ */ f(T, {})
]
})
}), /* @__PURE__ */ f(t.Column, {
span: {
xsmall: 12,
large: 6
},
className: s["CTABanner-grid-column--secondary"],
children: N || P
})]
}) : /* @__PURE__ */ p("div", {
className: e(s["CTABanner-content"], z === "center" && s["CTABanner-content--center"]),
children: [
w && /* @__PURE__ */ f(w, {}),
F,
T && /* @__PURE__ */ f(T, {})
]
})
})
}) });
}), g = "h3", _ = "3", v = l(({ as: t = g, size: n = _, className: i, children: a, ...o }, c) => /* @__PURE__ */ f(r, {
ref: c,
className: e(s["CTABanner-heading"], i),
size: n,
as: t,
...o,
children: a
})), y = l(({ className: t, children: r, variant: i = "muted", ...a }, o) => /* @__PURE__ */ f(n, {
ref: o,
className: e(s["CTABanner-description"], t),
as: "p",
variant: i,
...a,
children: r
})), b = l(({ className: e, buttonSize: t = "medium", buttonsAs: n, children: r, ...i }, o) => /* @__PURE__ */ f(a, {
buttonSize: t,
buttonsAs: n,
className: e,
ref: o,
...i,
children: r
})), x = l(({ className: t, src: n, alt: r, ...a }, o) => /* @__PURE__ */ f(i, {
ref: o,
className: e(s["CTABanner-image"], t),
src: n,
alt: r,
borderRadius: "medium",
...a
})), S = l(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ f("div", {
ref: i,
className: e(s["CTABanner-logo"], t),
...r,
children: n
})), C = Object.assign(h, {
Heading: v,
Description: y,
ButtonGroup: b,
Image: x,
Logo: S,
Link: ({ className: t, children: n, variant: r = "accent", ...i }) => /* @__PURE__ */ f(o, {
variant: r,
className: e(s["CTABanner-link"], t),
...i,
children: n
})
});
//#endregion
export { C as CTABanner, m as CTABannerBackgroundColors };
//# sourceMappingURL=CTABanner.js.map