@guardian/src-foundations - npm Package Compare versions

Comparing version 0.6.0-alpha.2 to 0.6.0

accessibility/index.js

@@ -5,3 +5,2 @@ 'use strict';
 
-var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
 // e.g. for sport:
@@ -126,33 +125,2 @@ // const [dark, main, bright, pastel, faded] = colors.blue
 
-var headlineSizes = {
-  1: fontSizes[2],
-  2: fontSizes[3],
-  3: fontSizes[4],
-  4: fontSizes[5],
-  5: fontSizes[6],
-  6: fontSizes[7],
-  7: fontSizes[8],
-  8: fontSizes[9]
-};
-var bodySizes = {
-  1: fontSizes[1],
-  2: fontSizes[2]
-};
-var textSansSizes = {
-  1: fontSizes[0],
-  2: fontSizes[1],
-  3: fontSizes[2],
-  4: fontSizes[3],
-  5: fontSizes[4],
-  6: fontSizes[5],
-  7: fontSizes[6],
-  8: fontSizes[7],
-  9: fontSizes[8],
-  10: fontSizes[9]
-};
-
-Object.freeze(headlineSizes);
-Object.freeze(bodySizes);
-Object.freeze(textSansSizes);
-
 var visuallyHidden = "\n\tposition: absolute;\n\topacity: 0;\n\theight: 0;\n\twidth: 0;\n\ttop: 0;\n\tleft: 0;\n"; // TODO: migrate to using context-specific alias
@@ -159,0 +127,0 @@

foundations.esm.js

@@ -1,9 +0,1 @@
-var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
-var fonts = {
-  headlineSerif: "GH Guardian Headline, Georgia, serif",
-  bodySerif: "GuardianTextEgyptian, Georgia, serif",
-  bodySans: "GuardianTextSans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
-};
-var lineHeights = ["1.15em", "1.35em", "1.45em"];
-var fontWeights = [300, 400, 500, 700]; // Arrays of colours should have pillar colors first
 // e.g. for sport:
@@ -169,138 +161,2 @@ // const [dark, main, bright, pastel, faded] = colors.blue
 
-var headlineSizes = {
-  1: fontSizes[2],
-  2: fontSizes[3],
-  3: fontSizes[4],
-  4: fontSizes[5],
-  5: fontSizes[6],
-  6: fontSizes[7],
-  7: fontSizes[8],
-  8: fontSizes[9]
-};
-var bodySizes = {
-  1: fontSizes[1],
-  2: fontSizes[2]
-};
-var textSansSizes = {
-  1: fontSizes[0],
-  2: fontSizes[1],
-  3: fontSizes[2],
-  4: fontSizes[3],
-  5: fontSizes[4],
-  6: fontSizes[5],
-  7: fontSizes[6],
-  8: fontSizes[7],
-  9: fontSizes[8],
-  10: fontSizes[9]
-};
-var fontSizeMapping = {
-  headline: headlineSizes,
-  body: bodySizes,
-  textSans: textSansSizes
-};
-var fontMapping = {
-  headline: fonts.headlineSerif,
-  body: fonts.bodySerif,
-  textSans: fonts.bodySans
-};
-var lineHeightMapping = {
-  tight: lineHeights[0],
-  regular: lineHeights[1],
-  loose: lineHeights[2]
-};
-var fontWeightMapping = {
-  headline: {
-    light: {
-      fontWeight: fontWeights[0],
-      hasItalic: true
-    },
-    medium: {
-      fontWeight: fontWeights[2],
-      hasItalic: true
-    },
-    bold: {
-      fontWeight: fontWeights[3],
-      hasItalic: false
-    }
-  },
-  body: {
-    regular: {
-      fontWeight: fontWeights[1],
-      hasItalic: true
-    },
-    bold: {
-      fontWeight: fontWeights[3],
-      hasItalic: true
-    }
-  },
-  textSans: {
-    regular: {
-      fontWeight: fontWeights[1],
-      hasItalic: true
-    },
-    bold: {
-      fontWeight: fontWeights[3],
-      hasItalic: false
-    }
-  }
-};
-
-var fs = function fs(_ref) {
-  var category = _ref.category,
-      level = _ref.level,
-      lineHeight = _ref.lineHeight,
-      fontWeight = _ref.fontWeight;
-  var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = fontSizeMapping[category][level];
-  var lineHeightValue = lineHeightMapping[lineHeight];
-  var fontWeightDefinition = fontWeightMapping[category][fontWeight];
-  return "\n\tfont-family: ".concat(fontFamilyValue, ";\n\tfont-size: ").concat(fontSizeValue, "px;\n\tline-height: ").concat(lineHeightValue, ";\n\t").concat(fontWeightDefinition ? "font-weight: ".concat(fontWeightDefinition.fontWeight) : "", ";\n\t");
-};
-
-var headline = function headline(_ref2) {
-  var level = _ref2.level,
-      _ref2$lineHeight = _ref2.lineHeight,
-      lineHeight = _ref2$lineHeight === void 0 ? "tight" : _ref2$lineHeight,
-      _ref2$fontWeight = _ref2.fontWeight,
-      fontWeight = _ref2$fontWeight === void 0 ? "medium" : _ref2$fontWeight;
-  return fs({
-    category: "headline",
-    level: level,
-    lineHeight: lineHeight,
-    fontWeight: fontWeight
-  });
-};
-
-var body = function body(_ref3) {
-  var level = _ref3.level,
-      _ref3$lineHeight = _ref3.lineHeight,
-      lineHeight = _ref3$lineHeight === void 0 ? "loose" : _ref3$lineHeight,
-      _ref3$fontWeight = _ref3.fontWeight,
-      fontWeight = _ref3$fontWeight === void 0 ? "regular" : _ref3$fontWeight;
-  return fs({
-    category: "body",
-    level: level,
-    lineHeight: lineHeight,
-    fontWeight: fontWeight
-  });
-};
-
-var textSans = function textSans(_ref4) {
-  var level = _ref4.level,
-      _ref4$lineHeight = _ref4.lineHeight,
-      lineHeight = _ref4$lineHeight === void 0 ? "loose" : _ref4$lineHeight,
-      _ref4$fontWeight = _ref4.fontWeight,
-      fontWeight = _ref4$fontWeight === void 0 ? "regular" : _ref4$fontWeight;
-  return fs({
-    category: "textSans",
-    level: level,
-    lineHeight: lineHeight,
-    fontWeight: fontWeight
-  });
-};
-
-Object.freeze(headlineSizes);
-Object.freeze(bodySizes);
-Object.freeze(textSansSizes);
-
-export { body, bodySizes, breakpoints$1 as breakpoints, headline, headlineSizes, palette, size$1 as size, space$1 as space, textSans, textSansSizes, transitions$1 as transitions };
+export { breakpoints$1 as breakpoints, palette, size$1 as size, space$1 as space, transitions$1 as transitions };

