Merge pull request #353 from LifeSG/update-error-copy

Update error display copy & typography
LifeSG · Nov 29, 2023 · 2a56c6a · 2a56c6a
2 parents c43591e + e8932ca
commit 2a56c6a
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 104 deletions.
diff --git a/src/error-display/error-display-data.tsx b/src/error-display/error-display-data.tsx
diff --git a/src/error-display/error-display-helper-comp.tsx b/src/error-display/error-display-helper-comp.tsx
@@ -0,0 +1,41 @@
+import {
+    InactivityAdditionalAttributes,
+    MaintenanceAdditionalAttributes,
+} from "./types";
+
+export const renderDescriptionWithProps =
+    (type: "maintenance" | "inactivity") =>
+    // eslint-disable-next-line react/display-name
+    (
+        attrs: MaintenanceAdditionalAttributes | InactivityAdditionalAttributes
+    ) => {
+        switch (type) {
+            case "maintenance": {
+                const descriptionAttrs =
+                    attrs as MaintenanceAdditionalAttributes;
+                return (
+                    <>
+                        This service is currently unavailable. Please try again
+                        after&nbsp;
+                        <strong>{descriptionAttrs.dateString}</strong>.
+                    </>
+                );
+            }
+            case "inactivity": {
+                const descriptionAttrs =
+                    attrs as InactivityAdditionalAttributes;
+                const minutes = Math.floor(descriptionAttrs.secondsLeft / 60);
+                const seconds = descriptionAttrs.secondsLeft % 60;
+                return (
+                    <>
+                        You&rsquo;ve been inactive for a while. To protect your
+                        privacy, you&rsquo;ll be logged out in {minutes} minutes{" "}
+                        {seconds} seconds.
+                        <br />
+                        <br />
+                        If you wish to stay on this page, let us know now.
+                    </>
+                );
+            }
+        }
+    };
diff --git a/src/error-display/error-display.style.tsx b/src/error-display/error-display.style.tsx
@@ -35,11 +35,12 @@ export const TextContainer = styled.div`
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    max-width: 41rem;
+    white-space: pre-wrap;
 `;
 
-export const Title = styled(Text.H1)`
+export const Title = styled(Text.H2)`
     margin: 2rem 0 1rem;
-    letter-spacing: -0.032rem !important;
     text-align: center;
 `;
 
@@ -68,7 +69,7 @@ export const DescriptionContainer = styled.div`
 `;
 
 export const ActionButton = styled(Button.Default)`
