From fc29ac40e179e0e1df188f6cda3bf1b66df97141 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Tue, 3 Dec 2024 09:53:04 -0700
Subject: [PATCH 01/10] feat: Add confirmation to Mac Next Steps card

---
 .../pages/new-tab/app/components/Icons.js     | 20 ++++++++++++++++
 .../components/NextSteps.module.css           | 17 +++++++++++++
 .../next-steps/components/NextStepsCard.js    | 24 ++++++++++++++++---
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/special-pages/pages/new-tab/app/components/Icons.js b/special-pages/pages/new-tab/app/components/Icons.js
index dd0198ecd..65e46bcf0 100644
--- a/special-pages/pages/new-tab/app/components/Icons.js
+++ b/special-pages/pages/new-tab/app/components/Icons.js
@@ -82,3 +82,23 @@ export function Cross() {
         </svg>
     );
 }
+
+export function CheckColor() {
+    return (
+        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path fill="#4CBA3C" d="M15.5 8a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0" />
+            <path
+                fill="#fff"
+                fill-rule="evenodd"
+                d="M11.844 5.137a.5.5 0 0 1 .019.707l-4.5 4.75a.5.5 0 0 1-.733-.008l-2.5-2.75a.5.5 0 0 1 .74-.672l2.138 2.351 4.129-4.359a.5.5 0 0 1 .707-.019"
+                clip-rule="evenodd"
+            />
+            <path
+                fill="#288419"
+                fill-rule="evenodd"
+                d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8"
+                clip-rule="evenodd"
+            />
+        </svg>
+    );
+}
diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
index 21ca36c21..e6052d2d8 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
@@ -89,6 +89,23 @@
     }
 }
 
+.confirmation {
+    display: flex;
+    align-items: center;
+    transition: all .2s;
+    padding-bottom: var(--sp-1);
+    svg {
+        height: 1rem;
+        width: 1rem;
+        margin-right: var(--sp-2);
+    }
+
+    p {
+        font-weight: 700;
+        font-size: calc(11 * var(--px-in-rem));
+    }
+}
+
 .dismissBtn {
     position: absolute;
     top: 0.5rem;
diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
index 9e8103e48..c9a748e7c 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
@@ -3,6 +3,8 @@ import styles from './NextSteps.module.css';
 import { DismissButton } from '../../components/DismissButton';
 import { variants } from '../nextsteps.data';
 import { useTypedTranslationWith } from '../../types';
+import { CheckColor } from '../../components/Icons';
+import { useState } from 'preact/hooks';
 
 /**
  * @param {object} props
@@ -14,14 +16,30 @@ import { useTypedTranslationWith } from '../../types';
 export function NextStepsCard({ type, dismiss, action }) {
     const { t } = useTypedTranslationWith(/** @type {import("../strings.json")} */ ({}));
     const message = variants[type]?.(t);
