@fabrika/ui 0.9.0-dev.4 → 0.9.0-dev.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fabrika/ui",
-	"version": "0.9.0-dev.4",
+	"version": "0.9.0-dev.5",
 	"type": "module",
 	"description": "React component kit for the paved road: accessible admin components styled through CSS custom properties.",
 	"license": "MIT",

package/src/Challenge.tsx

@@ -2,6 +2,10 @@
 // challenge the application issued, solves its proof of work in workers, and the page sends the payload as the
 // procedure's `challengeToken`. Nothing is loaded from a third party: the widget is bundled with the page.
 //
+// To the visitor it is a part of the page, not a third party's badge: the widget's logo and attribution footer are
+// hidden (the library's MIT license asks for neither), and `.fui-challenge` sets its theme variables from the kit's
+// tokens.
+//
 // The one module of the kit with a runtime dependency, the optional peer `altcha`, which registers `<altcha-widget>`
 // when this module loads; the kit's root never imports it.
 
@@ -13,7 +17,7 @@ import { classNames } from './class-names'
 
 /**
  * The texts the widget renders as text, each with the widget's English default. Its footer is not among them: the
- * widget renders that one as HTML, so the kit keeps the widget's own.
+ * widget renders that one as HTML, and the kit hides it.
  */
 export interface ChallengeStrings {
 	readonly label: string
@@ -24,7 +28,8 @@ export interface ChallengeStrings {
 	readonly error: string
 	readonly reload: string
 	readonly waitAlert: string
-	readonly ariaLinkLabel: string
+	/** @deprecated The label of the widget's logo link, which the kit hides; it reaches nothing, so it is not sent. */
+	readonly ariaLinkLabel?: string
 }
 
 export interface ChallengeProps {
@@ -46,11 +51,14 @@ export interface ChallengeProps {
 /** The input a procedure with a challenge reads its token from; `@fabrika/app`'s `CHALLENGE_FIELD`. */
 const CHALLENGE_FIELD = 'challengeToken'
 
+/** The widget's configuration: no logo and no footer, both of which name and link the library. */
+const CONFIGURATION = JSON.stringify({ hideLogo: true, hideFooter: true })
+
 /** Each set of strings is registered once with the widget, under a language code of its own. */
 const registered = new Map<string, string>()
 
-/** The fields of `ChallengeStrings`: only these reach the widget, whatever else an object passed as one carries. */
-const TEXT_FIELDS: readonly (keyof ChallengeStrings)[] = [
+/** The fields of `ChallengeStrings` that reach the widget, whatever else an object passed as one carries. */
+const TEXT_FIELDS: readonly Exclude<keyof ChallengeStrings, 'ariaLinkLabel'>[] = [
 	'label',
 	'verifying',
 	'verified',
@@ -59,7 +67,6 @@ const TEXT_FIELDS: readonly (keyof ChallengeStrings)[] = [
 	'error',
 	'reload',
 	'waitAlert',
-	'ariaLinkLabel',
 ]
 
 function languageOf(given: Partial<ChallengeStrings> | undefined): string | undefined {
@@ -97,7 +104,7 @@ function tokenOf(event: Event): string | null | undefined {
 }
 
 /**
- * The ALTCHA widget for one procedure's challenge. A challenge passes once: after a refused submission, give the
+ * The proof-of-work widget for one procedure's challenge. A challenge passes once: after a refused submission, give the
  * component a new `key` so the visitor solves a fresh one.
  */
 export function Challenge({ url, onToken, name = CHALLENGE_FIELD, auto = 'off', strings, className }: ChallengeProps) {
@@ -121,6 +128,7 @@ export function Challenge({ url, onToken, name = CHALLENGE_FIELD, auto = 'off',
 			ref={host}
 			className={classNames('fui-challenge', className)}
 			challenge={url}
+			configuration={CONFIGURATION}
 			name={name}
 			auto={auto}
 			language={languageOf(strings)}

package/src/components.css

@@ -520,6 +520,35 @@
 	gap: var(--fui-space-4);
 }
 
+/* Challenge: the widget's own theme variables, set from the kit's tokens on its element, which its parts inherit. */
+
+.fui-challenge {
+	display: block;
+	font-family: var(--fui-font-family);
+	font-size: var(--fui-text-md);
+	--altcha-color-base: var(--fui-surface);
+	--altcha-color-base-content: var(--fui-text);
+	--altcha-color-neutral: var(--fui-border-strong);
+	--altcha-color-neutral-content: var(--fui-text-muted);
+	--altcha-color-primary: var(--fui-accent);
+	--altcha-color-primary-content: var(--fui-accent-contrast);
+	--altcha-color-success: var(--fui-success);
+	--altcha-color-success-content: var(--fui-accent-contrast);
+	--altcha-color-error: var(--fui-danger);
+	--altcha-color-error-content: var(--fui-accent-contrast);
+	--altcha-border-color: var(--fui-border);
+	--altcha-border-width: var(--fui-border-width);
+	--altcha-border-radius: var(--fui-radius-md);
+	--altcha-padding: var(--fui-space-3);
+	--altcha-checkbox-size: var(--fui-check-size);
+	--altcha-checkbox-border-color: var(--fui-border-strong);
+	--altcha-checkbox-border-radius: var(--fui-radius-sm);
+	--altcha-checkbox-outline: var(--fui-focus-width) solid var(--fui-focus);
+	--altcha-input-background-color: var(--fui-surface);
+	--altcha-input-border-radius: var(--fui-radius-sm);
+	--altcha-spinner-color: var(--fui-text-muted);
+}
+
 /* Button */
 
 .fui-button {

package/types/src/Challenge.d.ts

@@ -1,7 +1,7 @@
 import 'altcha';
 /**
  * The texts the widget renders as text, each with the widget's English default. Its footer is not among them: the
- * widget renders that one as HTML, so the kit keeps the widget's own.
+ * widget renders that one as HTML, and the kit hides it.
  */
 export interface ChallengeStrings {
     readonly label: string;
@@ -12,7 +12,8 @@ export interface ChallengeStrings {
     readonly error: string;
     readonly reload: string;
     readonly waitAlert: string;
-    readonly ariaLinkLabel: string;
+    /** @deprecated The label of the widget's logo link, which the kit hides; it reaches nothing, so it is not sent. */
+    readonly ariaLinkLabel?: string;
 }
 export interface ChallengeProps {
     /** Where the widget fetches its challenge: `challengeUrl(api.<procedure>)` of `@fabrika/app/client`. */
@@ -30,7 +31,7 @@ export interface ChallengeProps {
     readonly className?: string;
 }
 /**
- * The ALTCHA widget for one procedure's challenge. A challenge passes once: after a refused submission, give the
+ * The proof-of-work widget for one procedure's challenge. A challenge passes once: after a refused submission, give the
  * component a new `key` so the visitor solves a fresh one.
  */
 export declare function Challenge({ url, onToken, name, auto, strings, className }: ChallengeProps): import("react").JSX.Element;