refactor: rename futureFlags to featureFlags

.storybook/preview.tsx

@@ -66,13 +66,13 @@ export const globalTypes = {
   },
   desktopScale: {
     name: "Desktop typography scale",
-    description: "Toggles between the legacy and new desktop typography scale",
-    defaultValue: "legacy",
+    description: "Toggles between the standard and the new experimental desktop typography scale",
+    defaultValue: "standard",
     toolbar: {
       icon: "paragraph",
       items: [
-        { value: "legacy", title: "Legacy desktop scale" },
-        { value: "new", title: "New desktop scale" },
+        { value: "standard", title: "Standard desktop scale" },
+        { value: "experimental", title: "Experimental desktop scale (intended for design team testing)" },
       ],
       dynamicTitle: true,
     },
@@ -96,7 +96,11 @@ const withThemeProvider = (Story, context) => {
   const { theme, locale, desktopScale } = context.globals;
 
   return (
-    <NDSProvider locale={locale} variant={theme} futureFlags={{ newDesktopTypographyScale: desktopScale === "new" }}>
+    <NDSProvider
+      locale={locale}
+      variant={theme}
+      featureFlags={{ experimentalDesktopTypographyScale: desktopScale === "experimental" }}
+    >
       <Story />
     </NDSProvider>
   );

src/NDSProvider/FeatureFlagsContext.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from "react";
+
+export interface FeatureFlags {
+  experimentalDesktopTypographyScale?: boolean;
+}
+
+export interface FeatureFlagsContextValue {
+  featureFlags: FeatureFlags;
+  children?: React.ReactNode;
+}
+
+export const FeatureFlagsContext = createContext<FeatureFlagsContextValue>(undefined);
+
+export default function FeatureFlagsProvider({ featureFlags, children }: FeatureFlagsContextValue) {
+  return <FeatureFlagsContext.Provider value={{ featureFlags }}>{children}</FeatureFlagsContext.Provider>;
+}
+
+export function useFeatureFlags() {
+  const context = useContext(FeatureFlagsContext);
+  if (!context) {
+    throw new Error(`useFeatureFlags must be used within the NDSProvider`);
+  }
+
+  return context.featureFlags;
+}

src/NDSProvider/NDSProvider.tsx

@@ -4,7 +4,7 @@ import i18n from "../i18n";
 import { ThemeType } from "../theme";
 import NDSThemeProvider from "../theme/NDSThemeProvider";
 import ComponentVariantContextProvider, { ComponentVariant } from "./ComponentVariantContext";
-import FutureFlagsContextProvider, { FutureFlags } from "./FutureFlagsContext";
+import FeatureFlagsContextProvider, { FeatureFlags } from "./FeatureFlagsContext";
 import GlobalStylesComposer from "./GlobalStylesComposer";
 import { LocaleContext } from "./LocaleContext";
 
@@ -14,7 +14,7 @@ type NDSProviderProps = {
   disableGlobalStyles?: boolean;
   children?: React.ReactNode;
   variant?: ComponentVariant;
-  futureFlags?: FutureFlags;
+  featureFlags?: FeatureFlags;
 };
 
 function NDSProvider({
@@ -23,8 +23,8 @@ function NDSProvider({
   disableGlobalStyles = false,
   locale = "en_US",
   variant = "desktop",
-  futureFlags = {
-    newDesktopTypographyScale: false,
+  featureFlags = {
+    experimentalDesktopTypographyScale: false,
   },
 }: NDSProviderProps) {
   useEffect(() => {
@@ -33,7 +33,7 @@ function NDSProvider({
 
   return (
     <LocaleContext.Provider value={{ locale }}>
-      <FutureFlagsContextProvider futureFlags={futureFlags}>
+      <FeatureFlagsContextProvider featureFlags={featureFlags}>
         <ComponentVariantContextProvider variant={variant}>
           <I18nextProvider i18n={i18n}>
             <NDSThemeProvider customTheme={customTheme}>
@@ -43,7 +43,7 @@ function NDSProvider({
             </NDSThemeProvider>
           </I18nextProvider>
         </ComponentVariantContextProvider>
-      </FutureFlagsContextProvider>
+      </FeatureFlagsContextProvider>
     </LocaleContext.Provider>
   );
 }

src/theme/useNDSTheme.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import useMediaQuery from "../hooks/useMediaQuery";
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { FutureFlags, useFutureFlags } from "../NDSProvider/FutureFlagsContext";
+import { FeatureFlags, useFeatureFlags } from "../NDSProvider/FeatureFlagsContext";
 import { mergeThemes } from "./mergeThemes.util";
 import { legacy, themes } from "./theme";
 import { Breakpoints, DefaultNDSThemeType, ThemeType } from "./theme.type";
@@ -28,26 +28,26 @@ const validateVariantOrThrow = (variant: ComponentVariant): void => {
 export const getThemeByVariant = (
   variant: ComponentVariant,
   isTabletSize: boolean,
-  futureFlags: FutureFlags
+  featureFlags: FeatureFlags
 ): DefaultNDSThemeType => {
   if (variant === "touch") {
     return isTabletSize ? themes.tablet : themes.phone;
   }
 
-  return futureFlags.newDesktopTypographyScale ? themes.desktop : themes.legacy;
+  return featureFlags.experimentalDesktopTypographyScale ? themes.desktop : themes.legacy;
 };
 
 export function useNDSTheme(variant: ComponentVariant = "desktop", customTheme?: ThemeType): DefaultNDSThemeType {
   validateVariantOrThrow(variant);
-  const { newDesktopTypographyScale } = useFutureFlags();
+  const { experimentalDesktopTypographyScale } = useFeatureFlags();
 
   const [themeVariant, setThemeVariant] = useState<DefaultNDSThemeType>(legacy);
   const isTabletSize = useMediaQuery(`(min-width: ${legacy.breakpoints.small})`);
 
   useEffect(() => {
-    const newTheme = getThemeByVariant(variant, isTabletSize, { newDesktopTypographyScale });
+    const newTheme = getThemeByVariant(variant, isTabletSize, { experimentalDesktopTypographyScale });
     setThemeVariant(newTheme);
-  }, [variant, isTabletSize, newDesktopTypographyScale]);
+  }, [variant, isTabletSize, experimentalDesktopTypographyScale]);
 
   const mergedTheme = mergeThemes(themeVariant, customTheme);
   return {