When I added a required prop called type to the LabelValue component, I expected things to break because there were lots of LabelValue components being used and none of them had the type prop. However, nothing broke which leads me to believe that we are not leveraging TypeScript for all it's worth. Here's what I did:

1. Add the required type prop to LabelValue and LabelValueWrapper.
2. Expect to see a TS error with the existing LabelValue components that are in the MDX files because they don't pass in the type prop yet.
3. Look in the debugger and find that even though type should be forced to be a 'string' | 'number' etc (see line 17), it is undefined in line 43.
4. All of this renders without any TS errors in the terminal or browser console.

When I replaced the <DateStr/> instances with <LabelValue type="date"/> the formatting in the report became inconsistent:

BEFORE:

AFTER:

REVERTED:

@sudhacheran let me know if you would like me to revert these changes or do something different.

When I replaced the <DateStr/> instances with <LabelValue type="date"/> the formatting in the report became inconsistent:

BEFORE:

AFTER:

@sudhacheran let me know if you would like me to revert these changes or do something different.

@lindsayJohnstonPnnl this needs to be as before to align with other fields.

When I replaced the <DateStr/> instances with <LabelValue type="date"/> the formatting in the report became inconsistent:
BEFORE:
AFTER:
@sudhacheran let me know if you would like me to revert these changes or do something different.

@lindsayJohnstonPnnl this needs to be as before to align with other fields.

@sudhacheran you asked me to replace <DateStr/> with <LabelValue/> but the bold formatting is opposite in the two components. Do you want me to add some sort of prop to <LabelValue/> that formats it for this special instance in a report? Or I could revert the <DateStr/> replacements. If you have a different idea, let me know.

@lindsayJohnstonPnnl The main intent of this component is to replace the conditional formatting statements within the report with this new component. We do not want to change the style of the existing fields. We could keep <DateStr/> for the Install Date, as it aligns with the existing style. Additionally, we could use <LabelValue/> for other fields displayed within the report to replace conditional statements or formatting, such as:

<p><strong>Cooling appliance exists: </strong>{props.data?.no_cooling_appliance?.length === 0 ? "Yes" : "No"}</p>

<p><strong>Duct CFM25 per 100 per ft<sup>2</sup> = </strong>{ props.data.cfm25_calculator?.cfm25 && props.data.cfm25_calculator?.conditioned_floor_area ? ((props.data.cfm25_calculator.cfm25 / props.data.cfm25_calculator.conditioned_floor_area) * 100).toFixed(2) : null } </p>