@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
181 lines (180 loc) • 8.43 kB
JavaScript
import e from "../node_modules/clsx/dist/clsx.js";
import { Grid as t } from "../Grid/Grid.js";
import { AnimationProvider as n } from "../animation/AnimationProvider/AnimationProvider.js";
import { Stack as r } from "../Stack/Stack.js";
import { Box as ee } from "../Box/Box.js";
import { HeroContext as i, HeroMediaInlinePositionOptions as a } from "./HeroContext.js";
import o from "./Hero.module.js";
import { HeroLabel as s } from "./sub-components/HeroLabel.js";
import { HeroHeading as c } from "./sub-components/HeroHeading.js";
import { HeroDescription as l } from "./sub-components/HeroDescription.js";
import { HeroButtonGroup as u } from "./sub-components/HeroButtonGroup.js";
import { HeroImage as d } from "./sub-components/HeroImage.js";
import { HeroVideo as f } from "./sub-components/HeroVideo.js";
import { HeroEyebrow as p } from "./sub-components/HeroEyebrow.js";
import { HeroPrimaryAction as m } from "./sub-components/HeroPrimaryAction.js";
import { HeroSecondaryAction as h } from "./sub-components/HeroSecondaryAction.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/hero/base-BDi-g8vJ.css';/* empty css */
import g, { Fragment as te, forwardRef as _, useMemo as v } from "react";
import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
//#region src/Hero/Hero.tsx
var S = {
root: "Hero",
get video() {
return `${this.root}-video`;
},
get grid() {
return `${this.root}-grid`;
},
get imageWrapper() {
return `${this.root}-imageWrapper`;
}
}, C = _(({ className: _, align: C = "start", children: w, imageContainerClassName: T, imageContainerStyle: E, imageContainerRef: D, imageBackgroundColor: O, variant: k = "default", trailingComponent: A, enableAnimation: j = !1, "data-testid": ne, ...M }, N) => {
let { HeroActions: P, HeroButtonGroupChild: re, HeroChildren: ie, HeroImageChild: F, HeroVideoChild: I, HeroHeaderChildren: L, HeroDescriptionChild: R } = v(() => {
let e = g.Children.toArray(w).reduce((e, t) => (g.isValidElement(t) && (t.type === m || t.type === h ? e.HeroActions.push(t) : t.type === u ? e.HeroButtonGroupChild = t : t.type === d ? e.HeroImageChild = t : t.type === f ? e.HeroVideoChild = t : (e.HeroChildren.push(t), t.type === s || t.type === p || t.type === c ? e.HeroHeaderChildren.push(t) : t.type === l && (e.HeroDescriptionChild = t))), e), {
HeroActions: [],
HeroButtonGroupChild: void 0,
HeroChildren: [],
HeroImageChild: void 0,
HeroVideoChild: void 0,
HeroHeaderChildren: [],
HeroDescriptionChild: void 0
});
return e.HeroImageChild && e.HeroVideoChild && (e.HeroVideoChild = void 0), e;
}, [w]), z = F?.props.position || I?.props.position, B = k === "gridline-expressive" && z?.startsWith("inline-") ? (process.env.NODE_ENV !== "production" && console.warn(`Hero: "gridline-expressive" variant does not support "${z}" position. Defaulting to "block-end".`), "block-end") : z || "block-end", ae = F?.props.enableBorder ?? I?.props.enableBorder ?? !0, V = F?.props.padding ?? I?.props.padding ?? "default", H = a.includes(B), U = F || I, W = k === "gridline", G = k === "gridline-expressive", K = B === "block-end";
k === "default" && V !== "default" && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn(`Hero: media padding is only supported by the "gridline" and "gridline-expressive" variants; ignoring padding="${V}".`);
let q = G && C === "center", J = q ? "start" : C;
q && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.");
let oe = (W || G) && j ? n : te, se = (W || G) && j ? {
autoStaggerChildren: !1,
animationTrigger: "immediate"
} : {}, Y = (W || G) && K, X = W && H, ce = F ? o["Hero--layout-image"] : o["Hero--layout-default"], Z = B === "inline-start", Q = (e) => A && /* @__PURE__ */ b(ee, {
animate: e ? {
variant: "slide-in-up",
delay: 1e3,
duration: 1e3
} : void 0,
children: /* @__PURE__ */ b("div", {
className: o["Hero-trailing"],
children: /* @__PURE__ */ b(A, {})
})
}), $ = () => /* @__PURE__ */ x(y, { children: [re, P.length > 0 && /* @__PURE__ */ b("div", {
className: o["Hero-actions"],
children: P
})] });
return /* @__PURE__ */ b(oe, {
...se,
children: /* @__PURE__ */ b(i.Provider, {
value: {
imagePosition: B,
variant: k,
align: J,
hasInlineMedia: H,
enableAnimation: j
},
children: /* @__PURE__ */ x("section", {
className: e(o.Hero, o[`Hero--variant-${k}`], !H && o[`Hero--align-${J}`], ce, (F || I) && o[`Hero--image-pos-${B}`], (F || I) && H && o["Hero--image-pos-inline"], X && o["Hero--variant-inline-gridline"], _),
ref: N,
"aria-labelledby": "hero-section-brand-heading",
"data-testid": ne || S.root,
...M,
children: [/* @__PURE__ */ b(t, {
fullWidth: !Y && !X,
"data-testid": S.grid,
className: e(o["Hero-grid"], o[`Hero-grid--${B}`], Y && !G && o["Hero-grid--contained"], X && o["Hero-grid--bordered-inline"], G && o["Hero-grid--expressive"]),
children: G ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(t.Column, {
span: {
medium: 12,
large: R ? 7 : 6
},
className: o["Hero-expressive-header-column"],
children: /* @__PURE__ */ b(r, {
direction: "vertical",
gap: "none",
padding: "none",
alignItems: "flex-start",
children: L
})
}), /* @__PURE__ */ b(t.Column, {
span: {
medium: 12,
large: R ? 5 : 6
},
className: o["Hero-expressive-body-column"],
children: /* @__PURE__ */ x(r, {
direction: "vertical",
gap: "none",
padding: "none",
alignItems: "flex-start",
children: [
R,
$(),
Q(j)
]
})
})] }) : /* @__PURE__ */ x(y, { children: [
Z && U && !Y && /* @__PURE__ */ b(t.Column, {
ref: D,
span: { large: 6 },
className: e(O && V !== "none" && o[`Hero-imageContainer--bg-${O}`], X && V === "all" && o["Hero-imageContainer--inline-padding-all"], X && V === "none" && o["Hero-imageContainer--inline-padding-none"], X && o["Hero-imageContainer--inline-bordered"]),
children: /* @__PURE__ */ b("div", {
className: e(o["Hero-mediaContainer"], T),
style: E,
children: U
})
}),
/* @__PURE__ */ b(t.Column, {
span: { large: U && H ? 6 : 12 },
children: /* @__PURE__ */ x(r, {
className: e(X && o["Hero-text-column--inline-gridline"], X && o["Hero-contentColumn--bordered-inline"]),
direction: "vertical",
gap: "none",
padding: "none",
alignItems: H || J === "start" ? "flex-start" : "center",
justifyContent: H ? void 0 : J === "start" ? "flex-start" : "center",
children: [
ie,
$(),
Q(W && j)
]
})
}),
!Z && U && !Y && /* @__PURE__ */ b(t.Column, {
ref: D,
span: { large: H ? 6 : 12 },
className: e(O && V !== "none" && o[`Hero-imageContainer--bg-${O}`], X && V === "all" && o["Hero-imageContainer--inline-padding-all"], X && V === "none" && o["Hero-imageContainer--inline-padding-none"], X && o["Hero-imageContainer--inline-bordered"]),
children: /* @__PURE__ */ b("div", {
className: e(o["Hero-mediaContainer"], T),
style: E,
children: U
})
})
] })
}), U && Y && /* @__PURE__ */ b("div", {
ref: D,
"data-testid": S.imageWrapper,
className: e(o["Hero-imageWrapper"], T, O && V !== "none" && o[`Hero-imageWrapper--bg-${O}`], V === "none" && o["Hero-imageWrapper--padding-none"]),
style: E,
children: /* @__PURE__ */ b("div", {
className: e(o["Hero-imageWrapper-inner"], V === "all" && o["Hero-imageWrapper-inner--padding-all"], V === "none" && o["Hero-imageWrapper-inner--padding-none"], ae && o["Hero-imageWrapper-inner--with-gridline"]),
children: U
})
})]
})
})
});
}), w = Object.assign(C, {
Heading: c,
Description: l,
ButtonGroup: u,
PrimaryAction: m,
SecondaryAction: h,
Image: d,
Video: f,
Label: s,
Eyebrow: p,
testIds: S
});
//#endregion
export { w as Hero };
//# sourceMappingURL=Hero.js.map