RENO-3681: NewsletterSignup Component

src/components/NewsletterSignup/NewsletterSignup.stories.tsx

@@ -31,6 +31,17 @@ const meta: Meta<typeof NewsletterSignup> = {
         },
       },
     },
+    errorHeading: {
+      control: "text",
+      table: {
+        defaultValue: {
+          summary: "Oops! Something went wrong.",
+        },
+      },
+    },
+    errorText: {
+      control: "text",
+    },
     formHelperText: {
       control: "text",
     },
@@ -203,7 +214,20 @@ export const ComponentStates: Story = {
       </Box>
       <Box>
         <Heading level="h3" size="heading6">
-          Error View
+          Deafult Error View
+        </Heading>
+        <NewsletterSignup
+          id="error-view"
+          view="error"
+          onChange={() => {}}
+          onSubmit={() => {}}
+          confirmationHeading="Thank you for signing up!"
+          confirmationText="You can update your email subscription preferences at any time using the links at the bottom of the email."
+        />
+      </Box>
+      <Box>
+        <Heading level="h3" size="heading6">
+          Error View with Custom Error Message
         </Heading>
         <NewsletterSignup
           id="error-view"
@@ -212,6 +236,16 @@ export const ComponentStates: Story = {
           onSubmit={() => {}}
           confirmationHeading="Thank you for signing up!"
           confirmationText="You can update your email subscription preferences at any time using the links at the bottom of the email."
+          errorHeading="An error has occurred."
+          errorText={
+            <div>
+              Please refresh this page and try again. If this error persists,
+              <a href="mailto:[email protected]?subject=Please re-activate my e-mail address">
+                contact our e-mail team
+              </a>
+              .
+            </div>
+          }
         />
       </Box>
     </VStack>

src/components/NewsletterSignup/NewsletterSignup.test.tsx

@@ -149,6 +149,7 @@ describe("NewsletterSignup Unit Tests", () => {
   it("Renders the Optional descriptionText and formHelperText HTML Values for the Form", () => {
     const testNewsletterSignup = (
       <NewsletterSignup
+        // This link is safe and fun - If you have a moment check it out ;)
         descriptionText={
           <div>
             Do not send <a href="https://chias.website/">cash</a>.
@@ -364,7 +365,7 @@ describe("NewsletterSignup Snapshots", () => {
     expect(view).toMatchSnapshot();
   });
 
-  it("Renders the error state snapshot correctly", () => {
+  it("Renders the default error state snapshot correctly", () => {
     const view = renderer
       .create(
         <NewsletterSignup
@@ -380,6 +381,31 @@ describe("NewsletterSignup Snapshots", () => {
     expect(view).toMatchSnapshot();
   });
 
+  it("Renders the custom error state snapshot correctly", () => {
+    const view = renderer
+      .create(
+        <NewsletterSignup
+          onSubmit={onSubmit}
+          onChange={onChange}
+          valueEmail={valueEmail}
+          view="error"
+          confirmationHeading="Thank you for signing up!"
+          confirmationText="You can update your email subscription preferences at any time using the links at the bottom of the email."
+          errorHeading="Oh no! Something went wrong."
+          errorText={
+            <div>
+              If the error persists,
+              <a href="mailto:[email protected]?subject=Please re-activate my e-mail address">
+                contact our e-mail team
+              </a>
+            </div>
+          }
+        />
+      )
+      .toJSON();
+    expect(view).toMatchSnapshot();
+  });
+
   it("Renders the default confirmation state snapshot correctly", () => {
     const view = renderer
       .create(
@@ -411,7 +437,7 @@ describe("NewsletterSignup Snapshots", () => {
       .toJSON();
     expect(view).toMatchSnapshot();
   });
-
+  // @TODO I don't think these test are working as intended as the colors are now set in the theme file.
   describe("Renders each color for each newsletterSignupType correctly", () => {
     // The newsletterSignupType values are determined by the types contained in the sectionDataMap.
     // So it is safe to use the map directly.

src/components/NewsletterSignup/NewsletterSignup.tsx

@@ -3,7 +3,7 @@ import {
   chakra,
   Stack,
   useColorModeValue,
-  useStyleConfig,
+  useMultiStyleConfig,
   VStack,
 } from "@chakra-ui/react";
 import React, { forwardRef } from "react";
@@ -27,6 +27,10 @@ interface NewsletterSignupProps {
   confirmationText: string;
   /** Appears below the title to provide details about the newsletter. Accepts a string or an element. */
   descriptionText?: string | JSX.Element;
+  /** Text displayed next to the error icon in case of an error in the email submission process*/
+  errorHeading?: string;
+  /** Appears below the title to provide details about next steps in case of an error. Accepts a string or an element. */
+  errorText?: string | JSX.Element;
   /** Appears below the input field's example text to provide any additional instructions. Accepts a string or
    *  an element. */
   formHelperText?: string | JSX.Element;
@@ -47,9 +51,15 @@ interface NewsletterSignupProps {
   /** The value of the email text input field. */
   valueEmail?: string;
   /** Used to specify what is displayed in the component form/feedback area. */
-  view?: "form" | "submitting" | "confirmation" | "error";
+  view?: NewsletterSignupViewType;
 }
 
+export type NewsletterSignupViewType =
+  | "form"
+  | "submitting"
+  | "confirmation"
+  | "error";
+
 const defaultDescriptionText =
   "Stay connected with the latest research news from NYPL, including information about our events, programs, " +
   "exhibitions, and collections.";
@@ -66,6 +76,8 @@ export const NewsletterSignup = chakra(
         confirmationHeading,
         confirmationText,
         descriptionText = defaultDescriptionText,
+        errorHeading = "Oops! Something went wrong.",
+        errorText,
         formHelperText,
         id,
         isInvalidEmail = false,
@@ -81,7 +93,7 @@ export const NewsletterSignup = chakra(
       ref?
     ) => {
       const { isLargerThanMobile } = useNYPLBreakpoints();
-      const styles = useStyleConfig("NewsletterSignup", {
+      const styles = useMultiStyleConfig("NewsletterSignup", {
         newsletterSignupType,
       });
       const iconColor = useColorModeValue(null, "dark.ui.typography.body");
@@ -94,29 +106,33 @@ export const NewsletterSignup = chakra(
       React.useEffect(() => {
         focusRef.current?.focus();
       }, [view]);
-
       return (
         <Stack
           direction={isLargerThanMobile ? "row" : "column"}
           ref={ref}
           __css={styles}
           {...rest}
         >
-          <VStack id="pitch">
-            {title && <Heading level="h3" text={title} />}
+          <VStack __css={styles.pitch} alignItems="flex-start">
+            {title && <Heading level="h3" text={title} margin="unset" />}
             {descriptionText ? (
               typeof descriptionText === "string" ? (
-                <Text>{descriptionText}</Text>
+                <Text margin="unset">{descriptionText}</Text>
               ) : (
                 descriptionText
               )
             ) : null}
 
-            <Link href={privacyPolicyLink} type="external" id="privacy">
+            <Link
+              href={privacyPolicyLink}
+              type="external"
+              margin="unset"
+              __css={styles.privacy}
+            >
               Privacy Policy
             </Link>
           </VStack>
-          <VStack id="action">
+          <VStack __css={styles.action}>
             {isFormView && (
               <Form id="newsletter-form" onSubmit={onSubmit}>
                 <FormField key="formfield-input">
@@ -177,27 +193,39 @@ export const NewsletterSignup = chakra(
             )}
             {view === "error" && (
               <Box
-                display="flex"
-                color="ui.error.primary"
+                className="feedback-body response"
+                margin="auto"
                 ref={focusRef}
                 tabIndex={0}
-                alignItems={{ md: "center" }}
-                width="full"
               >
-                <Icon
-                  color="ui.error.primary"
-                  name="errorFilled"
-                  size="large"
-                />
-                {/* This text is boilerplate and not meant to be customized. */}
-                <Text
-                  fontSize="xl"
-                  marginStart="xs"
-                  marginBottom="unset"
-                  fontWeight="medium"
+                <Box
+                  display="flex"
+                  marginBottom="xs"
+                  alignItems={{ md: "center" }}
                 >
-                  Oops! Something went wrong.
-                </Text>
+                  <Icon
+                    color="ui.error.primary"
+                    name="errorFilled"
+                    size="large"
+                  />
+                  {/* This text is boilerplate and not meant to be customized. */}
+                  <Text
+                    color="ui.error.primary"
+                    fontSize="xl"
+                    marginStart="xs"
+                    marginBottom="unset"
+                    fontWeight="medium"
+                  >
+                    {errorHeading}
+                  </Text>
+                </Box>
+                {errorText ? (
+                  typeof errorText === "string" ? (
+                    <Text margin="unset">{errorText}</Text>
+                  ) : (
+                    errorText
+                  )
+                ) : null}
               </Box>
             )}
           </VStack>