@primer/react-brand/esm/LogoSuite/LogoSuite.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { Grid as t } from "../Grid/Grid.js";
import { useReducedMotion as n } from "../hooks/useReducedMotion.js";
import { Text as r } from "../Text/Text.js";
import { Heading as i, defaultHeadingTag as a } from "../Heading/Heading.js";
import { Button as o } from "../Button/Button.js";
import { PauseIcon as s, PlayIcon as c } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes-B8ia26TA.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/base-DTi5Rx4y.css';/* empty css                                                                                                       */
/* empty css                                                                                          */
import l from "./LogoSuite.module.js";
import u, { forwardRef as d, useCallback as f, useEffect as p, useMemo as m, useState as h } from "react";
import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
//#region src/LogoSuite/LogoSuite.tsx
var y = {
	root: "LogoSuite",
	get marqueeGroup() {
		return `${this.root}-marqueeGroup`;
	}
}, b = ({ align: n = "center", children: r, className: i, hasDivider: a = !0, variant: o = "default", "data-testid": s }) => {
	let c = m(() => u.Children.toArray(r), [r]), d = c.find((e) => u.isValidElement(e) && e.type === x), f = c.find((e) => u.isValidElement(e) && e.type === S), p = c.find((e) => u.isValidElement(e) && e.type === w);
	d || (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.");
	let h = u.isValidElement(d) && d.props.visuallyHidden, y = o === "gridline-expressive", b = y && (d && !h || f);
	return /* @__PURE__ */ _("div", {
		className: e(l.LogoSuite, l[`LogoSuite--${n}`], a && l["LogoSuite--hasDivider"], l[`LogoSuite--${o}`], i),
		"data-testid": s,
		children: y ? /* @__PURE__ */ v(t, {
			className: l.LogoSuite__content,
			children: [b && /* @__PURE__ */ v(t.Column, {
				span: { large: 3 },
				className: l.LogoSuite__textContainer,
				children: [d, f]
			}), /* @__PURE__ */ v(t.Column, {
				span: { large: b ? 9 : 12 },
				className: l.LogoSuite__logobarContainer,
				children: [!b && h && d, p]
			})]
		}) : /* @__PURE__ */ v(g, { children: [
			d,
			f,
			p
		] })
	});
}, x = d(({ as: t = a, size: n = "subhead-large", className: r, children: o, visuallyHidden: s, ...c }, u) => /* @__PURE__ */ _(i, {
	ref: u,
	className: e(l.LogoSuite__heading, s && l["LogoSuite__heading--visually-hidden"], s && "visually-hidden", r),
	size: n,
	as: t,
	...c,
	children: o
})), S = d(({ className: t, children: n, size: i = "200", variant: a = "muted", ...o }, s) => /* @__PURE__ */ _(r, {
	as: "p",
	ref: s,
	size: i,
	variant: a,
	className: e(l.LogoSuite__description, t),
	...o,
	children: n
})), C = ({ isPlaying: e = !0, onPlayPause: t }) => {
	let n = f(() => {
		t?.(!e);
	}, [t, e]);
	return /* @__PURE__ */ _("button", {
		className: l["LogoSuite__logobar-playPauseButton"],
		type: "button",
		onClick: n,
		"aria-label": e ? "Pause animation" : "Play animation",
		children: _(e ? s : c, {})
	});
}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: u, ...d }, m) => {
	let g = n(), [b, x] = h(() => a && !g && s !== "idle");
	p(() => {
		x(a && !g && s !== "idle");
	}, [
		a,
		g,
		s
	]), a && u && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.");
	let S = {
		ref: m,
		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], t),
		...d
	}, [w, T] = h(!1), E = f(() => {
		T(!0);
	}, []), D = f((e) => {
		e.currentTarget.contains(e.relatedTarget) || T(!1);
	}, []), O = () => {
		if (!u) return null;
		let { className: t, label: n, ref: r, ...i } = u;
		return /* @__PURE__ */ _("div", {
			className: l["LogoSuite__logobar-takeoverButtonContainer"],
			children: /* @__PURE__ */ _(o, {
				as: "a",
				variant: "primary",
				className: e(l["LogoSuite__logobar-takeoverButton"], t),
				...i,
				children: n
			})
		});
	};
	if (a) {
		let { className: t, ...n } = S, i = !b || g;
		return /* @__PURE__ */ v("div", {
			...n,
			className: e(l["LogoSuite__logobar--has-marquee"], t, i && l["LogoSuite__logobar--paused"]),
			children: [/* @__PURE__ */ v("div", {
				className: e(l["LogoSuite__logobar-marquee"], w && l["LogoSuite__logobar-marquee--focused"]),
				onFocus: E,
				onBlur: D,
				children: [/* @__PURE__ */ _("div", {
					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
					"data-testid": y.marqueeGroup,
					children: r
				}), /* @__PURE__ */ _("div", {
					inert: !0,
					"aria-hidden": "true",
					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
					children: r
				})]
			}), /* @__PURE__ */ _(C, {
				onPlayPause: x,
				isPlaying: b
			})]
		});
	}
	if (u) {
		let { className: t, ...n } = S;
		return /* @__PURE__ */ v("div", {
			...n,
			className: e(t, l["LogoSuite__logobar--has-takeover"]),
			children: [r, O()]
		});
	}
	return /* @__PURE__ */ _("div", {
		...S,
		children: r
	});
}), T = Object.assign(b, {
	Heading: x,
	Description: S,
	Logobar: w,
	testIds: y
});
//#endregion
export { T as LogoSuite };

//# sourceMappingURL=LogoSuite.js.map