Adds link to beta docs (#8998)

* add navitem accent and beta docs

* filter out 'Beta Docs' from expected navigation translations in tests

* refactor test

* align nav accent to secondary button

Author: bmuenzenmeyer

apps/site/components/withNavBar.tsx

@@ -54,11 +54,14 @@ const WithNavBar: FC = () => {
       <WithBanner section="index" />
 
       <NavBar
-        navItems={navigationItems.map(([, { label, link, target }]) => ({
-          link,
-          text: label,
-          target,
-        }))}
+        navItems={navigationItems.map(
+          ([, { label, link, target, accent }]) => ({
+            link,
+            text: label,
+            target,
+            accent,
+          })
+        )}
         pathname={pathname}
         as={Link}
         Logo={WithNodejsLogo}

apps/site/hooks/useSiteNavigation.ts

@@ -19,6 +19,7 @@ type MappedNavigationEntry = {
   label: FormattedMessage;
   link: string;
   target?: HTMLAttributeAnchorTarget | undefined;
+  accent?: boolean;
 };
 
 // Provides Context replacement for variables within the Link. This is also something that is not going
@@ -44,13 +45,14 @@ const useSiteNavigation = () => {
       t.rich(label, context[key] || {}) as FormattedMessage;
 
     return Object.entries(entries).map(
-      ([key, { label, link, items, target }]): [
+      ([key, { label, link, items, target, accent }]): [
         string,
         MappedNavigationEntry,
       ] => [
         key,
         {
           target,
+          accent,
           label: label ? getFormattedMessage(label, key) : '',
           link: link ? replaceLinkWithContext(link, context[key]) : '',
           items: items ? mapNavigationEntries(items, context) : [],

apps/site/navigation.json

@@ -20,6 +20,12 @@
       "link": "https://nodejs.org/docs/latest/api/",
       "label": "components.containers.navBar.links.docs"
     },
+    "betaDocs": {
+      "link": "https://beta.docs.nodejs.org/",
+      "label": "components.containers.navBar.links.betaDocs",
+      "target": "_blank",
+      "accent": true
+    },
     "contribute": {
       "link": "https://github.com/nodejs/node/blob/main/CONTRIBUTING.md",
       "label": "components.containers.navBar.links.contribute",

apps/site/tests/e2e/general-behavior.spec.ts

@@ -10,6 +10,9 @@ const locators = {
   mobileMenuToggleName:
     englishLocale.components.containers.navBar.controls.toggle,
   navLinksLocator: `[aria-label="${englishLocale.components.containers.navBar.controls.toggle}"] + div`,
+  // The Beta Docs link renders untranslated (English) across locales, so we
+  // match on its English label to skip it during translation checks.
+  betaDocsName: englishLocale.components.containers.navBar.links.betaDocs,
   // Global UI controls
   languageDropdownName: englishLocale.components.common.languageDropdown.label,
   themeToggleName: englishLocale.components.header.buttons.theme,
@@ -55,8 +58,14 @@ const verifyTranslation = async (page: Page, locale: Locale | string) => {
 
   // Verify each navigation link text matches an expected translation
   for (const link of links) {
-    const linkText = await link.textContent();
-    expect(expectedTexts).toContain(linkText!.trim());
+    const linkText = (await link.textContent())!.trim();
+    // Skip the Beta Docs link: it renders untranslated (English) across
+    // locales and has no translation entry in most locale files, so it
+    // won't appear in `expectedTexts` for non-English locales (e.g. es).
+    if (linkText === locators.betaDocsName) {
+      continue;
+    }
+    expect(expectedTexts).toContain(linkText);
   }
 };
 

apps/site/types/navigation.ts

@@ -16,6 +16,7 @@ export type NavigationKeys =
   | 'about'
   | 'download'
   | 'docs'
+  | 'betaDocs'
   | 'getInvolved'
   | 'certification'
   | 'learn'
@@ -26,6 +27,7 @@ export type NavigationEntry = {
   link?: string;
   items?: Record<string, NavigationEntry>;
   target?: HTMLAttributeAnchorTarget | undefined;
+  accent?: boolean;
 };
 
 export type SiteNavigation = {

packages/i18n/src/locales/en.json

@@ -36,6 +36,7 @@
           "about": "About",
           "download": "Download",
           "docs": "Docs",
+          "betaDocs": "Beta Docs",
           "guides": "Guides",
           "learn": "Learn",
           "security": "Security",

packages/ui-components/src/Containers/NavBar/NavItem/index.module.css

@@ -6,7 +6,8 @@
     gap-2
     rounded-sm
     px-3
-    py-2;
+    py-2
+    motion-safe:transition-colors;
 
   .label {
     @apply text-base
@@ -45,6 +46,19 @@
     }
   }
 
+  &.accent {
+    @apply bg-transparent
+      ring-1
+      ring-neutral-200
+      ring-inset
+      dark:ring-neutral-900;
+
+    &:hover {
+      @apply bg-neutral-200
+        dark:bg-neutral-900;
+    }
+  }
+
   &.footer {
     .label {
       @apply text-neutral-800

packages/ui-components/src/Containers/NavBar/NavItem/index.tsx

@@ -15,6 +15,7 @@ type NavItemProps = {
   type?: NavItemType;
   className?: string;
   target?: HTMLAttributeAnchorTarget | undefined;
+  accent?: boolean;
 
   pathname: string;
   active?: boolean;
@@ -27,12 +28,18 @@ const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
   children,
   className,
   target,
+  accent,
   ...props
 }) => (
   <BaseActiveLink
     target={target}
     href={href}
-    className={classNames(styles.navItem, styles[type], className)}
+    className={classNames(
+      styles.navItem,
+      styles[type],
+      { [styles.accent]: accent },
+      className
+    )}
     activeClassName={styles.active}
     allowSubPath={href.startsWith('/')}
     {...props}

packages/ui-components/src/Containers/NavBar/index.stories.tsx

@@ -26,6 +26,12 @@ export const Default: Story = {
         text: 'Docs',
         link: '/docs',
       },
+      {
+        text: 'Beta Docs',
+        link: 'https://beta.docs.nodejs.org/',
+        target: '_blank',
+        accent: true,
+      },
       {
         text: 'Download',
         link: '/download',

packages/ui-components/src/Containers/NavBar/index.tsx

@@ -38,6 +38,7 @@ type NavbarProps = {
     text: FormattedMessage;
     link: string;
     target?: HTMLAttributeAnchorTarget | undefined;
+    accent?: boolean;
   }>;
   Logo?: ElementType;
   as: LinkLike;
@@ -92,14 +93,15 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
         <div className={classNames(styles.main, `hidden peer-checked:flex`)}>
           {navItems && navItems.length > 0 && (
             <div className={styles.navItems}>
-              {navItems.map(({ text, link, target }) => (
+              {navItems.map(({ text, link, target, accent }) => (
                 <NavItem
                   pathname={pathname}
                   active={link === activeLink}
                   as={Component}
                   key={link}
                   href={link}
                   target={target}
+                  accent={accent}
                 >
                   {text}
                 </NavItem>