Merge master into release

Author: andrew-polk

.github/workflows/lighthouse.yml

@@ -1,10 +1,11 @@
 name: Lighthouse CI
 
 on:
-    workflow_run:
-        workflows: ["Build and Deploy"]
-        types:
-            - completed
+    # Disabling automatic runs for now since it is always failing and we aren't prioritizing fixing it.
+    #    workflow_run:
+    #        workflows: ["Build and Deploy"]
+    #        types:
+    #            - completed
     workflow_dispatch: # Allows manual triggering of the workflow
 
 jobs:

.vscode/settings.json

@@ -1,9 +1,12 @@
 {
     "workbench.colorCustomizations": {
-        "statusBar.background": "#49d668",
-        "statusBar.debuggingBackground": "#49d668",
+        "statusBar.background": "#549d3e",
         "statusBar.noFolderBackground": "#49d668",
-        "statussBar.prominentBackground": "#D65649"
+        "statussBar.prominentBackground": "#D65649",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#6bbb53",
+        "statusBarItem.remoteBackground": "#549d3e",
+        "statusBarItem.remoteForeground": "#e7e7e7"
     },
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
@@ -29,5 +32,6 @@
         "uilang",
         "voca",
         "yagni"
-    ]
+    ],
+    "peacock.color": "#549d3e"
 }

src/components/LanguageCard.tsx

@@ -2,7 +2,11 @@ import { css } from "@emotion/react";
 
 import React from "react";
 import { CheapCard } from "./CheapCard";
-import { ILanguage, getDisplayNamesForLanguage } from "../model/Language";
+import {
+    ILanguage,
+    getDisplayNamesForLanguage,
+    kTagForNoLanguage,
+} from "../model/Language";
 import { commonUI } from "../theme";
 import { useResponsiveChoice } from "../responsiveUtilities";
 import { FormattedMessage } from "react-intl";
@@ -43,13 +47,48 @@ export const LanguageCard: React.FunctionComponent<
         ...propsToPassDown
     } = props; // Prevent React warnings
 
-    const { primary, secondary } = getDisplayNamesForLanguage(props);
+    const displayNames = getDisplayNamesForLanguage(props);
     const getResponsiveChoice = useResponsiveChoice();
     const { cardWidthPx, cardHeightPx } = useLanguageCardSpec(props.larger);
     const urlPrefix = props.targetPrefix ?? "/language:";
     const showCount = !useIsAppHosted();
     const cardSpacing = useBaseCardSpec().cardSpacingPx;
 
+    const isPictureBook = isoCode === kTagForNoLanguage;
+
+    // BL-15812 Prefer the autonym as the primary label; fall back to existing display logic
+    // for picture books or other special cases where autonym can be empty.
+    const primary = isPictureBook
+        ? displayNames.primary
+        : displayNames.autonym.trim()
+        ? displayNames.autonym
+        : displayNames.primary;
+
+    // Build the gray header labels explicitly so English and the tag can be separate lines.
+    const secondaryLinesToRender: string[] = [];
+    if (isPictureBook) {
+        // Preserve the historical duplication for picture-book cards.
+        secondaryLinesToRender.push(displayNames.primary);
+    } else {
+        if (englishName && englishName !== primary) {
+            secondaryLinesToRender.push(englishName);
+        }
+        // The logic that generates otherSecondaryNames makes sure it is not the same
+        // as primary or english names. Currently, it will be the language tag if
+        // getDisplayNamesForLanguage decides it adds something useful to the english name.
+        if (displayNames.otherSecondaryNames) {
+            secondaryLinesToRender.push(displayNames.otherSecondaryNames);
+        }
+    }
+    const secondaryLineText = secondaryLinesToRender.join(" ");
+    const hasMultipleSecondaryLines = secondaryLinesToRender.length > 1;
+    // Only used for the single-line case, where we can allow two lines of wrap.
+    const shouldTruncateSecondary = secondaryLineText.length >= 18;
+    const [
+        secondaryPrimaryLine,
+        ...secondaryRemainingLines
+    ] = secondaryLinesToRender;
+
     // In the main website, we want language cards to be responsive: smaller and with smaller text on small screens.
     // In the language chooser intended to be embedded in BloomReader, we want larger sizes.
     // The description said "about a third larger" which happens to be, for most measurements, what the large-screen
