enhance(language-menu): explain "Remember language" + link announceme…

…nt (#11865)
mdn · Sep 25, 2024 · ca0300d · ca0300d
1 parent 7fbcd36
commit ca0300d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/client/src/ui/atoms/icon/index.scss b/client/src/ui/atoms/icon/index.scss
@@ -7,11 +7,11 @@ $icons: "add-filled", "add", "altname", "bell", "bell-filled", "bell-ring",
   "mastodon", "menu-filled", "menu", "mobile", "more", "theme-dark", "new-topic",
   "next", "no", "nodejs", "nonstandard", "note-info", "note-warning",
   "note-deprecated", "opera", "padlock", "partial", "play", "prefix", "preview",
-  "previous", "queue", "queued", "quote", "return", "safari", "samsunginternet",
-  "search", "send", "server", "sidebar", "simple-firefox", "small-arrow",
-  "theme-light", "star-filled", "star", "theme-os-default", "thumbs-down",
-  "thumbs-up", "trash", "trash-filled", "twitter-x", "unknown", "warning",
-  "webview", "yes", "yes-circle";
+  "previous", "question-mark", "queue", "queued", "quote", "return", "safari",
+  "samsunginternet", "search", "send", "server", "sidebar", "simple-firefox",
+  "small-arrow", "theme-light", "star-filled", "star", "theme-os-default",
+  "thumbs-down", "thumbs-up", "trash", "trash-filled", "twitter-x", "unknown",
+  "warning", "webview", "yes", "yes-circle";
 
 .icon {
   --size: var(--icon-size, 1rem);

diff --git a/client/src/ui/molecules/submenu/index.scss b/client/src/ui/molecules/submenu/index.scss
@@ -47,7 +47,7 @@
     width: 100%;
   }
 
-  a,
+  li > a,
   .submenu-item {
     align-items: center;
     border: 1px solid transparent;

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
@@ -17,6 +17,7 @@ import {
 } from "../../../../utils";
 import { GleanThumbs } from "../../../atoms/thumbs";
 import { Switch } from "../../../atoms/switch";
+import { Icon } from "../../../atoms/icon";
 
 // This needs to match what's set in 'libs/constants.js' on the server/builder!
 const PREFERRED_LOCALE_COOKIE_NAME = "preferredlocale";
@@ -146,7 +147,7 @@ function LocaleRedirectSetting() {
         maxAge: 60 * 60 * 24 * 365 * 3,
       });
       setPreferredLocale(locale);
-      gleanClick(`${LANGUAGE_REMEMBER}: ${oldValue} -> ${locale}`);
+      gleanClick(`${LANGUAGE_REMEMBER}: ${oldValue ?? 0} -> ${locale}`);
     } else {
       deleteCookie(PREFERRED_LOCALE_COOKIE_NAME);
       setPreferredLocale(undefined);
@@ -156,13 +157,23 @@ function LocaleRedirectSetting() {
 
   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/739"
+          rel="external noopener noreferrer"
+          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>
   );