From 36a66afcfb7affaef9ede9335819bb90427a8385 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 4 Dec 2023 11:16:17 -0500 Subject: [PATCH 1/3] fix(i18n): Added support for i18n to Error Boundary, Inavalid Object, and Unavailable Content. --- .../src/ErrorBoundary/ErrorBoundary.tsx | 6 +++-- .../src/InvalidObject/InvalidObject.tsx | 12 +++++++--- .../UnavailableContent/UnavailableContent.tsx | 23 +++++++++++++++---- 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx index 9c47cb29..a6127f0d 100644 --- a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx @@ -12,6 +12,8 @@ export interface ErrorPageProps { errorTitle?: string; /** A description of the error */ errorDescription?: React.ReactNode; + /** Text to display when error is closed. */ + errorToggleText?: string; /** A default description of the error used if no errorDescription is provided. */ defaultErrorDescription?: React.ReactNode; /** Children components */ @@ -29,7 +31,7 @@ export interface ErrorPageState { // As of time of writing, React only supports error boundaries in class components class ErrorBoundary extends React.Component, ErrorPageState> { - constructor(props: Readonly) { + constructor(props: ErrorPageProps) { super(props); this.state = { hasError: false, @@ -72,7 +74,7 @@ class ErrorBoundary extends React.Component {this.props.errorDescription} {this.state.error && ( - + )} diff --git a/packages/module/src/InvalidObject/InvalidObject.tsx b/packages/module/src/InvalidObject/InvalidObject.tsx index 3efde874..9655170c 100644 --- a/packages/module/src/InvalidObject/InvalidObject.tsx +++ b/packages/module/src/InvalidObject/InvalidObject.tsx @@ -8,16 +8,22 @@ export interface InvalidObjectProps extends React.DetailedHTMLProps = ({ toLandingPageUrl = window.location.origin, - toLandingPageText = 'Return to homepage' + toLandingPageText = 'Return to homepage', + invalidObjectTitleText = 'We lost that page', + invalidObjectBodyText = "Let's find you a new one. Try a new search or return home." }: InvalidObjectProps) => ( - } headingLevel='h1' /> - Let's find you a new one. Try a new search or return home. + } headingLevel='h1' /> + {invalidObjectBodyText} {' '} - for known outages. + {unavailableBodyPostStatusLinkText} ); From 6d3a81f8b816b154b38af25fb7ca2c485796f5ea Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 4 Dec 2023 12:33:02 -0500 Subject: [PATCH 2/3] fix(errorboudndary): Fixed code to display the ErrorPageProps in the documentation. --- packages/module/src/ErrorBoundary/ErrorBoundary.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx index a6127f0d..c3c6f6b0 100644 --- a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx @@ -30,8 +30,8 @@ export interface ErrorPageState { } // As of time of writing, React only supports error boundaries in class components -class ErrorBoundary extends React.Component, ErrorPageState> { - constructor(props: ErrorPageProps) { +class ErrorBoundary extends React.Component { + constructor(props: Readonly) { super(props); this.state = { hasError: false, From cea23866812ce8416420dcf05b27f6ff676f0806 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 4 Dec 2023 15:46:39 -0500 Subject: [PATCH 3/3] Updated with docuemnetation review comments. --- .../module/src/ErrorBoundary/ErrorBoundary.tsx | 14 +++++++------- .../module/src/InvalidObject/InvalidObject.tsx | 8 ++++---- .../src/UnavailableContent/UnavailableContent.tsx | 10 +++++----- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx index c3c6f6b0..bd0c48f5 100644 --- a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx @@ -4,19 +4,19 @@ import ErrorState from '../ErrorState'; import ErrorStack from '../ErrorStack'; export interface ErrorPageProps { - /** Title to display on the error page */ + /** The title text to display on the error page */ headerTitle: string; - /** Indicates if this is a silent error */ + /** Indicates if the error is silent */ silent?: boolean; - /** Title given to the error */ + /** The title text to display with the error */ errorTitle?: string; - /** A description of the error */ + /** The description text to display with the error */ errorDescription?: React.ReactNode; - /** Text to display when error is closed. */ + /** The text for the toggle link that users can select to view error details */ errorToggleText?: string; - /** A default description of the error used if no errorDescription is provided. */ + /** The default description text to display with the error if no errorDescription is provided */ defaultErrorDescription?: React.ReactNode; - /** Children components */ + /** The component that the error boundary component is wrapped around, which should be returned if there is no error */ children?: React.ReactNode; } diff --git a/packages/module/src/InvalidObject/InvalidObject.tsx b/packages/module/src/InvalidObject/InvalidObject.tsx index 9655170c..669f156a 100644 --- a/packages/module/src/InvalidObject/InvalidObject.tsx +++ b/packages/module/src/InvalidObject/InvalidObject.tsx @@ -4,13 +4,13 @@ import NotFoundIcon from '../NotFoundIcon/NotFoundIcon'; import React from 'react'; export interface InvalidObjectProps extends React.DetailedHTMLProps, HTMLElement> { - /** Custom landing page button URL */ + /** The URL that the landing page link points to */ toLandingPageUrl?: string; - /** Custom return to landing page text */ + /** The text label for the link that points back to the landing page */ toLandingPageText?: React.ReactNode; - /** Custom invalid page title text */ + /** The title for the invalid object message */ invalidObjectTitleText?: string; - /** Custom invalid page body text */ + /** The body text for the invalid object message */ invalidObjectBodyText?: string; } diff --git a/packages/module/src/UnavailableContent/UnavailableContent.tsx b/packages/module/src/UnavailableContent/UnavailableContent.tsx index 1c3801d0..88715910 100644 --- a/packages/module/src/UnavailableContent/UnavailableContent.tsx +++ b/packages/module/src/UnavailableContent/UnavailableContent.tsx @@ -15,15 +15,15 @@ const useStyles = createUseStyles({ }); export interface UnavailableContentProps { - /** Page to open when user clicks on status page link */ + /** The URL that the status page link points to */ statusPageUrl?: string; - /** Status page link text */ + /** The text label for the link that points to the status page */ statusPageLinkText?: string; - /** Unavailable page title text */ + /** The title for the unavailable content message */ unavailableTitleText?: string; - /** Unavailable page body text before status page link */ + /** The body text for the unavailable content message that appears before the status page link */ unavailableBodyPreStatusLinkText?: string; - /** Unavailable page body text after status page link */ + /** The body text for the unavailable content message that appears after the status page link */ unavailableBodyPostStatusLinkText?: string; }