@smileid/usesmileid 12.0.2 → 12.1.1

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

@@ -1,334 +0,0 @@
-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_GENERIC_GOOD,
-  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_BLURRY,
-  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_CROPPED,
-  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_REFLECTIVE,
-  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_GOOD,
-  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_BLURRY,
-  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_CROPPED,
-  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_REFLECTIVE,
-  SI_GUIDELINE_DOCUMENT_PASSPORT_GOOD,
-  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_BLURRY,
-  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_CROPPED,
-  SI_GUIDELINE_DOCUMENT_PASSPORT_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 — self-contained card art per
-// document type (see `instruction_svg_strings`). Each renders at the asset's
-// natural viewBox; `UseSmileIDGuidelineThumbnail` sizes and frames them.
-
-// --- Generic document (landscape) ---
-/** "Good" generic-document guideline illustration (allowed). */
-export const SiGuidelineDocumentGenericGood = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_GENERIC_GOOD,
-);
-/** "Not cropped" generic-document guideline illustration (blocked). */
-export const SiGuidelineDocumentGenericNotCropped = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_CROPPED,
-);
-/** "Not blurry" generic-document guideline illustration (blocked). */
-export const SiGuidelineDocumentGenericNotBlurry = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_BLURRY,
-);
-/** "Not reflective" generic-document guideline illustration (blocked). */
-export const SiGuidelineDocumentGenericNotReflective = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_REFLECTIVE,
-);
-
-// --- Passport (landscape) ---
-/** "Good" passport guideline illustration (allowed). */
-export const SiGuidelineDocumentPassportGood = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_PASSPORT_GOOD,
-);
-/** "Not cropped" passport guideline illustration (blocked). */
-export const SiGuidelineDocumentPassportNotCropped = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_CROPPED,
-);
-/** "Not blurry" passport guideline illustration (blocked). */
-export const SiGuidelineDocumentPassportNotBlurry = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_BLURRY,
-);
-/** "Not reflective" passport guideline illustration (blocked). */
-export const SiGuidelineDocumentPassportNotReflective = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_REFLECTIVE,
-);
-
-// --- South Africa green book (portrait) ---
-/** "Good" green-book guideline illustration (allowed). */
-export const SiGuidelineDocumentGreenBookGood = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_GOOD,
-);
-/** "Not cropped" green-book guideline illustration (blocked). */
-export const SiGuidelineDocumentGreenBookNotCropped = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_CROPPED,
-);
-/** "Not blurry" green-book guideline illustration (blocked). */
-export const SiGuidelineDocumentGreenBookNotBlurry = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_BLURRY,
-);
-/** "Not reflective" green-book guideline illustration (blocked). */
-export const SiGuidelineDocumentGreenBookNotReflective = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_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

@@ -1,21 +0,0 @@
-/**
- * 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

@@ -1,48 +0,0 @@
-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
-   * (the capture screen overlay).
-   */
-  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

@@ -1,59 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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 + 2-pt stroke in the
- * primary 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.primary : "transparent",
-          borderWidth: !disabled && isSecondary ? 2 : 0,
-          opacity: disabled ? 1 : pressed ? 0.85 : 1,
-        },
-      ]}
-    >
-      <Text
-        // Shrink rather than truncate: a longer localized label must stay fully readable.
-        numberOfLines={2}
-        adjustsFontSizeToFit
-        minimumFontScale={0.75}
-        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: {
-    // `minHeight`, not `height`: the pill grows only for a label that has to wrap.
-    minHeight: 48,
-    paddingVertical: 8,
-    paddingHorizontal: 24,
-    alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "stretch",
-  },
-});