RENO-3681: NewsletterSignup Component

src/components/NewsletterSignup/NewsletterSignup.stories.tsx

@@ -58,6 +58,15 @@
     },
     onChange: { control: false, action: "onChange" },
     onSubmit: { control: false, action: "onSubmit" },
+    privacyPolicyLink: {
+      control: "text",
+      table: {
+        defaultValue: {
+          summery:
+            "https://www.nypl.org/help/about-nypl/legal-notices/privacy-policy",
+        },
+      },
+    },
     title: {
       control: "text",
       table: {
@@ -106,6 +115,8 @@
       event.preventDefault();
       action("onSubmit")(event.target[0].value);
     },
+    privacyPolicyLink:
+      "https://www.nypl.org/help/about-nypl/legal-notices/privacy-policy",
     title: undefined,
     valueEmail: undefined,
     view: undefined,
@@ -119,6 +130,7 @@
   },
   render: (args) => <NewsletterSignup {...args} />,
 };
+/* Counter to allow the interactive example to show different states uponn submit*/
 let counter = 0;
 
 function NewsletterSignupOnSubmitExampleComponent() {
@@ -139,7 +151,7 @@
 
   React.useEffect(() => {
     if (counter === 3) counter = 0;
   }, [counter]);
 
   const handleChange = (event) => {
     console.log(`onChange Email Input value: ${event.target.value}`);
@@ -272,3 +284,15 @@
     </VStack>
   ),
 };
+
+/* To fix focus issue where the page focuses on the last NewsletterSignup 
+component example */
+const setFocus = () => {
+  const heading = document.getElementById(
+    "anchor--components-form-elements-newslettersignup--with-controls"
+  );
+  heading.focus();
+  heading.scrollIntoView({ behavior: "smooth" });
+};
+
+setTimeout(setFocus, 1000);

src/components/NewsletterSignup/NewsletterSignup.tsx

@@ -81,7 +81,7 @@ export const NewsletterSignup = chakra(
         formHelperText,
         id,
         isInvalidEmail = false,
-        newsletterSignupType = "whatsOn",
+        newsletterSignupType = "blogs",
         onChange,
         onSubmit,
         privacyPolicyLink = "https://www.nypl.org/help/about-nypl/legal-notices/privacy-policy",
@@ -114,10 +114,10 @@ export const NewsletterSignup = chakra(
           {...rest}
         >
           <VStack __css={styles.pitch} alignItems="flex-start">
-            {title && <Heading level="h3" text={title} margin="unset" />}
+            {title && <Heading level="h3" text={title} /*margin="unset"*/ />}
             {descriptionText ? (
               typeof descriptionText === "string" ? (
-                <Text margin="unset">{descriptionText}</Text>
+                <Text /*margin="unset"*/>{descriptionText}</Text>
               ) : (
                 descriptionText
               )
@@ -126,7 +126,8 @@ export const NewsletterSignup = chakra(
             <Link
               href={privacyPolicyLink}
               type="external"
-              margin="unset"
+              // margin="unset"
+              isUnderlined={false}
               __css={styles.privacy}
             >
               Privacy Policy
@@ -208,7 +209,6 @@ export const NewsletterSignup = chakra(
                     name="errorFilled"
                     size="large"
                   />
-                  {/* This text is boilerplate and not meant to be customized. */}
                   <Text
                     color="ui.error.primary"
                     fontSize="xl"