foundations.js

@@ -5,10 +5,2 @@ 'use strict';
 
-var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
-var fonts = {
-  headlineSerif: "GH Guardian Headline, Georgia, serif",
-  bodySerif: "GuardianTextEgyptian, Georgia, serif",
-  bodySans: "GuardianTextSans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
-};
-var lineHeights = ["1.15em", "1.35em", "1.45em"];
-var fontWeights = [300, 400, 500, 700]; // Arrays of colours should have pillar colors first
 // e.g. for sport:
@@ -174,148 +166,6 @@ // const [dark, main, bright, pastel, faded] = colors.blue
 
-var headlineSizes = {
-  1: fontSizes[2],
-  2: fontSizes[3],
-  3: fontSizes[4],
-  4: fontSizes[5],
-  5: fontSizes[6],
-  6: fontSizes[7],
-  7: fontSizes[8],
-  8: fontSizes[9]
-};
-var bodySizes = {
-  1: fontSizes[1],
-  2: fontSizes[2]
-};
-var textSansSizes = {
-  1: fontSizes[0],
-  2: fontSizes[1],
-  3: fontSizes[2],
-  4: fontSizes[3],
-  5: fontSizes[4],
-  6: fontSizes[5],
-  7: fontSizes[6],
-  8: fontSizes[7],
-  9: fontSizes[8],
-  10: fontSizes[9]
-};
-var fontSizeMapping = {
-  headline: headlineSizes,
-  body: bodySizes,
-  textSans: textSansSizes
-};
-var fontMapping = {
-  headline: fonts.headlineSerif,
-  body: fonts.bodySerif,
-  textSans: fonts.bodySans
-};
-var lineHeightMapping = {
-  tight: lineHeights[0],
-  regular: lineHeights[1],
-  loose: lineHeights[2]
-};
-var fontWeightMapping = {
-  headline: {
-    light: {
-      fontWeight: fontWeights[0],
-      hasItalic: true
-    },
-    medium: {
-      fontWeight: fontWeights[2],
-      hasItalic: true
-    },
-    bold: {
-      fontWeight: fontWeights[3],
-      hasItalic: false
-    }
-  },
-  body: {
-    regular: {
-      fontWeight: fontWeights[1],
-      hasItalic: true
-    },
-    bold: {
-      fontWeight: fontWeights[3],
-      hasItalic: true
-    }
-  },
-  textSans: {
-    regular: {
-      fontWeight: fontWeights[1],
-      hasItalic: true
-    },
-    bold: {
-      fontWeight: fontWeights[3],
-      hasItalic: false
-    }
-  }
-};
-
-var fs = function fs(_ref) {
-  var category = _ref.category,
-      level = _ref.level,
-      lineHeight = _ref.lineHeight,
-      fontWeight = _ref.fontWeight;
-  var fontFamilyValue = fontMapping[category];
-  var fontSizeValue = fontSizeMapping[category][level];
-  var lineHeightValue = lineHeightMapping[lineHeight];
-  var fontWeightDefinition = fontWeightMapping[category][fontWeight];
-  return "\n\tfont-family: ".concat(fontFamilyValue, ";\n\tfont-size: ").concat(fontSizeValue, "px;\n\tline-height: ").concat(lineHeightValue, ";\n\t").concat(fontWeightDefinition ? "font-weight: ".concat(fontWeightDefinition.fontWeight) : "", ";\n\t");
-};
-
-var headline = function headline(_ref2) {
-  var level = _ref2.level,
-      _ref2$lineHeight = _ref2.lineHeight,
-      lineHeight = _ref2$lineHeight === void 0 ? "tight" : _ref2$lineHeight,
-      _ref2$fontWeight = _ref2.fontWeight,
-      fontWeight = _ref2$fontWeight === void 0 ? "medium" : _ref2$fontWeight;
-  return fs({
-    category: "headline",
-    level: level,
-    lineHeight: lineHeight,
-    fontWeight: fontWeight
-  });
-};
-
-var body = function body(_ref3) {
-  var level = _ref3.level,
-      _ref3$lineHeight = _ref3.lineHeight,
-      lineHeight = _ref3$lineHeight === void 0 ? "loose" : _ref3$lineHeight,
-      _ref3$fontWeight = _ref3.fontWeight,
-      fontWeight = _ref3$fontWeight === void 0 ? "regular" : _ref3$fontWeight;
-  return fs({
-    category: "body",
-    level: level,
-    lineHeight: lineHeight,
-    fontWeight: fontWeight
-  });
-};
-
-var textSans = function textSans(_ref4) {
-  var level = _ref4.level,
-      _ref4$lineHeight = _ref4.lineHeight,
-      lineHeight = _ref4$lineHeight === void 0 ? "loose" : _ref4$lineHeight,
-      _ref4$fontWeight = _ref4.fontWeight,
-      fontWeight = _ref4$fontWeight === void 0 ? "regular" : _ref4$fontWeight;
-  return fs({
-    category: "textSans",
-    level: level,
-    lineHeight: lineHeight,
-    fontWeight: fontWeight
-  });
-};
-
-Object.freeze(headlineSizes);
-Object.freeze(bodySizes);
-Object.freeze(textSansSizes);
-
-exports.body = body;
-exports.bodySizes = bodySizes;
 exports.breakpoints = breakpoints$1;
