Merge branch 'main' into experiments

mdn · Nov 24, 2023 · 7e59d20 · 7e59d20
2 parents 3992a80 + ecc9f54
commit 7e59d20
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 16 deletions.
diff --git a/client/src/plus/utils.ts b/client/src/plus/utils.ts
@@ -16,7 +16,7 @@ export function usePlusUrl(): string {
   let target = `/${locale}/plus`;
 
   if (normalizedUrl(target) === normalizedUrl(pathname)) {
-    target = "#subscribe";
+    target += "#subscribe";
   }
 
   return target;

diff --git a/client/src/ui/_vars.scss b/client/src/ui/_vars.scss
@@ -155,6 +155,7 @@ $mdn-color-ads: #00d0aa;
 
 $mdn-theme-light-text-primary: $mdn-color-neutral-90;
 $mdn-theme-light-text-secondary: $mdn-color-neutral-70;
+$mdn-theme-light-text-active: #{$mdn-color-neutral-50};
 $mdn-theme-light-text-inactive: #{$mdn-color-neutral-40}a6;
 $mdn-theme-light-text-link: $mdn-color-light-theme-blue-60;
 $mdn-theme-light-text-invert: $mdn-color-white;
@@ -201,6 +202,7 @@ $mdn-theme-light-code-background-block: $mdn-color-neutral-light-80;
 
 $mdn-theme-dark-text-primary: $mdn-color-white;
 $mdn-theme-dark-text-secondary: $mdn-color-neutral-20;
+$mdn-theme-dark-text-active: #{$mdn-color-neutral-50};
 $mdn-theme-dark-text-inactive: #{$mdn-color-neutral-20}a6;
 $mdn-theme-dark-text-link: $mdn-color-dark-theme-blue-30;
 $mdn-theme-dark-text-invert: $mdn-color-neutral-90;

diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss
@@ -5,6 +5,7 @@
 @mixin light-theme {
   --text-primary: #{$mdn-theme-light-text-primary};
   --text-secondary: #{$mdn-theme-light-text-secondary};
+  --text-active: #{$mdn-theme-light-text-active};
   --text-inactive: #{$mdn-theme-light-text-inactive};
   --text-link: #{$mdn-theme-light-text-link};
   --text-visited: #551a8b; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1787-1790
@@ -205,6 +206,7 @@
 @mixin dark-theme {
   --text-primary: #{$mdn-theme-dark-text-primary};
   --text-secondary: #{$mdn-theme-dark-text-secondary};
+  --text-active: #{$mdn-theme-dark-text-active};
   --text-inactive: #{$mdn-theme-dark-text-inactive};
   --text-link: #{$mdn-theme-dark-text-link};
   --text-visited: #ffadff; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1794-1797

diff --git a/client/src/ui/molecules/main-menu/index.tsx b/client/src/ui/molecules/main-menu/index.tsx
@@ -9,6 +9,7 @@ import { PLUS_IS_ENABLED } from "../../../env";
 import { useLocale } from "../../../hooks";
 import { useGleanClick } from "../../../telemetry/glean-context";
 import { MENU } from "../../../telemetry/constants";
+import { useLocation } from "react-router";
 
 export default function MainMenu({ isOpenOnMobile }) {
   const locale = useLocale();
@@ -98,9 +99,13 @@ function TopLevelMenuLink({
   to: string;
   children: React.ReactNode;
 }) {
+  const { pathname } = useLocation();
   const gleanClick = useGleanClick();
+
+  const isActive = pathname.startsWith(to.split("#", 2)[0]);
+
   return (
-    <li className="top-level-entry-container">
+    <li className={`top-level-entry-container ${isActive ? "active" : ""}`}>
       <a
         className="top-level-entry menu-link"
         href={to}

diff --git a/client/src/ui/molecules/menu/index.scss b/client/src/ui/molecules/menu/index.scss
@@ -1,4 +1,16 @@
 .top-level-entry-container {
+  &.active > a {
+    &:link,
+    &:visited {
+      color: var(--text-active);
+    }
+
+    &:hover,
+    &:active {
+      color: var(--category-color);
+    }
+  }
+
   .top-level-entry-dot ~ .top-level-entry::after {
     background: var(--text-primary-blue);
     border: 1px solid var(--background-primary);

diff --git a/client/src/ui/molecules/menu/index.tsx b/client/src/ui/molecules/menu/index.tsx
@@ -1,24 +1,39 @@
+import { useLocation } from "react-router";
 import { MENU } from "../../../telemetry/constants";
 import { useGleanClick } from "../../../telemetry/glean-context";
 import { MenuEntry, Submenu } from "../submenu";
 import "./index.scss";
 
 interface MenuProps {
   menu: MenuEntry;
+  isActive?: boolean;
   isOpen: boolean;
   toggle: (id: string) => void;
 }
 
-export const Menu = ({ menu, isOpen, toggle }: MenuProps) => {
+export const Menu = ({
+  menu,
+  isActive = undefined,
+  isOpen,
+  toggle,
+}: MenuProps) => {
+  const { pathname } = useLocation();
   const gleanClick = useGleanClick();
 
   const buttonId = `${menu.id}-button`;
   const submenuId = `${menu.id}-menu`;
 
+  isActive =
+    isActive ??
+    (typeof menu.to === "string" &&
+      pathname.startsWith(menu.to.split("#", 2)[0]));
   const hasAnyDot = menu.items.some((item) => item.dot);
 
   return (
-    <li key={menu.id} className="top-level-entry-container">
+    <li
+      key={menu.id}
+      className={`top-level-entry-container ${isActive ? "active" : ""}`}
+    >
       {hasAnyDot && (
         <span className="visually-hidden top-level-entry-dot"></span>
       )}

diff --git a/client/src/ui/molecules/plus-menu/index.tsx b/client/src/ui/molecules/plus-menu/index.tsx
@@ -5,6 +5,7 @@ import { useIsServer, useLocale, useViewedState } from "../../../hooks";
 import { useUserData } from "../../../user-context";
 import { MenuEntry } from "../submenu";
 import { FeatureId } from "../../../constants";
+import { useLocation } from "react-router";
 
 export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => {
   const plusUrl = usePlusUrl();
@@ -15,6 +16,13 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => {
 
   const { isViewed } = useViewedState();
 
+  // Avoid that "Plus" and "AI Help" are both active.
+  const { pathname } = useLocation();
+  const aiHelpUrl = `/${locale}/plus/ai-help`;
+  const isActive =
+    pathname.startsWith(plusUrl.split("#", 2)[0]) &&
+    !pathname.startsWith(aiHelpUrl);
+
   const plusMenu: MenuEntry = {
     label: "Plus",
     id: "mdn-plus",
@@ -32,7 +40,7 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => {
         hasIcon: true,
         iconClasses: "submenu-icon",
         label: "AI Help (beta)",
-        url: `/${locale}/plus/ai-help`,
+        url: aiHelpUrl,
       },
       ...(!isServer && isAuthenticated
         ? [
@@ -75,5 +83,12 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => {
   };
   const isOpen = visibleSubMenuId === plusMenu.id;
 
-  return <Menu menu={plusMenu} isOpen={isOpen} toggle={toggleMenu} />;
+  return (
+    <Menu
+      menu={plusMenu}
+      isActive={isActive}
+      isOpen={isOpen}
+      toggle={toggleMenu}
+    />
+  );
 };
diff --git a/package.json b/package.json
@@ -139,7 +139,7 @@
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "web-features": "^0.4.1",
-    "web-specs": "^2.74.0"
+    "web-specs": "^2.74.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",
@@ -195,7 +195,7 @@
     "file-loader": "^6.2.0",
     "foreman": "^3.0.1",
     "history": "^5.2.0",
-    "html-validate": "^8.7.2",
+    "html-validate": "^8.7.3",
     "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",

diff --git a/yarn.lock b/yarn.lock
@@ -8032,10 +8032,10 @@ html-url-attributes@^3.0.0:
   resolved "https://registry.yarnpkg.com/html-url-attributes/-/html-url-attributes-3.0.0.tgz#fc4abf0c3fb437e2329c678b80abb3c62cff6f08"
   integrity sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==
 
-html-validate@^8.7.2:
-  version "8.7.2"
-  resolved "https://registry.yarnpkg.com/html-validate/-/html-validate-8.7.2.tgz#4b9e24b44726d70e24bac9762fc5fe3ed323fbf6"
-  integrity sha512-0UD3VO0LBoavvmRcevf8uQ8UZGqh4moc1Stwvh0+rPsvax/PNs1mFA+3gb63zRShxrV24D8Mioj1EvLJj7Kq4g==
+html-validate@^8.7.3:
+  version "8.7.3"
+  resolved "https://registry.yarnpkg.com/html-validate/-/html-validate-8.7.3.tgz#19bbf0f006dce09f7724d4b7d4f80fc53043e0e4"
+  integrity sha512-nDJmMTdH3hXv/nCOfedhgVsPivHjYHCiT9TSC3U/DCC10F8OJtBJEPHY/cU7MViwIdu3RfOmU4EoPE02ku/aug==
   dependencies:
     "@babel/code-frame" "^7.10.0"
     "@html-validate/stylish" "^4.1.0"
@@ -15305,10 +15305,10 @@ web-namespaces@^2.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
   integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
 
-web-specs@^2.74.0:
-  version "2.74.0"
-  resolved "https://registry.yarnpkg.com/web-specs/-/web-specs-2.74.0.tgz#db1edd6c8af76e65a02e8ad5f0ed6254c61513ae"
-  integrity sha512-d+AXjG85/nLj78gMfMmIfvebrq1s5BeLmnFbIjFUIoHXv4aEHX+FAU++alJlyryIcnGM+erzXrYYsJjf5O+SPw==
+web-specs@^2.74.1:
+  version "2.74.1"
+  resolved "https://registry.yarnpkg.com/web-specs/-/web-specs-2.74.1.tgz#59a160b4aa27f958ff3585b7efe08d5c0761ac47"
+  integrity sha512-OrXix5LVFhnJ1uvj00jy1vAOkUNzoVWKF7IqkTgqTI9CmYIdLxpknSvE/iqOOHUVNX90izUUj8lJVNjCdnWCuA==
 
 [email protected]:
   version "4.0.0-beta.3"