diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 3aaeb56fd..cfe1881bd 100644 --- a/.storybook/preview.tsx +++ b/.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 ( - + ); diff --git a/src/NDSProvider/FeatureFlagsContext.tsx b/src/NDSProvider/FeatureFlagsContext.tsx new file mode 100644 index 000000000..7037ff431 --- /dev/null +++ b/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(undefined); + +export default function FeatureFlagsProvider({ featureFlags, children }: FeatureFlagsContextValue) { + return {children}; +} + +export function useFeatureFlags() { + const context = useContext(FeatureFlagsContext); + if (!context) { + throw new Error(`useFeatureFlags must be used within the NDSProvider`); + } + + return context.featureFlags; +} diff --git a/src/NDSProvider/FutureFlagsContext.tsx b/src/NDSProvider/FutureFlagsContext.tsx deleted file mode 100644 index 898d3376e..000000000 --- a/src/NDSProvider/FutureFlagsContext.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { createContext, useContext } from "react"; - -export interface FutureFlags { - newDesktopTypographyScale?: boolean; -} - -export interface FutureFlagsContextValue { - futureFlags: FutureFlags; - children?: React.ReactNode; -} - -export const FutureFlagsContext = createContext(undefined); - -export default function FutureFlagsProvider({ futureFlags, children }: FutureFlagsContextValue) { - return {children}; -} - -export function useFutureFlags() { - const context = useContext(FutureFlagsContext); - if (!context) { - throw new Error(`useFutureFlags must be used within the NDSProvider`); - } - - return context.futureFlags; -} diff --git a/src/NDSProvider/NDSProvider.tsx b/src/NDSProvider/NDSProvider.tsx index f120fdce9..2841ad044 100644 --- a/src/NDSProvider/NDSProvider.tsx +++ b/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 ( - + @@ -43,7 +43,7 @@ function NDSProvider({ - + ); } diff --git a/src/theme/useNDSTheme.tsx b/src/theme/useNDSTheme.tsx index 4e59fd151..7b96c8825 100644 --- a/src/theme/useNDSTheme.tsx +++ b/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(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 {