feat: enables copy icon customization (#237)

Basis-Theory · Jun 13, 2024 · 03f1725 · 03f1725
1 parent 87145c3
commit 03f1725
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@basis-theory/basis-theory-js": "^4.2.2"
+    "@basis-theory/basis-theory-js": "^4.6.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

diff --git a/src/elements/CardElement.tsx b/src/elements/CardElement.tsx
@@ -8,6 +8,7 @@ import {
   ElementStyle,
   CardElementValue,
   CreditCardType,
+  CopyIconStyles,
 } from '@basis-theory/basis-theory-js/types/elements';
 import type { BasisTheoryReact } from '../core';
 import { useElement } from './useElement';
@@ -17,6 +18,7 @@ interface CardElementProps {
   autoComplete?: 'on' | 'off';
   bt?: BasisTheoryReact;
   cardTypes?: CreditCardType[];
+  copyIconStyles?: CopyIconStyles;
   disabled?: boolean;
   enableCopy?: boolean;
   id: string;
@@ -39,6 +41,7 @@ const CardElementC: FC<
   autoComplete,
   bt,
   cardTypes,
+  copyIconStyles,
   disabled,
   elementRef,
   enableCopy,
@@ -63,6 +66,7 @@ const CardElementC: FC<
     {
       autoComplete,
       cardTypes,
+      copyIconStyles,
       disabled,
       enableCopy,
       inputMode,

diff --git a/src/elements/CardExpirationDateElement.tsx b/src/elements/CardExpirationDateElement.tsx
@@ -7,6 +7,7 @@ import type {
   CardExpirationDateElementEvents,
   CardExpirationDateValue,
   InputMode,
+  CopyIconStyles,
 } from '@basis-theory/basis-theory-js/types/elements';
 import type { BasisTheoryReact } from '../core';
 import { useElement } from './useElement';
@@ -16,6 +17,7 @@ interface CardExpirationDateElementProps {
   'aria-label'?: string;
   autoComplete?: 'on' | 'off';
   bt?: BasisTheoryReact;
+  copyIconStyles?: CopyIconStyles;
   disabled?: boolean;
   enableCopy?: boolean;
   id: string;
@@ -30,7 +32,7 @@ interface CardExpirationDateElementProps {
   style?: ElementStyle;
   validateOnChange?: boolean;
   value?: CardExpirationDateValue<'static'> | string;
-  valueRef?: MutableRefObject<ICardExpirationDateElement>;
+  valueRef?: MutableRefObject<ICardExpirationDateElement | null>;
 }
 
 const CardExpirationDateElementC: FC<
@@ -41,6 +43,7 @@ const CardExpirationDateElementC: FC<
   'aria-label': ariaLabel,
   autoComplete,
   bt,
+  copyIconStyles,
   disabled,
   elementRef,
   enableCopy,
@@ -69,6 +72,7 @@ const CardExpirationDateElementC: FC<
     {
       'aria-label': ariaLabel,
       autoComplete,
+      copyIconStyles,
       disabled,
       enableCopy,
       inputMode,

diff --git a/src/elements/CardNumberElement.tsx b/src/elements/CardNumberElement.tsx
@@ -8,6 +8,7 @@ import type {
   SanitizedElementOptions,
   InputMode,
   CreditCardType,
+  CopyIconStyles,
 } from '@basis-theory/basis-theory-js/types/elements';
 import type { BasisTheoryReact } from '../core';
 import { useElement } from './useElement';
@@ -18,6 +19,7 @@ interface CardNumberElementProps {
   autoComplete?: 'on' | 'off';
   bt?: BasisTheoryReact;
   cardTypes?: CreditCardType[];
+  copyIconStyles?: CopyIconStyles;
   disabled?: boolean;
   enableCopy?: boolean;
   iconPosition?: SanitizedElementOptions['iconPosition'];
@@ -44,6 +46,7 @@ const CardNumberElementC: FC<
   autoComplete,
   bt,
   cardTypes,
+  copyIconStyles,
   disabled,
   elementRef,
   enableCopy,
@@ -77,6 +80,7 @@ const CardNumberElementC: FC<
       'aria-label': ariaLabel,
       autoComplete,
       cardTypes,
+      copyIconStyles,
       disabled,
       enableCopy,
       iconPosition,

diff --git a/src/elements/CardVerificationCodeElement.tsx b/src/elements/CardVerificationCodeElement.tsx
@@ -7,6 +7,7 @@ import type {
   CardVerificationCodeElementEvents,
   Brand,
   InputMode,
+  CopyIconStyles,
 } from '@basis-theory/basis-theory-js/types/elements';
 import type { BasisTheoryReact } from '../core';
 import { useElement } from './useElement';
@@ -17,6 +18,7 @@ interface CardVerificationCodeElementProps {
   autoComplete?: 'on' | 'off';
   bt?: BasisTheoryReact;
   cardBrand?: Brand | string;
+  copyIconStyles?: CopyIconStyles;
   disabled?: boolean;
   enableCopy?: boolean;
   id: string;
@@ -46,6 +48,7 @@ const CardVerificationCodeElementC: FC<
   autoComplete,
   bt,
   cardBrand,
+  copyIconStyles,
   disabled,
   elementRef,
   enableCopy,
@@ -75,6 +78,7 @@ const CardVerificationCodeElementC: FC<
       'aria-label': ariaLabel,
       autoComplete,
       cardBrand,
+      copyIconStyles,
       disabled,
       enableCopy,
       inputMode,

diff --git a/test/elements/CardElement.test.tsx b/test/elements/CardElement.test.tsx
@@ -4,6 +4,7 @@ import type {
   CardElementValue,
   ElementStyle,
   InputMode,
+  CopyIconStyles,
 } from '@basis-theory/basis-theory-js/types/elements';
 import { render } from '@testing-library/react';
 import { Chance } from 'chance';
@@ -18,24 +19,25 @@ describe('CardElement', () => {
   const chance = new Chance();
   const refArray = [React.createRef<ICardElement>(), undefined];
 
-  let id: string;
-  let wrapperDiv: HTMLDivElement;
-  let style: ElementStyle;
-  let disabled: boolean;
   let autoComplete: 'on' | 'off';
-  let inputMode: `${InputMode}`;
-  let value: CardElementValue<'static'>;
-  let validateOnChange: boolean;
+  let copyIconStyles: CopyIconStyles;
+  let disabled: boolean;
+  let element: unknown;
   let enableCopy: boolean;
-  let readOnly: boolean;
-  let skipLuhnValidation: boolean;
-  let onReady: jest.Mock;
+  let id: string;
+  let inputMode: `${InputMode}`;
+  let onBlur: jest.Mock;
   let onChange: jest.Mock;
   let onFocus: jest.Mock;
-  let onBlur: jest.Mock;
   let onKeyDown: jest.Mock;
-  let element: unknown;
+  let onReady: jest.Mock;
+  let readOnly: boolean;
   let ref: any;
+  let skipLuhnValidation: boolean;
+  let style: ElementStyle;
+  let validateOnChange: boolean;
+  let value: CardElementValue<'static'>;
+  let wrapperDiv: HTMLDivElement;
 
   beforeEach(() => {
     id = 'my-card';
@@ -62,6 +64,11 @@ describe('CardElement', () => {
         numeric: true,
       }),
     };
+    copyIconStyles = {
+      size: '10',
+      color: 'blue',
+      successColor: 'red',
+    };
     validateOnChange = chance.bool();
     enableCopy = chance.bool();
     inputMode = 'numeric';
@@ -82,6 +89,7 @@ describe('CardElement', () => {
     const { container } = render(
       <CardElement
         autoComplete={autoComplete}
+        copyIconStyles={copyIconStyles}
         disabled={disabled}
         enableCopy={enableCopy}
         id={id}
@@ -110,6 +118,7 @@ describe('CardElement', () => {
         disabled,
         enableCopy,
         inputMode,
+        copyIconStyles,
         readOnly,
         skipLuhnValidation,
         style,

diff --git a/test/elements/CardExpirationDateElement.test.tsx b/test/elements/CardExpirationDateElement.test.tsx
@@ -4,6 +4,7 @@ import type {
   CardExpirationDateValue,
   ElementStyle,
   InputMode,
+  CopyIconStyles,
 } from '@basis-theory/basis-theory-js/types/elements';
 import { render } from '@testing-library/react';
 import { Chance } from 'chance';
@@ -20,25 +21,26 @@ describe('CardExpirationDateElement', () => {
 
   const valueRef = React.createRef<ICardExpirationDateElement>();
 
-  let id: string;
-  let wrapperDiv: HTMLDivElement;
-  let style: ElementStyle;
-  let disabled: boolean;
-  let readOnly: boolean;
-  let autoComplete: 'on' | 'off';
   let ariaLabel: string;
-  let placeholder: string;
-  let value: CardExpirationDateValue<'static'>;
-  let validateOnChange: boolean;
+  let autoComplete: 'on' | 'off';
+  let copyIconStyles: CopyIconStyles;
+  let disabled: boolean;
+  let element: unknown;
   let enableCopy: boolean;
+  let id: string;
   let inputMode: `${InputMode}`;
-  let onReady: jest.Mock;
+  let onBlur: jest.Mock;
   let onChange: jest.Mock;
   let onFocus: jest.Mock;
-  let onBlur: jest.Mock;
   let onKeyDown: jest.Mock;
-  let element: unknown;
+  let onReady: jest.Mock;
+  let placeholder: string;
+  let readOnly: boolean;
   let ref: any;
+  let style: ElementStyle;
+  let validateOnChange: boolean;
+  let value: CardExpirationDateValue<'static'>;
+  let wrapperDiv: HTMLDivElement;
 
   beforeEach(() => {
     id = 'my-card-expiration-date';
@@ -59,6 +61,11 @@ describe('CardExpirationDateElement', () => {
       }),
       year: new Date().getFullYear() + 1,
     };
+    copyIconStyles = {
+      size: '10',
+      color: 'blue',
+      successColor: 'red',
+    };
     validateOnChange = chance.bool();
     enableCopy = chance.bool();
     inputMode = 'numeric';
@@ -80,6 +87,7 @@ describe('CardExpirationDateElement', () => {
       <CardExpirationDateElement
         aria-label={ariaLabel}
         autoComplete={autoComplete}
+        copyIconStyles={copyIconStyles}
         disabled={disabled}
         enableCopy={enableCopy}
         id={id}
@@ -108,6 +116,7 @@ describe('CardExpirationDateElement', () => {
         targetId: id,
         style,
         disabled,
+        copyIconStyles,
         enableCopy,
         autoComplete,
         readOnly,

diff --git a/test/elements/CardNumberElement.test.tsx b/test/elements/CardNumberElement.test.tsx
@@ -4,6 +4,7 @@ import type {
   ElementStyle,
   CreateCardNumberElementOptions,
   InputMode,
+  CopyIconStyles,
 } from '@basis-theory/basis-theory-js/types/elements';
 import { render } from '@testing-library/react';
 import { Chance } from 'chance';
@@ -20,27 +21,28 @@ describe('CardNumberElement', () => {
 
   const valueRef = React.createRef<ICardNumberElement>();
 
-  let id: string;
-  let wrapperDiv: HTMLDivElement;
-  let style: ElementStyle;
-  let disabled: boolean;
-  let readOnly: boolean;
-  let autoComplete: 'on' | 'off';
   let ariaLabel: string;
-  let placeholder: string;
-  let iconPosition: CreateCardNumberElementOptions['iconPosition'];
-  let value: string;
-  let validateOnChange: boolean;
+  let autoComplete: 'on' | 'off';
+  let copyIconStyles: CopyIconStyles;
+  let disabled: boolean;
+  let element: unknown;
   let enableCopy: boolean;
-  let skipLuhnValidation: boolean;
+  let iconPosition: CreateCardNumberElementOptions['iconPosition'];
+  let id: string;
   let inputMode: `${InputMode}`;
-  let onReady: jest.Mock;
+  let onBlur: jest.Mock;
   let onChange: jest.Mock;
   let onFocus: jest.Mock;
-  let onBlur: jest.Mock;
   let onKeyDown: jest.Mock;
-  let element: unknown;
+  let onReady: jest.Mock;
+  let placeholder: string;
+  let readOnly: boolean;
   let ref: any;
+  let skipLuhnValidation: boolean;
+  let style: ElementStyle;
+  let validateOnChange: boolean;
+  let value: string;
+  let wrapperDiv: HTMLDivElement;
 
   beforeEach(() => {
     id = 'my-card-number';
@@ -49,6 +51,11 @@ describe('CardNumberElement', () => {
     style = {
       [chance.string()]: chance.string(),
     };
+    copyIconStyles = {
+      size: '10',
+      color: 'blue',
+      successColor: 'red',
+    };
     disabled = chance.bool();
     readOnly = chance.bool();
     autoComplete = chance.pickone(['on', 'off']);
@@ -78,6 +85,7 @@ describe('CardNumberElement', () => {
       <CardNumberElement
         aria-label={ariaLabel}
         autoComplete={autoComplete}
+        copyIconStyles={copyIconStyles}
         disabled={disabled}
         enableCopy={enableCopy}
         iconPosition={iconPosition}
@@ -108,6 +116,7 @@ describe('CardNumberElement', () => {
         'aria-label': ariaLabel,
         autoComplete,
         disabled,
+        copyIconStyles,
         enableCopy,
         iconPosition,
         inputMode,