diff --git a/libs/@guardian/source-foundations/src/typography/api.ts b/libs/@guardian/source-foundations/src/_deprecated/typography/api.ts similarity index 100% rename from libs/@guardian/source-foundations/src/typography/api.ts rename to libs/@guardian/source-foundations/src/_deprecated/typography/api.ts diff --git a/libs/@guardian/source-foundations/src/typography/data.ts b/libs/@guardian/source-foundations/src/_deprecated/typography/data.ts similarity index 84% rename from libs/@guardian/source-foundations/src/typography/data.ts rename to libs/@guardian/source-foundations/src/_deprecated/typography/data.ts index b2a2d79c6..b5afe58de 100644 --- a/libs/@guardian/source-foundations/src/typography/data.ts +++ b/libs/@guardian/source-foundations/src/_deprecated/typography/data.ts @@ -3,7 +3,7 @@ import { fontArrayToString, pxStringToNumber, pxToRem, -} from '../utils/convert-value'; +} from '../../utils/convert-value'; import type { AvailableFontWeights, ItalicsFontWeights } from './types'; /** @@ -11,6 +11,8 @@ import type { AvailableFontWeights, ItalicsFontWeights } from './types'; * * We assert that the values match the guardian type scale in our * {@link [unit test suite](./typography.test.ts)}. + * + * @deprecated Please typography presets rather than setting individual values */ export const pxTextSizes = { textSans: { @@ -52,6 +54,8 @@ export const pxTextSizes = { * in our {@link [unit test suite](./typography.test.ts)}. * * See {@link [pxToRem](../utils/convert-value.ts)} for more details. + * + * @deprecated Please typography presets rather than setting individual values */ export const remTextSizes = { textSans: { @@ -85,6 +89,9 @@ export const remTextSizes = { }, } as const; +/** + * @deprecated Please typography presets rather than setting individual values + */ export const fonts = { titlepiece: fontArrayToString(tokens.typography.fontFamily.titlepiece), headline: fontArrayToString(tokens.typography.fontFamily.headline), @@ -104,6 +111,8 @@ export const fonts = { * can be overridden by users. * * @see https://www.w3.org/WAI/WCAG21/Understanding/text-spacing + * + * @deprecated Please typography presets rather than setting individual values */ export const lineHeights = { tight: tokens.typography.lineHeight.tight, @@ -111,6 +120,7 @@ export const lineHeights = { loose: tokens.typography.lineHeight.loose, } as const; +/** @deprecated Please typography presets rather than setting individual values */ export const fontWeights = { light: tokens.typography.fontWeight.light, regular: tokens.typography.fontWeight.regular, @@ -118,6 +128,7 @@ export const fontWeights = { bold: tokens.typography.fontWeight.bold, } as const; +/** @deprecated Please typography presets rather than setting individual values */ export const availableFontWeights = { titlepiece: { bold: true }, headline: { light: true, medium: true, bold: true }, @@ -125,6 +136,7 @@ export const availableFontWeights = { textSans: { regular: true, bold: true }, } as AvailableFontWeights; +/** @deprecated Please typography presets rather than setting individual values */ export const italicsFontWeights = { titlepiece: { bold: false }, headline: { light: true, medium: true, bold: false }, @@ -132,6 +144,7 @@ export const italicsFontWeights = { textSans: { regular: true, bold: false }, } as ItalicsFontWeights; +/** @deprecated Please typography presets rather than setting individual values */ export const underlineThickness = { textSans: { xxsmall: pxStringToNumber( @@ -207,19 +220,29 @@ export const underlineThickness = { } as const; // Pixel font size exports + +/** @deprecated Please typography presets rather than setting individual values */ export const textSansSizes = pxTextSizes.textSans; +/** @deprecated Please typography presets rather than setting individual values */ export const bodySizes = pxTextSizes.body; +/** @deprecated Please typography presets rather than setting individual values */ export const headlineSizes = pxTextSizes.headline; +/** @deprecated Please typography presets rather than setting individual values */ export const titlepieceSizes = pxTextSizes.titlepiece; // Computed rem font size exports + +/** @deprecated Please typography presets rather than setting individual values */ export const remBodySizes = remTextSizes.body; +/** @deprecated Please typography presets rather than setting individual values */ export const remTitlepieceSizes = remTextSizes.titlepiece; +/** @deprecated Please typography presets rather than setting individual values */ export const remHeadlineSizes = remTextSizes.headline; +/** @deprecated Please typography presets rather than setting individual values */ export const remTextSansSizes = remTextSizes.textSans; diff --git a/libs/@guardian/source-foundations/src/typography/font-styles.ts b/libs/@guardian/source-foundations/src/_deprecated/typography/font-styles.ts similarity index 100% rename from libs/@guardian/source-foundations/src/typography/font-styles.ts rename to libs/@guardian/source-foundations/src/_deprecated/typography/font-styles.ts diff --git a/libs/@guardian/source-foundations/src/typography/index.ts b/libs/@guardian/source-foundations/src/_deprecated/typography/index.ts similarity index 92% rename from libs/@guardian/source-foundations/src/typography/index.ts rename to libs/@guardian/source-foundations/src/_deprecated/typography/index.ts index 14e60d59f..fd74255e5 100644 --- a/libs/@guardian/source-foundations/src/typography/index.ts +++ b/libs/@guardian/source-foundations/src/_deprecated/typography/index.ts @@ -20,6 +20,8 @@ import type { * ``` * font-family: 'GT Guardian Titlepiece'; * ``` + * + * @deprecated Web typography presets should be used instead */ export const titlepiece: TypographyStrFunctions = { small: fontStyleToStringFunction(titlepieceAsObj.small), @@ -34,6 +36,8 @@ export const titlepiece: TypographyStrFunctions = { * ``` * font-family: 'GH Guardian Headline'; * ``` + * + * @deprecated Web typography presets should be used instead */ export const headline: TypographyStrFunctions = { xxxsmall: fontStyleToStringFunction(headlineAsObj.xxxsmall), @@ -52,6 +56,8 @@ export const headline: TypographyStrFunctions = { * ``` * font-family: 'GuardianTextEgyptian'; * ``` + * + * @deprecated Web typography presets should be used instead */ export const body: TypographyStrFunctions = { xsmall: fontStyleToStringFunction(bodyAsObj.xsmall), @@ -66,6 +72,8 @@ export const body: TypographyStrFunctions = { * ``` * font-family: 'GuardianTextSans'; * ``` + * + * @deprecated Web typography presets should be used instead */ export const textSans: TypographyStrFunctions = { xxsmall: fontStyleToStringFunction(textSansAsObj.xxsmall), diff --git a/libs/@guardian/source-foundations/src/typography/obj/index.ts b/libs/@guardian/source-foundations/src/_deprecated/typography/obj/index.ts similarity index 100% rename from libs/@guardian/source-foundations/src/typography/obj/index.ts rename to libs/@guardian/source-foundations/src/_deprecated/typography/obj/index.ts diff --git a/libs/@guardian/source-foundations/src/typography/obj/typography.obj.test.ts b/libs/@guardian/source-foundations/src/_deprecated/typography/obj/typography.obj.test.ts similarity index 100% rename from libs/@guardian/source-foundations/src/typography/obj/typography.obj.test.ts rename to libs/@guardian/source-foundations/src/_deprecated/typography/obj/typography.obj.test.ts diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx b/libs/@guardian/source-foundations/src/_deprecated/typography/storybookTypographyRenderers.tsx similarity index 93% rename from libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx rename to libs/@guardian/source-foundations/src/_deprecated/typography/storybookTypographyRenderers.tsx index 9794d95c7..a14793100 100644 --- a/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx +++ b/libs/@guardian/source-foundations/src/_deprecated/typography/storybookTypographyRenderers.tsx @@ -1,9 +1,9 @@ +import { fontWeights } from '.'; import { - bodyObjectStyles, - fontWeights, - headlineObjectStyles, - textSansObjectStyles, -} from '../index'; + body as bodyObjectStyles, + headline as headlineObjectStyles, + textSans as textSansObjectStyles, +} from './obj'; import type { Category, FontScaleFunction, FontWeight } from './types'; type FontFunctions = { diff --git a/libs/@guardian/source-foundations/src/_deprecated/typography/types.ts b/libs/@guardian/source-foundations/src/_deprecated/typography/types.ts index a51a3894f..e39df249d 100644 --- a/libs/@guardian/source-foundations/src/_deprecated/typography/types.ts +++ b/libs/@guardian/source-foundations/src/_deprecated/typography/types.ts @@ -1,4 +1,139 @@ -/** @deprecated TypographySizes will be removed in a future major release */ +import type { + bodySizes, + fontWeights, + headlineSizes, + lineHeights, + remBodySizes, + remHeadlineSizes, + remTextSansSizes, + remTitlepieceSizes, + textSansSizes, + titlepieceSizes, +} from './data'; + +/** @deprecated This type will be removed in a future major release */ +export type ScaleUnit = 'rem' | 'px'; +/** @deprecated This type will be removed in a future major release */ +export type LineHeight = keyof typeof lineHeights; +/** @deprecated This type will be removed in a future major release */ +export type FontWeight = 'light' | 'regular' | 'medium' | 'bold'; +/** @deprecated This type will be removed in a future major release */ +export type FontStyle = 'normal' | 'italic'; +/** @deprecated This type will be removed in a future major release */ +export type FontWeightDefinition = { hasItalic: boolean }; +/** @deprecated This type will be removed in a future major release */ +export type Option = A | null; + +/** @deprecated This type will be removed in a future major release */ +export type TypographyStyles = { + fontFamily: string; + fontSize: Unit extends 'px' ? number : `${number}rem`; + lineHeight: string | number; + fontWeight?: (typeof fontWeights)[keyof typeof fontWeights] | FontWeight; + fontStyle?: 'normal' | 'italic'; + textDecorationThickness?: number; +}; + +/** @deprecated This type will be removed in a future major release */ +export type TitlepieceSizes = + | typeof titlepieceSizes + | typeof remTitlepieceSizes; +/** @deprecated This type will be removed in a future major release */ +export type HeadlineSizes = typeof headlineSizes | typeof remHeadlineSizes; +/** @deprecated This type will be removed in a future major release */ +export type BodySizes = typeof bodySizes | typeof remBodySizes; +/** @deprecated This type will be removed in a future major release */ +export type TextSansSizes = typeof textSansSizes | typeof remTextSansSizes; +/** @deprecated This type will be removed in a future major release */ +export type AvailableSizes = + | TitlepieceSizes + | HeadlineSizes + | BodySizes + | TextSansSizes; + +/** @deprecated This type will be removed in a future major release */ +export type Categories = { + titlepiece: TitlepieceSizes; + headline: HeadlineSizes; + body: BodySizes; + textSans: TextSansSizes; +}; + +/** @deprecated This type will be removed in a future major release */ +export type Category = keyof Categories; + +/** @deprecated This type will be removed in a future major release */ +export type AvailableFontWeights = { + [cat in Category]?: { [weight in FontWeight]?: boolean }; +}; + +/** @deprecated This type will be removed in a future major release */ +export type ItalicsFontWeights = { + [cat in Category]?: { [weight in FontWeight]?: boolean }; +}; + +/** @deprecated This type will be removed in a future major release */ +export type TypographyConfiguration = { + lineHeight: LineHeight; + fontWeight: FontWeight; + fontStyle: Option; + unit: ScaleUnit; +}; + +/** @deprecated This type will be removed in a future major release */ +export type FontScaleArgs = Partial< + Pick +> & { + fontStyle?: FontStyle; +}; + +/** @deprecated This type will be removed in a future major release */ +export type FontScaleFunction = (options?: FontScaleArgs) => TypographyStyles; + +// returns styles as a template literal +/** @deprecated This type will be removed in a future major release */ +export type FontScaleFunctionStr = (options?: FontScaleArgs) => string; + +/** @deprecated This type will be removed in a future major release */ +export type TypographyStrFunctions = { + [key in keyof Sizes]: FontScaleFunctionStr; +}; + +/** @deprecated This type will be removed in a future major release */ +export type TypographyFunctions = { + [key in keyof Sizes]: FontScaleFunction; +}; + +/** + * This is left over from the refactor of the font style method. + * It is exported from source-foundations but has now been replaced + * by the fontStyleFunction method type definition. + * + * Before we remove it, we need to determine if it is being used. + * + * @deprecated This type will be removed in a future major release + */ +export type Fs = < + Category extends keyof Categories, + Level extends keyof Categories[Category], +>( + category: Category, +) => ( + level: Level, + { + lineHeight, + fontWeight, + fontStyle, + unit, + }: { + lineHeight: LineHeight; + fontWeight: FontWeight; + fontStyle: Option; + unit: ScaleUnit; + }, +) => TypographyStyles; + +/** @deprecated This type will be removed in a future major release */ export type TypographySizes = { [key in string]: number; }; diff --git a/libs/@guardian/source-foundations/src/typography/typography.test.ts b/libs/@guardian/source-foundations/src/_deprecated/typography/typography.test.ts similarity index 98% rename from libs/@guardian/source-foundations/src/typography/typography.test.ts rename to libs/@guardian/source-foundations/src/_deprecated/typography/typography.test.ts index 55a8cb18d..00db36415 100644 --- a/libs/@guardian/source-foundations/src/typography/typography.test.ts +++ b/libs/@guardian/source-foundations/src/_deprecated/typography/typography.test.ts @@ -1,4 +1,4 @@ -import { rootPixelFontSize } from '../utils/convert-value'; +import { rootPixelFontSize } from '../../utils/convert-value'; import { pxTextSizes, remTextSizes } from './data'; import { fonts, diff --git a/libs/@guardian/source-foundations/src/typography/typographyDeprecated.mdx b/libs/@guardian/source-foundations/src/_deprecated/typography/typographyDeprecated.mdx similarity index 100% rename from libs/@guardian/source-foundations/src/typography/typographyDeprecated.mdx rename to libs/@guardian/source-foundations/src/_deprecated/typography/typographyDeprecated.mdx diff --git a/libs/@guardian/source-foundations/src/typography/typographyDeprecated.stories.tsx b/libs/@guardian/source-foundations/src/_deprecated/typography/typographyDeprecated.stories.tsx similarity index 100% rename from libs/@guardian/source-foundations/src/typography/typographyDeprecated.stories.tsx rename to libs/@guardian/source-foundations/src/_deprecated/typography/typographyDeprecated.stories.tsx diff --git a/libs/@guardian/source-foundations/src/deprecated-exports.ts b/libs/@guardian/source-foundations/src/deprecated-exports.ts index 2e1c7c570..06b03d320 100644 --- a/libs/@guardian/source-foundations/src/deprecated-exports.ts +++ b/libs/@guardian/source-foundations/src/deprecated-exports.ts @@ -35,4 +35,47 @@ export { focus, } from './_deprecated/colour/palette'; -export type { TypographySizes } from './_deprecated/typography/types'; +export { + titlepiece, + headline, + body, + textSans, + titlepieceSizes, + headlineSizes, + bodySizes, + textSansSizes, + remTitlepieceSizes, + remHeadlineSizes, + remBodySizes, + remTextSansSizes, + fonts, + fontWeights, + lineHeights, +} from './_deprecated/typography'; + +export { + body as bodyObjectStyles, + headline as headlineObjectStyles, + textSans as textSansObjectStyles, + titlepiece as titlepieceObjectStyles, +} from './_deprecated/typography/obj'; + +export type { + ScaleUnit, + Category, + LineHeight, + FontWeight, + FontStyle, + FontWeightDefinition, + Option, + TypographySizes, + TypographyStyles, + TitlepieceSizes, + HeadlineSizes, + BodySizes, + TextSansSizes, + Fs, + FontScaleFunction, + FontScaleFunctionStr, + FontScaleArgs, +} from './_deprecated/typography/types'; diff --git a/libs/@guardian/source-foundations/src/index.ts b/libs/@guardian/source-foundations/src/index.ts index d69c2cbbd..a2b508ca6 100644 --- a/libs/@guardian/source-foundations/src/index.ts +++ b/libs/@guardian/source-foundations/src/index.ts @@ -35,48 +35,6 @@ export { space, remSpace } from './space/space'; // typography export * from './typography/css'; export * from './typography/objects'; -export { - titlepiece, - headline, - body, - textSans, - titlepieceSizes, - headlineSizes, - bodySizes, - textSansSizes, - remTitlepieceSizes, - remHeadlineSizes, - remBodySizes, - remTextSansSizes, - fonts, - fontWeights, - lineHeights, -} from './typography'; - -export { - body as bodyObjectStyles, - headline as headlineObjectStyles, - textSans as textSansObjectStyles, - titlepiece as titlepieceObjectStyles, -} from './typography/obj'; -export type { - ScaleUnit, - Category, - LineHeight, - FontWeight, - FontStyle, - FontWeightDefinition, - Option, - TypographyStyles, - TitlepieceSizes, - HeadlineSizes, - BodySizes, - TextSansSizes, - Fs, - FontScaleFunction, - FontScaleFunctionStr, - FontScaleArgs, -} from './typography/types'; // utils export { appearance } from './utils/supports-queries'; diff --git a/libs/@guardian/source-foundations/src/tokens.test.ts b/libs/@guardian/source-foundations/src/tokens.test.ts index e93b94263..09fc182ae 100644 --- a/libs/@guardian/source-foundations/src/tokens.test.ts +++ b/libs/@guardian/source-foundations/src/tokens.test.ts @@ -12,20 +12,7 @@ import { line, text, } from './_deprecated/colour/palette'; -import { transitions } from './animation/transitions'; -import { breakpoints } from './breakpoints/breakpoints'; -import { palette } from './colour/palette'; -import { - height, - iconSize, - remHeight, - remWidth, - size, - width, -} from './size/size'; -import { remSpace, space } from './space/space'; -import { body, headline, textSans, titlepiece } from './typography'; -import * as typePresetCss from './typography/css'; +import { body, headline, textSans, titlepiece } from './_deprecated/typography'; import { availableFontWeights, bodySizes, @@ -43,7 +30,20 @@ import { textSansSizes, titlepieceSizes, underlineThickness, -} from './typography/data'; +} from './_deprecated/typography/data'; +import { transitions } from './animation/transitions'; +import { breakpoints } from './breakpoints/breakpoints'; +import { palette } from './colour/palette'; +import { + height, + iconSize, + remHeight, + remWidth, + size, + width, +} from './size/size'; +import { remSpace, space } from './space/space'; +import * as typePresetCss from './typography/css'; import * as typePresetObject from './typography/objects'; import { bodyObjectStyles, diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx b/libs/@guardian/source-foundations/src/typography/TypographyPresets.tsx similarity index 100% rename from libs/@guardian/source-foundations/src/typography/storybookTypographyPresets.tsx rename to libs/@guardian/source-foundations/src/typography/TypographyPresets.tsx diff --git a/libs/@guardian/source-foundations/src/typography/types.ts b/libs/@guardian/source-foundations/src/typography/types.ts deleted file mode 100644 index 1b7d2904c..000000000 --- a/libs/@guardian/source-foundations/src/typography/types.ts +++ /dev/null @@ -1,112 +0,0 @@ -import type { - bodySizes, - fontWeights, - headlineSizes, - lineHeights, - remBodySizes, - remHeadlineSizes, - remTextSansSizes, - remTitlepieceSizes, - textSansSizes, - titlepieceSizes, -} from './data'; - -export type ScaleUnit = 'rem' | 'px'; -export type LineHeight = keyof typeof lineHeights; -export type FontWeight = 'light' | 'regular' | 'medium' | 'bold'; -export type FontStyle = 'normal' | 'italic'; -export type FontWeightDefinition = { hasItalic: boolean }; -export type Option = A | null; - -export type TypographyStyles = { - fontFamily: string; - fontSize: Unit extends 'px' ? number : `${number}rem`; - lineHeight: string | number; - fontWeight?: (typeof fontWeights)[keyof typeof fontWeights] | FontWeight; - fontStyle?: 'normal' | 'italic'; - textDecorationThickness?: number; -}; - -export type TitlepieceSizes = - | typeof titlepieceSizes - | typeof remTitlepieceSizes; -export type HeadlineSizes = typeof headlineSizes | typeof remHeadlineSizes; -export type BodySizes = typeof bodySizes | typeof remBodySizes; -export type TextSansSizes = typeof textSansSizes | typeof remTextSansSizes; -export type AvailableSizes = - | TitlepieceSizes - | HeadlineSizes - | BodySizes - | TextSansSizes; - -export type Categories = { - titlepiece: TitlepieceSizes; - headline: HeadlineSizes; - body: BodySizes; - textSans: TextSansSizes; -}; - -export type Category = keyof Categories; - -export type AvailableFontWeights = { - [cat in Category]?: { [weight in FontWeight]?: boolean }; -}; - -export type ItalicsFontWeights = { - [cat in Category]?: { [weight in FontWeight]?: boolean }; -}; - -export type TypographyConfiguration = { - lineHeight: LineHeight; - fontWeight: FontWeight; - fontStyle: Option; - unit: ScaleUnit; -}; - -export type FontScaleArgs = Partial< - Pick -> & { - fontStyle?: FontStyle; -}; - -export type FontScaleFunction = (options?: FontScaleArgs) => TypographyStyles; - -// returns styles as a template literal -export type FontScaleFunctionStr = (options?: FontScaleArgs) => string; - -export type TypographyStrFunctions = { - [key in keyof Sizes]: FontScaleFunctionStr; -}; - -export type TypographyFunctions = { - [key in keyof Sizes]: FontScaleFunction; -}; - -/** - * This is left over from the refactor of the font style method. - * It is exported from source-foundations but has now been replaced - * by the fontStyleFunction method type definition. - * - * Before we remove it, we need to determine if it is being used. - * - * @deprecated will be removed in the next major version - */ -export type Fs = < - Category extends keyof Categories, - Level extends keyof Categories[Category], ->( - category: Category, -) => ( - level: Level, - { - lineHeight, - fontWeight, - fontStyle, - unit, - }: { - lineHeight: LineHeight; - fontWeight: FontWeight; - fontStyle: Option; - unit: ScaleUnit; - }, -) => TypographyStyles; diff --git a/libs/@guardian/source-foundations/src/typography/typography.stories.tsx b/libs/@guardian/source-foundations/src/typography/typography.stories.tsx index 3ff637183..1f2696064 100644 --- a/libs/@guardian/source-foundations/src/typography/typography.stories.tsx +++ b/libs/@guardian/source-foundations/src/typography/typography.stories.tsx @@ -1,4 +1,4 @@ -import { TypographyPresets } from './storybookTypographyPresets'; +import { TypographyPresets } from './TypographyPresets'; export default { title: 'Typography',