-exports.headline = headline;
-exports.headlineSizes = headlineSizes;
 exports.palette = palette;
 exports.size = size$1;
 exports.space = space$1;
-exports.textSans = textSans;
-exports.textSansSizes = textSansSizes;
 exports.transitions = transitions$1;

index.d.ts

@@ -6,2 +6,1 @@ export * from "./animation";
 export * from "./space";
-export * from "./typography";

mq/index.js

@@ -5,3 +5,2 @@ 'use strict';
 
-var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
 var breakpoints = [740, 980, 1140, 1300]; // Diverges from https://system-ui.com
@@ -23,33 +22,2 @@ // At these widths, there are tweaks to the
 
-var headlineSizes = {
-  1: fontSizes[2],
-  2: fontSizes[3],
-  3: fontSizes[4],
-  4: fontSizes[5],
-  5: fontSizes[6],
-  6: fontSizes[7],
-  7: fontSizes[8],
-  8: fontSizes[9]
-};
-var bodySizes = {
-  1: fontSizes[1],
-  2: fontSizes[2]
-};
-var textSansSizes = {
-  1: fontSizes[0],
-  2: fontSizes[1],
-  3: fontSizes[2],
-  4: fontSizes[3],
-  5: fontSizes[4],
-  6: fontSizes[5],
-  7: fontSizes[6],
-  8: fontSizes[7],
-  9: fontSizes[8],
-  10: fontSizes[9]
-};
-
-Object.freeze(headlineSizes);
-Object.freeze(bodySizes);
-Object.freeze(textSansSizes);
-
 // babel * typescript * rollup = ¯\_(ツ)_/¯
@@ -56,0 +24,0 @@

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "0.6.0-alpha.2",
+	"version": "0.6.0",
 	"main": "foundations.js",
@@ -9,3 +9,3 @@ "module": "foundations.esm.js",
 		"watch": "rollup --config --watch",
-		"clean": "rm -rf accessibility mq __experimental__typography foundations.js foundations.esm.js *.d.ts src/**/*.d.ts",
+		"clean": "rm -rf accessibility mq typography foundations.js foundations.esm.js *.d.ts src/**/*.d.ts",
 		"prepublishOnly": "yarn build",
@@ -17,3 +17,3 @@ "postpublish": "yarn clean"
 		"accessibility/*",
-		"__experimental__typography/*",
+		"typography/*",
 		"*.d.ts",
@@ -28,3 +28,2 @@ "foundations.esm.js",
 		"src/theme.ts",
-		"src/typography.ts",
 		"src/accessibility/index.ts",
@@ -31,0 +30,0 @@ "src/mq/index.ts",

src/index.ts

@@ -6,2 +6,1 @@ export * from "./animation"
 export * from "./space"
-export * from "./typography"

No alert changes

Worsened metrics

Total package byte prevSize

42179

decreased by-16.1%

Number of package files

27

decreased by-3.57%

Lines of code

1512

decreased by-16.42%

No dependency changes