@incodetech/prizma-core-screens 0.2.24 → 0.2.26

package/src/ElectronicSignatureDrawScreen.tsx

@@ -1,12 +1,17 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useId, useState } from 'react';
+import { PrizmaSegmentedControl } from '@incodetech/prizma-core-web/segmented-control';
 import { PrizmaSignaturePad } from '@incodetech/prizma-core-web/signature-pad';
+import { PrizmaSignaturePreview } from '@incodetech/prizma-core-web/signature-preview';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type {
   ElectronicSignatureDrawState,
+  ElectronicSignatureMethod,
   ElectronicSignatureStrings,
 } from './ElectronicSignatureStrings';
 import './ScreenLayout.css';
+import './ElectronicSignatureLayout.css';
 
 export interface ElectronicSignatureDrawScreenProps
   extends Omit<
@@ -23,8 +28,22 @@ export interface ElectronicSignatureDrawScreenProps
   > {
   /** Module copy — this screen reads the `draw` slice. */
   strings: ElectronicSignatureStrings;
-  /** Which purple section to render: `draw` (empty) or `signed`. Default `draw`. */
+  /**
+   * Which pose to render: `draw` (empty pad), `signed` (ink on the pad) or
+   * `type` (type mode, `typedName` in the field). Default `draw`.
+   */
   state?: ElectronicSignatureDrawState;
+  /**
+   * Draw or Type, when the host owns it. Left out, the screen keeps its own,
+   * starting from `state`. Only read when `strings.type` is supplied.
+   */
+  method?: ElectronicSignatureMethod;
+  /** Called when the person switches between Draw and Type. */
+  onMethodChange?: (method: ElectronicSignatureMethod) => void;
+  /** The typed name, when the host owns it. Left out, the screen keeps its own. */
+  typedName?: string;
+  /** Called on every change to the typed name. */
+  onTypedNameChange?: (name: string) => void;
   /**
    * Core's own extension point for the drawing engine
    * (`PrizmaSignaturePad.onCanvasReady`: "consumers wire their drawing engine
@@ -79,6 +98,10 @@ export const ElectronicSignatureDrawScreen = forwardRef<
     {
       strings,
       state = 'draw',
+      method: methodProp,
+      onMethodChange,
+      typedName: typedNameProp,
+      onTypedNameChange,
       onCanvasReady,
       screenId = `electronic-signature-${state}`,
       overrides,
@@ -88,16 +111,129 @@ export const ElectronicSignatureDrawScreen = forwardRef<
     ref,
   ) => {
     const signed = state === 'signed';
+    const alt = strings.type;
+
+    // Draw / Type: controlled when the host passes `method` / `typedName`,
+    // otherwise the screen holds them, starting from the pose.
+    const [ownMethod, setOwnMethod] = useState<ElectronicSignatureMethod>(
+      state === 'type' ? 'type' : 'draw',
+    );
+    const [ownName, setOwnName] = useState(state === 'type' ? typedNameProp ?? '' : '');
+    useEffect(() => {
+      setOwnMethod(state === 'type' ? 'type' : 'draw');
+    }, [state]);
+    const method: ElectronicSignatureMethod = alt ? methodProp ?? ownMethod : 'draw';
+    const name = typedNameProp ?? ownName;
+    const typing = method === 'type';
+    const [padKey, setPadKey] = useState(0);
+    const panelId = useId();
+
+    const setName = (next: string) => {
+      if (typedNameProp === undefined) setOwnName(next);
+      onTypedNameChange?.(next);
+    };
+    // Switching clears what the other mode held, the Document Electronic
+    // Signature rule (Elena, 2026-11-12), so Done only turns on for the
+    // signature on screen. A fresh pad is a remount of Core's pad.
+    const switchMethod = (next: ElectronicSignatureMethod) => {
+      if (next === method) return;
+      setPadKey((k) => k + 1);
+      setName('');
+      if (methodProp === undefined) setOwnMethod(next);
+      onMethodChange?.(next);
+    };
+
+    const ready = typing ? name.trim().length > 1 : signed;
+    const title = typing && alt ? alt.title : strings.draw.title;
+    const subtitle = typing && alt ? alt.subtitle : strings.draw.subtitle;
+
+    const pad = (ghost: boolean) => (
+      <PrizmaSignaturePad
+        key={ghost ? 'ghost' : padKey}
+        isFilled={ghost ? false : signed}
+        /* Full-signature sub-type, not the initials one. */
+        isInitials={false}
+        placeholder={strings.draw.placeholder}
+        canvasLabel={strings.draw.canvasLabel}
+        clearLabel={strings.draw.clearLabel}
+        /* Clearing the canvas is a different flow from submitting it, so it
+           emits its own event rather than collapsing into the CTA
+           (DEVIATIONS #PI-10). */
+        onClear={ghost ? undefined : () => onAction?.({ type: 'secondary', screenId })}
+        onCanvasReady={ghost ? undefined : onCanvasReady}
+      />
+    );
+
+    // No `type` copy: the pad-only screen the module shipped with.
+    const middle = !alt ? (
+      pad(false)
+    ) : (
+      <div className="electronic-signature-method">
+        <PrizmaSegmentedControl
+          aria-label={alt.methodLabel}
+          value={method}
+          onValueChange={(v: string) => switchMethod(v === 'type' ? 'type' : 'draw')}
+          options={[
+            { value: 'draw', label: alt.drawLabel, controls: !typing ? panelId : undefined },
+            { value: 'type', label: alt.typeLabel, controls: typing ? panelId : undefined },
+          ]}
+        />
+        {!typing ? (
+          <div id={panelId} role="tabpanel" aria-label={alt.drawLabel} className="electronic-signature-method__body">
+            {pad(false)}
+          </div>
+        ) : (
+          <div
+            id={panelId}
+            role="tabpanel"
+            aria-label={alt.typeLabel}
+            className="electronic-signature-method__body electronic-signature-method__body--type"
+          >
+            {/* An inert copy of the pad holds the Draw height, so the CTA does
+                not jump when the mode switches. Inert, not just hidden: its
+                Clear canvas button must stay out of focus and hit-testing. */}
+            <div className="electronic-signature-method__floor" aria-hidden="true" {...{ inert: '' }}>
+              {pad(true)}
+            </div>
+            <div className="electronic-signature-method__type">
+              {/* Set up for a name: the phone offers the person's own,
+                  capitalises each word, does not autocorrect, Return submits. */}
+              <PrizmaTextField
+                label={alt.nameLabel}
+                value={name}
+                onValueChange={setName}
+                autoComplete="name"
+                autoCapitalize="words"
+                autoCorrect="off"
+                spellCheck={false}
+                enterKeyHint="done"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && ready) {
+                    e.preventDefault();
+                    onAction?.({ type: 'cta', screenId });
+                  }
+                }}
+              />
+              <PrizmaSignaturePreview
+                label={alt.previewLabel}
+                name={name}
+                placeholder={alt.previewPlaceholder}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    );
 
     return (
       <PrizmaFormScreen
         ref={ref}
-        title={strings.draw.title}
-        subtitle={strings.draw.subtitle}
+        title={title}
+        subtitle={subtitle}
         ctaLabel={strings.draw.ctaLabel}
         /* `eSign.draw` draws `Done` on Button/Primary/Surface/Disabled — there
-           is nothing to submit until the canvas has ink. */
-        ctaDisabled={!signed}
+           is nothing to submit until the canvas has ink, or a name is typed. */
+        ctaDisabled={!ready}
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}
         screenId={screenId}
