@guardian/src-foundations - npm Package Compare versions

Comparing version 0.16.0-alpha.3 to 0.16.0-alpha.4

package.json

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

src/typography/data.ts

@@ -27,3 +27,3 @@ import { fontSizes, fonts, lineHeights, fontWeights } from "../theme"
 	fontSize: string | number
-	lineHeight: number
+	lineHeight: string | number
 	fontWeight?: number
@@ -30,0 +30,0 @@ fontStyle?: string

src/typography/fs.ts

@@ -22,3 +22,4 @@ import {
 		unit === "px"
-			? lineHeightMapping[lineHeight] * fontSizeMapping[category][level]
+			? `${lineHeightMapping[lineHeight] *
+					fontSizeMapping[category][level]}px`
 			: lineHeightMapping[lineHeight]
@@ -25,0 +26,0 @@ // TODO: consider logging an error in development if a requested

src/typography/index.ts

@@ -27,4 +27,3 @@ import {
 			key,
-			(options: FontScaleArgs = {}) =>
-				objectStylesToString(func(options), options.unit),
+			(options?: FontScaleArgs) => objectStylesToString(func(options)),
 		]
@@ -37,4 +36,3 @@ }),
 			key,
-			(options: FontScaleArgs = {}) =>
-				objectStylesToString(func(options), options.unit),
+			(options?: FontScaleArgs) => objectStylesToString(func(options)),
 		]
@@ -47,4 +45,3 @@ }),
 			key,
-			(options: FontScaleArgs = {}) =>
-				objectStylesToString(func(options), options.unit),
+			(options?: FontScaleArgs) => objectStylesToString(func(options)),
 		]
@@ -57,4 +54,3 @@ }),
 			key,
-			(options: FontScaleArgs = {}) =>
-				objectStylesToString(func(options), options.unit),
+			(options?: FontScaleArgs) => objectStylesToString(func(options)),
 		]
@@ -61,0 +57,0 @@ }),

src/typography/obj/typography.obj.test.ts

@@ -47,3 +47,3 @@ import {
 	expect(mediumHeadlineStyles.lineHeight).toBe(
-		lineHeights.tight * headlineSizes.medium,
+		`${lineHeights.tight * headlineSizes.medium}px`,
 	)
@@ -50,0 +50,0 @@ })

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

@@ -1,18 +0,15 @@
-import { TypographyStyles, ScaleUnit } from "./data"
+import { TypographyStyles } from "./data"
 
-export const objectStylesToString = (
-	{
-		fontFamily,
-		fontSize,
-		lineHeight,
-		fontWeight,
-		fontStyle,
-	}: TypographyStyles,
-	unit?: ScaleUnit,
-) => `
+export const objectStylesToString = ({
+	fontFamily,
+	fontSize,
+	lineHeight,
+	fontWeight,
+	fontStyle,
+}: TypographyStyles) => `
 	font-family: ${fontFamily};
