diff --git a/striker-ui/components/FormSummary.tsx b/striker-ui/components/FormSummary.tsx index c7c752ec..dfaf552d 100644 --- a/striker-ui/components/FormSummary.tsx +++ b/striker-ui/components/FormSummary.tsx @@ -1,9 +1,10 @@ import { + Box, List as MUIList, ListItem as MUIListItem, capitalize, } from '@mui/material'; -import { FC, ReactElement, createElement } from 'react'; +import { FC, ReactElement } from 'react'; import FlexBox from './FlexBox'; import { BodyText, MonoText, SensitiveText } from './Text'; @@ -15,13 +16,24 @@ const capEntryLabel: CapFormEntryLabel = (value) => { return capitalize(lcased); }; -const renderEntryValueWithPassword: RenderFormValueFunction = ({ - entry, - key, -}) => { - const textElement = /passw/i.test(key) ? SensitiveText : MonoText; +const renderEntryValueWithMono: RenderFormValueFunction = ({ entry }) => ( + {String(entry)} +); - return createElement(textElement, { monospaced: true }, String(entry)); +const renderEntryValueWithPassword: RenderFormValueFunction = (args) => { + const { entry, key } = args; + + return /passw/i.test(key) ? ( + + {String(entry)} + + ) : ( + renderEntryValueWithMono(args) + ); }; const buildEntryList = ({ @@ -109,7 +121,9 @@ const FormSummary = ({ renderEntry = ({ depth, entry, getLabel, key, nest, renderValue }) => ( {getLabel({ cap: capEntryLabel, depth, entry, key })} - {!nest && renderValue({ depth, entry, key })} + + {!nest && renderValue({ depth, entry, key })} + ), // Prop(s) that rely on other(s). @@ -120,11 +134,9 @@ const FormSummary = ({ return none; } - return hasPassword ? ( - renderEntryValueWithPassword(args) - ) : ( - {String(entry)} - ); + return hasPassword + ? renderEntryValueWithPassword(args) + : renderEntryValueWithMono(args); }, }: FormSummaryProps): ReturnType>> => buildEntryList({