@@ -105,19 +241,7 @@ export const ElectronicSignatureDrawScreen = forwardRef<
         onAction={onAction}
         {...shell}
       >
-        <PrizmaSignaturePad
-          isFilled={signed}
-          /* Full-signature sub-type, not the initials one. */
-          isInitials={false}
-          placeholder={strings.draw.placeholder}
-          canvasLabel={strings.draw.canvasLabel}
-          clearLabel={strings.draw.clearLabel}
-          /* Clearing the canvas is a different flow from submitting it, so it
-             emits its own event rather than collapsing into the CTA
-             (DEVIATIONS #PI-10). */
-          onClear={() => onAction?.({ type: 'secondary', screenId })}
-          onCanvasReady={onCanvasReady}
-        />
+        {middle}
       </PrizmaFormScreen>
     );
   },

package/src/ElectronicSignatureLayout.css

@@ -84,3 +84,35 @@
   letter-spacing: var(--prizma-headline-h5-letter-spacing);
   color: var(--prizma-text-body-800-primary);
 }
+
+/* ── Draw / Type (`strings.type` supplied) ───────────────────────────────────
+ * Core's Segmented control over the mode's body, the same composition as
+ * Document Electronic Signature's sheet (`.document-signature-sheet-body`):
+ * Spacing/8 between the control and the body, and between field and preview.
+ * Type mode keeps the Draw body's height: an inert copy of Core's pad shares
+ * the grid cell with the field + preview, so the CTA does not jump. */
+.electronic-signature-method,
+.electronic-signature-method__body,
+.electronic-signature-method__type {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-8);
+}
+
+.electronic-signature-method__body--type {
+  display: grid;
+}
+
+.electronic-signature-method__body--type > * {
+  grid-area: 1 / 1;
+  min-width: 0;
+}
+
+.electronic-signature-method__floor {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.electronic-signature-method__type {
+  align-self: start;
+}

package/src/ElectronicSignatureStrings.ts

@@ -15,7 +15,10 @@
  * placeholder visible, both actions inert) and `eSign.signed` (ink on the
  * canvas, Clear live, Done live). One screen, one Figma-drawn axis.
  */
