Add data insights newsletter

packages/@ourworldindata/components/src/Button/Button.tsx

@@ -17,7 +17,7 @@ type WithHrefProps = {
 }
 
 type WithOnClickProps = {
-    onClick: () => void
+    onClick?: () => void
     href?: never
 }
 

packages/@ourworldindata/components/src/TextInput.scss

@@ -0,0 +1,17 @@
+.text-input {
+    @include body-3-medium;
+    padding: 8px 16px;
+    color: $blue-90;
+    border: 1px solid $blue-20;
+    border-radius: 0;
+    height: 40px;
+
+    &:focus {
+        outline: none;
+        border: 1px solid $blue-40;
+    }
+
+    &::placeholder {
+        color: $blue-40;
+    }
+}

packages/@ourworldindata/components/src/TextInput.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { forwardRef } from "react"
+import cn from "classnames"
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    className?: string
+}
+
+export const TextInput = forwardRef<HTMLInputElement, InputProps>(
+    function Input({ className, ...props }: InputProps, ref) {
+        return (
+            <input
+                className={cn("text-input", className)}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)

packages/@ourworldindata/components/src/index.ts

@@ -34,6 +34,7 @@ export { IndicatorProcessing } from "./IndicatorProcessing/IndicatorProcessing.j
 
 export { Checkbox } from "./Checkbox.js"
 export { IndicatorSources } from "./IndicatorSources/IndicatorSources.js"
+export { TextInput } from "./TextInput.js"
 
 export {
     CodeSnippet,

packages/@ourworldindata/components/src/styles/typography.scss

@@ -418,3 +418,15 @@ body {
 .label-2-medium {
     @include label-2-medium;
 }
+
+@mixin note-1-medium {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    line-height: 1.33;
+}
+
+.note-1-medium {
+    @include note-1-medium;
+}

packages/@ourworldindata/core-table/src/CoreTableColumns.test.ts

@@ -19,7 +19,7 @@ describe(ColumnTypeNames.Quarter, () => {
 
     it("should parse and format values correctly", () => {
         const testValues = [
-            // Input string, parsed value, formatted output string
+            // TextInput string, parsed value, formatted output string
             ["2020-Q3", 8082, "Q3/2020"],
             ["2000-Q1", 8000, "Q1/2000"],
             ["02000-Q1", 8000, "Q1/2000"],

packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx

@@ -326,7 +326,7 @@ export class EntityPicker extends React.Component<{
         switch (event.key) {
             case "Enter":
                 if (event.keyCode === 229) {
-                    // ignore the keydown event from an Input Method Editor(IME)
+                    // ignore the keydown event from an TextInput Method Editor(IME)
                     // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
                     break
                 }

site/DataInsightsIndexPageContent.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import cx from "classnames"
 import ReactDOM from "react-dom"
 import {
@@ -16,6 +16,7 @@ import { DataInsightsIndexPageProps } from "./DataInsightsIndexPage.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"
 import { DebugProvider } from "./gdocs/DebugContext.js"
+import DataInsightsNewsletterBanner from "./DataInsightsNewsletterBanner.js"
 
 const Pagination = (props: { pageNumber: number; totalPageCount: number }) => {
     const { pageNumber, totalPageCount } = props
@@ -141,6 +142,7 @@ export const DataInsightsIndexPageContent = (
                     totalPageCount={props.totalPageCount}
                     pageNumber={props.pageNumber}
                 />
+                <DataInsightsNewsletterBanner />
             </AttachmentsContext.Provider>
         </DocumentContext.Provider>
     )

site/DataInsightsNewsletterBanner.scss

@@ -0,0 +1,18 @@
+.data-insights-newsletter-banner {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+    transition: transform 0.3s ease-out;
+    opacity: 0;
+    pointer-events: none;
+    background-color: $accent-pale-blue;
+    z-index: 1000;
+
+    &--visible {
+        transform: translateY(0);
+        opacity: 1;
+        pointer-events: auto;
+    }
+}

site/DataInsightsNewsletterBanner.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { useState, useEffect } from "react"
+import cx from "classnames"
+import DataInsightsNewsletter from "./gdocs/components/DataInsightsNewsletter.js"
+
+export default function DataInsightsNewsletterBanner() {
+    const [isVisible, setIsVisible] = useState(false)
+
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            setIsVisible(true)
+        }, 3000)
+        return () => clearTimeout(timeoutId)
+    }, [])
+
+    return (
+        <DataInsightsNewsletter
+            className={cx("data-insights-newsletter-banner", {
+                "data-insights-newsletter-banner--visible": isVisible,
+            })}
+            onClose={() => setIsVisible(false)}
+        />
+    )
+}

site/NewsletterSubscription.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react"
 import { faTimes, faEnvelopeOpenText } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { SiteAnalytics } from "./SiteAnalytics.js"
+import { TextInput } from "@ourworldindata/components"
 
 const analytics = new SiteAnalytics()
 
@@ -64,14 +65,14 @@ export const NewsletterSubscriptionForm = ({
 }: {
     context?: NewsletterSubscriptionContext
 }) => {
-    const IMMEDIATE = "1"
+    const DATA_INSIGHTS = "16"
     const BIWEEKLY = "2"
-    const idImmediate = `mce-group[85302]-85302-0${
+    const idDataInsights = `mce-group[85302]-85302-0${
         context ? "-" + context : ""
     }`
     const idBiweekly = `mce-group[85302]-85302-1${context ? "-" + context : ""}`
 
-    const [frequencies, setFrequencies] = useState([IMMEDIATE, BIWEEKLY])
+    const [frequencies, setFrequencies] = useState([DATA_INSIGHTS, BIWEEKLY])
     const isSubmittable = frequencies.length !== 0
 
     const updateFrequencies = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -98,17 +99,17 @@ export const NewsletterSubscriptionForm = ({
             <div className="owid-checkbox-block">
                 <input
                     type="checkbox"
-                    value={IMMEDIATE}
-                    name={`group[85302][${IMMEDIATE}]`}
-                    id={idImmediate}
-                    checked={frequencies.includes(IMMEDIATE)}
+                    value={DATA_INSIGHTS}
+                    name={`group[85302][${DATA_INSIGHTS}]`}
+                    id={idDataInsights}
+                    checked={frequencies.includes(DATA_INSIGHTS)}
                     onChange={updateFrequencies}
                 />
-                <label htmlFor={idImmediate}>
-                    <div className="label-title">Immediate updates</div>
+                <label htmlFor={idDataInsights}>
+                    <div className="label-title">Daily Data Insights</div>
                     <div className="label-text">
-                        Receive an email from us whenever we publish new work
-                        (maximum 1 per day).
+                        Receive our bite-sized insights on how the world is
+                        changing, every weekday.
                     </div>
                 </label>
             </div>
@@ -133,15 +134,15 @@ export const NewsletterSubscriptionForm = ({
                 <div className="alert">Please select at least one option.</div>
             )}
             <div className="NewsletterSubscription__email-submit">
-                <input
+                <TextInput
                     placeholder="Your email address"
                     type="email"
                     className="NewsletterSubscription__email"
                     name="EMAIL"
+                    required={true}
                 />
                 <button
                     aria-label="Subscribe to newsletter"
-                    type="submit"
                     disabled={!isSubmittable}
                     onClick={() =>
                         analytics.logSiteClick(
@@ -154,8 +155,8 @@ export const NewsletterSubscriptionForm = ({
                     Subscribe
                 </button>
             </div>
-            {/* This hidden field should not be the last element in the form as long as we use the row-gap mixin 
-            to space elements vertically. When placed as the last element of the form, this hidden element becomes 
+            {/* This hidden field should not be the last element in the form as long as we use the row-gap mixin
+            to space elements vertically. When placed as the last element of the form, this hidden element becomes
             the target of the :last-child selector of the row-gap mixin, when it should be applied to the last visible
             element instead */}
             <input

site/SiteNavigation.tsx

@@ -81,7 +81,7 @@ export const SiteNavigation = ({
         }, 10)
 
         setTimeout(() => {
-            const input = document.querySelector<HTMLElement>(".aa-Input")
+            const input = document.querySelector<HTMLElement>(".aa-TextInput")
             if (input) {
                 input.focus()
                 input.setAttribute("required", "true")

site/css/newsletter-subscription.scss

@@ -33,16 +33,8 @@
     }
 
     .NewsletterSubscription__email {
-        border: 1px solid $blue-20;
-        border-radius: 0;
-        height: inherit;
-        padding: 0 16px;
         flex: 1;
         width: 100%;
-        &::placeholder {
-            @include body-3-medium;
-            color: $blue-40;
-        }
     }
 
     .NewsletterSubscription__submit {