diff --git a/client/src/document/baseline-indicator.tsx b/client/src/document/baseline-indicator.tsx index 4d7c4733c9cf..5794f3b6aec9 100644 --- a/client/src/document/baseline-indicator.tsx +++ b/client/src/document/baseline-indicator.tsx @@ -1,4 +1,6 @@ +import { DEFAULT_LOCALE } from "../../../libs/constants"; import { WebFeatureStatus } from "../../../libs/types/document"; +import { useLocale } from "../hooks"; import { BASELINE } from "../telemetry/constants"; import { useGleanClick } from "../telemetry/glean-context"; import { Icon } from "../ui/atoms/icon"; @@ -10,8 +12,25 @@ const ENGINES = [ { name: "WebKit", browsers: ["Safari"] }, ]; +const LOCALIZED_BCD_IDS = { + "en-US": "browser_compatibility", + es: "compatibilidad_con_navegadores", + fr: "compatibilité_des_navigateurs", + ja: "ブラウザーの互換性", + ko: "브라우저_호환성", + "pt-BR": "compatibilidade_com_navegadores", + ru: "совместимость_с_браузерами", + "zh-CN": "浏览器兼容性", + "zh-TW": "瀏覽器相容性", +}; + export function BaselineIndicator({ status }: { status: WebFeatureStatus }) { const gleanClick = useGleanClick(); + const locale = useLocale(); + + const bcdLink = `#${ + LOCALIZED_BCD_IDS[locale] || LOCALIZED_BCD_IDS[DEFAULT_LOCALE] + }`; const supported = (browser: string) => { const version: string | boolean | undefined = @@ -90,10 +109,7 @@ export function BaselineIndicator({ status }: { status: WebFeatureStatus }) {
  • - + See full compatibility