From e810834fbbc6f991724d2d687faa366bc474abf0 Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Thu, 30 Jun 2022 15:07:54 -0300 Subject: [PATCH 1/5] feat: add autocomplete option for elements --- src/elements/constants.ts | 3 +++ src/types/elements/options.ts | 9 +++++---- src/types/elements/shared.ts | 12 +++++++++++- 3 files changed, 19 insertions(+), 5 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..c9de7fd4 100644 --- a/src/types/elements/options.ts +++ b/src/types/elements/options.ts @@ -28,6 +28,7 @@ interface SanitizedElementOptions { ariaLabel?: string; iconPosition?: string; cardBrand?: string; + autoComplete?: string; } type ElementOptions = ElementInternalOptions & SanitizedElementOptions; @@ -45,7 +46,7 @@ type CreateCardElementOptions = CustomizableElementOptions; type UpdateCardElementOptions = CreateCardElementOptions; type CreateTextElementOptions = CustomizableElementOptions & - Pick & + Pick & TransformOption & Required> & { 'aria-label'?: string; @@ -57,7 +58,7 @@ type UpdateTextElementOptions = Omit< >; type CreateCardNumberElementOptions = CustomizableElementOptions & - Pick & + Pick & Required> & { 'aria-label'?: string; }; @@ -68,7 +69,7 @@ type UpdateCardNumberElementOptions = Omit< >; type CreateCardExpirationDateElementOptions = CustomizableElementOptions & - Pick & + Pick & Required> & { 'aria-label'?: string; }; @@ -79,7 +80,7 @@ type UpdateCardExpirationDateElementOptions = Omit< >; type CreateCardVerificationCodeElementOptions = CustomizableElementOptions & - Pick & + Pick & Required> & { 'aria-label'?: string; }; 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, }; From b22e06f91a113e1dfe2d3c2b27c7ee13506c1924 Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Thu, 30 Jun 2022 16:35:23 -0300 Subject: [PATCH 2/5] fix: add autocomplete option for cardElement --- src/types/elements/options.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts index c9de7fd4..da89b722 100644 --- a/src/types/elements/options.ts +++ b/src/types/elements/options.ts @@ -39,7 +39,10 @@ interface TransformOption { transform?: Transform; } -type CustomizableElementOptions = Pick; +type CustomizableElementOptions = Pick< + ElementOptions, + 'style' | 'disabled' | 'autoComplete' +>; type CreateCardElementOptions = CustomizableElementOptions; From f6aeb1bbd6ec4a400aa210dd1d96fc3de77840c4 Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Thu, 30 Jun 2022 16:43:26 -0300 Subject: [PATCH 3/5] fix: fix autoComplete option type --- src/types/elements/options.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts index da89b722..b6e835b0 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 = [ @@ -39,10 +40,12 @@ interface TransformOption { transform?: Transform; } -type CustomizableElementOptions = Pick< - ElementOptions, - 'style' | 'disabled' | 'autoComplete' ->; +interface AutoCompleteOption { + autoComplete?: AutoCompleteValue; +} + +type CustomizableElementOptions = Pick & + AutoCompleteOption; type CreateCardElementOptions = CustomizableElementOptions; From 83f5a145b3a73eeda43b3d19a0fec11a22e8ebf7 Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Thu, 30 Jun 2022 16:46:20 -0300 Subject: [PATCH 4/5] fix: remove duplicate autocomplete options --- src/types/elements/options.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts index b6e835b0..543f331d 100644 --- a/src/types/elements/options.ts +++ b/src/types/elements/options.ts @@ -64,7 +64,7 @@ type UpdateTextElementOptions = Omit< >; type CreateCardNumberElementOptions = CustomizableElementOptions & - Pick & + Pick & Required> & { 'aria-label'?: string; }; @@ -75,7 +75,7 @@ type UpdateCardNumberElementOptions = Omit< >; type CreateCardExpirationDateElementOptions = CustomizableElementOptions & - Pick & + Pick & Required> & { 'aria-label'?: string; }; @@ -86,7 +86,7 @@ type UpdateCardExpirationDateElementOptions = Omit< >; type CreateCardVerificationCodeElementOptions = CustomizableElementOptions & - Pick & + Pick & Required> & { 'aria-label'?: string; }; From b765622afb57aa408b9c13cd2dc83c46c54bfc18 Mon Sep 17 00:00:00 2001 From: Lucas Chociay Date: Thu, 30 Jun 2022 16:47:48 -0300 Subject: [PATCH 5/5] fix: remove duplicate autocomplete option --- src/types/elements/options.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/elements/options.ts b/src/types/elements/options.ts index 543f331d..b5d7d05c 100644 --- a/src/types/elements/options.ts +++ b/src/types/elements/options.ts @@ -52,7 +52,7 @@ type CreateCardElementOptions = CustomizableElementOptions; type UpdateCardElementOptions = CreateCardElementOptions; type CreateTextElementOptions = CustomizableElementOptions & - Pick & + Pick & TransformOption & Required> & { 'aria-label'?: string;