@smileid/usesmileid 12.0.0-beta01

package/src/presentation/components/icons/index.tsx

@@ -0,0 +1,287 @@
+import { SvgXml } from "react-native-svg";
+import {
+  SI_CAPTURE_GUIDELINES_ICON,
+  SI_FILLED_CHECK_CIRCLE,
+  SI_FILLED_CLOSE_CIRCLE,
+  SI_GUIDELINE_ACCESSORIES,
+  SI_GUIDELINE_DOCUMENT_GOOD,
+  SI_GUIDELINE_DOCUMENT_NOT_BLURRY,
+  SI_GUIDELINE_DOCUMENT_NOT_CROPPED,
+  SI_GUIDELINE_DOCUMENT_NOT_REFLECTIVE,
+  SI_GUIDELINE_GOOD,
+  SI_GUIDELINE_MULTIPLE_FACES,
+  SI_GUIDELINE_POOR_LIGHTING,
+} from "../../assets/svg/instruction_svg_strings";
+import {
+  SI_ATTRIBUTION_DARK,
+  SI_ATTRIBUTION_LIGHT,
+  SI_CHECKBOX_CHECK,
+  SI_CONSENT_BIOMETRIC_DARK,
+  SI_CONSENT_BIOMETRIC_LIGHT,
+  SI_CONSENT_CONTACT_DARK,
+  SI_CONSENT_CONTACT_LIGHT,
+  SI_CONSENT_DEVICE_DARK,
+  SI_CONSENT_DEVICE_LIGHT,
+  SI_CONSENT_PERSONAL_DARK,
+  SI_CONSENT_PERSONAL_LIGHT,
+  SI_EXPAND_MORE,
+  SI_OUTLINE_ARROW_BACK,
+  SI_OUTLINE_CHECK,
+  SI_OUTLINE_CLOSE,
+  SI_PLUS,
+  SI_GALLERY,
+  SI_RETAKE,
+  SI_SMILE_CONSENT_ICON,
+} from "../../assets/svg/svg_strings";
+
+/**
+ * Thin `<SvgXml>` wrappers over the bundled SVG markup, so partners get pixel-exact
+ * rendering without a Metro transformer or asset pipeline.
+ */
+
+export type IconProps = {
+  /** Pixel size for both width and height (square; aspect ratio preserved via `viewBox`). */
+  readonly size?: number;
+};
+
+export type ChevronProps = IconProps;
+
+const DEFAULT_CONSENT_ICON_SIZE = 28;
+
+export type ConsentIconTone = "light" | "dark";
+
+export type ConsentIconComponentProps = IconProps & {
+  /** Light/dark icon variant; pass `"dark"` on a dark-theme background. */
+  readonly tone?: ConsentIconTone;
+};
+
+function consentIcon(lightXml: string, darkXml: string) {
+  return function ConsentIcon({
+    tone = "light",
+    size = DEFAULT_CONSENT_ICON_SIZE,
+  }: ConsentIconComponentProps) {
+    return (
+      <SvgXml
+        xml={tone === "dark" ? darkXml : lightXml}
+        width={size}
+        height={size}
+      />
+    );
+  };
+}
+
+export const SiConsentContact = consentIcon(
+  SI_CONSENT_CONTACT_LIGHT,
+  SI_CONSENT_CONTACT_DARK,
+);
+export const SiConsentPersonal = consentIcon(
+  SI_CONSENT_PERSONAL_LIGHT,
+  SI_CONSENT_PERSONAL_DARK,
+);
+export const SiConsentBiometric = consentIcon(
+  SI_CONSENT_BIOMETRIC_LIGHT,
+  SI_CONSENT_BIOMETRIC_DARK,
+);
+export const SiConsentDevice = consentIcon(
+  SI_CONSENT_DEVICE_LIGHT,
+  SI_CONSENT_DEVICE_DARK,
+);
+
+/** Plus glyph between the partner and Smile ID icons atop the consent screen. */
+export function SiPlus({ size = 24 }: IconProps) {
+  return <SvgXml xml={SI_PLUS} width={size} height={size} />;
+}
+
+/**
+ * Material check inside the rounded checkbox. Caller sizes to ~60% of the checkbox
+ * width to match canonical proportions; tint via `color` (`currentColor` fill).
+ */
+export function SiCheckboxCheck({ size = 12, color }: TintedIconProps) {
+  return (
+    <SvgXml
+      xml={SI_CHECKBOX_CHECK}
+      width={size}
+      height={size}
+      {...(color !== undefined ? { color } : {})}
+    />
+  );
+}
+
+/**
+ * Downward chevron in the consent "Learn more" circle; caller rotates the container
+ * 180° when expanded. Tint via `color` (`currentColor` stroke).
+ */
+export function SiExpandMore({ size = 12, color }: TintedIconProps) {
+  // Height derives from the 12:5 source viewBox aspect ratio.
+  return (
+    <SvgXml
+      xml={SI_EXPAND_MORE}
+      width={size}
+      height={(size * 5) / 12}
+      {...(color !== undefined ? { color } : {})}
+    />
+  );
+}
+
+/** Smile ID brand mark on the consent screen's icon row, paired with the partner's icon. */
+export function SiSmileConsentIcon({ size = 30 }: IconProps) {
+  return <SvgXml xml={SI_SMILE_CONSENT_ICON} width={size} height={size} />;
+}
+
+export type TintedIconProps = IconProps & {
+  /** CSS color applied to the SVG's `currentColor` references. */
+  readonly color?: string;
+};
+
+/** Outlined check for the preview Accept tile; tint via `color` (`currentColor` fill). */
+export function SiOutlineCheck({ size = 24, color }: TintedIconProps) {
+  return (
+    <SvgXml
+      xml={SI_OUTLINE_CHECK}
+      width={size}
+      height={size}
+      {...(color !== undefined ? { color } : {})}
+    />
+  );
+}
+
+/** Outlined close for the preview Retake tile; same contract as `SiOutlineCheck`. */
+export function SiOutlineClose({ size = 24, color }: TintedIconProps) {
+  return (
+    <SvgXml
+      xml={SI_OUTLINE_CLOSE}
+      width={size}
+      height={size}
+      {...(color !== undefined ? { color } : {})}
+    />
+  );
+}
+
+/** Back arrow for the circular back button; tint via `color`. The consumer mirrors it in RTL. */
+export function SiArrowBack({ size = 24, color }: TintedIconProps) {
+  return (
+    <SvgXml
+      xml={SI_OUTLINE_ARROW_BACK}
+      width={size}
+      height={size}
+      {...(color !== undefined ? { color } : {})}
+    />
+  );
+}
+
+/** Retake/refresh glyph for the preview Retake tile; tint via `color`. */
+export function SiRetake({ size = 28, color }: TintedIconProps) {
+  return (
+    <SvgXml
+      xml={SI_RETAKE}
+      width={size}
+      height={size}
+      {...(color !== undefined ? { color } : {})}
+    />
+  );
+}
+
+/** Photo-library glyph for the document capture gallery-upload control; tint via `color`. */
+export function SiGallery({ size = 24, color }: TintedIconProps) {
+  return (
+    <SvgXml
+      xml={SI_GALLERY}
+      width={size}
+      height={size}
+      {...(color !== undefined ? { color } : {})}
+    />
+  );
+}
+
+export type AttributionProps = {
+  /** Light/dark variant of the "Powered by Smile ID" footer; defaults to light. */
+  readonly tone?: ConsentIconTone;
+  readonly width?: number;
+  readonly height?: number;
+};
+
+/** "Powered by Smile ID" attribution graphic (native aspect 143:16). */
+export function SiAttribution({
+  tone = "light",
+  width = 143,
+  height = 16,
+}: AttributionProps) {
+  return (
+    <SvgXml
+      xml={tone === "dark" ? SI_ATTRIBUTION_DARK : SI_ATTRIBUTION_LIGHT}
+      width={width}
+      height={height}
+    />
+  );
+}
+
+/** Aspect-preserving props for the 33:44 guideline illustrations. */
+export type GuidelineIllustrationProps = {
+  readonly width?: number;
+  readonly height?: number;
+};
+
+function guidelineIllustration(xml: string) {
+  return function GuidelineIllustration({
+    width = 31,
+    height = 43,
+  }: GuidelineIllustrationProps) {
+    return <SvgXml xml={xml} width={width} height={height} />;
+  };
+}
+
+/** "Good" capture-guideline illustration (allowed). */
+export const SiGuidelineGood = guidelineIllustration(SI_GUIDELINE_GOOD);
+/** "Accessories" capture-guideline illustration (blocked). */
+export const SiGuidelineAccessories = guidelineIllustration(
+  SI_GUIDELINE_ACCESSORIES,
+);
+/** "Multiple Faces" capture-guideline illustration (blocked). */
+export const SiGuidelineMultipleFaces = guidelineIllustration(
+  SI_GUIDELINE_MULTIPLE_FACES,
+);
+/** "Poor Lighting" capture-guideline illustration (blocked). */
+export const SiGuidelinePoorLighting = guidelineIllustration(
+  SI_GUIDELINE_POOR_LIGHTING,
+);
+
+// Document-capture guideline illustrations. All four render the shared ID-card
+// placeholder for now; per-guideline assets are pending design.
+/** "Good" document-guideline illustration (allowed). */
+export const SiGuidelineDocumentGood = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_GOOD,
+);
+/** "Not cropped" document-guideline illustration (blocked). */
+export const SiGuidelineDocumentNotCropped = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_NOT_CROPPED,
+);
+/** "Not blurry" document-guideline illustration (blocked). */
+export const SiGuidelineDocumentNotBlurry = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_NOT_BLURRY,
+);
+/** "Not reflective" document-guideline illustration (blocked). */
+export const SiGuidelineDocumentNotReflective = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_NOT_REFLECTIVE,
+);
+
+/** Capture-guidelines section-header glyph; tint via `color` (currentColor). */
+export function SiCaptureGuidelinesIcon({ size = 16, color }: TintedIconProps) {
+  return (
+    <SvgXml
+      xml={SI_CAPTURE_GUIDELINES_ICON}
+      width={size}
+      height={size}
+      {...(color !== undefined ? { color } : {})}
+    />
+  );
+}
+
+/** Filled green check badge for an allowed guideline (colors baked in). */
+export function SiFilledCheckCircle({ size = 16 }: IconProps) {
+  return <SvgXml xml={SI_FILLED_CHECK_CIRCLE} width={size} height={size} />;
+}
+
+/** Filled red close badge for a blocked guideline (colors baked in). */
+export function SiFilledCloseCircle({ size = 16 }: IconProps) {
+  return <SvgXml xml={SI_FILLED_CLOSE_CIRCLE} width={size} height={size} />;
+}

