enhance(language-menu): explain "Remember language" setting with link

mdn · Sep 25, 2024 · 2402f28 · 2402f28
1 parent a870a84
commit 2402f28
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/client/src/ui/organisms/article-actions/language-menu/index.scss b/client/src/ui/organisms/article-actions/language-menu/index.scss
@@ -31,6 +31,12 @@
         background-color: unset;
       }
 
+      .group {
+        align-items: center;
+        display: flex;
+        gap: 0.5em;
+      }
+
       .switch {
         display: flex;
       }
@@ -39,9 +45,17 @@
         font-style: italic;
         font-variation-settings: "slnt" -10;
         margin-top: 0.5em;
+      }
+
+      .icon {
+        margin-right: unset;
+      }
+
+      a[href] .icon-question-mark {
+        background-color: var(--icon-secondary);
 
-        .icon {
-          margin-right: unset;
+        &:hover {
+          background-color: var(--text-link);
         }
       }
     }

diff --git a/client/src/ui/organisms/article-actions/language-menu/index.tsx b/client/src/ui/organisms/article-actions/language-menu/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-target-blank */
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
@@ -17,6 +18,8 @@ import {
 } from "../../../../utils";
 import { GleanThumbs } from "../../../atoms/thumbs";
 import { Switch } from "../../../atoms/switch";
+import { Icon } from "../../../atoms/icon";
+import { Tooltip } from "../../../../observatory/tooltip";
 
 // This needs to match what's set in 'libs/constants.js' on the server/builder!
 const PREFERRED_LOCALE_COOKIE_NAME = "preferredlocale";
@@ -154,15 +157,26 @@ function LocaleRedirectSetting() {
     }
   }
 
+  // eslint-disable react/jsx-no-target-blank
   return (
     <form className="submenu-item locale-redirect-setting">
-      <Switch
-        name="locale-redirect"
-        checked={locale === preferredLocale}
-        toggle={toggle}
-      >
-        Remember language
-      </Switch>
+      <div className="group">
+        <Switch
+          name="locale-redirect"
+          checked={locale === preferredLocale}
+          toggle={toggle}
+        >
+          Remember language
+        </Switch>
+        <a
+          href="https://github.com/orgs/mdn/discussions"
+          rel="external noopener"
+          target="_blank"
+          title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"
+        >
+          <Icon name="question-mark" />
+        </a>
+      </div>
       <GleanThumbs feature="locale-redirect" question="Is this useful?" />
     </form>
   );