@primer/react-brand/esm/PricingOptions/PricingOptions.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 { Text as t } from "../Text/Text.js";
import { Heading as n } from "../Heading/Heading.js";
import { Button as r } from "../Button/Button.js";
import { CheckIcon as i, TriangleDownIcon as a, XIcon as o } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import { useWindowSize as s } from "../hooks/useWindowSize.js";
import { Accordion as c } from "../Accordion/Accordion.js";
import { UnorderedList as l } from "../list/UnorderedList/UnorderedList.js";
import { Tooltip as u } from "../Tooltip/Tooltip.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options-B9TarQsR.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes-DBi2l0Re.css';/* empty css                                                                                                           */
/* empty css                                                                                                             */
import d from "./PricingOptions.module.js";
import f, { forwardRef as p, useMemo as m } from "react";
import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
//#region src/PricingOptions/PricingOptions.tsx
var v = {
	root: "PricingOptions",
	item: "PricingOptions__item",
	labelRow: "PricingOptions__labels",
	heading: "PricingOptions__heading",
	label: "PricingOptions__label",
	description: "PricingOptions__description",
	price: "PricingOptions__price",
	actionsMessage: "PricingOptions__actionsMessage",
	primaryAction: "PricingOptions__primaryAction",
	secondaryAction: "PricingOptions__secondaryAction",
	menuAction: "PricingOptions__menuAction",
	featureList: "PricingOptions__featureList",
	featureListHeading: "PricingOptions__featureListHeading",
	featureListItem: "PricingOptions__featureListItem",
	featureListGroupHeading: "PricingOptions__featureListGroupHeading",
	footnote: "PricingOptions__footnote"
}, y = f.createContext({
	align: "start",
	allFeatureListsExpanded: !1,
	featureListUserInteracted: !1,
	updateFeatureListExpanded: () => {},
	setFeatureListUserInteracted: () => {}
}), b = ({ children: e, align: t = "start" }) => {
	let [n, r] = f.useState(!1), [i, a] = f.useState(!1);
	return /* @__PURE__ */ g(y.Provider, {
		value: {
			allFeatureListsExpanded: n,
			updateFeatureListExpanded: (e) => {
				r(() => e);
			},
			align: t,
			featureListUserInteracted: i,
			setFeatureListUserInteracted: a
		},
		children: e
	});
}, x = () => f.useContext(y), S = "What's included", C = ({ children: e }) => /* @__PURE__ */ g(h, { children: e }), w = p(({ align: t = "start", children: n, className: r, "data-testid": i, variant: a = "default", ...o }, s) => {
	let c = m(() => f.Children.toArray(n).filter((e) => f.isValidElement(e) && typeof e.type != "string" && e.type === T), [n]).slice(0, 4), l = m(() => c.map((e) => {
		let t = f.Children.toArray(e.props.children).find((e) => f.isValidElement(e) && typeof e.type != "string" && e.type === C);
		return f.isValidElement(t) ? t : null;
	}), [c]), u = l.some((e) => e !== null);
	return /* @__PURE__ */ g(b, {
		align: t,
		children: /* @__PURE__ */ _("div", {
			className: e(d.PricingOptions, d[`PricingOptions--layout-${a.includes("default") ? "default" : "cards"}`], d[`PricingOptions--items${c.length}`], d[`PricingOptions--appearance-${a.includes("gradient") ? "gradient" : "solid"}`], r),
			"data-testid": i || v.root,
			ref: s,
			...o,
			children: [c, u && /* @__PURE__ */ g("div", {
				className: d.PricingOptions__labels,
				"data-testid": v.labelRow,
				style: { "--brand-pricing-options-column-count": c.length },
				children: l.map((t, n) => {
					let r = !!t?.props.children;
					return /* @__PURE__ */ g("div", {
						className: e(d["PricingOptions__label-cell"], r ? d["PricingOptions__label-cell--has-label"] : d["PricingOptions__label-cell--empty"]),
						"data-testid": t?.props["data-testid"] || v.label,
						children: t?.props.children ? /* @__PURE__ */ g("span", {
							className: d.PricingOptions__label,
							children: t.props.children
						}) : null
					}, n);
				})
			})]
		})
	});
}), T = p(({ "data-testid": t, children: n, className: r, leadingComponent: i, ...a }, o) => {
	let { align: s } = x(), { Heading: c, Description: l, Price: u, FeatureList: p, Actions: h, ActionsMessage: y, Footnote: b } = m(() => f.Children.toArray(n), [n]).reduce((e, t) => (f.isValidElement(t) && typeof t.type != "string" && (t.type === k && (e.FeatureList = t), (t.type === P || t.type === F || t.type === I) && e.Actions.push(t), t.type === N && (e.ActionsMessage = t), t.type === L && (e.Footnote = t), t.type === D && (e.Heading = t), t.type === E && (e.Description = t), t.type === O && (e.Price = t)), e), {
		FeatureList: null,
		Actions: [],
		ActionsMessage: null,
		Footnote: null,
		Heading: null,
		Description: null,
		Price: null
	});
	return /* @__PURE__ */ _("div", {
		className: e(d.PricingOptions__item, i && d["PricingOptions__item--has-leading-component"], d[`PricingOptions__item--align-${s}`], r),
		"data-testid": t || v.item,
		ref: o,
		...a,
		children: [
			/* @__PURE__ */ g("div", {
				className: d.PricingOptions__header,
				children: c
			}),
			l,
			u,
			i && /* @__PURE__ */ g("div", {
				className: d["PricingOptions__leading-component"],
				children: i
			}),
			(h.length > 0 || y) && /* @__PURE__ */ _("div", {
				className: d.PricingOptions__actions,
				children: [h, y]
			}),
			p,
			b
		]
	});
}), E = p(({ children: n, className: r, "data-testid": i, ...a }, o) => /* @__PURE__ */ g(t, {
	as: "p",
	className: e(d.PricingOptions__description, r),
	"data-testid": i || v.description,
	ref: o,
	size: "200",
	variant: "muted",
	...a,
	children: n
})), D = p(({ as: t = "h3", children: r, "data-testid": i, size: a = "5", className: o, ...s }, c) => /* @__PURE__ */ g(n, {
	as: t,
	className: e(d.PricingOptions__heading, d[`PricingOptions__heading--size-${a}`], o),
	"data-testid": i || v.heading,
	ref: c,
	size: a,
	...s,
	children: r
})), O = p(({ children: n, className: r, currencyCode: i = "USD", currencySymbol: a = "$", "data-testid": o, originalPrice: s, trailingText: c, ...l }, u) => /* @__PURE__ */ _(t, {
	as: "p",
	className: e(d.PricingOptions__price, r),
	"data-testid": o || v.price,
	ref: u,
	weight: "normal",
	...l,
	children: [
		/* @__PURE__ */ _("span", {
			className: d["PricingOptions__price-amount"],
			children: [
				/* @__PURE__ */ g(t, {
					as: "span",
					className: d["PricingOptions__price-currency-symbol"],
					size: "500",
					weight: "normal",
					children: a
				}),
				/* @__PURE__ */ g(t, {
					as: "span",
					className: d["PricingOptions__price-value"],
					size: "500",
					weight: "normal",
					children: n
				}),
				/* @__PURE__ */ g(t, {
					as: "span",
					className: d["PricingOptions__price-currency-code"],
					size: "100",
					weight: "normal",
					children: i
				})
			]
		}),
		s && /* @__PURE__ */ _("del", {
			className: d["PricingOptions__price-original-price"],
			children: [/* @__PURE__ */ g(t, {
				size: "400",
				variant: "muted",
				weight: "normal",
				children: a
			}), /* @__PURE__ */ g(t, {
				className: d["PricingOptions__price-original-price-value"],
				size: "300",
				variant: "muted",
				weight: "normal",
				children: s
			})]
		}),
		c && /* @__PURE__ */ g(t, {
			as: "span",
			className: d["PricingOptions__price-trailing-text"],
			size: "200",
			variant: "muted",
			children: c
		})
	]
})), k = p(({ children: t, className: n, "data-testid": r, hasDivider: i = !0, expanded: o, accordionAs: u = "h4", ...p }, m) => {
	let { allFeatureListsExpanded: h, updateFeatureListExpanded: y, featureListUserInteracted: b, setFeatureListUserInteracted: C } = x(), { isMedium: w, isXLarge: T, isSmall: E } = s();
	f.useEffect(() => {
		(o === void 0 || typeof o == "object") && C(!1);
	}, [
		w,
		T,
		E,
		C,
		o
	]);
	let D = f.useMemo(() => {
		if (b) return h;
		if (typeof o == "boolean") return o;
		if (o === void 0) return !!(T || w);
		let { narrow: e, regular: t, wide: n } = o;
		return T ? n : w ? t : e;
	}, [
		o,
		h,
		w,
		T,
		b
	]), O = /* @__PURE__ */ g(R.FeatureListHeading, { children: S }), k = f.Children.toArray(t).reduce((e, t) => (f.isValidElement(t) && t.type === A ? O = t : f.isValidElement(t) && t.type === M ? (e.length === 0 && e.push({
		Heading: null,
		Items: []
	}), e[e.length - 1].Items.push(t)) : f.isValidElement(t) && t.type === j && e.push({
		Heading: t,
		Items: []
	}), e), []).map(({ Heading: e, Items: t }, n) => /* @__PURE__ */ _("div", {
		className: d["PricingOptions__feature-list-set"],
		children: [e, /* @__PURE__ */ g(l, {
			variant: "checked",
			...p,
			children: t
		})]
	}, n));
	return /* @__PURE__ */ g("div", {
		ref: m,
		className: e(d["PricingOptions__feature-list"], i && d["PricingOptions__feature-list--has-divider"], n),
		"data-testid": r || v.featureList,
		children: /* @__PURE__ */ _(c, {
			className: d["PricingOptions__feature-list-accordion"],
			disableAnimation: !0,
			open: D,
			onToggle: (e) => {
				C(!0), y(e.currentTarget.open);
			},
			children: [/* @__PURE__ */ _(c.Heading, {
				as: u,
				className: d["PricingOptions__feature-list-accordion-heading"],
				children: [O, /* @__PURE__ */ g(a, { className: d["PricingOptions__feature-list-accordion-chevron"] })]
			}), /* @__PURE__ */ g(c.Content, {
				className: d["PricingOptions__feature-list-accordion-content"],
				children: k
			})]
		})
	});
}), A = p(({ children: e, className: t, "data-testid": n, ...r }, i) => /* @__PURE__ */ g("div", {
	className: t,
	"data-testid": n || v.featureListHeading,
	ref: i,
	...r,
	children: e
})), j = p(({ children: t, className: r, "data-testid": i, ...a }, o) => /* @__PURE__ */ g(n, {
	as: "h4",
	className: e(d["PricingOptions__feature-list-group-heading"], r),
	"data-testid": i || v.featureListGroupHeading,
	ref: o,
	size: "subhead-medium",
	...a,
	children: t
})), M = p(({ children: t, className: n, infoTooltip: r, leadingVisual: a, leadingVisualFill: s, variant: c = "included", "data-testid": f, ...p }, m) => {
	let h = a ?? (c === "included" ? i : o), y = c === "included" ? "Includes" : "Does not include", b = s ?? (c === "included" ? "var(--brand-color-accent-primary)" : "var(--brand-color-text-muted)");
	return /* @__PURE__ */ _(l.Item, {
		className: e(d["PricingOptions__feature-list-item"], { [d["PricingOptions__feature-list-item--excluded"]]: c === "excluded" }, r && d["PricingOptions__feature-list-item--has-info"], n),
		"data-testid": f || v.featureListItem,
		leadingVisual: h,
		leadingVisualAriaLabel: y,
		leadingVisualFill: b,
		ref: m,
		...p,
		children: [t, r && /* @__PURE__ */ g(u, {
			text: r,
			direction: "n",
			children: /* @__PURE__ */ g("button", {
				type: "button",
				className: d["PricingOptions__feature-list-item-info"],
				"aria-label": `More information about ${typeof t == "string" ? t : "this feature"}`,
				children: /* @__PURE__ */ _("svg", {
					viewBox: "0 0 4 8",
					fill: "none",
					xmlns: "http://www.w3.org/2000/svg",
					"aria-hidden": "true",
					children: [/* @__PURE__ */ g("path", {
						d: "M0.75 3C0.33579 3 0 3.33579 0 3.75C0 4.16421 0.33579 4.5 0.75 4.5H1V6.5H0.75C0.33579 6.5 0 6.8358 0 7.25C0 7.6642 0.33579 8 0.75 8H2.75C3.16421 8 3.5 7.6642 3.5 7.25C3.5 6.8358 3.16421 6.5 2.75 6.5H2.5V3.75C2.5 3.33579 2.16421 3 1.75 3H0.75Z",
						fill: "currentColor"
					}), /* @__PURE__ */ g("path", {
						d: "M2.5 1C2.5 1.55228 2.05229 2 1.5 2C0.94772 2 0.5 1.55228 0.5 1C0.5 0.44772 0.94772 0 1.5 0C2.05229 0 2.5 0.44772 2.5 1Z",
						fill: "currentColor"
					})]
				})
			})
		})]
	});
}), N = p(({ children: t, className: n, "data-testid": r, leadingComponent: i, ...a }, o) => /* @__PURE__ */ _("div", {
	ref: o,
	className: e(d["PricingOptions__actions-message"], n),
	"data-testid": r || v.actionsMessage,
	...a,
	children: [i && /* @__PURE__ */ g("span", {
		className: d["PricingOptions__actions-message-leading-component"],
		children: i
	}), /* @__PURE__ */ g("div", {
		className: d["PricingOptions__actions-message-content"],
		children: t
	})]
})), P = p(({ as: t, children: n, className: i, "data-testid": a, ...o }, s) => /* @__PURE__ */ g(r, {
	ref: s,
	as: t,
	"data-testid": a || v.primaryAction,
	className: e(d["PricingOptions__primary-action"], i),
	size: "medium",
	variant: "primary",
	block: !0,
	...o,
	children: n
})), F = p(({ as: t, children: n, className: i, "data-testid": a, ...o }, s) => /* @__PURE__ */ g(r, {
	ref: s,
	as: t,
	className: e(d["PricingOptions__primary-action"], i),
	"data-testid": a || v.secondaryAction,
	variant: "secondary",
	block: !0,
	...o,
	children: n
})), I = p(({ children: t, className: n, "data-testid": r, ...i }, a) => /* @__PURE__ */ g("div", {
	ref: a,
	className: e(d["PricingOptions__menu-action"], n),
	"data-testid": r || v.menuAction,
	...i,
	children: t
})), L = p(({ children: n, className: r, "data-testid": i, ...a }, o) => /* @__PURE__ */ g(t, {
	as: "p",
	className: e(d.PricingOptions__footnote, r),
	"data-testid": i || v.footnote,
	ref: o,
	size: "100",
	variant: "muted",
	weight: "light",
	...a,
	children: n
})), R = Object.assign(w, {
	ActionsMessage: N,
	Description: E,
	FeatureList: k,
	FeatureListHeading: A,
	FeatureListGroupHeading: j,
	FeatureListItem: M,
	Footnote: L,
	Label: C,
	Heading: D,
	Item: T,
	MenuAction: I,
	Price: O,
	PrimaryAction: P,
	SecondaryAction: F,
	testIds: v
});
//#endregion
export { R as PricingOptions };

//# sourceMappingURL=PricingOptions.js.map