Adds Amplitude font switch for examples (#4120)

Co-authored-by: Josh Wooding <[email protected]>

site/docs/themes/index.mdx

@@ -359,18 +359,44 @@ You can apply styling options as corresponding props to `SaltProviderNext` –
 
 When Amplitude is used, default heading font weight is set to medium (instead of semi bold for Open Sans), via `--salt-palette-text-heading-fontWeight` and `--salt-palette-text-display-fontWeight` variables.
 
-You'll need to install Amplitude font to your application to make sure every user will see the font correctly, e.g.,
+To ensure that every user sees the Amplitude font correctly, you'll need to add it to your application, which can be downloaded from the [fonts page](https://go/salt-ds-internal/design/fonts) on the internal site if you're part of JPMC.
 
 ```css
 @font-face {
-  font-family: "Amplitude";
+  font-family: Amplitude;
+  font-style: normal;
+  font-weight: 300;
+  src:
+    local("Amplitude Light"),
+    url("../public/fonts/amplitude-light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Amplitude;
   font-style: normal;
-  font-display: swap;
   font-weight: 400;
-  src: url("PATH/TO/FONT.woff2") format("woff2");
+  src:
+    local("Amplitude"),
+    url("../public/fonts/amplitude-regular.woff2") format("woff2");
 }
 
-/** and other font styles and weights */
+@font-face {
+  font-family: Amplitude;
+  font-style: normal;
+  font-weight: 500;
+  src:
+    local("Amplitude Medium"),
+    url("../public/fonts/amplitude-medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Amplitude;
+  font-style: normal;
+  font-weight: 700;
+  src:
+    local("Amplitude Bold"),
+    url("../public/fonts/amplitude-bold.woff2") format("woff2");
+}
 ```
 
 #### Display text sizes

site/src/components/components/LivePreview.tsx

@@ -70,7 +70,8 @@ export const LivePreview: FC<LivePreviewProps> = ({
       .catch((e) => console.error(`Failed to load example ${exampleName}`, e));
   }, [exampleName, componentName]);
 
-  const { density, mode, accent, corner, themeNext } = useLivePreviewControls();
+  const { density, mode, accent, corner, themeNext, headingFont, actionFont } =
+    useLivePreviewControls();
 
   const handleShowCodeToggle = (event: ChangeEvent<HTMLInputElement>) => {
     const newShowCode = event.target.checked;
@@ -90,7 +91,13 @@ export const LivePreview: FC<LivePreviewProps> = ({
             [styles.smallViewport]: isMobileView,
           })}
         >
-          <ChosenSaltProvider mode={mode} accent={accent} corner={corner}>
+          <ChosenSaltProvider
+            mode={mode}
+            accent={accent}
+            corner={corner}
+            headingFont={headingFont}
+            actionFont={actionFont}
+          >
             <div className={styles.exampleWithSwitch}>
               <div className={styles.example}>
                 <ChosenSaltProvider density={density}>

site/src/components/components/LivePreviewControls.tsx

@@ -1,10 +1,10 @@
 import {
   type Accent,
+  type ActionFont,
   type Corner,
   type Density,
   FlexItem,
-  FlexLayout,
-  FlowLayout,
+  type HeadingFont,
   type Mode,
   SaltProvider,
   type SaltProviderNextProps,
@@ -15,7 +15,6 @@ import {
   ToggleButtonGroup,
   Tooltip,
   useBreakpoint,
-  useViewport,
 } from "@salt-ds/core";
 import { DarkIcon, HelpIcon, LightIcon } from "@salt-ds/icons";
 import {
@@ -25,7 +24,6 @@ import {
   createContext,
   useState,
 } from "react";
-import useIsMobileView from "../../utils/useIsMobileView";
 
 import clsx from "clsx";
 import styles from "./LivePreviewControls.module.css";
@@ -44,7 +42,7 @@ const defaultMode = modes[0];
 
 export type LivePreviewContextType = Pick<
   SaltProviderNextProps,
-  "accent" | "mode" | "density" | "corner"
+  "accent" | "mode" | "density" | "corner" | "headingFont" | "actionFont"
 > & {
   themeNext?: boolean;
 };
@@ -59,6 +57,8 @@ export const LivePreviewControls: FC<LivePreviewControlsProps> = ({
   const [themeNext, setThemeNext] = useState(false);
   const [accent, setAccent] = useState<Accent>("blue");
   const [corner, setCorner] = useState<Corner>("sharp");
+  const [headingFont, setHeadingFont] = useState<HeadingFont>("Open Sans");
+  const [actionFont, setActionFont] = useState<ActionFont>("Open Sans");
 
   const { matchedBreakpoints } = useBreakpoint();
   const isMobileView = !matchedBreakpoints.includes("md");
@@ -195,6 +195,52 @@ export const LivePreviewControls: FC<LivePreviewControlsProps> = ({
     </StackLayout>
   );
 
+  const headingFontToggleGroup = (
+    <StackLayout
+      gap={0.75}
+      align="baseline"
+      direction={responstiveToggleGroupDirection}
+    >
+      <Text styleAs="label">Heading font</Text>
+      <ToggleButtonGroup
+        disabled={!themeNext}
+        aria-label="Select heading font"
+        value={headingFont}
+        onChange={() => {
+          setHeadingFont((prev) =>
+            prev === "Open Sans" ? "Amplitude" : "Open Sans",
+          );
+        }}
+      >
+        <ToggleButton value="Open Sans">Open Sans</ToggleButton>
+        <ToggleButton value="Amplitude">Amplitude</ToggleButton>
+      </ToggleButtonGroup>
+    </StackLayout>
+  );
+
+  const actionFontToggleGroup = (
+    <StackLayout
+      gap={0.75}
+      align="baseline"
+      direction={responstiveToggleGroupDirection}
+    >
+      <Text styleAs="label">Action font</Text>
+      <ToggleButtonGroup
+        disabled={!themeNext}
+        aria-label="Select action font"
+        value={actionFont}
+        onChange={() => {
+          setActionFont((prev) =>
+            prev === "Open Sans" ? "Amplitude" : "Open Sans",
+          );
+        }}
+      >
+        <ToggleButton value="Open Sans">Open Sans</ToggleButton>
+        <ToggleButton value="Amplitude">Amplitude</ToggleButton>
+      </ToggleButtonGroup>
+    </StackLayout>
+  );
+
   return (
     <>
       <SaltProvider density="medium">
@@ -210,6 +256,8 @@ export const LivePreviewControls: FC<LivePreviewControlsProps> = ({
               <>
                 {cornerToggleGroup}
                 {accentToggleGroup}
+                {headingFontToggleGroup}
+                {actionFontToggleGroup}
               </>
             ) : null}
           </div>
@@ -223,6 +271,8 @@ export const LivePreviewControls: FC<LivePreviewControlsProps> = ({
           themeNext,
           accent,
           corner,
+          headingFont,
+          actionFont,
         }}
       >
         {children}

site/src/css/theme/theme.css

@@ -21,4 +21,5 @@
 .salt-theme[data-mode="dark"] {
   --salt-typography-fontFamily-ptMono: var(--site-font-family-ptMono);
   --salt-typography-fontFamily-openSans: var(--site-font-family-openSans);
+  --salt-typography-fontFamily-amplitude: var(--site-font-family-amplitude);
 }

site/src/pages/_app.tsx

@@ -23,6 +23,7 @@ import clsx from "clsx";
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 import { Open_Sans, PT_Mono } from "next/font/google";
+import localFont from "next/font/local";
 import Head from "next/head";
 import { type ReactNode, useMemo } from "react";
 import * as saltComponents from "../components";
@@ -81,6 +82,32 @@ const openSans = Open_Sans({
   variable: "--site-font-family-openSans",
 });
 
+const amplitude = localFont({
+  src: [
+    {
+      path: "../../public/fonts/amplitude-light.woff2",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/amplitude-regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/amplitude-medium.woff2",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/amplitude-bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+  ],
+  variable: "--site-font-family-amplitude",
+});
+
 export default function MyApp({
   Component,
   pageProps = {},
@@ -110,6 +137,7 @@ export default function MyApp({
             themeClassName,
             ptMono.variable,
             openSans.variable,
+            amplitude.variable,
           )}
         >
           <DensityProvider>