@guardian/src-foundations - npm Package Compare versions

Comparing version 0.16.0 to 0.16.1

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "0.16.0",
+	"version": "0.16.1",
 	"main": "foundations.js",
@@ -5,0 +5,0 @@ "module": "foundations.esm.js",

src/typography/api.ts

 import {
-	TypographyStyles,
-	FontScaleArgs,
 	TitlepieceSizes,
@@ -8,7 +6,9 @@ HeadlineSizes,
 	TextSansSizes,
-} from "./data"
+	FontScaleArgs,
+	FontScaleFunction,
+} from "./types"
 import { fs } from "./fs"
 
 type TitlepieceFunctions = {
-	[key in TitlepieceSizes]: (options?: FontScaleArgs) => TypographyStyles
+	[key in keyof TitlepieceSizes]: FontScaleFunction
 }
@@ -34,3 +34,3 @@
 type HeadlineFunctions = {
-	[key in HeadlineSizes]: (options?: FontScaleArgs) => TypographyStyles
+	[key in keyof HeadlineSizes]: FontScaleFunction
 }
@@ -63,3 +63,3 @@ const headlineDefaults = {
 type BodyFunctions = {
-	[key in BodySizes]: (options?: FontScaleArgs) => TypographyStyles
+	[key in keyof BodySizes]: FontScaleFunction
 }
@@ -83,3 +83,3 @@
 type TextSansFunctions = {
-	[key in TextSansSizes]: (options?: FontScaleArgs) => TypographyStyles
+	[key in keyof TextSansSizes]: FontScaleFunction
 }
@@ -86,0 +86,0 @@

src/typography/data.ts

 import { fontSizes, fonts, lineHeights, fontWeights } from "../theme"
+import {
+	Category,
+	LineHeight,
+	FontWeight,
+	FontWeightDefinition,
+	TitlepieceSizes,
+	HeadlineSizes,
+	BodySizes,
+	TextSansSizes,
+	TypographySizes,
+} from "./types"
 
-export type ScaleUnit = "rem" | "px"
-export type Category = "titlepiece" | "headline" | "body" | "textSans"
-export type LineHeight = "tight" | "regular" | "loose"
-export type FontWeight = "light" | "regular" | "medium" | "bold"
-export type FontWeightDefinition = { hasItalic: boolean }
-
-export type TitlepieceSizes = "small" | "medium" | "large"
-
-export type HeadlineSizes =
-	| "xxxsmall"
-	| "xxsmall"
-	| "xsmall"
-	| "small"
-	| "medium"
-	| "large"
-	| "xlarge"
-
-export type BodySizes = "small" | "medium"
-
-export type TextSansSizes = "xsmall" | "small" | "medium" | "large" | "xlarge"
-
-export type TypographyStyles = {
-	fontFamily: string
-	fontSize: string | number
-	lineHeight: string | number
-	fontWeight?: number
-	fontStyle?: string
-}
-
-export type Fs = (
-	category: Category,
-) => (
-	level: string,
-	{
-		lineHeight,
-		fontWeight,
-		italic,
-		unit,
-	}: {
-		lineHeight: LineHeight
-		fontWeight: FontWeight
-		italic: boolean
-		unit: ScaleUnit
-	},
-) => TypographyStyles
-
-export interface FontScaleArgs {
-	lineHeight?: LineHeight
-	fontWeight?: FontWeight
-	italic?: boolean
-	unit?: ScaleUnit
-}
-
-const titlepieceSizes: { [key in TitlepieceSizes]: number } = {
+const titlepieceSizes: TitlepieceSizes = {
 	small: fontSizes[7], //42px
@@ -62,3 +20,3 @@ medium: fontSizes[8], //50px
 
-const headlineSizes: { [key in HeadlineSizes]: number } = {
+const headlineSizes: HeadlineSizes = {
 	xxxsmall: fontSizes[2], //17px
@@ -73,3 +31,3 @@ xxsmall: fontSizes[3], //20px
 
-const bodySizes: { [key in BodySizes]: number } = {
+const bodySizes: BodySizes = {
 	small: fontSizes[1], //15px
@@ -79,3 +37,3 @@ medium: fontSizes[2], //17px
 
-const textSansSizes: { [key in TextSansSizes]: number } = {
+const textSansSizes: TextSansSizes = {
 	xsmall: fontSizes[0], //12px
@@ -89,3 +47,3 @@ small: fontSizes[1], //15px
 const fontSizeMapping: {
-	[cat in Category]: { [level in string]: number }
+	[cat in Category]: TypographySizes
 } = {
@@ -100,3 +58,3 @@ titlepiece: titlepieceSizes,
 
-const remTitlepieceSizes: { [key in TitlepieceSizes]: number } = {
+const remTitlepieceSizes: TitlepieceSizes = {
 	small: remFontSizes[7], //42px
@@ -107,3 +65,3 @@ medium: remFontSizes[8], //50px
 
-const remHeadlineSizes: { [key in HeadlineSizes]: number } = {
+const remHeadlineSizes: HeadlineSizes = {
 	xxxsmall: remFontSizes[2], //17px
@@ -118,3 +76,3 @@ xxsmall: remFontSizes[3], //20px
 
-const remBodySizes: { [key in BodySizes]: number } = {
+const remBodySizes: BodySizes = {
 	small: remFontSizes[1], //15px
@@ -124,3 +82,3 @@ medium: remFontSizes[2], //17px
 
-const remTextSansSizes: { [key in TextSansSizes]: number } = {
+const remTextSansSizes: TextSansSizes = {
 	xsmall: remFontSizes[0], //12px
@@ -134,3 +92,3 @@ small: remFontSizes[1], //15px
 const remFontSizeMapping: {
-	[cat in Category]: { [level in string]: number }
+	[cat in Category]: TypographySizes
 } = {
@@ -137,0 +95,0 @@ titlepiece: remTitlepieceSizes,

src/typography/fs.ts

 import {
-	Fs,
 	fontMapping,
@@ -9,2 +8,3 @@ fontSizeMapping,
 } from "./data"
+import { Fs } from "./types"
 
@@ -11,0 +11,0 @@ export const fs: Fs = category => (

src/typography/index.ts

@@ -20,6 +20,34 @@ import {
 	lineHeightMapping,
+} from "./data"
+import {
+	TitlepieceSizes,
+	HeadlineSizes,
+	BodySizes,
+	TextSansSizes,
 	FontScaleArgs,
-} from "./data"
+	FontScaleFunctionStr,
+} from "./types"
 
-const titlepiece = Object.fromEntries(
+const fromEntries = <Sizes>(
+	entries: [keyof Sizes, FontScaleFunctionStr][],
+): {
+	[key in keyof Sizes]: FontScaleFunctionStr
+} =>
+	entries.reduce(
+		(
+			acc: {
+				[key in keyof Sizes]: FontScaleFunctionStr
+			},
+			[key, value],
+		) => {
+			acc[key] = value
+
+			return acc
+		},
+		{} as {
+			[key in keyof Sizes]: FontScaleFunctionStr
+		},
+	)
+
+const titlepiece = fromEntries<TitlepieceSizes>(
 	Object.entries(titlepieceAsObj).map(([key, func]) => {
@@ -32,3 +60,3 @@ return [
 )
-const headline = Object.fromEntries(
+const headline = fromEntries<HeadlineSizes>(
 	Object.entries(headlineAsObj).map(([key, func]) => {
@@ -41,3 +69,3 @@ return [
 )
-const body = Object.fromEntries(
+const body = fromEntries<BodySizes>(
 	Object.entries(bodyAsObj).map(([key, func]) => {
@@ -50,3 +78,3 @@ return [
 )
-const textSans = Object.fromEntries(
+const textSans = fromEntries<TextSansSizes>(
 	Object.entries(textSansAsObj).map(([key, func]) => {
@@ -53,0 +81,0 @@ return [

src/typography/object-styles-to-string.ts

@@ -1,2 +0,2 @@
-import { TypographyStyles } from "./data"
+import { TypographyStyles } from "./types"
 
@@ -3,0 +3,0 @@ export const objectStylesToString = ({

typography/api.d.ts

@@ -1,18 +0,18 @@
-import { TypographyStyles, FontScaleArgs, TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes } from "./data";
+import { TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, FontScaleFunction } from "./types";
 declare type TitlepieceFunctions = {
-    [key in TitlepieceSizes]: (options?: FontScaleArgs) => TypographyStyles;
+    [key in keyof TitlepieceSizes]: FontScaleFunction;
 };
 export declare const titlepiece: TitlepieceFunctions;
 declare type HeadlineFunctions = {
-    [key in HeadlineSizes]: (options?: FontScaleArgs) => TypographyStyles;
+    [key in keyof HeadlineSizes]: FontScaleFunction;
 };
 export declare const headline: HeadlineFunctions;
 declare type BodyFunctions = {
-    [key in BodySizes]: (options?: FontScaleArgs) => TypographyStyles;
+    [key in keyof BodySizes]: FontScaleFunction;
 };
 export declare const body: BodyFunctions;
 declare type TextSansFunctions = {
-    [key in TextSansSizes]: (options?: FontScaleArgs) => TypographyStyles;
+    [key in keyof TextSansSizes]: FontScaleFunction;
 };
 export declare const textSans: TextSansFunctions;
 export {};

typography/cjs/index.js

@@ -361,12 +361,14 @@ 'use strict';
 
-var titlepiece$1 = Object.fromEntries(Object.entries(titlepiece).map(function (_ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-      key = _ref2[0],
-      func = _ref2[1];
+var fromEntries = function fromEntries(entries) {
+  return entries.reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
-  }];
-}));
-var headline$1 = Object.fromEntries(Object.entries(headline).map(function (_ref3) {
+    acc[key] = value;
+    return acc;
+  }, {});
+};
+
+var titlepiece$1 = fromEntries(Object.entries(titlepiece).map(function (_ref3) {
   var _ref4 = _slicedToArray(_ref3, 2),
@@ -380,3 +382,3 @@ key = _ref4[0],
 }));
-var body$1 = Object.fromEntries(Object.entries(body).map(function (_ref5) {
+var headline$1 = fromEntries(Object.entries(headline).map(function (_ref5) {
   var _ref6 = _slicedToArray(_ref5, 2),
@@ -390,3 +392,3 @@ key = _ref6[0],
 }));
-var textSans$1 = Object.fromEntries(Object.entries(textSans).map(function (_ref7) {
+var body$1 = fromEntries(Object.entries(body).map(function (_ref7) {
   var _ref8 = _slicedToArray(_ref7, 2),
@@ -400,3 +402,12 @@ key = _ref8[0],
 }));
+var textSans$1 = fromEntries(Object.entries(textSans).map(function (_ref9) {
+  var _ref10 = _slicedToArray(_ref9, 2),
+      key = _ref10[0],
+      func = _ref10[1];
 
+  return [key, function (options) {
+    return objectStylesToString(func(options));
+  }];
+}));
+
 exports.body = body$1;
@@ -403,0 +414,0 @@ exports.bodySizes = bodySizes;

typography/data.d.ts

@@ -1,65 +0,16 @@
-export declare type ScaleUnit = "rem" | "px";
-export declare type Category = "titlepiece" | "headline" | "body" | "textSans";
-export declare type LineHeight = "tight" | "regular" | "loose";
-export declare type FontWeight = "light" | "regular" | "medium" | "bold";
-export declare type FontWeightDefinition = {
-    hasItalic: boolean;
-};
-export declare type TitlepieceSizes = "small" | "medium" | "large";
-export declare type HeadlineSizes = "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge";
-export declare type BodySizes = "small" | "medium";
-export declare type TextSansSizes = "xsmall" | "small" | "medium" | "large" | "xlarge";
-export declare type TypographyStyles = {
-    fontFamily: string;
-    fontSize: string | number;
-    lineHeight: string | number;
-    fontWeight?: number;
-    fontStyle?: string;
-};
-export declare type Fs = (category: Category) => (level: string, { lineHeight, fontWeight, italic, unit, }: {
-    lineHeight: LineHeight;
-    fontWeight: FontWeight;
-    italic: boolean;
-    unit: ScaleUnit;
-}) => TypographyStyles;
-export interface FontScaleArgs {
-    lineHeight?: LineHeight;
-    fontWeight?: FontWeight;
-    italic?: boolean;
-    unit?: ScaleUnit;
-}
-declare const titlepieceSizes: {
-    [key in TitlepieceSizes]: number;
-};
-declare const headlineSizes: {
-    [key in HeadlineSizes]: number;
-};
-declare const bodySizes: {
-    [key in BodySizes]: number;
-};
-declare const textSansSizes: {
-    [key in TextSansSizes]: number;
-};
+import { Category, LineHeight, FontWeight, FontWeightDefinition, TitlepieceSizes, HeadlineSizes, BodySizes, TextSansSizes, TypographySizes } from "./types";
+declare const titlepieceSizes: TitlepieceSizes;
+declare const headlineSizes: HeadlineSizes;
+declare const bodySizes: BodySizes;
+declare const textSansSizes: TextSansSizes;
 declare const fontSizeMapping: {
-    [cat in Category]: {
-        [level in string]: number;
-    };
+    [cat in Category]: TypographySizes;
 };
 declare const remFontSizes: number[];
-declare const remTitlepieceSizes: {
-    [key in TitlepieceSizes]: number;
-};
-declare const remHeadlineSizes: {
-    [key in HeadlineSizes]: number;
-};
-declare const remBodySizes: {
-    [key in BodySizes]: number;
-};
-declare const remTextSansSizes: {
-    [key in TextSansSizes]: number;
-};
+declare const remTitlepieceSizes: TitlepieceSizes;
+declare const remHeadlineSizes: HeadlineSizes;
+declare const remBodySizes: BodySizes;
+declare const remTextSansSizes: TextSansSizes;
 declare const remFontSizeMapping: {
-    [cat in Category]: {
-        [level in string]: number;
-    };
+    [cat in Category]: TypographySizes;
 };
@@ -66,0 +17,0 @@ declare const fontMapping: {

typography/fs.d.ts

@@ -1,2 +0,2 @@
-import { Fs } from "./data";
+import { Fs } from "./types";
 export declare const fs: Fs;

typography/index.d.ts

@@ -1,18 +0,32 @@
-import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping, FontScaleArgs } from "./data";
+import { titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping, fontWeightMapping, lineHeightMapping } from "./data";
+import { FontScaleFunctionStr } from "./types";
 declare const titlepiece: {
-    [x: string]: (options?: FontScaleArgs) => string;
-    [x: number]: (options?: FontScaleArgs) => string;
+    [x: string]: FontScaleFunctionStr;
+    small: FontScaleFunctionStr;
+    medium: FontScaleFunctionStr;
+    large: FontScaleFunctionStr;
 };
 declare const headline: {
-    [x: string]: (options?: FontScaleArgs) => string;
-    [x: number]: (options?: FontScaleArgs) => string;
+    [x: string]: FontScaleFunctionStr;
+    xxxsmall: FontScaleFunctionStr;
+    xxsmall: FontScaleFunctionStr;
+    xsmall: FontScaleFunctionStr;
+    small: FontScaleFunctionStr;
+    medium: FontScaleFunctionStr;
+    large: FontScaleFunctionStr;
+    xlarge: FontScaleFunctionStr;
 };
 declare const body: {
-    [x: string]: (options?: FontScaleArgs) => string;
-    [x: number]: (options?: FontScaleArgs) => string;
+    [x: string]: FontScaleFunctionStr;
+    small: FontScaleFunctionStr;
+    medium: FontScaleFunctionStr;
 };
 declare const textSans: {
-    [x: string]: (options?: FontScaleArgs) => string;
-    [x: number]: (options?: FontScaleArgs) => string;
+    [x: string]: FontScaleFunctionStr;
+    xsmall: FontScaleFunctionStr;
+    small: FontScaleFunctionStr;
+    medium: FontScaleFunctionStr;
+    large: FontScaleFunctionStr;
+    xlarge: FontScaleFunctionStr;
 };
 export { titlepiece, headline, body, textSans, titlepieceSizes, headlineSizes, bodySizes, textSansSizes, remTitlepieceSizes, remHeadlineSizes, remBodySizes, remTextSansSizes, fontMapping as fonts, fontWeightMapping as fontWeights, lineHeightMapping as lineHeights, };

typography/index.js

@@ -357,12 +357,14 @@ function _slicedToArray(arr, i) {
 
-var titlepiece$1 = Object.fromEntries(Object.entries(titlepiece).map(function (_ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-      key = _ref2[0],
-      func = _ref2[1];
+var fromEntries = function fromEntries(entries) {
+  return entries.reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
 
-  return [key, function (options) {
-    return objectStylesToString(func(options));
-  }];
-}));
-var headline$1 = Object.fromEntries(Object.entries(headline).map(function (_ref3) {
+    acc[key] = value;
+    return acc;
+  }, {});
+};
+
+var titlepiece$1 = fromEntries(Object.entries(titlepiece).map(function (_ref3) {
   var _ref4 = _slicedToArray(_ref3, 2),
@@ -376,3 +378,3 @@ key = _ref4[0],
 }));
-var body$1 = Object.fromEntries(Object.entries(body).map(function (_ref5) {
+var headline$1 = fromEntries(Object.entries(headline).map(function (_ref5) {
   var _ref6 = _slicedToArray(_ref5, 2),
@@ -386,3 +388,3 @@ key = _ref6[0],
 }));
-var textSans$1 = Object.fromEntries(Object.entries(textSans).map(function (_ref7) {
+var body$1 = fromEntries(Object.entries(body).map(function (_ref7) {
   var _ref8 = _slicedToArray(_ref7, 2),
@@ -396,3 +398,12 @@ key = _ref8[0],
 }));
+var textSans$1 = fromEntries(Object.entries(textSans).map(function (_ref9) {
+  var _ref10 = _slicedToArray(_ref9, 2),
+      key = _ref10[0],
+      func = _ref10[1];
 
+  return [key, function (options) {
+    return objectStylesToString(func(options));
+  }];
+}));
+
 export { body$1 as body, bodySizes, fontWeightMapping as fontWeights, fontMapping as fonts, headline$1 as headline, headlineSizes, lineHeightMapping as lineHeights, remBodySizes, remHeadlineSizes, remTextSansSizes, remTitlepieceSizes, textSans$1 as textSans, textSansSizes, titlepiece$1 as titlepiece, titlepieceSizes };

typography/object-styles-to-string.d.ts

@@ -1,2 +0,2 @@
-import { TypographyStyles } from "./data";
+import { TypographyStyles } from "./types";
 export declare const objectStylesToString: ({ fontFamily, fontSize, lineHeight, fontWeight, fontStyle, }: TypographyStyles) => string;

No alert changes

Improved metrics

Total package byte prevSize

199227

increased by0.96%

Number of package files

110

increased by1.85%

Lines of code

7074

increased by1.38%

No dependency changes