NTP: Add badge to omnibar popover (#1956)

* Update omnibar popover to style "New" as a badge

* Update localised strings

* Update tests to accomodate NEW badge

* Update Russian localization badge text

Author: noisysocks

special-pages/pages/new-tab/app/components/Popover.js

@@ -11,10 +11,11 @@ import styles from './Popover.module.css';
 /**
  * @param {object} props
  * @param {string} props.title
+ * @param {string} [props.badge]
  * @param {() => void} props.onClose
  * @param {import('preact').ComponentChildren} props.children
  */
-export function Popover({ title, onClose, children }) {
+export function Popover({ title, badge, onClose, children }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const titleId = useId();
     const descriptionId = useId();
@@ -46,8 +47,9 @@ export function Popover({ title, onClose, children }) {
                 <button class={styles.closeButton} onClick={onClose} aria-label={t('ntp_popover_close_button')}>
                     <Cross />
                 </button>
-                <h3 id={titleId} class={styles.title}>
-                    {title}
+                <h3 id={titleId} class={styles.heading}>
+                    {badge && <span class={styles.badge}>{badge}</span>}
+                    <span class={styles.title}>{title}</span>
                 </h3>
                 <p id={descriptionId} class={styles.description}>
                     {children}

special-pages/pages/new-tab/app/components/Popover.module.css

@@ -46,6 +46,24 @@
     }
 }
 
+.heading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-1);
+}
+
+.badge {
+    background: var(--color-yellow-60);
+    border-radius: var(--border-radius-xs);
+    color: var(--color-black);
+    font-size: 11.5px;
+    font-weight: 600;
+    line-height: var(--sp-4);
+    padding: 0 var(--sp-2);
+    text-transform: uppercase;
+    width: fit-content;
+}
+
 .title {
     font-size: var(--title-3-em-font-size);
     font-weight: var(--title-3-em-font-weight);

special-pages/pages/new-tab/app/omnibar/components/Omnibar.js

@@ -88,7 +88,11 @@ export function Omnibar({ mode, setMode, enableAi, showCustomizePopover, tabId }
                 <div class={styles.tabSwitcherContainer}>
                     <TabSwitcher mode={mode} onChange={handleChangeMode} />
                     {showCustomizePopover && (
-                        <Popover title={t('omnibar_customizePopoverTitle')} onClose={handleCloseCustomizePopover}>
+                        <Popover
+                            title={t('omnibar_customizePopoverTitle')}
+                            badge={t('omnibar_customizePopoverBadge')}
+                            onClose={handleCloseCustomizePopover}
+                        >
                             <Trans
                                 str={t('omnibar_customizePopoverDescription')}
                                 values={{

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.spec.js

@@ -1190,7 +1190,8 @@ test.describe('omnibar widget', () => {
         await omnibar.ready();
 
         await expect(omnibar.popover()).toBeVisible();
-        await expect(omnibar.popover()).toHaveText(/New! Toggle between search and AI chat/);
+        await expect(omnibar.popover()).toHaveText(/New/);
+        await expect(omnibar.popover()).toHaveText(/Toggle between search and AI chat/);
         await expect(omnibar.popover()).toHaveText(/Either way, your info stays private/);
     });
 

special-pages/pages/new-tab/app/omnibar/strings.json

@@ -60,9 +60,13 @@
     "description": "Badge text shown next to open tab suggestions."
   },
   "omnibar_customizePopoverTitle": {
-    "title": "New! Toggle between search and AI chat",
+    "title": "Toggle between search and AI chat",
     "description": "Title for the popover that introduces the search/AI toggle feature."
   },
+  "omnibar_customizePopoverBadge": {
+    "title": "New",
+    "description": "Badge text for the popover that introduces the search/AI toggle feature."
+  },
   "omnibar_customizePopoverDescription": {
     "title": "Either way, your info stays private.<br />Don't want this? <button>Customize</button>",
     "description": "Description message in the popover including privacy statement and customize option."

special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-customize-popover-integration-darwin.png

@@ -28,6 +28,10 @@
     "title" : "Neuen Tab anpassen",
     "note" : "Heading text describing that there's a list of toggles for customizing the page layout."
   },
+  "ntp_popover_close_button" : {
+    "title" : "Schließen",
+    "note" : "Button that closes the current popover."
+  },
   "updateNotification_updated_version" : {
     "title" : "Browser auf Version {version} aktualisiert.",
     "note" : "Text to indicate which new version was updated. `{version}` will be formatted like `1.22.0`"
@@ -176,6 +180,26 @@
     "title" : "{url} besuchen",
     "description" : "Text placed after suggestions that will open a webpage."
   },
+  "omnibar_askDuckAiSuffix" : {
+    "title" : "Frag Duck.ai",
+    "description" : "Text placed after aiChat suggestions that will submit a chat query."
+  },
+  "omnibar_switchToTab" : {
+    "title" : "Zu Tab wechseln",
+    "description" : "Badge text shown next to open tab suggestions."
+  },
+  "omnibar_customizePopoverTitle" : {
+    "title" : "Wechseln zwischen Suche und KI-Chat",
+    "description" : "Title for the popover that introduces the search/AI toggle feature."
+  },
+  "omnibar_customizePopoverBadge" : {
+    "title" : "Neu",
+    "description" : "Badge text for the popover that introduces the search/AI toggle feature."
+  },
+  "omnibar_customizePopoverDescription" : {
+    "title" : "Deine Daten bleiben auf jeden Fall privat.<br />Du möchtest das nicht? <button>Anpassen</button>",
+    "description" : "Description message in the popover including privacy statement and customize option."
+  },
   "nextSteps_sectionTitle" : {
     "title" : "Nächste Schritte",
     "note" : "Text that goes in the Next Steps bubble above the first card"

special-pages/pages/new-tab/public/locales/de/new-tab.json

@@ -190,9 +190,13 @@
     "description": "Badge text shown next to open tab suggestions."
   },
   "omnibar_customizePopoverTitle": {
-    "title": "New! Toggle between search and AI chat",
+    "title": "Toggle between search and AI chat",
     "description": "Title for the popover that introduces the search/AI toggle feature."
   },
+  "omnibar_customizePopoverBadge": {
+    "title": "New",
+    "description": "Badge text for the popover that introduces the search/AI toggle feature."
+  },
   "omnibar_customizePopoverDescription": {
     "title": "Either way, your info stays private.<br />Don't want this? <button>Customize</button>",
     "description": "Description message in the popover including privacy statement and customize option."

special-pages/pages/new-tab/public/locales/en/new-tab.json

@@ -28,6 +28,10 @@
     "title" : "Personalizar página Nueva pestaña",
     "note" : "Heading text describing that there's a list of toggles for customizing the page layout."
   },
+  "ntp_popover_close_button" : {
+    "title" : "Cerrar",
+    "note" : "Button that closes the current popover."
+  },
   "updateNotification_updated_version" : {
     "title" : "Navegador actualizado a la versión {version}.",
     "note" : "Text to indicate which new version was updated. `{version}` will be formatted like `1.22.0`"
@@ -176,6 +180,26 @@
     "title" : "Visita {url}",
     "description" : "Text placed after suggestions that will open a webpage."
   },
+  "omnibar_askDuckAiSuffix" : {
+    "title" : "Pregúntale a Duck.ai",
+    "description" : "Text placed after aiChat suggestions that will submit a chat query."
+  },
+  "omnibar_switchToTab" : {
+    "title" : "Cambiar a Pestaña",
+    "description" : "Badge text shown next to open tab suggestions."
+  },
+  "omnibar_customizePopoverTitle" : {
+    "title" : "Alterna entre la búsqueda y el chat de IA",
+    "description" : "Title for the popover that introduces the search/AI toggle feature."
+  },
+  "omnibar_customizePopoverBadge" : {
+    "title" : "Nuevo",
+    "description" : "Badge text for the popover that introduces the search/AI toggle feature."
+  },
+  "omnibar_customizePopoverDescription" : {
+    "title" : "De cualquier manera, tu información sigue siendo privada.¿No es lo que querías? <button>Personalizar</button>",
+    "description" : "Description message in the popover including privacy statement and customize option."
+  },
   "nextSteps_sectionTitle" : {
     "title" : "Próximos pasos",
     "note" : "Text that goes in the Next Steps bubble above the first card"

special-pages/pages/new-tab/public/locales/es/new-tab.json

@@ -28,6 +28,10 @@
     "title" : "Personnaliser la nouvelle page d'onglet",
     "note" : "Heading text describing that there's a list of toggles for customizing the page layout."
   },
+  "ntp_popover_close_button" : {
+    "title" : "Fermer",
+    "note" : "Button that closes the current popover."
+  },
   "updateNotification_updated_version" : {
     "title" : "Mise à jour : le navigateur est passé à la version {version}.",
     "note" : "Text to indicate which new version was updated. `{version}` will be formatted like `1.22.0`"
@@ -176,6 +180,26 @@
     "title" : "Visiter {url}",
     "description" : "Text placed after suggestions that will open a webpage."
   },
+  "omnibar_askDuckAiSuffix" : {
+    "title" : "Demandez à Duck.ai",
+    "description" : "Text placed after aiChat suggestions that will submit a chat query."
+  },
+  "omnibar_switchToTab" : {
+    "title" : "Passer à l'onglet",
+    "description" : "Badge text shown next to open tab suggestions."
+  },
+  "omnibar_customizePopoverTitle" : {
+    "title" : "Basculer entre la recherche et le chat IA",
+    "description" : "Title for the popover that introduces the search/AI toggle feature."
+  },
+  "omnibar_customizePopoverBadge" : {
+    "title" : "Nouveau",
+    "description" : "Badge text for the popover that introduces the search/AI toggle feature."
+  },
+  "omnibar_customizePopoverDescription" : {
+    "title" : "Dans tous les cas, vos informations restent privées.<br />Ce n'est pas ce que vous souhaitez&nbsp;? <button>Personnaliser</button>",
+    "description" : "Description message in the popover including privacy statement and customize option."
+  },
   "nextSteps_sectionTitle" : {
     "title" : "Étapes suivantes",
     "note" : "Text that goes in the Next Steps bubble above the first card"