feat: Add confirmation to Mac Next Steps card

duckduckgo · Dec 3, 2024 · 103484e · 103484e
1 parent 8760e79
commit 103484e
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>