@@ -119,12 +158,25 @@ export const LanguageCard: React.FunctionComponent<
                         line-height: 1em;
                     `}
                 >
-                    <SmartTruncateMarkup
-                        condition={(secondary ?? "").length >= 18}
-                        lines={2}
-                    >
-                        <span>{secondary}</span>
-                    </SmartTruncateMarkup>
+                    {secondaryLinesToRender.length > 0 &&
+                        (hasMultipleSecondaryLines ? (
+                            <React.Fragment>
+                                {/* Clamp the first line so the tag line always stays visible. */}
+                                <SmartTruncateMarkup condition={true} lines={1}>
+                                    <span>{secondaryPrimaryLine}</span>
+                                </SmartTruncateMarkup>
+                                {secondaryRemainingLines.map((line, index) => (
+                                    <div key={`${line}-${index}`}>{line}</div>
+                                ))}
+                            </React.Fragment>
+                        ) : (
+                            <SmartTruncateMarkup
+                                condition={shouldTruncateSecondary}
+                                lines={2}
+                            >
+                                <span>{secondaryPrimaryLine}</span>
+                            </SmartTruncateMarkup>
+                        ))}
                 </div>
             </div>
             <h2

src/model/Language.ts

@@ -47,20 +47,28 @@ export function getDisplayNamesForLanguage(
     primary: string;
     secondary: string | undefined;
     combined: string;
+    autonym: string;
+    otherSecondaryNames: string;
 } {
     // don't bother showing "zh-CN"... it's not a variant, it's the norm
     if (language.isoCode === "zh-CN") {
-        return navigator.language === "zh-CN"
-            ? {
-                  secondary: "Chinese",
-                  primary: "简体中文",
-                  combined: "简体中文 (Chinese)",
-              }
-            : {
-                  primary: "Chinese",
-                  secondary: "简体中文",
-                  combined: "Chinese (简体中文)",
-              };
+        const result =
+            navigator.language === "zh-CN"
+                ? {
+                      secondary: "Chinese",
+                      primary: "简体中文",
+                      combined: "简体中文 (Chinese)",
+                  }
+                : {
+                      primary: "Chinese",
+                      secondary: "简体中文",
+                      combined: "Chinese (简体中文)",
+                  };
+        return {
+            ...result,
+            autonym: "简体中文",
+            otherSecondaryNames: "",
+        };
     }
 
     // Handle picture books
@@ -73,12 +81,16 @@ export function getDisplayNamesForLanguage(
             primary: localizedLabel,
             secondary: localizedLabel,
             combined: localizedLabel,
+            autonym: localizedLabel,
+            // should never contain autonym or englishName. Currently holds the language
+            // tag if it looks like a variant, otherwise empty.
+            otherSecondaryNames: "",
         };
     }
 
     // this may not be needed for long. We are working on some fixes in BL-11754
     if (language.isoCode === "ase-ML") {
-        return navigator.language.startsWith("fr")
+        const result = navigator.language.startsWith("fr")
             ? {
                   primary:
                       "Langue des Signes des Écoles pour Déficients Auditifs au Mali",
@@ -95,6 +107,11 @@ export function getDisplayNamesForLanguage(
                   combined:
                       "Sign Language of Schools for the Hearing Impaired in Mali",
               };
+        return {
+            ...result,
+            autonym: language.name,
+            otherSecondaryNames: "",
+        };
     }
     let primary: string;
     let secondary: string | undefined;
@@ -114,18 +131,31 @@ export function getDisplayNamesForLanguage(
         primary = language.name;
     }
 
-    // if it looks like this is a variant, add that to the secondary
+    // Determine if the tag should be included in secondary and otherSecondaryNames
+    // We want to include tags that look like variants
+    let otherSecondaryNames = "";
     if (
         language.isoCode &&
         language.isoCode.indexOf("-") > -1 &&
         language.isoCode !== language.englishName &&
         language.isoCode !== language.name
-    )
-        secondary = [secondary, language.isoCode].join(" ").trim();
+    ) {
+        otherSecondaryNames = language.isoCode;
+    }
+
+    if (otherSecondaryNames) {
+        secondary = [secondary, otherSecondaryNames].join(" ").trim();
+    }
 
     const combined = primary + (secondary ? ` (${secondary})` : "");
 
-    return { primary, secondary, combined };
+    return {
+        primary,
+        secondary,
+        combined,
+        autonym: language.name,
+        otherSecondaryNames,
+    };
 }
 
 export function getCleanedAndOrderedLanguageList(