-export type ElectronicSignatureDrawState = 'draw' | 'signed';
+export type ElectronicSignatureDrawState = 'draw' | 'signed' | 'type';
+
+/** How the person signs: drawing on the pad, or typing their name. */
+export type ElectronicSignatureMethod = 'draw' | 'type';
 
 export interface ElectronicSignatureStrings {
   /** "verified by" attribution copy for the footer tag. */
@@ -49,6 +52,30 @@ export interface ElectronicSignatureStrings {
     ctaLabel: string;
   };
 
+  /**
+   * Draw / Type — the accessible alternative to the pad (Elena, 2026-11-13,
+   * the same switch as Document Electronic Signature's sheet). Optional: a
+   * host that leaves it out keeps the pad-only screen it shipped with.
+   */
+  type?: {
+    /** Accessible name for the Draw / Type Segmented control — "Signature method". */
+    methodLabel: string;
+    /** Segmented control, the draw option — "Draw". */
+    drawLabel: string;
+    /** Segmented control, the type option — "Type". */
+    typeLabel: string;
+    /** H2 in type mode — "Type your name". */
+    title: string;
+    /** H5 in type mode — "Use your full name". */
+    subtitle: string;
+    /** Field label — "Full name". */
+    nameLabel: string;
+    /** Core's Signature preview label, under the field — "Preview". */
+    previewLabel: string;
+    /** Signature preview while the field is empty — "Your signature". */
+    previewPlaceholder: string;
+  };
+
   /** `eSign.success` — the verdict, reported with no action. */
   success: {
     /** H2 — "Signed successfully!". */

package/src/FaceCaptureCapturingScreen.tsx

@@ -154,7 +154,6 @@ export const FaceCaptureCapturingScreen = forwardRef<
       extendTime && offer ? (
         <PrizmaSnackbar
           state="neutral"
-          isMultiline
           // Assertive on purpose — see the live-region note in this file's
           // header. The component default here would be `status`.
           role="alert"

package/src/IdCaptureStageScreen.tsx

@@ -228,7 +228,6 @@ export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScr
       (extendTime && offer ? (
         <PrizmaSnackbar
           state="neutral"
-          isMultiline
           // Assertive on purpose — a polite region can queue behind the
           // stage's own state announcements and be read out after the 20 s
           // has already run out. FaceCaptureCapturingScreen's header has the

package/src/index.ts

@@ -1,3 +1,4 @@
+// from the `read-and-sign-in-one-screen` exploration
 // @incodetech/prizma-core-screens — barrel.
 //
 // Foundation: shell, nav, capture overlay, and the seven screen archetypes
@@ -394,11 +395,27 @@ export { CurpResultScreen, type CurpResultScreenProps } from './CurpResultScreen
 
 // ── Electronic Signature (wave 3) ────────────────────────────────────────────────
 // Purple sections of the Electronic Signature Figma file (kUsDigsC8Mq1WobTewF0R6, page 5:13191).
-export { type ElectronicSignatureDrawState, type ElectronicSignatureStrings } from './ElectronicSignatureStrings';
+export {
+  type ElectronicSignatureDrawState,
+  type ElectronicSignatureMethod,
+  type ElectronicSignatureStrings,
+} from './ElectronicSignatureStrings';
 export { ElectronicSignatureDrawScreen, type ElectronicSignatureDrawScreenProps } from './ElectronicSignatureDrawScreen';
 export { ElectronicSignatureErrorScreen, type ElectronicSignatureErrorScreenProps } from './ElectronicSignatureErrorScreen';
 export { ElectronicSignatureReviewScreen, type ElectronicSignatureReviewScreenProps } from './ElectronicSignatureReviewScreen';
 export { ElectronicSignatureSuccessScreen, type ElectronicSignatureSuccessScreenProps } from './ElectronicSignatureSuccessScreen';
+// Document Electronic Signature: from the `read-and-sign-in-one-screen` exploration.
+export {
+  documentSignatureResultStrings,
+  type DocumentSignatureState,
+  type DocumentSignatureStrings,
+} from './DocumentSignatureStrings';
+export {
+  DocumentSignatureReviewScreen,
+  type DocumentSignatureDocument,
+  type DocumentSignatureReviewScreenProps,
+  type DocumentSignatureSignature,
+} from './DocumentSignatureReviewScreen';
 
 // ── Qualified Signature (wave 3) ────────────────────────────────────────────────
 // Purple sections of the Qualified Signature Figma file (XO9YGKlEsGUyag8CGbSUsi, page 6086:28669).

package/src/styles.css

@@ -18,6 +18,7 @@
 @import './DemoScreensLayout.css';
 @import './DigitalIdProvidersLayout.css';
 @import './DocumentCaptureLayout.css';
+@import './DocumentSignatureLayout.css';
 @import './EkycLayout.css';
 @import './ElectronicSignatureLayout.css';
 @import './FaceCaptureLayout.css';