RENO-3681: NewsletterSignup Component

.gitignore

@@ -9,4 +9,5 @@ lib
 dist
 .vscode
 .eslintcache
-coverage
+coverage
+.idea

src/components/NewsletterSignup/NewsletterSignup.mdx

@@ -0,0 +1,126 @@
+import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
+
+import * as NewsletterSignupStories from "./NewsletterSignup.stories";
+import Link from "../Link/Link";
+
+<Meta of={NewsletterSignupStories} />
+
+# NewsletterSignup
+
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `Prerelease` |
+| Latest            | `Prerelease` |
+
+## Table of Contents
+
+- {<Link href="#overview" target="_self">Overview</Link>}
+- {<Link href="#component-props" target="_self">Component Props</Link>}
+- {<Link href="#accessibility" target="_self">Accessibility</Link>}
+
+## Overview
+
+<Description of={NewsletterSignupStories} />
+
+
+**Note**: The `NewsletterSignup` example
+below alternately renders the "confirmation" and "error" screens on each form
+submission. This is just to demonstrate the different states of the component.
+In practice, the consuming app is responsible for handling the form submission.
+
+## Component Props
+
+<Canvas of={NewsletterSignupStories.WithControls} />
+
+<ArgTypes of={NewsletterSignupStories.WithControls} />
+
+<Source
+code='        const sampleOnSubmitValue = async (e: any) => {
+          e.preventDefault();
+
+            //Create dynamic Google Analytics values
+            const gaEventCategory = "Email Subscription Forms";
+            //    const gaEventActionName = `Subscribe - ${asPath}`; // example: Subscribe - /research
+            const gaEventActionName = `Subscribe - Testing`; // example: Subscribe - /research
+            const gaEventLabel = `Success ${salesforceSourceCode}`; // example: Success research
+
+            setIsSubmitting(true);
+
+            const endpoint = "/api/salesforce";
+
+              // Form the request for sending data to the server.
+              const options = {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                  email: e.target.email.value,
+                  listID: salesforceListId,
+                  sourceCode: salesforceSourceCode,
+                }),
+
+
+              // Send the form and await response.
+              try {
+                const response = await fetch(endpoint, options);
+                const result = await response.json();
+
+                window.gtag("event", gaEventActionName, {
+                  eventCategory: gaEventCategory,
+                  eventLabel: gaEventLabel,
+                });
+
+                setStatus(result.statusCode);
+                setIsSubmitted(true);
+              } catch (error) {
+                setStatus("ERROR");
+                setIsSubmitted(true);
+              }
+              setIsSubmitting(false);
+            }
+          };' />
+
+## Accessibility
+
+The `NewsletterSignup` component is a complex component built from various Reservoir
+DS and Chakra components. The two main components are the DS `Button` component
+used to open Chakra's `Drawer` component.
+
+When the primary button is clicked, the dialog opens and focus is set to the
+first focusable element which is the "close" button that contains minus icon in
+the header of the dialog. While opened, focus is trapped within the dialog until
+it is closed either by clicking on the "close" or "Cancel" buttons, pressing the
+"Escape" key, or by clicking outside of the dialog. When the `NewsletterSignup`
+component is closed, focus is set back to the primary button that opened the
+dialog.
+
+The markup of the `NewsletterSignup` structurally matches the modal dialog pattern
+that is implemented by Chakra's `Modal` and `Drawer` components. The container
+has `role=”dialog”`, `aria-modal=”true”`, `tabindex={0}`, `aria-labelledby` that
+references the title within the dialog, and `aria-describedby` that references a
+descriptive piece of text within the dialog.
+
+Within the `NewsletterSignup` component, the radio input field is created from the DS
+`RadioGroup` and `Radio` components, and input fields are created from the DS
+`TextInput` component. 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.
+
+Whereas the `NewsletterSignup`'s primary button element is placed within the DOM
+structure where it is rendered, the dialog DOM structure is appended to the end
+of the DOM tree and it is done by Chakra.
+
+Resources:
+
+- [MDN ARIA: dialog role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)
+- [W3C ARIA role=dialog](https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box)
+- [Chakra Modal Accessibility](https://v1.chakra-ui.com/docs/components/overlay/modal#accessibility)
+- [Chakra Drawer Accessibility](https://v1.chakra-ui.com/docs/components/overlay/drawer#accessibility)
+- [DS Button Accessibility](../?path=/docs/components-form-elements-button--docs#accessibility)
+- [DS TextInput Accessibility](../?path=/docs/components-form-elements-textinput--docs#accessibility)
+- [DS Radio Accessibility](../?path=/docs/components-form-elements-radio--docs#accessibility)
+- [DS RadioGroup Accessibility](../?path=/docs/components-form-elements-radiogroup--docs#accessibility)
+

src/components/NewsletterSignup/NewsletterSignup.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import useStateWithDependencies from "../../hooks/useStateWithDependencies";
+import NewsletterSignup from "./NewsletterSignup";
+
+const meta: Meta<typeof NewsletterSignup> = {
+  title: "Components/Form Elements/NewsletterSignup",
+  component: NewsletterSignup,
+  decorators: [withDesign],
+  parameters: {
+    jest: ["NewsletterSignup.test.tsx"],
+  },
+  argTypes: {
+    className: { control: false },
+    id: { control: false },
+    confirmationText: {
+      control: "text",
+      table: {
+        defaultValue: {
+          summary:
+            "Thank you! You have successfully subscribed to our email updates! You can update your email subscription preferences at any time using the links at the bottom of the email.",
+        },
+      },
+    },
+    descriptionText: {
+      control: "text",
+      table: {
+        defaultValue: {
+          summary:
+            "Stay connected with the latest research news from NYPL, including information about our events, programs, exhibitions, and collections.",
+        },
+      },
+    },
+    formHelperText: {
+      control: "text",
+    },
+    newsletterSignupType: {
+      control: "select",
+      table: {
+        defaultValue: {
+          summary: "whatsOn",
+        },
+      },
+    },
+    view: {
+      control: "select",
+      table: {
+        defaultValue: {
+          summary: "form",
+        },
+      },
+    },
+    title: {
+      control: "text",
+      table: { defaultValue: { summary: "Sign Up for Our Newsletter!" } },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof NewsletterSignup>;
+
+const NewsletterSignupWithControls = (args) => {
+  const [view, setView] = useStateWithDependencies(args.view);
+  const [isInvalidEmail, setIsInvalidEmail] = useStateWithDependencies(
+    args.isInvalidEmail
+  );
+  const [confirmationText, setConfirmationText] = useStateWithDependencies(
+    args.confirmationText
+  );
+  const onSubmit = (values?: { [key: string]: string }) => {
+    let timer = setTimeout(() => {
+      setView("confirmation");
+      setConfirmationText(
+        "This is going to change your life. Check out those values in the console!"
+      );
+    }, 3000);
+    switch (values.email) {
+      case "":
+        setIsInvalidEmail(true);
+        clearTimeout(timer);
+        break;
+      case "[email protected]":
+        setView("error");
+        clearTimeout(timer);
+        break;
+    }
+    console.log(
+      "Submitted values:",
+      values,
+      "isInvalidEmail: ",
+      isInvalidEmail,
+      "View: ",
+      view
+    );
+  };
+  return (
+    <NewsletterSignup
+      {...args} // @todo All the same values below are already contained in this ...args array. But the ones below get to "win." I dunno why. Cuz they come after?
+      onSubmit={onSubmit}
+      view={view}
+      isInvalidEmail={isInvalidEmail}
+      confirmationText={confirmationText}
+    />
+  );
+};
+
+// Example hidden field values.
+const hiddenFields = {
+  "hidden-field-1": "hidden-field-value-1",
+  "hidden-field-2": "hidden-field-value-2",
+};
+
+/**
+ * Main Story for the NewsletterSignup component. This must contains the `args`
+ * and `parameters` properties in this object.
+ */
+export const WithControls: Story = {
+  args: {
+    className: undefined,
+    confirmationText:
+      "Fantastic! You're all set. Check the console for the data you submitted.",
+    descriptionText: "This is it.",
+    formHelperText: "You can do this.",
+    hiddenFields: { hiddenFields },
+    id: undefined,
+    isInvalidEmail: false,
+    newsletterSignupType: "whatsOn",
+    onSubmit: undefined,
+    title: "The Newsletter Everyone Is Talking About",
+    view: "form",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=80849%3A174194&mode=dev",
+    },
+    jest: "NewsletterSignup.test.tsx",
+  },
+  render: (args) => <NewsletterSignupWithControls {...args} />,
+};