@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
129 lines (128 loc) • 4.07 kB
JavaScript
import e from "../node_modules/clsx/dist/clsx.js";
import { BiColorGradients as t, Colors as n } from "../constants.js";
import { useAnimation as r } from "../animation/useAnimation.js";
import { Text as i } from "../Text/Text.js";
import { Link as a } from "../Link/Link.js";
import { Avatar as o } from "../Avatar/Avatar.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes-8ryG-BX6.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/testimonial/base-CAG7koNB.css';/* empty css */
/* empty css */
import s from "./Testimonial.module.js";
import c, { forwardRef as l } from "react";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
//#region src/Testimonial/Testimonial.tsx
var f = [...n, ...t], p = f[0], m = [
"subtle",
"default",
"minimal",
"expressive"
], h = "minimal";
function g({ quoteMarkColor: t, animate: n, className: i, children: a, variant: o = "minimal", hasBorder: l = !0, size: f, style: p, ...m }, h) {
let { classes: g, styles: _ } = r(n), v = t ?? (o === "expressive" ? "green" : "default"), b = /* @__PURE__ */ u("div", {
"aria-hidden": "true",
className: e(s.Testimonial__quoteMark, s[`Testimonial__quoteMark--${v}`], o === "expressive" && s["Testimonial__quoteMark--hasBackground"]),
children: /* @__PURE__ */ u("span", {
className: s.Testimonial__quoteMarkGlyph,
children: "“"
})
}), S = c.Children.toArray(a), w = (e) => S.find((t) => c.isValidElement(t) && t.type === e), E = w(y), O = w(D), k = w(T), A = w(C), j = w(x);
return /* @__PURE__ */ d("figure", {
ref: h,
className: e(g, s.Testimonial, s[`Testimonial--variant-${o}`], f && s[`Testimonial--size-${f}`], l && s["Testimonial--border"], o === "expressive" && O && s["Testimonial--hasLink"], i),
style: {
..._,
...p,
"--testimonial-accent-color": v
},
...m,
children: [
/* @__PURE__ */ d("div", {
className: s.Testimonial__quoteWrapper,
children: [
b,
E,
o !== "expressive" && O
]
}),
/* @__PURE__ */ d("div", {
className: s.Testimonial__media,
children: [
k,
A,
j
]
}),
o === "expressive" && O
]
});
}
var _ = l(g);
function v({ children: t, className: n }, r) {
return /* @__PURE__ */ u("blockquote", {
ref: r,
children: /* @__PURE__ */ u(i, {
className: e(s["Testimonial-quote"], n),
children: t
})
});
}
var y = l(v);
function b({ children: t, className: n, position: r }, a) {
return /* @__PURE__ */ d("figcaption", {
ref: a,
className: e(s["Testimonial-caption"], n),
children: [/* @__PURE__ */ u(i, {
size: "200",
className: e(s["Testimonial-from"]),
font: "monospace",
children: t
}), r && /* @__PURE__ */ u(i, {
size: "200",
className: e(s["Testimonial-position"]),
variant: "muted",
children: r
})]
});
}
var x = l(b);
function S({ children: t, ...n }, r) {
return /* @__PURE__ */ u("div", {
className: s["Testimonial-logo"],
...n,
children: c.Children.map(t, (t) => {
if (c.isValidElement(t) && t.type === "img") {
let n = t, i = {
className: e(s["Testimonial-logo-image"], n.props.className),
ref: r
};
return c.cloneElement(n, i);
}
})
});
}
var C = l(S);
function w({ size: t, ...n }) {
return /* @__PURE__ */ u(o, {
className: e(s["Testimonial-avatar"]),
size: 48,
...n
});
}
var T = w;
function E({ className: t, ...n }, r) {
return /* @__PURE__ */ u(a, {
className: e(s["Testimonial-link"], t),
...n,
size: "medium",
variant: "accent"
});
}
var D = l(E), O = Object.assign(_, {
Quote: y,
Name: x,
Avatar: T,
Logo: C,
Link: D
});
//#endregion
export { O as Testimonial, f as TestimonialQuoteMarkColors, m as TestimonialVariants, p as defaultQuoteMarkColor, h as defaultTestimonialVariant };
//# sourceMappingURL=Testimonial.js.map