RENO-3681: NewsletterSignup Component

src/components/NewsletterSignup/NewsletterSignup.mdx

@@ -22,17 +22,9 @@ import Link from "../Link/Link";
 
 <Description of={NewsletterSignupStories} />
 
-**Note**: The `NewsletterSignup` example below will render different states depending on what email address you input.
-* `[email protected]` will display the error screen.
-* `[email protected]` will display the bad email screen.
-* Any other validly-constructed email address will display the confirmation screen after three seconds to better
-demonstrate the `submitting` state.
-
-The value of the email will appear in the console log.
-
 ## Component Props
 
-<Canvas of={NewsletterSignupStories.WithControls} sourceState="none"/>
+<Canvas of={NewsletterSignupStories.WithControls} />
 
 <ArgTypes of={NewsletterSignupStories.WithControls} />
 
@@ -45,6 +37,9 @@ Within the `NewsletterSignup` component, the DS `form` component wraps around tw
 Those`FormField` components hold a DS `TextInput` component of `type="email"` and a DS `Button` component of `type="submit"` respectively.
 Each of these components has their own accessibility features documented in their respective Storybook pages.
 
+When the form is submitted, focus is set to the confirmation message or the
+error message if an error occurs.
+
 Resources:
 
 - [DS Form Accessibility](../?path=/docs/components-form-elements-form--docs#accessibility)
@@ -56,7 +51,9 @@ Resources:
 Alternatively to a `descriptionText` of type `string`, a HTML Element or React component can be passed. When passing a JSX Element, the consuming app is responsible
 to assure its accessibility.
 
-<Canvas of={NewsletterSignupStories.DescriptionUsingJSXElements}  sourceState="none"/>
+_NOTE: This is applicable for all component props excepting HTML/JSX elements._
+
+<Canvas of={NewsletterSignupStories.DescriptionUsingJSXElements} />
 
 ## Form Submission Data
 
@@ -107,4 +104,4 @@ language="jsx"
 
 ## Component States
 
-<Canvas of={NewsletterSignupStories.ComponentStates} sourceState="none"/>
+<Canvas of={NewsletterSignupStories.ComponentStates} />

src/components/NewsletterSignup/NewsletterSignup.stories.tsx

@@ -4,7 +4,6 @@ import { withDesign } from "storybook-addon-designs";
 import NewsletterSignup from "./NewsletterSignup";
 import { sectionTypeArray } from "../../helpers/types";
 import Heading from "../Heading/Heading";
-import useStateWithDependencies from "../../hooks/useStateWithDependencies";
 
 const meta: Meta<typeof NewsletterSignup> = {
   title: "Components/Form Elements/NewsletterSignup",
@@ -81,44 +80,6 @@ const meta: Meta<typeof NewsletterSignup> = {
 export default meta;
 type Story = StoryObj<typeof NewsletterSignup>;
 
-const NewsletterSignupWithControls = (args) => {
-  const [view, setView] = useStateWithDependencies(args.view);
-  const [isInvalidEmail, setIsInvalidEmail] = useStateWithDependencies(
-    args.isInvalidEmail
-  );
-
-  function handleSubmit(event): void {
-    event.preventDefault();
-    setView("submitting");
-    const userEmail = event.target.email.value;
-    switch (userEmail) {
-      case "[email protected]":
-        setView("error");
-        break;
-      case "[email protected]":
-        setView("form");
-        setIsInvalidEmail(true);
-        break;
-      default:
-        // Add short delay to demonstrate the "submitted" state.
-        setTimeout(() => {
-          setView("confirmation");
-        }, 3000);
-    }
-    console.log("Submitted email: ", userEmail);
-    setTimeout(() => {
-      setView("form");
-    }, 10000);
-  }
-  return (
-    <NewsletterSignup
-      {...args}
-      onSubmit={handleSubmit}
-      view={view}
-      isInvalidEmail={isInvalidEmail}
-    />
-  );
-};
 /**
  * Main Story for the NewsletterSignup component. This must contains the `args`
  * and `parameters` properties in this object.
@@ -130,6 +91,8 @@ export const WithControls: Story = {
     confirmationText:
       "You can update your email subscription preferences at any time using the links at the bottom of the email.",
     descriptionText: undefined,
+    errorHeading: undefined,
+    errorText: undefined,
     formHelperText: undefined,
     id: undefined,
     isInvalidEmail: false,
@@ -147,7 +110,7 @@ export const WithControls: Story = {
     },
     jest: "NewsletterSignup.test.tsx",
   },
-  render: (args) => <NewsletterSignupWithControls {...args} />,
+  render: (args) => <NewsletterSignup {...args} />,
 };
 
 export const DescriptionUsingJSXElements: Story = {
@@ -214,7 +177,7 @@ export const ComponentStates: Story = {
       </Box>
       <Box>
         <Heading level="h3" size="heading6">
-          Deafult Error View
+          Default Error View
         </Heading>
         <NewsletterSignup
           id="error-view"