chore: [IOPID-1995] Add logic to use ComposedBodyFromArray into IOScr…

…ollViewWithLargeHeader (#5900) ## Short description This edit has been made in order to use the logic of `ComposedBodyFromArray` to customize the `description` style into `IOScrollViewWithLargeHeader` component. In this PR you can find too the application example. ## Example: <img width="350" alt="img" src="https://github.com/pagopa/io-app/assets/83651704/6c0b09f3-423b-4e91-9c9f-aacc5d618498"> --------- Co-authored-by: Fabio Bombardi <[email protected]>
pagopa · Jun 28, 2024 · f8422d9 · f8422d9
1 parent d4b1cb7
commit f8422d9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/ts/components/ui/IOScrollViewWithLargeHeader.tsx b/ts/components/ui/IOScrollViewWithLargeHeader.tsx
@@ -16,6 +16,10 @@ import {
 } from "../../hooks/useHeaderProps";
 import { SupportRequestParams } from "../../hooks/useStartSupportRequest";
 import I18n from "../../i18n";
+import {
+  BodyProps,
+  ComposedBodyFromArray
+} from "../core/typography/ComposedBodyFromArray";
 import { IOScrollView } from "./IOScrollView";
 
 export type LargeHeaderTitleProps = {
@@ -28,7 +32,7 @@ type Props = {
   children: React.ReactNode;
   actions?: ComponentProps<typeof IOScrollView>["actions"];
   title: LargeHeaderTitleProps;
-  description?: string;
+  description?: string | Array<BodyProps>;
   goBack?: BackProps["goBack"];
   headerActionsProp?: HeaderActionProps;
   canGoback?: boolean;
@@ -111,10 +115,13 @@ export const IOScrollViewWithLargeHeader = forwardRef<View, Props>(
         {description && (
           <ContentWrapper>
             <VSpacer size={4} />
-            <Body color="grey-700">{description}</Body>
+            {typeof description === "string" ? (
+              <Body color="grey-700">{description}</Body>
+            ) : (
+              <ComposedBodyFromArray body={description} textAlign="left" />
+            )}
           </ContentWrapper>
         )}
-
         <VSpacer size={16} />
 
         {children}

diff --git a/ts/screens/profile/EmailForwardingScreen.tsx b/ts/screens/profile/EmailForwardingScreen.tsx
@@ -13,10 +13,7 @@ import {
 import _ from "lodash";
 import { IOScrollViewWithLargeHeader } from "../../components/ui/IOScrollViewWithLargeHeader";
 import I18n from "../../i18n";
-import {
-  BodyProps,
-  ComposedBodyFromArray
-} from "../../components/core/typography/ComposedBodyFromArray";
+import { BodyProps } from "../../components/core/typography/ComposedBodyFromArray";
 import { useIODispatch, useIOSelector } from "../../store/hooks";
 import {
   ProfileState,
@@ -158,11 +155,7 @@ const EmailForwardingScreen = () => {
   return (
     <IOScrollViewWithLargeHeader
       title={{ label: I18n.t("send_email_messages.title") }}
-      description={
-        (
-          <ComposedBodyFromArray body={bodyPropsArray} textAlign="left" />
-        ) as unknown as string
-      }
+      description={bodyPropsArray}
       headerActionsProp={{ showHelp: true }}
       contextualHelpMarkdown={contextualHelpMarkdown}
       canGoback={true}