@webority/ui-react 0.11.6 → 0.12.0

package/dist/types/components/AppConsentBanner.d.ts

@@ -0,0 +1,46 @@
+import "@webority/ui-elements";
+/**
+ * The cookie consent banner: accept all, reject all, or choose per category (analytics,
+ * functional, marketing; essential is always on).
+ *
+ * Wraps the shared `<wui-consent-banner>` element, which owns the buttons, the switches and the
+ * settings mode. This wrapper owns the wiring to `@webority/analytics`: it shows the banner when
+ * the visitor has not decided yet, and stores their choice with `saveConsent`, which also tells
+ * Google Consent Mode, PostHog and the marketing tags. Call `initConsent` from
+ * `@webority/analytics` before this renders; it throws otherwise, because a banner with no
+ * consent record behind it would ask a question nothing remembers.
+ *
+ * Any element carrying `data-consent-settings` reopens the banner with the switches showing, so
+ * a footer "Cookie settings" link needs no code: withdrawing consent must be as easy as giving it.
+ *
+ * ```jsx
+ * initConsent({ requiresOptIn, cookieDomain: ".example.com" }); // app bootstrap, once
+ *
+ * <AppConsentBanner policyHref="/cookie-policy" />
+ * <a href="#" data-consent-settings>Cookie settings</a>
+ * ```
+ *
+ * @param {object} props
+ * @param {string} [props.heading='Cookies on this site'] Heading, and the dialog's accessible name.
+ * @param {string} [props.description] The explanation above the buttons.
+ * @param {string} [props.policyHref] Link to the cookie policy; no link when omitted.
+ * @param {string} [props.policyLabel='Cookie policy'] The policy link's text.
+ * @param {string} [props.analyticsDescription] What the analytics category covers.
+ * @param {string} [props.functionalDescription] What the functional category covers.
+ * @param {string} [props.marketingDescription] What the marketing category covers.
+ * @param {"bottom-left"|"bottom-right"} [props.position='bottom-left'] Which corner it pins to.
+ * @param {string} [props.className] Extra classes on the element.
+ * @param {import('react').CSSProperties} [props.style] Inline style; lands on the element with `className`.
+ */
+export default function AppConsentBanner({ heading, description, policyHref, policyLabel, analyticsDescription, functionalDescription, marketingDescription, position, className, style, ...rest }: {
+    heading?: string;
+    description?: string;
+    policyHref?: string;
+    policyLabel?: string;
+    analyticsDescription?: string;
+    functionalDescription?: string;
+    marketingDescription?: string;
+    position?: "bottom-left" | "bottom-right";
+    className?: string;
+    style?: import('react').CSSProperties;
+}): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -18,6 +18,7 @@ export { default as AppChoiceChip } from "./components/AppChoiceChip.jsx";
 export { default as AppColorField } from "./components/AppColorField.jsx";
 export { default as AppCompareTable } from "./components/AppCompareTable.jsx";
 export { default as AppConfirmDialog } from "./components/AppConfirmDialog.jsx";
+export { default as AppConsentBanner } from "./components/AppConsentBanner.jsx";
 export { default as AppCopyButton } from "./components/AppCopyButton.jsx";
 export { default as AppDataTable } from "./components/AppDataTable.jsx";
 export { default as AppDatePicker } from "./components/AppDatePicker.jsx";