Update naming

coinbase · Dec 18, 2024 · c143dcb · c143dcb
1 parent b14bc3c
commit c143dcb
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 29 deletions.
diff --git a/src/fund/components/FundCard.test.tsx b/src/fund/components/FundCard.test.tsx
@@ -171,7 +171,7 @@ describe('FundCard', () => {
       <div data-testid="amountInputTypeSwitchComponent" />
     );
     const CustomPaymentMethodSelectorDropdownComponent = () => (
-      <div data-testid="paymentMethodSelectorDropdownComponent" />
+      <div data-testid="paymentMethodDropdownComponent" />
     );
     const CustomSubmitButtonComponent = () => (
       <div data-testid="submitButtonComponent" />
@@ -181,7 +181,7 @@ describe('FundCard', () => {
       amountInputComponent: CustomAmountInputComponent,
       headerComponent: CustomHeaderComponent,
       amountInputTypeSwithComponent: CustomAmountInputTypeSwitchComponent,
-      paymentMethodSelectorDropdownComponent:
+      paymentMethodDropdownComponent:
         CustomPaymentMethodSelectorDropdownComponent,
       submitButtonComponent: CustomSubmitButtonComponent,
     });
@@ -192,7 +192,7 @@ describe('FundCard', () => {
       screen.getByTestId('amountInputTypeSwitchComponent'),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId('paymentMethodSelectorDropdownComponent'),
+      screen.getByTestId('paymentMethodDropdownComponent'),
     ).toBeInTheDocument();
     expect(screen.getByTestId('submitButtonComponent')).toBeInTheDocument();
   });

diff --git a/src/fund/components/FundCard.tsx b/src/fund/components/FundCard.tsx
@@ -8,7 +8,7 @@ import { FundButton } from './FundButton';
 import FundCardAmountInput from './FundCardAmountInput';
 import FundCardAmountInputTypeSwitch from './FundCardAmountInputTypeSwitch';
 import { FundCardHeader } from './FundCardHeader';
-import { FundCardPaymentMethodSelectorDropdown } from './FundCardPaymentMethodSelectorDropdown';
+import { FundCardPaymentMethodDropdown } from './FundCardPaymentMethodDropdown';
 import { FundCardProvider } from './FundCardProvider';
 import { useFundContext } from './FundCardProvider';
 
@@ -40,7 +40,7 @@ export function FundCard({
   amountInputComponent = FundCardAmountInput,
   headerComponent = FundCardHeader,
   amountInputTypeSwithComponent = FundCardAmountInputTypeSwitch,
-  paymentMethodSelectorDropdownComponent = FundCardPaymentMethodSelectorDropdown,
+  paymentMethodDropdownComponent = FundCardPaymentMethodDropdown,
   paymentMethods = defaultPaymentMethods,
   submitButtonComponent = FundButton,
 }: FundCardPropsReact) {
@@ -66,8 +66,8 @@ export function FundCard({
           amountInputComponent={amountInputComponent}
           headerComponent={headerComponent}
           amountInputTypeSwithComponent={amountInputTypeSwithComponent}
-          paymentMethodSelectorDropdownComponent={
-            paymentMethodSelectorDropdownComponent
+          paymentMethodDropdownComponent={
+            paymentMethodDropdownComponent
           }
           paymentMethods={paymentMethods}
           submitButtonComponent={submitButtonComponent}
@@ -84,11 +84,11 @@ export function FundCardContent({
   amountInputComponent: AmountInputComponent = FundCardAmountInput,
   headerComponent: HeaderComponent = FundCardHeader,
   amountInputTypeSwithComponent:
-    AmountInputTypeSwitch = FundCardAmountInputTypeSwitch,
-  paymentMethodSelectorDropdownComponent:
-    PaymentMethodSelectorDropdown = FundCardPaymentMethodSelectorDropdown,
+    AmountInputTypeSwitchComponent = FundCardAmountInputTypeSwitch,
+  paymentMethodDropdownComponent:
+    PaymentMethodSelectorDropdownComponent = FundCardPaymentMethodDropdown,
   paymentMethods = defaultPaymentMethods,
-  submitButtonComponent: SubmitButton = FundButton,
+  submitButtonComponent: SubmitButtonComponent = FundButton,
 }: FundCardPropsReact) {
   /**
    * Fetches and sets the exchange rate for the asset
@@ -129,7 +129,7 @@ export function FundCardContent({
         exchangeRate={exchangeRate}
       />
 
-      <AmountInputTypeSwitch
+      <AmountInputTypeSwitchComponent
         selectedInputType={selectedInputType}
         setSelectedInputType={setSelectedInputType}
         selectedAsset={selectedAsset}
@@ -139,9 +139,9 @@ export function FundCardContent({
         isLoading={exchangeRateLoading}
       />
 
-      <PaymentMethodSelectorDropdown paymentMethods={paymentMethods} />
+      <PaymentMethodSelectorDropdownComponent paymentMethods={paymentMethods} />
 
-      <SubmitButton
+      <SubmitButtonComponent
         disabled={!fundAmountFiat || !fundAmountCrypto}
         hideIcon={submitButtonState === 'default'}
         text={buttonText}

diff --git a/...ardPaymentMethodSelectorDropdown.test.tsx → ...ts/FundCardPaymentMethodDropdown.test.tsx b/...ardPaymentMethodSelectorDropdown.test.tsx → ...ts/FundCardPaymentMethodDropdown.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { act } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import type { PaymentMethodReact } from '../types';
-import { FundCardPaymentMethodSelectorDropdown } from './FundCardPaymentMethodSelectorDropdown';
+import { FundCardPaymentMethodDropdown } from './FundCardPaymentMethodDropdown';
 import { FundCardProvider } from './FundCardProvider';
 
 vi.mock('../../core-react/internal/hooks/useTheme', () => ({
@@ -28,11 +28,11 @@ const paymentMethods = [
 const renderComponent = () =>
   render(
     <FundCardProvider asset="BTC">
-      <FundCardPaymentMethodSelectorDropdown paymentMethods={paymentMethods} />
+      <FundCardPaymentMethodDropdown paymentMethods={paymentMethods} />
     </FundCardProvider>,
   );
 
-describe('FundCardPaymentMethodSelectorDropdown', () => {
+describe('FundCardPaymentMethodDropdown', () => {
   afterEach(() => {
     vi.clearAllMocks();
   });
@@ -53,21 +53,21 @@ describe('FundCardPaymentMethodSelectorDropdown', () => {
     );
     // Initially closed
     expect(
-      screen.queryByTestId('ockFundCardPaymentMethodSelectorDropdown'),
+      screen.queryByTestId('ockFundCardPaymentMethodDropdown'),
     ).not.toBeInTheDocument();
     // Click to open
     act(() => {
       toggleButton.click();
     });
     expect(
-      screen.getByTestId('ockFundCardPaymentMethodSelectorDropdown'),
+      screen.getByTestId('ockFundCardPaymentMethodDropdown'),
     ).toBeInTheDocument();
     // Click to close
     act(() => {
       toggleButton.click();
     });
     expect(
-      screen.queryByTestId('ockFundCardPaymentMethodSelectorDropdown'),
+      screen.queryByTestId('ockFundCardPaymentMethodDropdown'),
     ).not.toBeInTheDocument();
   });
 
@@ -85,7 +85,7 @@ describe('FundCardPaymentMethodSelectorDropdown', () => {
     });
     expect(screen.getByText('Apple Pay')).toBeInTheDocument();
     expect(
-      screen.queryByTestId('ockFundCardPaymentMethodSelectorDropdown'),
+      screen.queryByTestId('ockFundCardPaymentMethodDropdown'),
     ).not.toBeInTheDocument();
   });
 
@@ -101,7 +101,7 @@ describe('FundCardPaymentMethodSelectorDropdown', () => {
     });
 
     expect(
-      screen.getByTestId('ockFundCardPaymentMethodSelectorDropdown'),
+      screen.getByTestId('ockFundCardPaymentMethodDropdown'),
     ).toBeInTheDocument();
 
     // Click outside
@@ -110,7 +110,7 @@ describe('FundCardPaymentMethodSelectorDropdown', () => {
     });
     // Assert dropdown is closed
     expect(
-      screen.queryByTestId('ockFundCardPaymentMethodSelectorDropdown'),
+      screen.queryByTestId('ockFundCardPaymentMethodDropdown'),
     ).not.toBeInTheDocument();
   });
 });
diff --git a/...FundCardPaymentMethodSelectorDropdown.tsx → ...ponents/FundCardPaymentMethodDropdown.tsx b/...FundCardPaymentMethodSelectorDropdown.tsx → ...ponents/FundCardPaymentMethodDropdown.tsx
@@ -3,16 +3,16 @@ import { background, border, cn } from '../../styles/theme';
 
 import { useTheme } from '../../core-react/internal/hooks/useTheme';
 import type {
-  FundCardPaymentMethodSelectorDropdownPropsReact,
+  FundCardPaymentMethodDropdownPropsReact,
   PaymentMethodReact,
 } from '../types';
 import { FundCardPaymentMethodSelectRow } from './FundCardPaymentMethodSelectRow';
 import { FundCardPaymentMethodSelectorToggle } from './FundCardPaymentMethodSelectorToggle';
 import { useFundContext } from './FundCardProvider';
 
-export function FundCardPaymentMethodSelectorDropdown({
+export function FundCardPaymentMethodDropdown({
   paymentMethods,
-}: FundCardPaymentMethodSelectorDropdownPropsReact) {
+}: FundCardPaymentMethodDropdownPropsReact) {
   const componentTheme = useTheme();
   const [isOpen, setIsOpen] = useState(false);
 
@@ -70,7 +70,7 @@ export function FundCardPaymentMethodSelectorDropdown({
       {isOpen && (
         <div
           ref={dropdownRef}
-          data-testid="ockFundCardPaymentMethodSelectorDropdown"
+          data-testid="ockFundCardPaymentMethodDropdown"
           className={cn(
             componentTheme,
             border.radius,

diff --git a/src/fund/types.ts b/src/fund/types.ts
@@ -308,7 +308,7 @@ export type PaymentMethodReact = {
   icon: string;
 };
 
-export type FundCardPaymentMethodSelectorDropdownPropsReact = {
+export type FundCardPaymentMethodDropdownPropsReact = {
   paymentMethods: PaymentMethodReact[];
 };
 
@@ -338,7 +338,7 @@ export type FundCardPropsReact = {
   /**
    * Custom component for the payment method selector dropdown
    */
-  paymentMethodSelectorDropdownComponent?: React.ComponentType<FundCardPaymentMethodSelectorDropdownPropsReact>;
+  paymentMethodDropdownComponent?: React.ComponentType<FundCardPaymentMethodDropdownPropsReact>;
 
   /**
    * Custom component for the submit button