+    const [showMacConfirmation, setShowMacConfirmation] = useState(false);
+
+    const handleClick = () => {
+        if (message.id !== 'addAppToDockMac') {
+            return action(message.id);
+        }
+        action(message.id);
+        setShowMacConfirmation(true);
+    };
     return (
         <div class={styles.card}>
             <img src={`./icons/${message.icon}-128.svg`} alt="" class={styles.icon} />
             <h3 class={styles.title}>{message.title}</h3>
             <p class={styles.description}>{message.summary}</p>
-            <button class={styles.btn} onClick={() => action(message.id)}>
-                {message.actionText}
-            </button>
+            {message.id === 'addAppToDockMac' && !!showMacConfirmation ? (
+                <div class={styles.confirmation}>
+                    <CheckColor />
+                    <p>Added to Dock!</p>
+                </div>
+            ) : (
+                <button class={styles.btn} onClick={handleClick}>
+                    {message.actionText}
+                </button>
+            )}
 
             <DismissButton className={styles.dismissBtn} onClick={() => dismiss(message.id)} />
         </div>

From 9bee2eb7ba967976a5c9c38eb1373d580dac07bf Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Tue, 3 Dec 2024 18:35:46 -0700
Subject: [PATCH 02/10] chore: Make the fix better

---
 .../components/NextSteps.module.css           | 26 ++++++++++++++++---
 .../next-steps/components/NextStepsCard.js    | 14 ++++++----
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
index e6052d2d8..3798343b5 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
@@ -48,6 +48,16 @@
     line-height: calc(14 * var(--px-in-rem));
     color: var(--ntp-color-primary);
 
+    &.supressActiveStateForSwitch {
+        opacity: 1;
+        transition: opacity .3s ease-out;
+
+        &:active {
+            background-color: var(--color-black-at-6);
+            opacity: 0;
+        }
+    }
+
     &:hover {
         background-color: var(--color-black-at-6);
         cursor: pointer;
@@ -73,6 +83,13 @@
     }
 
     @media screen and (prefers-color-scheme: dark) {
+        &.supressActiveStateForSwitch {
+            /* outline: 1px solid yellow; */
+            &:active {
+                background-color: var(--color-black-at-9);
+            }
+        }
+
         &:hover:not(:active) {
             background-color: var(--color-black-at-9);
         }
@@ -92,8 +109,11 @@
 .confirmation {
     display: flex;
     align-items: center;
-    transition: all .2s;
-    padding-bottom: var(--sp-1);
+    transition: all .2s ease-in;
+    font-size: calc(11 * var(--px-in-rem));
+    line-height: calc(14 * var(--px-in-rem));
+    padding-bottom: calc(5 * var(--px-in-rem));
+
     svg {
         height: 1rem;
         width: 1rem;
@@ -101,7 +121,7 @@
     }
 
     p {
-        font-weight: 700;
+        font-weight: 600;
         font-size: calc(11 * var(--px-in-rem));
     }
 }
diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
index c9a748e7c..bd6d8a4f7 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
@@ -1,4 +1,6 @@
 import { h } from 'preact';
+import cn from 'classnames';
+
 import styles from './NextSteps.module.css';
 import { DismissButton } from '../../components/DismissButton';
 import { variants } from '../nextsteps.data';
@@ -16,27 +18,29 @@ import { useState } from 'preact/hooks';
 export function NextStepsCard({ type, dismiss, action }) {
     const { t } = useTypedTranslationWith(/** @type {import("../strings.json")} */ ({}));
     const message = variants[type]?.(t);
-    const [showMacConfirmation, setShowMacConfirmation] = useState(false);
+    const [showConfirmation, setShowConfirmation] = useState(false);
+    const hasConfirmationState = message.id === 'addAppToDockMac';
 
     const handleClick = () => {
-        if (message.id !== 'addAppToDockMac') {
+        if (!hasConfirmationState) {
             return action(message.id);
         }
+
         action(message.id);
-        setShowMacConfirmation(true);
+        setShowConfirmation(true);
     };
     return (
         <div class={styles.card}>
             <img src={`./icons/${message.icon}-128.svg`} alt="" class={styles.icon} />
             <h3 class={styles.title}>{message.title}</h3>
             <p class={styles.description}>{message.summary}</p>
-            {message.id === 'addAppToDockMac' && !!showMacConfirmation ? (
+            {hasConfirmationState && !!showConfirmation ? (
                 <div class={styles.confirmation}>
                     <CheckColor />
                     <p>Added to Dock!</p>
                 </div>
             ) : (
-                <button class={styles.btn} onClick={handleClick}>
+                <button class={cn(styles.btn, hasConfirmationState && styles.supressActiveStateForSwitch)} onClick={handleClick}>
                     {message.actionText}
                 </button>
             )}

From 1a590cdee0f12098799d2deb658f6994bb044a83 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Tue, 3 Dec 2024 18:49:10 -0700
Subject: [PATCH 03/10] fix: Text wrap in nextsteps button.

---
 .../new-tab/app/next-steps/components/NextSteps.module.css     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
index 3798343b5..b8bb0cf27 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
@@ -47,6 +47,7 @@
     font-size: calc(11 * var(--px-in-rem));
     line-height: calc(14 * var(--px-in-rem));
     color: var(--ntp-color-primary);
+    text-wrap: wrap; /* needed for some languages */
 
     &.supressActiveStateForSwitch {
         opacity: 1;
@@ -84,7 +85,7 @@
 
     @media screen and (prefers-color-scheme: dark) {
         &.supressActiveStateForSwitch {
-            /* outline: 1px solid yellow; */
+
             &:active {
                 background-color: var(--color-black-at-9);
             }

From 81246e9a181a4f79b07d670b3aba168f09a950a1 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Tue, 3 Dec 2024 19:19:16 -0700
Subject: [PATCH 04/10] chore: Update to use strings for confirm text

---
 .../new-tab/app/next-steps/components/NextStepsCard.js |  2 +-
 .../next-steps/integrations-tests/next-steps.spec.js   | 10 ++++++++++
 .../pages/new-tab/app/next-steps/nextsteps.data.js     |  1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
index bd6d8a4f7..232798ea9 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
@@ -37,7 +37,7 @@ export function NextStepsCard({ type, dismiss, action }) {
             {hasConfirmationState && !!showConfirmation ? (
                 <div class={styles.confirmation}>
                     <CheckColor />
-                    <p>Added to Dock!</p>
+                    <p>{message.confirmationText}</p>
                 </div>
             ) : (
                 <button class={cn(styles.btn, hasConfirmationState && styles.supressActiveStateForSwitch)} onClick={handleClick}>
diff --git a/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js b/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
index 8d677b66c..4abd20a10 100644
--- a/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
+++ b/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
@@ -58,4 +58,14 @@ test.describe('newtab NextSteps cards', () => {
         await page.getByRole('button', { name: 'Try DuckPlayer' }).click();
         await ntp.mocks.waitForCallCount({ method: 'nextSteps_action', count: 1 });
     });
+
+    test('shows a confirmation state', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        await ntp.reducedMotion();
+        await ntp.openPage({ nextSteps: ['addAppToDockMac', 'defaultApp'] });
+        await page.getByRole('button', { name: 'Add to Dock' }).click();
+        await page.pause();
+        await expect(page.getByText('Added to Dock!')).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Add to Dock' })).not.toBeVisible();
+    });
 });
diff --git a/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js b/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js
index c29849147..eabe41889 100644
--- a/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js
+++ b/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js
@@ -50,6 +50,7 @@ export const variants = {
         title: t('nextSteps_addAppDockMac_title'),
         summary: t('nextSteps_addAppDockMac_summary'),
         actionText: t('nextSteps_addAppDockMac_actionText'),
+        confirmationText: t('nextSteps_addAppDockMac_confirmationText'),
     }),
     /** @param {(translationId: keyof enStrings) => string} t */
     pinAppToTaskbarWindows: (t) => ({

From fd2c096e9939a1c867a18cf7ae87c73adb83fe22 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Tue, 3 Dec 2024 19:23:41 -0700
Subject: [PATCH 05/10] chore: ordered the imports

---
 .../new-tab/app/next-steps/components/NextStepsCard.js    | 8 ++++----
 .../new-tab/app/next-steps/components/NextStepsGroup.js   | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
index 232798ea9..8c29359ed 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
@@ -1,12 +1,12 @@
 import { h } from 'preact';
 import cn from 'classnames';
 
-import styles from './NextSteps.module.css';
+import { useState } from 'preact/hooks';
 import { DismissButton } from '../../components/DismissButton';
-import { variants } from '../nextsteps.data';
-import { useTypedTranslationWith } from '../../types';
 import { CheckColor } from '../../components/Icons';
-import { useState } from 'preact/hooks';
+import { useTypedTranslationWith } from '../../types';
+import { variants } from '../nextsteps.data';
+import styles from './NextSteps.module.css';
 
 /**
  * @param {object} props
diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js
index 52b7ba16b..4846d11be 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js
@@ -1,11 +1,11 @@
 import { h } from 'preact';
 import cn from 'classnames';
-import styles from './NextSteps.module.css';
+import { useId } from 'preact/hooks';
+import { ShowHideButton } from '../../components/ShowHideButton';
 import { useTypedTranslationWith } from '../../types';
-import { NextStepsCard } from './NextStepsCard';
 import { otherText } from '../nextsteps.data';
-import { ShowHideButton } from '../../components/ShowHideButton';
-import { useId } from 'preact/hooks';
+import styles from './NextSteps.module.css';
+import { NextStepsCard } from './NextStepsCard';
 
 /**
  * @import enStrings from '../strings.json';

From 86a9ae82b7dab997b40ec3e475ca1919ee502542 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Tue, 3 Dec 2024 19:24:42 -0700
Subject: [PATCH 06/10] fix: remove pause from the test

---
 .../app/next-steps/integrations-tests/next-steps.spec.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js b/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
index 4abd20a10..8719a0ba3 100644
--- a/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
+++ b/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
@@ -64,7 +64,7 @@ test.describe('newtab NextSteps cards', () => {
         await ntp.reducedMotion();
         await ntp.openPage({ nextSteps: ['addAppToDockMac', 'defaultApp'] });
         await page.getByRole('button', { name: 'Add to Dock' }).click();
-        await page.pause();
+
         await expect(page.getByText('Added to Dock!')).toBeVisible();
         await expect(page.getByRole('button', { name: 'Add to Dock' })).not.toBeVisible();
     });

From 7f7bcf523dd8d3f2abd9b8175a6b2a909b8a42a0 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Wed, 11 Dec 2024 11:38:55 -0700
Subject: [PATCH 07/10] chore: set max-width to confirmation p tage

---
 .../new-tab/app/next-steps/components/NextSteps.module.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
index b8bb0cf27..6cbc7be4d 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
@@ -113,15 +113,16 @@
     transition: all .2s ease-in;
     font-size: calc(11 * var(--px-in-rem));
     line-height: calc(14 * var(--px-in-rem));
-    padding-bottom: calc(5 * var(--px-in-rem));
-
+    min-height: 26px;
+    
     svg {
         height: 1rem;
         width: 1rem;
         margin-right: var(--sp-2);
     }
-
+    
     p {
+        max-width: 8rem;
         font-weight: 600;
         font-size: calc(11 * var(--px-in-rem));
     }

From 9e2c348bbcd98451950e67c26e296d9d2665c924 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Thu, 12 Dec 2024 10:44:37 -0700
Subject: [PATCH 08/10] fix: Confirmation text styling

---
 .../new-tab/app/next-steps/components/NextSteps.module.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
index 6cbc7be4d..3b8bdd0ce 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
@@ -111,8 +111,6 @@
     display: flex;
     align-items: center;
     transition: all .2s ease-in;
-    font-size: calc(11 * var(--px-in-rem));
-    line-height: calc(14 * var(--px-in-rem));
     min-height: 26px;
     
     svg {
@@ -122,9 +120,10 @@
     }
     
     p {
-        max-width: 8rem;
-        font-weight: 600;
         font-size: calc(11 * var(--px-in-rem));
+        line-height: calc(14 * var(--px-in-rem));
+        font-weight: 600;
+        max-width: 8rem;
     }
 }
 

From 97525842e2af33c29d8563b2a2b15facf2bacaf4 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Thu, 12 Dec 2024 12:29:42 -0700
Subject: [PATCH 09/10] chore: Fix local var to a data.js solution

---
 .../app/next-steps/components/NextSteps.module.css       | 6 +++---
 .../new-tab/app/next-steps/components/NextStepsCard.js   | 9 ++++++---
 .../pages/new-tab/app/next-steps/nextsteps.data.js       | 6 ++++++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
index 3b8bdd0ce..dfbe3d23d 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
@@ -49,7 +49,8 @@
     color: var(--ntp-color-primary);
     text-wrap: wrap; /* needed for some languages */
 
-    &.supressActiveStateForSwitch {
+    /* the active state created an awkward flash, adding transition out */
+    &.supressActiveStateForSwitchToConfirmationText {
         opacity: 1;
         transition: opacity .3s ease-out;
 
@@ -84,8 +85,7 @@
     }
 
     @media screen and (prefers-color-scheme: dark) {
-        &.supressActiveStateForSwitch {
-
+        &.supressActiveStateForSwitchToConfirmationText {
             &:active {
                 background-color: var(--color-black-at-9);
             }
diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
index 8c29359ed..c844715a8 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
@@ -5,7 +5,7 @@ import { useState } from 'preact/hooks';
 import { DismissButton } from '../../components/DismissButton';
 import { CheckColor } from '../../components/Icons';
 import { useTypedTranslationWith } from '../../types';
-import { variants } from '../nextsteps.data';
+import { variants, additionalCardStates } from '../nextsteps.data';
 import styles from './NextSteps.module.css';
 
 /**
@@ -19,7 +19,7 @@ export function NextStepsCard({ type, dismiss, action }) {
     const { t } = useTypedTranslationWith(/** @type {import("../strings.json")} */ ({}));
     const message = variants[type]?.(t);
     const [showConfirmation, setShowConfirmation] = useState(false);
-    const hasConfirmationState = message.id === 'addAppToDockMac';
+    const hasConfirmationState = additionalCardStates.hasConfirmationText(message.id);
 
     const handleClick = () => {
         if (!hasConfirmationState) {
@@ -40,7 +40,10 @@ export function NextStepsCard({ type, dismiss, action }) {
                     <p>{message.confirmationText}</p>
                 </div>
             ) : (
-                <button class={cn(styles.btn, hasConfirmationState && styles.supressActiveStateForSwitch)} onClick={handleClick}>
+                <button
+                    class={cn(styles.btn, hasConfirmationState && styles.supressActiveStateForSwitchToConfirmationText)}
+                    onClick={handleClick}
+                >
                     {message.actionText}
                 </button>
             )}
diff --git a/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js b/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js
index eabe41889..23e592897 100644
--- a/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js
+++ b/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js
@@ -70,3 +70,9 @@ export const otherText = {
     /** @param {(translationId: keyof enStrings) => string} t */
     nextSteps_sectionTitle: (t) => t('nextSteps_sectionTitle'),
 };
+
+const cardsWithConfirmationText = ['addAppToDockMac'];
+
+export const additionalCardStates = {
+    hasConfirmationText: (/** @type {keyof variants} */ variantId) => cardsWithConfirmationText.includes(variantId),
+};

From 8b37974cbefa3d6d8e0c15839606296e71c902d6 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Thu, 12 Dec 2024 12:51:17 -0700
Subject: [PATCH 10/10] fix: TS nest

---
 special-pages/pages/new-tab/app/next-steps/nextsteps.data.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js b/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js
index 23e592897..0455c98f8 100644
--- a/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js
+++ b/special-pages/pages/new-tab/app/next-steps/nextsteps.data.js
@@ -71,6 +71,7 @@ export const otherText = {
     nextSteps_sectionTitle: (t) => t('nextSteps_sectionTitle'),
 };
 
+/** @type {string[]} cardsWithConfirmationText */
 const cardsWithConfirmationText = ['addAppToDockMac'];
 
 export const additionalCardStates = {