wip(about): scroll to top of tab and add glean ping

mdn · Nov 14, 2024 · 22700df · 22700df
1 parent 88e5e1b
commit 22700df
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/client/src/about/index.scss b/client/src/about/index.scss
@@ -20,7 +20,7 @@ main.about-container {
   @include about.theme-setup using ($mode) {
     @if $mode == light {
       --header-next-section-bg: #f2f2f5;
-      --header-text-primary: #007936;
+      --header-text-primary: #000;
       --header-text-secondary: #343434;
       --header-bg: #fff;
       --stats-bg: #fff;
@@ -76,7 +76,7 @@ main.about-container {
 
     @if $mode == dark {
       --header-next-section-bg: #1b1b1b;
-      --header-text-primary: #8ff295;
+      --header-text-primary: #fff;
       --header-text-secondary: #b3b3b3;
       --header-bg: #101010;
       --stats-bg: #000;
@@ -150,7 +150,7 @@ main.about-container {
 
     h1 + p {
       font-size: 2rem;
-      font-weight: 600;
+      font-weight: 500;
       line-height: 120%;
       max-width: 43rem;
 

diff --git a/client/src/about/index.tsx b/client/src/about/index.tsx
@@ -1,5 +1,5 @@
 import { HydrationData } from "../../../libs/types/hydration";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { ProseSection } from "../../../libs/types/document";
 import useSWR from "swr";
 import { HTTPError } from "../document";
@@ -8,6 +8,8 @@ import { Prose } from "../document/ingredients/prose";
 
 import "./index.scss";
 import "./custom-elements";
+import { useGleanClick } from "../telemetry/glean-context";
+import { ABOUT } from "../telemetry/constants";
 
 export interface AboutSection extends ProseSection {
   H3s?: AboutSection[];
@@ -114,6 +116,22 @@ export function Header({ section }: { section: AboutSection }) {
 
 function Tabs({ section }: { section: AboutSection }) {
   const [activeTab, setActiveTab] = useState(0);
+  const tabs = useRef<HTMLDivElement>(null);
+  const gleanClick = useGleanClick();
+
+  const changeTab = useCallback(
+    (i: number) => {
+      const id = section.H3s?.[i].value.id;
+      if (id) {
+        setActiveTab(i);
+        if (tabs.current && tabs.current.getBoundingClientRect().top < 0) {
+          tabs.current.scrollIntoView({ block: "start", inline: "nearest" });
+        }
+        gleanClick(`${ABOUT}: tab -> ${id}`);
+      }
+    },
+    [section.H3s, gleanClick]
+  );
 
   useEffect(() => {
     const hash = document.location.hash.startsWith("#our_team")
@@ -125,7 +143,7 @@ function Tabs({ section }: { section: AboutSection }) {
     if (tab && tab > 0) {
       setActiveTab(tab);
     }
-  }, [section.H3s]);
+  }, [section.H3s, changeTab]);
 
   return (
     section.value.id &&
@@ -137,7 +155,7 @@ function Tabs({ section }: { section: AboutSection }) {
           dangerouslySetInnerHTML={{ __html: section.value.content }}
         />
         {section.H3s && (
-          <div className="tabs">
+          <div className="tabs" ref={tabs}>
             <div className="tablist-wrapper">
               <div className="tablist" role="tablist">
                 {section.H3s?.map(
@@ -151,7 +169,7 @@ function Tabs({ section }: { section: AboutSection }) {
                         role="tab"
                         aria-selected="false"
                         aria-controls={`${value.id}-panel`}
-                        onClick={() => setActiveTab(i)}
+                        onClick={() => changeTab(i)}
                       >
                         {value.title}
                       </a>

diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
@@ -29,6 +29,7 @@ export const SETTINGS = "settings";
 export const OBSERVATORY = "observatory";
 export const CURRICULUM = "curriculum";
 export const BCD_TABLE = "bcd";
+export const ABOUT = "about";
 
 export const A11Y_MENU = "a11y_menu";