Add object literal representation of typography presets (#1283)

Add object literal representation of type presets
guardian · Mar 15, 2024 · d28774a · d28774a
1 parent 63ed40d
commit d28774a
Show file tree

Hide file tree

Showing 7 changed files with 1,821 additions and 102 deletions.
diff --git a/libs/@guardian/source-foundations/scripts/build-type-presets.ts b/libs/@guardian/source-foundations/scripts/build-type-presets.ts
@@ -16,14 +16,16 @@ const textDecorationThickness = (size: string) =>
 console.log('Building typography presets…');
 
 const presetTotal = Object.keys(presets).length;
-const outputPath = `${process.cwd()}/src/typography/presets.ts`;
+const cssOutputPath = `${process.cwd()}/src/typography/css.ts`;
+const objectOutputPath = `${process.cwd()}/src/typography/objects.ts`;
 
 const banner = `
 	// Typography presets
 	// Auto-generated by scripts/build-type-presets.ts
 	// DO NOT EDIT
 `.replace(STRIP_WHITESPACE, '');
 
+// Generate CSS representation of presets as a string
 const css = Object.entries(presets)
 	.map(
 		([preset, properties]) => `
@@ -40,5 +42,22 @@ const css = Object.entries(presets)
 	.join('')
 	.replace(STRIP_TABS, '');
 
-fs.writeFileSync(outputPath, banner + css);
+// Generate object literal representation of presets
+const object = Object.entries(presets)
+	.map(
+		([preset, properties]) => `
+			export const ${preset}Object = {
+				fontFamily: '${fontArrayToString(properties.fontFamily)}',
+				fontSize: '${pxStringToRem(properties.fontSize)}rem',
+				lineHeight: ${properties.lineHeight},
+				fontWeight: ${properties.fontWeight},
+				fontStyle: '${properties.fontStyle}',
+			};
+		`,
+	)
+	.join('')
+	.replace(STRIP_TABS, '');
+
+fs.writeFileSync(cssOutputPath, banner + css);
+fs.writeFileSync(objectOutputPath, banner + object);
 console.log(`✓ ${presetTotal} presets built`);
diff --git a/libs/@guardian/source-foundations/src/index.test.ts b/libs/@guardian/source-foundations/src/index.test.ts
@@ -28,13 +28,21 @@ it('Should have exactly these exports', () => {
 		'FocusStyleManager',
 		'appearance',
 		'article15',
+		'article15Object',
 		'article17',
+		'article17Object',
 		'articleBold15',
+		'articleBold15Object',
 		'articleBold17',
+		'articleBold17Object',
 		'articleBoldItalic15',
+		'articleBoldItalic15Object',
 		'articleBoldItalic17',
+		'articleBoldItalic17Object',
 		'articleItalic15',
+		'articleItalic15Object',
 		'articleItalic17',
+		'articleItalic17Object',
 		'background',
 		'between',
 		'body',
@@ -64,59 +72,109 @@ it('Should have exactly these exports', () => {
 		'generateSourceId',
 		'headline',
 		'headlineBold14',
+		'headlineBold14Object',
 		'headlineBold17',
+		'headlineBold17Object',
 		'headlineBold20',
+		'headlineBold20Object',
 		'headlineBold24',
+		'headlineBold24Object',
 		'headlineBold28',
+		'headlineBold28Object',
 		'headlineBold34',
+		'headlineBold34Object',
 		'headlineBold42',
+		'headlineBold42Object',
 		'headlineBold50',
+		'headlineBold50Object',
 		'headlineBold70',
+		'headlineBold70Object',
 		'headlineLight14',
+		'headlineLight14Object',
 		'headlineLight17',
+		'headlineLight17Object',
 		'headlineLight20',
+		'headlineLight20Object',
 		'headlineLight24',
+		'headlineLight24Object',
 		'headlineLight28',
+		'headlineLight28Object',
 		'headlineLight34',
+		'headlineLight34Object',
 		'headlineLight42',
+		'headlineLight42Object',
 		'headlineLight50',
+		'headlineLight50Object',
 		'headlineLight70',
+		'headlineLight70Object',
 		'headlineLightItalic14',
+		'headlineLightItalic14Object',
 		'headlineLightItalic17',
+		'headlineLightItalic17Object',
 		'headlineLightItalic20',
+		'headlineLightItalic20Object',
 		'headlineLightItalic24',
+		'headlineLightItalic24Object',
 		'headlineLightItalic28',
+		'headlineLightItalic28Object',
 		'headlineLightItalic34',
+		'headlineLightItalic34Object',
 		'headlineLightItalic42',
+		'headlineLightItalic42Object',
 		'headlineLightItalic50',
+		'headlineLightItalic50Object',
 		'headlineLightItalic70',
+		'headlineLightItalic70Object',
 		'headlineMedium14',
+		'headlineMedium14Object',
 		'headlineMedium17',
+		'headlineMedium17Object',
 		'headlineMedium20',
+		'headlineMedium20Object',
 		'headlineMedium24',
+		'headlineMedium24Object',
 		'headlineMedium28',
+		'headlineMedium28Object',
 		'headlineMedium34',
+		'headlineMedium34Object',
 		'headlineMedium42',
+		'headlineMedium42Object',
 		'headlineMedium50',
+		'headlineMedium50Object',
 		'headlineMedium70',
+		'headlineMedium70Object',
 		'headlineMediumItalic14',
+		'headlineMediumItalic14Object',
 		'headlineMediumItalic17',
+		'headlineMediumItalic17Object',
 		'headlineMediumItalic20',
+		'headlineMediumItalic20Object',
 		'headlineMediumItalic24',
+		'headlineMediumItalic24Object',
 		'headlineMediumItalic28',
+		'headlineMediumItalic28Object',
 		'headlineMediumItalic34',
+		'headlineMediumItalic34Object',
 		'headlineMediumItalic42',
+		'headlineMediumItalic42Object',
 		'headlineMediumItalic50',
+		'headlineMediumItalic50Object',
 		'headlineMediumItalic70',
+		'headlineMediumItalic70Object',
 		'headlineObjectStyles',
 		'headlineSizes',
 		'height',
 		'iconSize',
 		'kicker14',
+		'kicker14Object',
 		'kicker17',
+		'kicker17Object',
 		'kicker20',
+		'kicker20Object',
 		'kicker24',
+		'kicker24Object',
 		'kicker34',
+		'kicker34Object',
 		'labs',
 		'lifestyle',
 		'line',
@@ -143,48 +201,87 @@ it('Should have exactly these exports', () => {
 		'svgBackgroundImage',
 		'text',
 		'textEgyptian14',
+		'textEgyptian14Object',
 		'textEgyptian15',
+		'textEgyptian15Object',
 		'textEgyptian17',
+		'textEgyptian17Object',
 		'textEgyptianBold14',
+		'textEgyptianBold14Object',
 		'textEgyptianBold15',
+		'textEgyptianBold15Object',
 		'textEgyptianBold17',
+		'textEgyptianBold17Object',
 		'textEgyptianBoldItalic14',
+		'textEgyptianBoldItalic14Object',
 		'textEgyptianBoldItalic15',
+		'textEgyptianBoldItalic15Object',
 		'textEgyptianBoldItalic17',
+		'textEgyptianBoldItalic17Object',
 		'textEgyptianItalic14',
+		'textEgyptianItalic14Object',
 		'textEgyptianItalic15',
+		'textEgyptianItalic15Object',
 		'textEgyptianItalic17',
+		'textEgyptianItalic17Object',
 		'textSans',
 		'textSans12',
+		'textSans12Object',
 		'textSans14',
+		'textSans14Object',
 		'textSans15',
+		'textSans15Object',
 		'textSans17',
+		'textSans17Object',
 		'textSans20',
+		'textSans20Object',
 		'textSans24',
+		'textSans24Object',
 		'textSans28',
+		'textSans28Object',
 		'textSans34',
+		'textSans34Object',
 		'textSansBold12',
+		'textSansBold12Object',
 		'textSansBold14',
+		'textSansBold14Object',
 		'textSansBold15',
+		'textSansBold15Object',
 		'textSansBold17',
+		'textSansBold17Object',
 		'textSansBold20',
+		'textSansBold20Object',
 		'textSansBold24',
+		'textSansBold24Object',
 		'textSansBold28',
+		'textSansBold28Object',
 		'textSansBold34',
+		'textSansBold34Object',
 		'textSansItalic12',
+		'textSansItalic12Object',
 		'textSansItalic14',
+		'textSansItalic14Object',
 		'textSansItalic15',
+		'textSansItalic15Object',
 		'textSansItalic17',
+		'textSansItalic17Object',
 		'textSansItalic20',
+		'textSansItalic20Object',
 		'textSansItalic24',
+		'textSansItalic24Object',
 		'textSansItalic28',
+		'textSansItalic28Object',
 		'textSansItalic34',
+		'textSansItalic34Object',
 		'textSansObjectStyles',
 		'textSansSizes',
 		'titlepiece',
 		'titlepiece42',
+		'titlepiece42Object',
 		'titlepiece50',
+		'titlepiece50Object',
 		'titlepiece70',
+		'titlepiece70Object',
 		'titlepieceObjectStyles',
 		'titlepieceSizes',
 		'transitions',

diff --git a/libs/@guardian/source-foundations/src/index.ts b/libs/@guardian/source-foundations/src/index.ts
@@ -72,7 +72,8 @@ export {
 export { space, remSpace } from './space/space';
 
 // typography
-export * from './typography/presets';
+export * from './typography/css';
+export * from './typography/objects';
 export {
 	titlepiece,
 	headline,