-	font-size: ${unit === "px" ? `${fontSize}px` : fontSize};
-	line-height: ${unit === "px" ? `${lineHeight}px` : lineHeight};
+	font-size: ${typeof fontSize === "number" ? `${fontSize}px` : fontSize};
+	line-height: ${lineHeight};
 	${fontWeight ? `font-weight: ${fontWeight}` : ""};
 	${fontStyle ? `font-style: ${fontStyle}` : ""};
 `

typography/cjs/index.js

@@ -245,3 +245,3 @@ 'use strict';
   var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
-  var lineHeightValue = unit === "px" ? lineHeightMapping[lineHeight] * fontSizeMapping[category][level] : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
+  var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
   // font is unavailable
@@ -351,3 +351,3 @@
 
-var objectStylesToString = function objectStylesToString(_ref, unit) {
+var objectStylesToString = function objectStylesToString(_ref) {
   var fontFamily = _ref.fontFamily,
@@ -358,3 +358,3 @@ fontSize = _ref.fontSize,
       fontStyle = _ref.fontStyle;
-  return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(unit === "px" ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(unit === "px" ? "".concat(lineHeight, "px") : lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
+  return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(typeof fontSize === "number" ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
 };
@@ -367,5 +367,4 @@
 
-  return [key, function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return objectStylesToString(func(options), options.unit);
+  return [key, function (options) {
+    return objectStylesToString(func(options));
   }];
@@ -378,5 +377,4 @@ }));
 
-  return [key, function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return objectStylesToString(func(options), options.unit);
+  return [key, function (options) {
+    return objectStylesToString(func(options));
   }];
@@ -389,5 +387,4 @@ }));
 
-  return [key, function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return objectStylesToString(func(options), options.unit);
+  return [key, function (options) {
+    return objectStylesToString(func(options));
   }];
@@ -400,5 +397,4 @@ }));
 
-  return [key, function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return objectStylesToString(func(options), options.unit);
+  return [key, function (options) {
+    return objectStylesToString(func(options));
   }];
@@ -405,0 +401,0 @@ }));

typography/data.d.ts

@@ -15,3 +15,3 @@ export declare type ScaleUnit = "rem" | "px";
     fontSize: string | number;
-    lineHeight: number;
+    lineHeight: string | number;
     fontWeight?: number;
@@ -18,0 +18,0 @@ fontStyle?: string;

typography/index.js

@@ -241,3 +241,3 @@ function _slicedToArray(arr, i) {
   var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
-  var lineHeightValue = unit === "px" ? lineHeightMapping[lineHeight] * fontSizeMapping[category][level] : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
+  var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
   // font is unavailable
@@ -347,3 +347,3 @@
 
-var objectStylesToString = function objectStylesToString(_ref, unit) {
+var objectStylesToString = function objectStylesToString(_ref) {
   var fontFamily = _ref.fontFamily,
@@ -354,3 +354,3 @@ fontSize = _ref.fontSize,
       fontStyle = _ref.fontStyle;
-  return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(unit === "px" ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(unit === "px" ? "".concat(lineHeight, "px") : lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
+  return "\n\tfont-family: ".concat(fontFamily, ";\n\tfont-size: ").concat(typeof fontSize === "number" ? "".concat(fontSize, "px") : fontSize, ";\n\tline-height: ").concat(lineHeight, ";\n\t").concat(fontWeight ? "font-weight: ".concat(fontWeight) : "", ";\n\t").concat(fontStyle ? "font-style: ".concat(fontStyle) : "", ";\n");
 };
@@ -363,5 +363,4 @@
 
-  return [key, function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return objectStylesToString(func(options), options.unit);
+  return [key, function (options) {
+    return objectStylesToString(func(options));
   }];
@@ -374,5 +373,4 @@ }));
 
-  return [key, function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return objectStylesToString(func(options), options.unit);
+  return [key, function (options) {
+    return objectStylesToString(func(options));
   }];
@@ -385,5 +383,4 @@ }));
 
-  return [key, function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return objectStylesToString(func(options), options.unit);
+  return [key, function (options) {
+    return objectStylesToString(func(options));
   }];
@@ -396,5 +393,4 @@ }));
 
-  return [key, function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return objectStylesToString(func(options), options.unit);
+  return [key, function (options) {
+    return objectStylesToString(func(options));
   }];
@@ -401,0 +397,0 @@ }));

typography/obj/cjs/index.js

@@ -203,3 +203,3 @@ 'use strict';
   var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
-  var lineHeightValue = unit === "px" ? lineHeightMapping[lineHeight] * fontSizeMapping[category][level] : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
+  var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
   // font is unavailable
@@ -206,0 +206,0 @@

typography/obj/index.js

@@ -199,3 +199,3 @@ // The theme file is based on the specification at https://system-ui.com/theme
   var fontSizeValue = unit === "px" ? fontSizeMapping[category][level] : "".concat(fontSizeMapping[category][level] / 16, "rem");
-  var lineHeightValue = unit === "px" ? lineHeightMapping[lineHeight] * fontSizeMapping[category][level] : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
+  var lineHeightValue = unit === "px" ? "".concat(lineHeightMapping[lineHeight] * fontSizeMapping[category][level], "px") : lineHeightMapping[lineHeight]; // TODO: consider logging an error in development if a requested
   // font is unavailable
@@ -202,0 +202,0 @@

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

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

No alert changes

Worsened metrics

Total package byte prevSize

196820

decreased by-0.47%

Lines of code

6954

decreased by-0.2%

No dependency changes