fix linting and add headingLevel overrides to relevant components

Author: nicolethoen

packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExtraProps.tsx

@@ -3,12 +3,12 @@ import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorSta
 import { PathMissingIcon } from '@patternfly/react-icons/dist/dynamic/icons/path-missing-icon';
 
 export const BasicExample: React.FunctionComponent = () => (
-    <ErrorState 
-        titleText='Sample error title' 
-        bodyText='Sample error description' 
-        headingLevel='h2'
-        icon={PathMissingIcon}
-        status="none"
-        customFooter="Any other details in a custom footer."
-    />
+  <ErrorState 
+    titleText='Sample error title' 
+    bodyText='Sample error description' 
+    headingLevel='h2'
+    icon={PathMissingIcon}
+    status="none"
+    customFooter="Any other details in a custom footer."
+  />
 );

packages/module/src/ErrorBoundary/ErrorBoundary.tsx

@@ -29,6 +29,10 @@ export interface ErrorBoundaryProps {
   children?: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string | number;
+  /** The heading level to use on the header title, default is h1 */
+  headerTitleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** The heading level to use on the error title, default is h2 */
+  errorTitleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export interface ErrorBoundaryState {
@@ -45,9 +49,20 @@ interface ErrorPageProps extends ErrorBoundaryProps {
   classes: Record<string | number | symbol, string>;
 }
 
-export const ErrorBoundary: React.FunctionComponent<ErrorBoundaryProps> = (props: ErrorBoundaryProps) => {
+export const ErrorBoundary: React.FunctionComponent<ErrorBoundaryProps> = ({
+  headerTitleHeadingLevel = "h1",
+  errorTitleHeadingLevel = "h2",
+  ...props
+}: ErrorBoundaryProps) => {
   const classes = useStyles();
-  return <ErrorBoundaryContent classes={classes} {...props} />
+  return (
+    <ErrorBoundaryContent 
+      classes={classes} 
+      headerTitleHeadingLevel={headerTitleHeadingLevel} 
+      errorTitleHeadingLevel={errorTitleHeadingLevel}
+      {...props} 
+    />
+  );
 }
 
 // As of time of writing, React only supports error boundaries in class components
@@ -82,7 +97,7 @@ class ErrorBoundaryContent extends React.Component<ErrorPageProps, ErrorBoundary
   }
 
   render() {
-    const { ouiaId = 'ErrorBoundary', ...props } = this.props;
+    const { ouiaId = 'ErrorBoundary', errorTitleHeadingLevel, headerTitleHeadingLevel, ...props } = this.props;
 
     if (this.state.hasError) {
       if (this.props.silent) {
@@ -91,9 +106,10 @@ class ErrorBoundaryContent extends React.Component<ErrorPageProps, ErrorBoundary
 
       return (
         <div data-ouia-component-id={ouiaId}>
-          {props?.headerTitle && <Title headingLevel="h1" size="2xl" ouiaId={`${ouiaId}-title`}>{props.headerTitle}</Title>}
+          {props?.headerTitle && <Title headingLevel={headerTitleHeadingLevel || 'h1'} size="2xl" ouiaId={`${ouiaId}-title`}>{props.headerTitle}</Title>}
           <ErrorState
             titleText={props.errorTitle}
+            headingLevel={errorTitleHeadingLevel}
             bodyText={
               <>
                 <span>{props.errorDescription}</span>

packages/module/src/ErrorState/ErrorState.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import ErrorState from './ErrorState';
-import { getByRole, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Button } from '@patternfly/react-core';
 
 describe('ErrorState component', () => {

packages/module/src/ErrorState/ErrorState.tsx

@@ -49,7 +49,7 @@ const ErrorState: React.FunctionComponent<ErrorStateProps> = ({
   return (
     <EmptyState 
       headingLevel={headingLevel} 
-      {...(status !== 'none' && {status: status} )}
+      {...(status !== 'none' && { status } )}
       variant={variant} 
       titleText={titleText} 
       data-ouia-component-id={ouiaId} 

packages/module/src/Maintenance/Maintenance.tsx

@@ -36,6 +36,7 @@ const Maintenance: React.FunctionComponent<MaintenanceProps> = ({
   redirectLinkText = 'status.redhat.com.',
   customFooter = 'For more information please visit',
   ouiaId = 'Maintenance',
+  headingLevel = 'h5',
   ...props 
 }: MaintenanceProps) => {
   let formattedBodyText = bodyText;
@@ -44,7 +45,7 @@ const Maintenance: React.FunctionComponent<MaintenanceProps> = ({
   }
 
   return (
-    <EmptyState headingLevel="h5" status={EmptyStateStatus.danger} icon={HourglassHalfIcon}  titleText={titleText} variant={EmptyStateVariant.lg} data-ouia-component-id={ouiaId} {...props}>
+    <EmptyState headingLevel={headingLevel} status={EmptyStateStatus.danger} icon={HourglassHalfIcon}  titleText={titleText} variant={EmptyStateVariant.lg} data-ouia-component-id={ouiaId} {...props}>
       <EmptyStateBody data-ouia-component-id={`${ouiaId}-body`}>
         {bodyText ? formattedBodyText : defaultBodyText}
       </EmptyStateBody>

packages/module/src/MissingPage/MissingPage.tsx

@@ -22,9 +22,10 @@ export const MissingPage: React.FunctionComponent<MissingPageProps> = ({
   titleText = 'We lost that page',
   bodyText = "Let's find you a new one. Try a new search or return home.",
   ouiaId = "MissingPage",
+  headingLevel = 'h1',
   ...props
 }: MissingPageProps) => (
-  <EmptyState headingLevel='h1' icon={NotFoundIcon} variant={EmptyStateVariant.full} data-ouia-component-id={ouiaId} {...props} titleText={titleText}>
+  <EmptyState headingLevel={headingLevel} icon={NotFoundIcon} variant={EmptyStateVariant.full} data-ouia-component-id={ouiaId} {...props} titleText={titleText}>
     <EmptyStateBody data-ouia-component-id={`${ouiaId}-body`}>{bodyText}</EmptyStateBody>
     <EmptyStateFooter data-ouia-component-id={`${ouiaId}-footer`}>
       <Button variant="link" component="a" href={toHomePageUrl} ouiaId={`${ouiaId}-home-button`}>

packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx

@@ -43,9 +43,10 @@ const UnauthorizedAccess: React.FunctionComponent<UnauthorizedAccessProps> = ({
   showReturnButton = true,
   className,
   ouiaId = 'UnauthorizedAccess',
+  headingLevel = 'h5',
   ...props
 }: UnauthorizedAccessProps) => (
-  <EmptyState headingLevel="h5" icon={Icon} variant={EmptyStateVariant.full} className={className} data-ouia-component-id={ouiaId} {...props} titleText={titleText}>
+  <EmptyState headingLevel={headingLevel} icon={Icon} variant={EmptyStateVariant.full} className={className} data-ouia-component-id={ouiaId} {...props} titleText={titleText}>
     <EmptyStateBody data-ouia-component-id={`${ouiaId}-body`}>{bodyText}</EmptyStateBody>
     <EmptyStateFooter data-ouia-component-id={`${ouiaId}-footer`}>
       {primaryAction ? <EmptyStateActions>{primaryAction}</EmptyStateActions> : null}

packages/module/src/UnavailableContent/UnavailableContent.tsx

@@ -22,9 +22,10 @@ const UnavailableContent: React.FunctionComponent<UnavailableContentProps> = ({
   titleText = 'This page is temporarily unavailable',
   bodyText = 'Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for known outages.',
   ouiaId = 'UnavailableContent',
+  headingLevel = "h5",
   ...props 
 }: UnavailableContentProps) => (
-  <EmptyState headingLevel="h5" status={EmptyStateStatus.danger} icon={ExclamationCircleIcon}  titleText={titleText} variant={EmptyStateVariant.lg} data-ouia-component-id={ouiaId} {...props}>
+  <EmptyState headingLevel={headingLevel} status={EmptyStateStatus.danger} icon={ExclamationCircleIcon}  titleText={titleText} variant={EmptyStateVariant.lg} data-ouia-component-id={ouiaId} {...props}>
     <EmptyStateBody data-ouia-component-id={`${ouiaId}-body`}>
       {bodyText}
     </EmptyStateBody>