From 0a3c48ed51a6c4d3a558c4f7f651c7aa4f537202 Mon Sep 17 00:00:00 2001
From: Lucas Chociay <lucas@basistheory.com>
Date: Thu, 30 Jun 2022 16:57:29 -0300
Subject: [PATCH] feat: add autoComplete option for elements (#207)

---
 src/elements/constants.ts     |  3 +++
 src/types/elements/options.ts |  9 ++++++++-
 src/types/elements/shared.ts  | 12 +++++++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/elements/constants.ts b/src/elements/constants.ts
index b6cc39ee..31e5d6a8 100644
--- a/src/elements/constants.ts
+++ b/src/elements/constants.ts
@@ -28,6 +28,8 @@ const CARD_BRANDS = [
 
 const CARD_ICON_POSITIONS = ['left', 'right', 'none'] as const;
 
+const AUTOCOMPLETE_VALUES = ['off', 'on'] as const;
+
 export {
   ELEMENTS_INIT_ERROR_MESSAGE,
   ELEMENTS_NOM_DOM_ERROR_MESSAGE,
@@ -35,4 +37,5 @@ export {
   ELEMENTS_SCRIPT_UNKNOWN_ERROR_MESSAGE,
   CARD_BRANDS,
   CARD_ICON_POSITIONS,
+  AUTOCOMPLETE_VALUES,
 };
diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts
index 8a9a30c6..b5d7d05c 100644
--- a/src/types/elements/options.ts
+++ b/src/types/elements/options.ts
@@ -1,3 +1,4 @@
+import { AutoCompleteValue } from './shared';
 import type { ElementStyle } from './styles';
 
 const ELEMENTS_TYPES = [
@@ -28,6 +29,7 @@ interface SanitizedElementOptions {
   ariaLabel?: string;
   iconPosition?: string;
   cardBrand?: string;
+  autoComplete?: string;
 }
 
 type ElementOptions = ElementInternalOptions & SanitizedElementOptions;
@@ -38,7 +40,12 @@ interface TransformOption {
   transform?: Transform;
 }
 
-type CustomizableElementOptions = Pick<ElementOptions, 'style' | 'disabled'>;
+interface AutoCompleteOption {
+  autoComplete?: AutoCompleteValue;
+}
+
+type CustomizableElementOptions = Pick<ElementOptions, 'style' | 'disabled'> &
+  AutoCompleteOption;
 
 type CreateCardElementOptions = CustomizableElementOptions;
 
diff --git a/src/types/elements/shared.ts b/src/types/elements/shared.ts
index 1870ecea..1a74540b 100644
--- a/src/types/elements/shared.ts
+++ b/src/types/elements/shared.ts
@@ -1,4 +1,8 @@
-import { CARD_BRANDS, CARD_ICON_POSITIONS } from '@/elements/constants';
+import {
+  AUTOCOMPLETE_VALUES,
+  CARD_BRANDS,
+  CARD_ICON_POSITIONS,
+} from '@/elements/constants';
 
 type FieldErrorType = 'incomplete' | 'invalid';
 
@@ -37,6 +41,11 @@ type Brand = typeof CARD_BRANDS[number];
  */
 type CardIconPosition = typeof CARD_ICON_POSITIONS[number];
 
+/**
+ * Values for the element input autocomplete attribute
+ */
+type AutoCompleteValue = typeof AUTOCOMPLETE_VALUES[number];
+
 export type {
   FieldErrorType,
   ConfigErrorType,
@@ -47,4 +56,5 @@ export type {
   PropertyError,
   Brand,
   CardIconPosition,
+  AutoCompleteValue,
 };