Add defaultTextFont prop to PortingEmbed (#9)

Removing "Satoshi-Regular" as the default font and adding a `defaultTextFont` prop to PortingEmbed so that a custom default font can be passed instead.
gigs · Apr 19, 2024 · 265626a · 265626a
1 parent 06f6c48
commit 265626a
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 4 deletions.
diff --git a/docs/porting-embed.md b/docs/porting-embed.md
@@ -327,6 +327,16 @@ renderPortingProtectionDisabledConfirmation={(onConfirm) => (
           )}
 />
 ```
+#### `defaultTextFont`
+
+The default font that the embed uses for all default components, i.e. all components that are not replaced by a corresponding render prop (for example all inputs will use the `defaultTextFont` if no `renderInput` component was passed to the embed).
+
+```jsx
+<PortingEmbed
+//...
+defaultTextFont='Custom-font'
+/>
+```
 
 #### Porting Embed props
 
@@ -347,6 +357,7 @@ renderPortingProtectionDisabledConfirmation={(onConfirm) => (
 | `renderAlertBanner`        | function               | ❌       | `(variant: 'error' | 'info', message: string) => React.ReactNode` |
 | `renderDate`        | function               | ❌       | `(name: string, onChange: (value: string) => void) => React.ReactNode` |
 | `renderPortingProtectionDisabledConfirmation`        | function               | ❌       | `(onConfirm: () => void) => React.ReactNode` |
+| `defaultTextFont`        | string               | ❌       | Custom font used in all default components. |
 
 #### Text
 

diff --git a/example/app/porting/index.tsx b/example/app/porting/index.tsx
@@ -121,6 +121,7 @@ export default function PortingEmbedScreen() {
           onCompleted={() => setCompleted(true)}
           onSupportRequested={() => setClickedCustomerSupport(true)}
           onPortingStep={(step) => setPortingStep(step)}
+          defaultTextFont="Satoshi-Regular"
           renderTitle={(step) =>
             step != null && (
               <Text style={[customStyles.title]}>{titles[step]}</Text>

diff --git a/src/PortingEmbed/CustomOptionsProvider.tsx b/src/PortingEmbed/CustomOptionsProvider.tsx
@@ -29,6 +29,7 @@ type EmbedOptions = {
   renderPortingProtectionDisabledConfirmation?: (
     onConfirm: () => void
   ) => React.ReactNode
+  defaultTextFont?: string
 }
 
 export const CustomOptionsContext = createContext<EmbedOptions | null>(null)
@@ -46,6 +47,7 @@ export function CustomOptionsProvider({
   renderAlertBanner,
   renderDate,
   renderPortingProtectionDisabledConfirmation,
+  defaultTextFont,
   children,
 }: Props) {
   return (
@@ -59,6 +61,7 @@ export function CustomOptionsProvider({
         renderAlertBanner,
         renderDate,
         renderPortingProtectionDisabledConfirmation,
+        defaultTextFont,
       }}
     >
       {children}

diff --git a/src/PortingEmbed/PortingEmbed.tsx b/src/PortingEmbed/PortingEmbed.tsx
@@ -41,6 +41,7 @@ type Props = {
   renderPortingProtectionDisabledConfirmation?: (
     onConfirm: () => void
   ) => React.ReactNode
+  defaultTextFont?: string
 }
 
 export function PortingEmbed({
@@ -60,6 +61,7 @@ export function PortingEmbed({
   renderAlertBanner,
   renderDate,
   renderPortingProtectionDisabledConfirmation,
+  defaultTextFont,
 }: Props) {
   return (
     <ConnectSessionProvider
@@ -80,6 +82,7 @@ export function PortingEmbed({
         renderPortingProtectionDisabledConfirmation={
           renderPortingProtectionDisabledConfirmation
         }
+        defaultTextFont={defaultTextFont}
       >
         <PortingFormContainer
           onLoaded={onLoaded}

diff --git a/src/PortingEmbed/__tests__/AccountHolderForm.test.tsx b/src/PortingEmbed/__tests__/AccountHolderForm.test.tsx
@@ -335,4 +335,25 @@ describe('AccountHolderForm', () => {
       color: 'red',
     })
   })
+
+  it('uses the default font if present', async () => {
+    render(
+      <CustomOptionsContext.Provider
+        value={{
+          defaultTextFont: 'Custom-font',
+        }}
+      >
+        <AccountHolderForm
+          onSubmit={onSaveMock}
+          porting={{ ...porting, firstName: null, lastName: null }}
+        />
+      </CustomOptionsContext.Provider>
+    )
+
+    const button = screen.getByText('Save')
+
+    expect(button).toHaveStyle({
+      fontFamily: 'Custom-font',
+    })
+  })
 })
diff --git a/src/PortingEmbed/__tests__/AddressForm.test.tsx b/src/PortingEmbed/__tests__/AddressForm.test.tsx
@@ -295,4 +295,25 @@ describe('AddressForm', () => {
       color: 'red',
     })
   })
+  it('uses the default font if present', async () => {
+    render(
+      <CustomOptionsContext.Provider
+        value={{
+          defaultTextFont: 'Custom-font',
+        }}
+      >
+        <AddressForm
+          onSubmit={onSaveMock}
+          porting={{ ...porting, address: null }}
+          error="Something went very wrong."
+        />
+      </CustomOptionsContext.Provider>
+    )
+
+    const button = screen.getByText('Save')
+
+    expect(button).toHaveStyle({
+      fontFamily: 'Custom-font',
+    })
+  })
 })
diff --git a/src/PortingEmbed/__tests__/CarrierDetailsForm.test.tsx b/src/PortingEmbed/__tests__/CarrierDetailsForm.test.tsx
@@ -227,4 +227,25 @@ describe('CarrierInfoForm', () => {
       color: 'red',
     })
   })
+  it('uses the default font if present', async () => {
+    render(
+      <CustomOptionsContext.Provider
+        value={{
+          defaultTextFont: 'Custom-font',
+        }}
+      >
+        <CarrierInfoForm
+          onSubmit={onSaveMock}
+          porting={{ ...porting, accountNumber: null, accountPinExists: false }}
+          error="Something went very wrong."
+        />
+      </CustomOptionsContext.Provider>
+    )
+
+    const button = screen.getByText('Save')
+
+    expect(button).toHaveStyle({
+      fontFamily: 'Custom-font',
+    })
+  })
 })
diff --git a/src/PortingEmbed/__tests__/DonorApprovalForm.test.tsx b/src/PortingEmbed/__tests__/DonorApprovalForm.test.tsx
@@ -151,4 +151,24 @@ describe('DonorApprovalForm', () => {
       donorProviderApproval: true,
     })
   })
+  it('uses the default font if present', async () => {
+    render(
+      <CustomOptionsContext.Provider
+        value={{
+          defaultTextFont: 'Custom-font',
+        }}
+      >
+        <DonorApprovalForm
+          onSubmit={onSaveMock}
+          porting={{ ...porting, address: null }}
+        />
+      </CustomOptionsContext.Provider>
+    )
+
+    const button = screen.getByText('Save')
+
+    expect(button).toHaveStyle({
+      fontFamily: 'Custom-font',
+    })
+  })
 })
diff --git a/src/components/EmbedText.tsx b/src/components/EmbedText.tsx
@@ -1,13 +1,23 @@
 import { Text, TextProps } from 'react-native'
 
+import { useOptionsContext } from '../PortingEmbed/CustomOptionsProvider'
+
 type Props = {
   children: React.ReactNode
 } & TextProps
 
 export const EmbedText = (props: Props) => {
   const { style, children } = props
+  const options = useOptionsContext()
 
   return (
-    <Text style={[style, { fontFamily: 'Satoshi-Regular' }]}>{children}</Text>
+    <Text
+      style={[
+        style,
+        options?.defaultTextFont ? { fontFamily: options.defaultTextFont } : {},
+      ]}
+    >
+      {children}
+    </Text>
   )
 }
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -8,6 +8,7 @@ import {
   TextInputProps,
 } from 'react-native'
 
+import { useOptionsContext } from '../PortingEmbed/CustomOptionsProvider'
 import { EmbedText } from './EmbedText'
 
 type Props = {
@@ -18,6 +19,7 @@ type Props = {
 export function Input({ error, placeholder, ...rest }: Props) {
   const [inputText, setInputText] = useState('')
   const animatedValue = useRef(new Animated.Value(0))
+  const options = useOptionsContext()
 
   const returnAnimatedLabelStyles = {
     transform: [
@@ -65,7 +67,6 @@ export function Input({ error, placeholder, ...rest }: Props) {
       borderRadius: 8,
       fontWeight: '500',
       borderWidth: 0,
-      fontFamily: 'Satoshi-Regular',
     },
   })
 
@@ -81,8 +82,10 @@ export function Input({ error, placeholder, ...rest }: Props) {
             pointerEvents: 'none',
             color: '#6b7280',
             height: 20,
-            fontFamily: 'Satoshi-Regular',
           },
+          options?.defaultTextFont
+            ? { fontFamily: options.defaultTextFont }
+            : {},
         ]}
       >
         {placeholder}
@@ -91,7 +94,12 @@ export function Input({ error, placeholder, ...rest }: Props) {
         onChange={(e: NativeSyntheticEvent<TextInputChangeEventData>): void =>
           setInputText(e.nativeEvent.text)
         }
-        style={styles.textStyle}
+        style={[
+          styles.textStyle,
+          options?.defaultTextFont
+            ? { fontFamily: options.defaultTextFont }
+            : {},
+        ]}
         placeholderTextColor={error ? '#e11d48' : '#6b7280'}
         {...rest}
       />