Merge pull request #349 from thefrontside/fix-newsletter

🪳 Fix newsletter CTA being broken

.gitignore

@@ -1,2 +1,3 @@
 # Local Netlify folder
 .netlify
+legacy/node_modules

legacy/src/components/cta-contact.tsx

@@ -10,6 +10,7 @@ import {
 import { ctaSubmittedBox } from '../styles/page.css';
 
 export default function ContactCTA({
+  formId = "n5Hz8E9N",
   submitted,
   setSubmitted,
   eventId,
@@ -48,7 +49,7 @@ export default function ContactCTA({
     <>
       {!submitted ? (
         <PopupButton
-          id="n5Hz8E9N"
+          id={formId}
           hidden={{ topic }}
           className={className}
           onSubmit={onSubmit}

legacy/src/components/follow-podcast/podcast-cta.css.ts

@@ -1,8 +1,17 @@
 import { style, styleVariants } from "@vanilla-extract/css";
-import { baseButton, paginationButton } from "../../styles/buttons.css";
-import { inputText } from "../../styles/inputs.css";
-import vars, { darkThemeQuery } from '../../styles/frontside-theme.css';
-import { newsletterForm } from "../subscribe-form/subscribe-forms.css";
+import { baseButton } from "../../styles/buttons.css";
+import vars from '../../styles/frontside-theme.css';
+
+const newsletterForm = style([{
+  display: 'block',
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  marginTop: vars.space.lg,
+  marginBottom: vars.space.xl,
+  maxWidth: '37rem',
+  paddingRight: vars.space.sm,
+  paddingLeft: vars.space.sm,
+}]);
 
 
 export const ctaWrapper = style([newsletterForm, {

legacy/src/components/follow-podcast/podcast-cta.tsx

@@ -3,7 +3,6 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import ApplePodcastsBadge from '../../img/apple-podcasts-badge.svg';
 import { inputText } from '../../styles/inputs.css';
 import { headingLg, textGradientPinkPurple } from '../../styles/typography.css';
-import { newsletterForm } from '../subscribe-form/subscribe-forms.css';
 import {
   appleLink,
   copiedMark,

legacy/src/components/newsletter-subscribe-cta.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import ContactCTA from "./cta-contact";
+import { signupButton, newsletterSubscribeCTA } from "./newsletter-subscribe-cta/newsletter-subscribe-cta.css";
+import {
+  textGradientSkyblueGreen,
+  heading3Xl,
+  textGreen,
+  textLg,
+  featureHeading,
+  headingXl,
+  text2Xl,
+  arrowTextWhite,
+  textGradientGreenSkyblue,
+  textGradientPinkPurple,
+  textXl,
+  arrowTextGreen,
+  headingLg,
+} from '../styles/typography.css';
+import {
+  actionButton,
+  actionButtonGreen,
+  openmicButton,
+} from '../styles/buttons.css';
+
+export interface NewsletterCTAOptions {
+  trackingLocationId?: string;
+}
+
+export function NewsletterSubscribeCTA(options: NewsletterCTAOptions) {
+  const [submitted, setSubmitted] = useState(false);
+
+  return (
+    <hgroup className={newsletterSubscribeCTA}>
+      <h2 className={headingLg}>
+        Subscribe to our{' '}
+        <strong className={textGradientPinkPurple}>DX&nbsp;newsletter</strong>
+      </h2>
+
+      <p>
+        Receive a monthly curation of resources about testing, design systems,
+        CI/CD, and anything that makes developing at scale easier.
+      </p>
+      <div>
+        <ContactCTA
+          formId="EMqW5BiF"
+          submitted={submitted}
+          setSubmitted={setSubmitted}
+          label="Sign Up"
+          topic="newsletter"
+          eventId="cta-newsletter"
+          ctaId={options.trackingLocationId}
+          className={signupButton}
+          thanksClassName={textGradientGreenSkyblue}
+        />
+      </div>
+    </hgroup>
+  );
+}

legacy/src/components/newsletter-subscribe-cta/newsletter-subscribe-cta.css.ts

@@ -0,0 +1,30 @@
+import { style } from '@vanilla-extract/css';
+import vars  from '../../styles/frontside-theme.css';
+import {
+  actionButton,
+  actionButtonGreen,
+  openmicButton,
+} from '../../styles/buttons.css';
+
+export const newsletterSubscribeCTA = style({
+  marginTop: vars.space.md,
+  marginBottom: vars.space.xl,
+  '@media': {
+    'only screen and (min-width: 420px)': {
+      marginLeft: vars.space.xl,
+      marginRight: vars.space.xl,
+    },
+    'only screen and (min-width: 992px)': {
+      marginLeft: vars.space['2xl'],
+      marginRight: vars.space['2xl'],
+    },
+    'only screen and (min-width: 1200px)': {
+      marginLeft: vars.space['3xl'],
+      marginRight: vars.space['3xl'],
+    },
+  },
+});
+
+export const signupButton = style([ actionButton, {
+  width: '100%',
+}]);

legacy/src/components/posts-list/posts-list.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BlogPreview from '../blog-preview';
-import SubscribeForm from '../subscribe-form/subscribe-form';
+import { NewsletterSubscribeCTA } from '../newsletter-subscribe-cta';
 
 import { entriesList, entriesListEntry } from '../../styles/page.css';
 
@@ -26,7 +26,7 @@ export default function PostsList({
             <li className={entriesListEntry}>
               <BlogPreview post={post} layout={(includeFeatured && i === 0) ? 'featured': 'sided'} />
             </li>
-            {(includeFeatured && i === 0 || !includeFeatured && i === 2) ? <SubscribeForm /> : <></>}
+            {(includeFeatured && i === 0 || !includeFeatured && i === 2) ? <NewsletterSubscribeCTA trackingLocationId="blog-index" /> : <></>}
           </React.Fragment>
         ))}
       </ul>

legacy/src/styles/frontside-theme.css.ts

@@ -59,7 +59,8 @@ const frontsideTheme = createGlobalTheme(':root', {
     xl: '4.091rem',
     '2xl': '7.455rem',
     '3xl': '12.091rem',
-    '4xl': '17.136rem'
+    '4xl': '17.136rem',
+    '5xl': '23rem',
   },
   letterSpacing: {
     xs: '0.025rem',