fix(props): of some components to consume ReactNode (#631)

Author: karelhala

packages/module/src/ErrorBoundary/ErrorBoundary.tsx

@@ -14,11 +14,11 @@ const useStyles = createUseStyles({
 
 export interface ErrorBoundaryProps {
   /** The title text to display on the error page */
-  headerTitle?: string;
+  headerTitle?: React.ReactNode;
   /** Indicates if the error is silent */
   silent?: boolean;
   /** The title text to display with the error */
-  errorTitle?: string;
+  errorTitle?: React.ReactNode;
   /** The description text to display with the error */
   errorDescription?: React.ReactNode;
   /** The default description text to display with the error if no errorDescription is provided */
@@ -130,4 +130,4 @@ class ErrorBoundaryContent extends React.Component<ErrorPageProps, ErrorBoundary
   }
 };
 
-export default ErrorBoundary;
+export default ErrorBoundary;

packages/module/src/ErrorState/ErrorState.tsx

@@ -21,7 +21,7 @@ const useStyles = createUseStyles({
 /** extends EmptyStateProps */
 export interface ErrorStateProps extends Omit<EmptyStateProps, 'children' | 'titleText' | 'status'> {
   /** Title of the error. */
-  titleText?: string;
+  titleText?: React.ReactNode;
   /** A description of the error, if no body text is provided then it will be set to the defaultBodyText. */
   bodyText?: React.ReactNode;
   /** A default description of the error used if no errorDescription is provided. */

packages/module/src/LogSnippet/LogSnippet.tsx

@@ -4,7 +4,7 @@ import { Alert, AlertVariant, CodeBlock, CodeBlockCode, Flex, FlexItem, FlexProp
 /** extends FlexProps */
 export interface LogSnippetProps extends FlexProps {
   /** Log snippet or code to be displayed */
-  logSnippet?: string;
+  logSnippet?: React.ReactNode;
   /** Message to appear above the log snippet */
   message: string | React.ReactNode;
   /** Log snippet alert variant */
@@ -26,4 +26,4 @@ export const LogSnippet: React.FunctionComponent<LogSnippetProps> = ({ logSnippe
   </Flex>
 );
 
-export default LogSnippet;
+export default LogSnippet;

packages/module/src/Maintenance/Maintenance.tsx

@@ -5,21 +5,21 @@ import { HourglassHalfIcon } from '@patternfly/react-icons';
 /** extends EmptyStateProps */
 export interface MaintenanceProps extends Omit<EmptyStateProps, 'children' | 'title'> {
     /** The title for the maintenance message */
-    titleText?: string;
+    titleText?: React.ReactNode;
     /** Custom body text */
     bodyText?: React.ReactNode;
     /** A default bodyText used if no bodyText is provided */
     defaultBodyText?: React.ReactNode;
     /** Start time in a specific time zone */
-    startTime?: string;
+    startTime?: React.ReactNode;
     /** End time in a specific time zone */
-    endTime?: string;
+    endTime?: React.ReactNode;
     /** Time zone specification */
-    timeZone?: string;
+    timeZone?: React.ReactNode;
     /** Information link */
     redirectLinkUrl?: string;
     /** Information link title */
-    redirectLinkText?: string;
+    redirectLinkText?: React.ReactNode;
     /** Custom footer content */
     customFooter?: React.ReactNode;
     /** Custom OUIA ID */

packages/module/src/MissingPage/MissingPage.tsx

@@ -9,9 +9,9 @@ export interface MissingPageProps extends Omit<EmptyStateProps, 'children' | 'ti
   /** The text label for the link that points back to the home page */
   toHomePageText?: React.ReactNode;
   /** The title for the invalid object message */
-  titleText?: string;
+  titleText?: React.ReactNode;
   /** The body text for the invalid object message */
-  bodyText?: string;
+  bodyText?: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string | number;
 }
@@ -35,4 +35,4 @@ export const MissingPage: React.FunctionComponent<MissingPageProps> = ({
   </EmptyState>
 );
 
-export default MissingPage;
+export default MissingPage;

packages/module/src/MultiContentCard/MultiContentCard.tsx

@@ -32,7 +32,7 @@ export interface MultiContentCardProps extends Omit<CardProps, 'children' | 'tit
   /** Actions to be displayed in the expandable section */
   actions?: React.ReactElement;
   /** Toggle text for the expandable section */
-  toggleText?: string;
+  toggleText?: React.ReactNode;
   /** Toggle content for the expandable section */
   toggleContent?: React.ReactElement;
   /** When set to true, all content cards will be separated with dividers */

packages/module/src/PageHeader/PageHeader.tsx

@@ -24,9 +24,9 @@ export interface PageHeaderLinkProps extends ButtonProps {
 
 export interface PageHeaderProps extends React.PropsWithChildren {
   /** Title for page header */
-  title: string;
+  title: React.ReactNode;
   /** Subtitle for page header */
-  subtitle: string;
+  subtitle: React.ReactNode;
   /** Optional link below subtitle */
   linkProps?: PageHeaderLinkProps;
   /** Optional icon for page header (appears to the left of the page header's title with a divider) */

packages/module/src/ServiceCard/ServiceCard.tsx

@@ -10,13 +10,13 @@ export interface ServiceCardProps extends CardProps {
   /** Service card title */
   title: string;
   /** Service card subtitle */
-  subtitle?: string;
+  subtitle?: React.ReactNode;
   /** Service card description */
-  description: string;
+  description: React.ReactNode;
   /** Service card icon */
   icon: React.ReactNode;
   /** Optional Service card helper text*/
-  helperText?: string;
+  helperText?: React.ReactNode;
   /** Optional footer */
   footer?: React.ReactElement | null;
   /** Optional custom OUIA ID */
@@ -82,4 +82,4 @@ const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
   )
 }
 
-export default ServiceCard;
+export default ServiceCard;

packages/module/src/Severity/Severity.tsx

@@ -41,7 +41,7 @@ export interface SeverityProps extends React.DetailedHTMLProps<React.HTMLAttribu
   /** Determines a variant of displayed severity */
   severity: SeverityType;
   /** Label displayed next to the severity */
-  label: string;
+  label: React.ReactNode;
   /** Option to hide the label */
   labelHidden?: boolean;
   /** Custom className */

packages/module/src/Status/Status.tsx

@@ -24,7 +24,7 @@ export interface StatusProps extends React.PropsWithChildren {
   /** Status label text */
   label?: string;
   /** Description to be displayed under the label */
-  description?: string;
+  description?: React.ReactNode;
   /** If true, only displays icon */
   iconOnly?: boolean;
   /** Variant of the status component to be displayed */