package/src/presentation/components/status_indicator_state.ts

@@ -0,0 +1,21 @@
+/**
+ * Tri-state output of a job submission, surfaced by
+ * `<UseSmileIDStatusIndicator>` and the bottom card of the
+ * processing screen: `loading` → in-flight, `success` → completed,
+ * `failure` → submission rejected. Partners can pass either the
+ * namespaced symbol (`StatusIndicatorState.success`) or the bare
+ * string literal (`'success'`).
+ *
+ * Lives in its own `.ts` (not co-located in the component `.tsx`)
+ * so the const-object can be imported by Vitest tests — Vite's
+ * parser can't transform `react-native`'s Flow-typed source, so
+ * any import path that pulls in RN UI primitives breaks tests.
+ */
+export const StatusIndicatorState = {
+  loading: "loading",
+  success: "success",
+  failure: "failure",
+} as const;
+
+export type StatusIndicatorState =
+  (typeof StatusIndicatorState)[keyof typeof StatusIndicatorState];

package/src/presentation/components/use_smile_id_attribution.tsx

@@ -0,0 +1,48 @@
+import { StyleSheet, useColorScheme, View } from "react-native";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+import { SiAttribution } from "./icons";
+
+export type UseSmileIDAttributionProps = {
+  /**
+   * Force the light-tone attribution regardless of the active
+   * colour scheme. Used by surfaces that always render light
+   * (capture screen overlay, processing screen card).
+   */
+  readonly forceLightMode?: boolean;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+const NATIVE_WIDTH = 143;
+const NATIVE_HEIGHT = 16;
+
+/**
+ * "Powered by Smile ID" footer rendered as the canonical SVG mark.
+ * Tone follows the device colour scheme; `forceLightMode` overrides
+ * to the light variant on always-light surfaces. Sized at the SVG's
+ * native 143×16 aspect.
+ */
+export function UseSmileIDAttribution(props: UseSmileIDAttributionProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const loc = useUseSmileIDLocalizations();
+  const systemScheme = useColorScheme();
+  const tone: "light" | "dark" =
+    !props.forceLightMode && systemScheme === "dark" ? "dark" : "light";
+  return (
+    <View
+      style={[styles.container, { paddingVertical: theme.spacing.small }]}
+      testID={props.testID}
+      accessibilityRole="image"
+      accessibilityLabel={loc.siCdPoweredBySmileId}
+    >
+      <SiAttribution tone={tone} width={NATIVE_WIDTH} height={NATIVE_HEIGHT} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: "center" },
+});

