diff --git a/docs/porting-embed.md b/docs/porting-embed.md index 858e2cc..e71fb59 100644 --- 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 + +``` #### 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 index 6e21549..a48ae98 100644 --- 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 && ( {titles[step]} diff --git a/src/PortingEmbed/CustomOptionsProvider.tsx b/src/PortingEmbed/CustomOptionsProvider.tsx index 6234385..b7b9489 100644 --- 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(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 index 996ab8d..9f7cab0 100644 --- 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 ( { color: 'red', }) }) + + it('uses the default font if present', async () => { + render( + + + + ) + + 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 index c0b63c7..874643e 100644 --- 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( + + + + ) + + 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 index 97287ab..6e9731a 100644 --- 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( + + + + ) + + 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 index 5c051be..c7cc247 100644 --- 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( + + + + ) + + const button = screen.getByText('Save') + + expect(button).toHaveStyle({ + fontFamily: 'Custom-font', + }) + }) }) diff --git a/src/components/EmbedText.tsx b/src/components/EmbedText.tsx index 92ccdf9..113e1f2 100644 --- 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 ( - {children} + + {children} + ) } diff --git a/src/components/Input.tsx b/src/components/Input.tsx index ea0f684..80dd309 100644 --- 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): void => setInputText(e.nativeEvent.text) } - style={styles.textStyle} + style={[ + styles.textStyle, + options?.defaultTextFont + ? { fontFamily: options.defaultTextFont } + : {}, + ]} placeholderTextColor={error ? '#e11d48' : '#6b7280'} {...rest} />