From 7d141cc2bf2676631f3efa9c815a1fce27bb5d0c Mon Sep 17 00:00:00 2001
From: Isa Stettler <stettlerisabelle@gmail.com>
Date: Tue, 10 Oct 2023 06:47:15 -0400
Subject: [PATCH] fix "blogs" border color, add test for html props passed

---
 .../NewsletterSignup.test.tsx                 | 30 +++++++++++++++++--
 src/theme/components/newsletterSignup.ts      | 15 ++++++++--
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/components/NewsletterSignup/NewsletterSignup.test.tsx b/src/components/NewsletterSignup/NewsletterSignup.test.tsx
index 3c47efd561..8a2a8e6fbc 100644
--- a/src/components/NewsletterSignup/NewsletterSignup.test.tsx
+++ b/src/components/NewsletterSignup/NewsletterSignup.test.tsx
@@ -106,7 +106,6 @@ describe("NewsletterSignup Accessibility", () => {
 
 describe("NewsletterSignup Unit Tests", () => {
   /** Notes
-   *
    * The newsletterSignupType tests are covered in the snapshot tests below.
    */
 
@@ -130,7 +129,7 @@ describe("NewsletterSignup Unit Tests", () => {
     expect(screen.getByText(/Privacy Policy/i)).toBeInTheDocument();
   });
 
-  it("Renders the Optional descriptionText and formHelperText Values for the Form", () => {
+  it("Renders the Optional descriptionText and formHelperText String Values for the Form", () => {
     const testNewsletterSignup = (
       <NewsletterSignup
         descriptionText="Do not send cash."
@@ -147,6 +146,33 @@ describe("NewsletterSignup Unit Tests", () => {
     expect(screen.getByText(/Just trying to help/i)).toBeInTheDocument();
   });
 
+  it("Renders the Optional descriptionText and formHelperText HTML Values for the Form", () => {
+    const testNewsletterSignup = (
+      <NewsletterSignup
+        descriptionText={
+          <div>
+            Do not send <a href="https://chias.website/">cash</a>.
+          </div>
+        }
+        formHelperText={
+          <div data-testId="helper-text-container">
+            Just <strong data-testId="emphasized">trying</strong> to help
+          </div>
+        }
+        onSubmit={onSubmit}
+        onChange={onChange}
+        valueEmail={valueEmail}
+        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."
+      />
+    );
+    render(testNewsletterSignup);
+    const ancestor = screen.getByTestId("helper-text-container");
+    const descendant = screen.getByTestId("emphasized");
+    expect(screen.getByRole("link", { name: "cash" })).toBeInTheDocument();
+    expect(ancestor).toContainElement(descendant);
+  });
+
   it("calls the onChange on user type event", () => {
     render(
       <NewsletterSignup
diff --git a/src/theme/components/newsletterSignup.ts b/src/theme/components/newsletterSignup.ts
index a7caed4913..137de31cc0 100644
--- a/src/theme/components/newsletterSignup.ts
+++ b/src/theme/components/newsletterSignup.ts
@@ -16,17 +16,26 @@ const NewsLetterSignup = {
       bg: "ui.bg.default",
       borderWidth: { base: ".75rem 0px 0px 0px", md: "0px 0px 0px .75rem" },
       borderLeftColor: {
-        md: getSectionColors(newsletterSignupType, "primary"),
+        md: getSectionColors(
+          newsletterSignupType,
+          newsletterSignupType === "blogs" ? "secondary" : "primary"
+        ),
       },
       borderTopColor: {
-        base: getSectionColors(newsletterSignupType, "primary"),
+        base: getSectionColors(
+          newsletterSignupType,
+          newsletterSignupType === "blogs" ? "secondary" : "primary"
+        ),
         md: "ui.border.default",
       },
       _dark: {
         bg: "dark.ui.bg.default",
         borderTopColor: { md: "dark.ui.border.default" },
         borderLeftColor: {
-          md: getSectionColors(newsletterSignupType, "primary"),
+          md: getSectionColors(
+            newsletterSignupType,
+            newsletterSignupType === "blogs" ? "secondary" : "primary"
+          ),
         },
       },
       padding: {