package/src/presentation/components/use_smile_id_back_button.tsx

@@ -0,0 +1,59 @@
+import { I18nManager, Pressable, StyleSheet, View } from "react-native";
+import { defaultLightTheme, type UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { SiArrowBack } from "./icons";
+
+export type UseSmileIDBackButtonProps = {
+  readonly onClick: () => void;
+  /** Force light-mode rendering — used when the button sits over the white capture overlay. */
+  readonly forceLightMode?: boolean;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+const SIZE = 40;
+const ICON_SIZE = 24;
+
+/**
+ * Circular back button — `offBlack` fill, `offWhite` arrow, hairline
+ * `backButtonBorder` rim. The arrow mirrors in RTL (the documented
+ * directional-glyph exception).
+ */
+export function UseSmileIDBackButton(props: UseSmileIDBackButtonProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.forceLightMode
+    ? defaultLightTheme
+    : (props.theme ?? themeFromContext);
+  return (
+    <Pressable
+      onPress={props.onClick}
+      accessibilityRole="button"
+      accessibilityLabel="Back"
+      testID={props.testID}
+      style={({ pressed }) => [
+        styles.button,
+        {
+          backgroundColor: theme.colors.offBlack,
+          borderColor: theme.colors.backButtonBorder,
+          opacity: pressed ? 0.7 : 1,
+        },
+      ]}
+    >
+      <View style={I18nManager.isRTL ? styles.mirrored : undefined}>
+        <SiArrowBack size={ICON_SIZE} color={theme.colors.offWhite} />
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    width: SIZE,
+    height: SIZE,
+    borderRadius: SIZE / 2,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  mirrored: { transform: [{ scaleX: -1 }] },
+});

package/src/presentation/components/use_smile_id_button.tsx

@@ -0,0 +1,93 @@
+import { Pressable, StyleSheet, Text } from "react-native";
+import { defaultLightTheme, type UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+
+// Defensive fallbacks for partner themes constructed before the disabled
+// tokens existed (the tokens are optional on the public color type). The
+// SDK's own default palettes always supply concrete values.
+const DISABLED_BACKGROUND_FALLBACK = "#E4E7EC";
+const DISABLED_FOREGROUND_FALLBACK = "#98A2B3";
+
+export type UseSmileIDButtonProps = {
+  readonly label: string;
+  readonly onClick: () => void;
+  readonly variant?: "primary" | "secondary";
+  readonly enabled?: boolean;
+  /** Force light-mode rendering — needed when the button sits over the camera preview. */
+  readonly forceLightMode?: boolean;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * Pill-shaped primary / secondary button (48-dp height, 32-radius
+ * corners).
+ *
+ * Secondary variant: transparent background + 1-pt stroke in the
+ * secondary colour + primary-coloured label.
+ */
+export function UseSmileIDButton(props: UseSmileIDButtonProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  // `forceLightMode` wins over partner override — routes color reads
+  // through the canonical light palette regardless of system dark
+  // mode (used by the capture chrome).
+  const theme = props.forceLightMode
+    ? defaultLightTheme
+    : (props.theme ?? themeFromContext);
+  const enabled = props.enabled ?? true;
+  const disabled = !enabled;
+  const variant = props.variant ?? "primary";
+  const isSecondary = variant === "secondary";
+
+  return (
+    <Pressable
+      onPress={props.onClick}
+      disabled={!enabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !enabled }}
+      testID={props.testID}
+      style={({ pressed }) => [
+        styles.base,
+        {
+          borderRadius: theme.shapes.buttonRadius,
+          // Disabled buttons render a true neutral grey container (both
+          // variants), not a dimmed tint of the brand colour.
+          backgroundColor: disabled
+            ? (theme.colors.disabledBackground ?? DISABLED_BACKGROUND_FALLBACK)
+            : isSecondary
+              ? "transparent"
+              : theme.colors.primary,
+          borderColor:
+            !disabled && isSecondary ? theme.colors.secondary : "transparent",
+          borderWidth: !disabled && isSecondary ? 1 : 0,
+          opacity: disabled ? 1 : pressed ? 0.85 : 1,
+        },
+      ]}
+    >
+      <Text
+        numberOfLines={1}
+        style={{
+          ...theme.typography.button,
+          color: disabled
+            ? (theme.colors.disabledForeground ?? DISABLED_FOREGROUND_FALLBACK)
+            : isSecondary
+              ? theme.colors.primary
+              : theme.colors.primaryForeground,
+          textAlign: "center",
+        }}
+      >
+        {props.label}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    height: 48,
+    paddingHorizontal: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "stretch",
+  },
+});