-    margin: 4rem auto 0;
+    margin: 2rem auto 0;
     width: 21rem;
 
     ${MediaQuery.MaxWidth.mobileL} {

diff --git a/src/error-display/error-display.tsx b/src/error-display/error-display.tsx
@@ -10,7 +10,11 @@ import {
     TextContainer,
     Title,
 } from "./error-display.style";
-import { ErrorDisplayProps, MaintenanceAdditionalAttributes } from "./types";
+import {
+    ErrorDisplayProps,
+    InactivityAdditionalAttributes,
+    MaintenanceAdditionalAttributes,
+} from "./types";
 
 export const ErrorDisplay = ({
     type,
@@ -46,6 +50,13 @@ export const ErrorDisplay = ({
                     ? defaultAssets.renderDescription(typecastProps)
                     : description || undefined;
             }
+            case "inactivity": {
+                const typecastProps =
+                    additionalProps as InactivityAdditionalAttributes;
+                return additionalProps && typecastProps.secondsLeft
+                    ? defaultAssets.renderDescription(typecastProps)
+                    : description || undefined;
+            }
             default:
                 return description || undefined;
         }
@@ -83,6 +94,7 @@ export const ErrorDisplay = ({
                             <Title
                                 data-testid={`${testId}--title`}
                                 data-id="error-display-title"
+                                weight="semibold"
                             >
                                 {updatedAssets.title}
                             </Title>

diff --git a/src/error-display/types.ts b/src/error-display/types.ts
@@ -27,6 +27,10 @@ export interface MaintenanceAdditionalAttributes {
     dateString: string;
 }
 
+export interface InactivityAdditionalAttributes {
+    secondsLeft: number;
+}
+
 export interface ErrorDisplayAttributes {
     /** The custom image attributes */
     img?: React.ImgHTMLAttributes<HTMLImageElement> | undefined;
@@ -35,7 +39,10 @@ export interface ErrorDisplayAttributes {
     /** The action button displayed at the bottom of the Error Display */
     actionButton?: ButtonProps | undefined;
     /** Additional pre-specified props to control specific content  */
-    additionalProps?: MaintenanceAdditionalAttributes | undefined;
+    additionalProps?:
+        | MaintenanceAdditionalAttributes
+        | InactivityAdditionalAttributes
+        | undefined;
     /** Specifies if only the image is rendered */
     imageOnly?: boolean | undefined;
     /** Use specific resource scheme instead of theme resource scheme */

diff --git a/stories/error-display/error-display.stories.mdx b/stories/error-display/error-display.stories.mdx
@@ -52,6 +52,35 @@ appear at the bottom of the component.
     </Story>
 </Canvas>
 
+<Heading3>With custom attributes</Heading3>
+
+Some variants of the `ErrorDisplay` accept custom attributes to alter the text content with
+dynamic variables. Currently only the types `"maintenance"` and `"inactivity"` have such a support.
+
+<Heading4>Maintenance</Heading4>
+
+<Canvas>
+    <Story name="Custom attributes - Maintenance">
+        <ErrorDisplay
+            type="maintenance"
+            additionalProps={{ dateString: "1 January 2023, 8:00am" }}
+        />
+        <br />
+    </Story>
+</Canvas>
+
+<Heading4>Inactivity</Heading4>
+
+<Canvas>
+    <Story name="Custom attributes - Inactivity">
+        <ErrorDisplay
+            type="inactivity"
+            additionalProps={{ secondsLeft: 300 }}
+        />
+        <br />
+    </Story>
+</Canvas>
+
 <Heading3>Customisation</Heading3>
 
 The `ErrorDisplay` component is customisable according to your project's needs. Customisation includes

diff --git a/stories/error-display/props-table.tsx b/stories/error-display/props-table.tsx
@@ -127,7 +127,10 @@ const DATA: ApiTableSectionProps[] = [
             {
                 name: "additionalProps",
                 description: "Additional properties for certain error types",
-                propTypes: ["MaintenanceAdditionalAttributes"],
+                propTypes: [
+                    "MaintenanceAdditionalAttributes",
+                    "InactivityAdditionalAttributes",
+                ],
             },
             {
                 name: "imageOnly",
@@ -148,6 +151,18 @@ const DATA: ApiTableSectionProps[] = [
             },
         ],
     },
+    {
+        name: "InactivityAdditionalAttributes",
+        attributes: [
+            {
+                name: "secondsLeft",
+                mandatory: true,
+                description:
+                    "The amount of time left (in seconds) for the inactivity display",
+                propTypes: ["number"],
+            },
+        ],
+    },
 ];
 
 export const PropsTable = () => <ApiTable sections={DATA} />;
diff --git a/tests/error-display/error-display.spec.tsx b/tests/error-display/error-display.spec.tsx
@@ -25,7 +25,7 @@ describe("ErrorDisplay", () => {
         );
 
         const title = getErrorDisplayData("404", "base").title;
-        expect(screen.getByRole("heading", { level: 1, name: title }));
+        expect(screen.getByRole("heading", { level: 2, name: title }));
     });
 
     it("should render action button if prop is provided", () => {
@@ -55,7 +55,7 @@ describe("ErrorDisplay", () => {
         );
 
         expect(
-            screen.getByRole("heading", { level: 1, name: CUSTOM_TITLE })
+            screen.getByRole("heading", { level: 2, name: CUSTOM_TITLE })
         ).toBeInTheDocument();
     });
 
@@ -72,7 +72,7 @@ describe("ErrorDisplay", () => {
         );
 
         expect(
-            screen.queryByRole("heading", { level: 1, name: CUSTOM_TITLE })
+            screen.queryByRole("heading", { level: 2, name: CUSTOM_TITLE })
         ).not.toBeInTheDocument();
         expect(screen.queryByText(CUSTOM_DESCRIPTION)).not.toBeInTheDocument();
     });
@@ -138,7 +138,7 @@ describe("ErrorDisplay", () => {
                 const error = getErrorDisplayData(type, "base");
 
                 expect(
-                    screen.getByRole("heading", { level: 1, name: error.title })
+                    screen.getByRole("heading", { level: 2, name: error.title })
                 ).toBeInTheDocument();
 
                 expect(screen.getByRole("img")).toHaveAttribute(
@@ -165,7 +165,7 @@ describe("ErrorDisplay", () => {
 
                 expect(
                     screen.getByRole("heading", {
-                        level: 1,
+                        level: 2,
                         name: error.title,
                     })
                 ).toBeInTheDocument();
@@ -192,7 +192,7 @@ describe("ErrorDisplay", () => {
 
             expect(
                 screen.getByRole("heading", {
-                    level: 1,
+                    level: 2,
                     name: error.title,
                 })
             ).toBeInTheDocument();