@govuk-react/constants - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

es/index.js

@@ -0,11 +1,12 @@
+export * from './focus';
 export * from './spacing';
-export * from './typography';
+export * from './typography'; // Tracks https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_measurements.scss
+
 export var BORDER_WIDTH_MOBILE = '4px';
 export var BORDER_WIDTH_TABLET = '5px';
 export var BORDER_WIDTH_FORM_ELEMENT = '2px';
+export var BORDER_WIDTH_FORM_ELEMENT_ERROR = '4px';
 export var BORDER_WIDTH_ERROR = '4px';
 export var BORDER_WIDTH = '5px';
 export var BORDER_WIDTH_WIDE = '10px';
-export var FOCUS_WIDTH = '3px'; // Tracks https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_measurements.scss
-
 export var SITE_WIDTH_PX = 960;
@@ -40,3 +41,4 @@ export var SITE_WIDTH = SITE_WIDTH_PX + "px";
   MAX: "@media only screen and (min-width: " + SITE_WIDTH_PLUS_GUTTERS + ")",
-  PRINT: '@media print'
+  PRINT: '@media print',
+  TABLET: "@media only screen and (min-width: " + BREAKPOINTS.TABLET + ")"
 }; // TODO: figure out how to optionally include locally installed font, e.g. "GDS Transport Website"
@@ -46,5 +48,6 @@
 export var NTA_LIGHT_TABULAR = "ntatabularnumbers\", " + NTA_LIGHT;
-export var FONT_STACK = NTA_LIGHT + " !default";
-export var FONT_STACK_TABULAR = NTA_LIGHT_TABULAR + " !default";
-export var FONT_STACK_PRINT = 'sans-serif !default';
+export var FONT_STACK = "" + NTA_LIGHT;
+export var FONT_STACK_TABULAR = "" + NTA_LIGHT_TABULAR;
+export var FONT_STACK_PRINT = 'sans-serif'; // TODO FONT_SIZE and LINE_HEIGHT can be replaced with `govukFont` lib call
+
 export var FONT_SIZE = {
@@ -54,4 +57,6 @@ SIZE_14: '14px',
   SIZE_18: '18px',
+  // not directly used in govuk-frontend
   SIZE_19: '19px',
   SIZE_20: '20px',
+  // Not used in govuk-frontend
   SIZE_24: '24px',
@@ -63,6 +68,10 @@ SIZE_27: '27px'
   SIZE_16: '1.25',
+  SIZE_18: '1.3',
+  // approximate - value in typography is correct
   SIZE_19: '1.3',
-  SIZE_18: '1.3',
+  // ditto
+  // SIZE_24 differs here from 24 def in typography scale, which is 1.25
+  // however that appears to be a mistake
   SIZE_24: '1.35'
 };
 //# sourceMappingURL=index.js.map

es/spacing.js

@@ -1,2 +0,2 @@
-// https://github.com/alphagov/govuk-frontend/blob/master/src/globals/scss/settings/_spacing.scss
+// https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_spacing.scss
 export var RESPONSIVE_0 = {
@@ -24,3 +24,3 @@ mobile: 0,
   mobile: 15,
-  tablet: 45
+  tablet: 25
 };
@@ -45,2 +45,14 @@ export var RESPONSIVE_6 = {
 export var SPACING_MAP_INDEX = Array.from(Array(SPACING_MAP.length).keys());
+export var SPACING_POINTS = {
+  0: 0,
+  1: '5px',
+  2: '10px',
+  3: '15px',
+  4: '20px',
+  5: '25px',
+  6: '30px',
+  7: '40px',
+  8: '50px',
+  9: '60px'
+};
 //# sourceMappingURL=spacing.js.map

es/typography.js

@@ -1,133 +0,170 @@
-// https://govuk-elements.herokuapp.com/typography/#typography-headings
-// https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss
-// https://github.com/alphagov/govuk-frontend/blob/master/src/globals/scss/core/_typography.scss
-// https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss
-// using spacing values from https://github.com/alphagov/govuk-frontend/blob/master/src/globals/scss/core/_typography.scss
+// https://design-system.service.gov.uk/styles/typography/
+// https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_typography-responsive.scss
+// https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_typography-font.scss
+// https://github.com/alphagov/govuk-frontend/blob/master/src/core/_typography.scss
 import { RESPONSIVE_8, RESPONSIVE_6, RESPONSIVE_4 } from './spacing';
-var FONT_80 = {
-  tablet: {
-    lineHeight: 80 / 80,
-    fontSize: 80,
-    spacing: RESPONSIVE_8.tablet
+export var TYPOGRAPHY_SCALE = {
+  80: {
+    mobile: {
+      fontSize: 53,
+      lineHeight: 55 / 53,
+      spacing: RESPONSIVE_8.mobile
+    },
+    tablet: {
+      fontSize: 80,
+      lineHeight: 80 / 80,
+      spacing: RESPONSIVE_8.tablet
+    },
+    print: {
+      fontSize: 53,
+      lineHeight: 1.1
+    }
   },
-  mobile: {
-    lineHeight: 55 / 53,
-    fontSize: 53,
-    spacing: RESPONSIVE_8.mobile
+  48: {
+    mobile: {
+      fontSize: 32,
+      lineHeight: 35 / 32,
+      spacing: RESPONSIVE_8.mobile
+    },
+    tablet: {
+      fontSize: 48,
+      lineHeight: 50 / 48,
+      spacing: RESPONSIVE_8.tablet
+    },
+    print: {
+      fontSize: 32,
+      lineHeight: 1.15
+    }
   },
-  print: {
-    fontSize: 28
-  }
-};
-var FONT_48 = {
-  tablet: {
-    lineHeight: 50 / 48,
-    fontSize: 48,
-    spacing: RESPONSIVE_6.tablet
+  36: {
+    mobile: {
+      fontSize: 24,
+      lineHeight: 25 / 24,
+      spacing: RESPONSIVE_6.mobile
+    },
+    tablet: {
+      fontSize: 36,
+      lineHeight: 40 / 36,
+      spacing: RESPONSIVE_6.tablet
+    },
+    print: {
+      fontSize: 24,
+      lineHeight: 1.05
+    }
   },
-  mobile: {
-    lineHeight: 35 / 32,
-    fontSize: 32,
-    spacing: RESPONSIVE_6.mobile
+  27: {
+    mobile: {
+      fontSize: 18,
+      lineHeight: 20 / 18,
+      spacing: RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 27,
+      lineHeight: 30 / 27,
+      spacing: RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 18,
+      lineHeight: 1.15
+    }
   },
-  print: {
-    fontSize: 18
-  }
-};
-var FONT_36 = {
-  tablet: {
-    lineHeight: 40 / 36,
-    fontSize: 36,
-    spacing: RESPONSIVE_4.tablet
+  24: {
+    mobile: {
+      fontSize: 18,
+      lineHeight: 20 / 18,
+      spacing: RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 24,
+      lineHeight: 30 / 24,
+      spacing: RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 18,
+      lineHeight: 1.15
+    }
   },
-  mobile: {
-    lineHeight: 25 / 24,
-    fontSize: 24,
-    spacing: RESPONSIVE_4.mobile
+  19: {
+    mobile: {
+      fontSize: 16,
+      lineHeight: 20 / 16,
+      spacing: RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 19,
+      lineHeight: 25 / 19,
+      spacing: RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 14,
+      lineHeight: 1.15
+    }
   },
-  print: {
-    fontSize: 18
-  }
-};
-var FONT_27 = {
-  tablet: {
-    lineHeight: 30 / 27,
-    fontSize: 27,
-    spacing: RESPONSIVE_4.tablet
+  16: {
+    mobile: {
+      fontSize: 14,
+      lineHeight: 16 / 14,
+      spacing: RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 16,
+      lineHeight: 20 / 16,
+      spacing: RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 14,
+      lineHeight: 1.2
+    }
   },
-  mobile: {
-    lineHeight: 20 / 18,
-    fontSize: 20,
-    spacing: RESPONSIVE_4.mobile
-  },
-  print: {
-    fontSize: 16
+  14: {
+    mobile: {
+      fontSize: 12,
+      lineHeight: 15 / 12,
+      spacing: RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 14,
+      lineHeight: 20 / 14,
+      spacing: RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 12,
+      lineHeight: 1.2
+    }
   }
-};
-var FONT_24 = {
-  tablet: {
-    lineHeight: 30 / 24,
-    fontSize: 24,
-    spacing: RESPONSIVE_4.tablet
-  },
-  mobile: {
-    lineHeight: 24 / 20,
-    fontSize: 18,
-    spacing: RESPONSIVE_4.mobile
-  },
-  print: {
-    fontSize: 16
-  }
-};
-var FONT_19 = {
-  tablet: {
-    lineHeight: 25 / 19,
-    fontSize: 19,
-    spacing: RESPONSIVE_4.tablet
-  },
-  mobile: {
-    lineHeight: 20 / 16,
-    fontSize: 16,
-    spacing: RESPONSIVE_4.mobile
-  },
-  print: {
-    fontSize: 14
-  }
-};
-var FONT_16 = {
-  tablet: {
-    lineHeight: 20 / 16,
-    fontSize: 16,
-    spacing: RESPONSIVE_4.tablet
-  },
-  mobile: {
-    lineHeight: 16 / 14,
-    fontSize: 14,
-    spacing: RESPONSIVE_4.mobile
-  },
-  print: {
-    fontSize: 12
-  }
-}; // Association between 'xsmall' format used by https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss
-// and core-xx format used by https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss
-//
-// core-80 is misleading as it is not always 80px, therefore xsmall format is preferred,
-// but lookup to original mixin values is kept for clarity.
+}; // NB Spacing values set above relate to headings
+// body classes use different responsive margins
+// captions use govuk-spacing(1) for xl and l sizes only
+// TODO move spacing info out into separate data
+// heading sizes supported in govuk-frontend
 
-var XXLARGE = FONT_80;
-var XLARGE = FONT_48;
-var LARGE = FONT_36;
-var MEDIUMLARGE = FONT_27;
-var MEDIUM = FONT_24;
-var SMALL = FONT_19;
-var XSMALL = FONT_16; // all available font sizes
+export var HEADING_SIZES = {
+  XLARGE: 48,
+  XL: 48,
+  LARGE: 36,
+  L: 36,
+  MEDIUM: 24,
+  M: 24,
+  SMALL: 19,
+  S: 19
+}; // caption sizes supported in govuk-frontend
 
-export var FONT_SIZES = {
-  XXLARGE: XXLARGE,
-  XLARGE: XLARGE,
-  LARGE: LARGE,
-  MEDIUMLARGE: MEDIUMLARGE,
-  MEDIUM: MEDIUM,
-  SMALL: SMALL,
-  XSMALL: XSMALL
+export var CAPTION_SIZES = {
+  XLARGE: 27,
+  XL: 27,
+  LARGE: 24,
+  L: 24,
+  MEDIUM: 19,
+  M: 19
+}; // body text sizes supported in govuk-frontend
+
+export var BODY_SIZES = {
+  LARGE: 24,
+  L: 24,
+  MEDIUM: 19,
+  M: 19,
+  SMALL: 16,
+  S: 16,
+  XSMALL: 14,
+  XS: 14
 }; // Lookup between numerical header level and associated html element
@@ -149,5 +186,9 @@
   4: 'SMALL',
-  5: 'XSMALL',
-  6: 'XSMALL'
+  5: 'SMALL',
+  6: 'SMALL'
 };
+export var FONT_WEIGHTS = {
+  bold: '700',
+  regular: '400'
+};
 //# sourceMappingURL=typography.js.map

lib/index.js

@@ -8,6 +8,6 @@ "use strict";
   BORDER_WIDTH_FORM_ELEMENT: true,
+  BORDER_WIDTH_FORM_ELEMENT_ERROR: true,
   BORDER_WIDTH_ERROR: true,
   BORDER_WIDTH: true,
   BORDER_WIDTH_WIDE: true,
-  FOCUS_WIDTH: true,
   SITE_WIDTH_PX: true,
@@ -32,4 +32,12 @@ SITE_WIDTH: true,
 };
-exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_STACK_PRINT = exports.FONT_STACK_TABULAR = exports.FONT_STACK = exports.NTA_LIGHT_TABULAR = exports.NTA_LIGHT = exports.MEDIA_QUERIES = exports.SITE_WIDTH_PLUS_GUTTERS = exports.SPACING = exports.GUTTER_ONE_THIRD = exports.GUTTER_HALF = exports.GUTTER = exports.GUTTER_PX = exports.BREAKPOINTS = exports.FULL_WIDTH = exports.SITE_WIDTH = exports.SITE_WIDTH_PX = exports.FOCUS_WIDTH = exports.BORDER_WIDTH_WIDE = exports.BORDER_WIDTH = exports.BORDER_WIDTH_ERROR = exports.BORDER_WIDTH_FORM_ELEMENT = exports.BORDER_WIDTH_TABLET = exports.BORDER_WIDTH_MOBILE = void 0;
+exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_STACK_PRINT = exports.FONT_STACK_TABULAR = exports.FONT_STACK = exports.NTA_LIGHT_TABULAR = exports.NTA_LIGHT = exports.MEDIA_QUERIES = exports.SITE_WIDTH_PLUS_GUTTERS = exports.SPACING = exports.GUTTER_ONE_THIRD = exports.GUTTER_HALF = exports.GUTTER = exports.GUTTER_PX = exports.BREAKPOINTS = exports.FULL_WIDTH = exports.SITE_WIDTH = exports.SITE_WIDTH_PX = exports.BORDER_WIDTH_WIDE = exports.BORDER_WIDTH = exports.BORDER_WIDTH_ERROR = exports.BORDER_WIDTH_FORM_ELEMENT_ERROR = exports.BORDER_WIDTH_FORM_ELEMENT = exports.BORDER_WIDTH_TABLET = exports.BORDER_WIDTH_MOBILE = void 0;
 
+var _focus = require("./focus");
+
+Object.keys(_focus).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  exports[key] = _focus[key];
+});
+
 var _spacing = require("./spacing");
@@ -50,2 +58,3 @@
 });
+// Tracks https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_measurements.scss
 var BORDER_WIDTH_MOBILE = '4px';
@@ -57,2 +66,4 @@ exports.BORDER_WIDTH_MOBILE = BORDER_WIDTH_MOBILE;
 exports.BORDER_WIDTH_FORM_ELEMENT = BORDER_WIDTH_FORM_ELEMENT;
+var BORDER_WIDTH_FORM_ELEMENT_ERROR = '4px';
+exports.BORDER_WIDTH_FORM_ELEMENT_ERROR = BORDER_WIDTH_FORM_ELEMENT_ERROR;
 var BORDER_WIDTH_ERROR = '4px';
@@ -64,5 +75,2 @@ exports.BORDER_WIDTH_ERROR = BORDER_WIDTH_ERROR;
 exports.BORDER_WIDTH_WIDE = BORDER_WIDTH_WIDE;
-var FOCUS_WIDTH = '3px'; // Tracks https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_measurements.scss
-
-exports.FOCUS_WIDTH = FOCUS_WIDTH;
 var SITE_WIDTH_PX = 960;
@@ -107,3 +115,4 @@ exports.SITE_WIDTH_PX = SITE_WIDTH_PX;
   MAX: "@media only screen and (min-width: " + SITE_WIDTH_PLUS_GUTTERS + ")",
-  PRINT: '@media print'
+  PRINT: '@media print',
+  TABLET: "@media only screen and (min-width: " + BREAKPOINTS.TABLET + ")"
 }; // TODO: figure out how to optionally include locally installed font, e.g. "GDS Transport Website"
@@ -116,7 +125,8 @@
 exports.NTA_LIGHT_TABULAR = NTA_LIGHT_TABULAR;
-var FONT_STACK = NTA_LIGHT + " !default";
+var FONT_STACK = "" + NTA_LIGHT;
 exports.FONT_STACK = FONT_STACK;
-var FONT_STACK_TABULAR = NTA_LIGHT_TABULAR + " !default";
+var FONT_STACK_TABULAR = "" + NTA_LIGHT_TABULAR;
 exports.FONT_STACK_TABULAR = FONT_STACK_TABULAR;
-var FONT_STACK_PRINT = 'sans-serif !default';
+var FONT_STACK_PRINT = 'sans-serif'; // TODO FONT_SIZE and LINE_HEIGHT can be replaced with `govukFont` lib call
+
 exports.FONT_STACK_PRINT = FONT_STACK_PRINT;
@@ -127,4 +137,6 @@ var FONT_SIZE = {
   SIZE_18: '18px',
+  // not directly used in govuk-frontend
   SIZE_19: '19px',
   SIZE_20: '20px',
+  // Not used in govuk-frontend
   SIZE_24: '24px',
@@ -137,4 +149,8 @@ SIZE_27: '27px'
   SIZE_16: '1.25',
+  SIZE_18: '1.3',
+  // approximate - value in typography is correct
   SIZE_19: '1.3',
-  SIZE_18: '1.3',
+  // ditto
+  // SIZE_24 differs here from 24 def in typography scale, which is 1.25
+  // however that appears to be a mistake
   SIZE_24: '1.35'
@@ -141,0 +157,0 @@ };

lib/spacing.js

 "use strict";
 
 exports.__esModule = true;
-exports.SPACING_MAP_INDEX = exports.SPACING_MAP = exports.RESPONSIVE_9 = exports.RESPONSIVE_8 = exports.RESPONSIVE_7 = exports.RESPONSIVE_6 = exports.RESPONSIVE_5 = exports.RESPONSIVE_4 = exports.RESPONSIVE_3 = exports.RESPONSIVE_2 = exports.RESPONSIVE_1 = exports.RESPONSIVE_0 = void 0;
-// https://github.com/alphagov/govuk-frontend/blob/master/src/globals/scss/settings/_spacing.scss
+exports.SPACING_POINTS = exports.SPACING_MAP_INDEX = exports.SPACING_MAP = exports.RESPONSIVE_9 = exports.RESPONSIVE_8 = exports.RESPONSIVE_7 = exports.RESPONSIVE_6 = exports.RESPONSIVE_5 = exports.RESPONSIVE_4 = exports.RESPONSIVE_3 = exports.RESPONSIVE_2 = exports.RESPONSIVE_1 = exports.RESPONSIVE_0 = void 0;
+// https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_spacing.scss
 var RESPONSIVE_0 = {
@@ -33,3 +33,3 @@ mobile: 0,
   mobile: 15,
-  tablet: 45
+  tablet: 25
 };
@@ -61,2 +61,15 @@ exports.RESPONSIVE_5 = RESPONSIVE_5;
 exports.SPACING_MAP_INDEX = SPACING_MAP_INDEX;
+var SPACING_POINTS = {
+  0: 0,
+  1: '5px',
+  2: '10px',
+  3: '15px',
+  4: '20px',
+  5: '25px',
+  6: '30px',
+  7: '40px',
+  8: '50px',
+  9: '60px'
+};
+exports.SPACING_POINTS = SPACING_POINTS;
 //# sourceMappingURL=spacing.js.map

lib/typography.js

 "use strict";
 
 exports.__esModule = true;
-exports.LEVEL_SIZE = exports.LEVEL_TAG = exports.FONT_SIZES = void 0;
+exports.FONT_WEIGHTS = exports.LEVEL_SIZE = exports.LEVEL_TAG = exports.BODY_SIZES = exports.CAPTION_SIZES = exports.HEADING_SIZES = exports.TYPOGRAPHY_SCALE = void 0;
 
 var _spacing = require("./spacing");
 
-// https://govuk-elements.herokuapp.com/typography/#typography-headings
-// https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss
-// https://github.com/alphagov/govuk-frontend/blob/master/src/globals/scss/core/_typography.scss
-// https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss
-// using spacing values from https://github.com/alphagov/govuk-frontend/blob/master/src/globals/scss/core/_typography.scss
-var FONT_80 = {
-  tablet: {
-    lineHeight: 80 / 80,
-    fontSize: 80,
-    spacing: _spacing.RESPONSIVE_8.tablet
+// https://design-system.service.gov.uk/styles/typography/
+// https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_typography-responsive.scss
+// https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_typography-font.scss
+// https://github.com/alphagov/govuk-frontend/blob/master/src/core/_typography.scss
+var TYPOGRAPHY_SCALE = {
+  80: {
+    mobile: {
+      fontSize: 53,
+      lineHeight: 55 / 53,
+      spacing: _spacing.RESPONSIVE_8.mobile
+    },
+    tablet: {
+      fontSize: 80,
+      lineHeight: 80 / 80,
+      spacing: _spacing.RESPONSIVE_8.tablet
+    },
+    print: {
+      fontSize: 53,
+      lineHeight: 1.1
+    }
   },
-  mobile: {
-    lineHeight: 55 / 53,
-    fontSize: 53,
-    spacing: _spacing.RESPONSIVE_8.mobile
+  48: {
+    mobile: {
+      fontSize: 32,
+      lineHeight: 35 / 32,
+      spacing: _spacing.RESPONSIVE_8.mobile
+    },
+    tablet: {
+      fontSize: 48,
+      lineHeight: 50 / 48,
+      spacing: _spacing.RESPONSIVE_8.tablet
+    },
+    print: {
+      fontSize: 32,
+      lineHeight: 1.15
+    }
   },
-  print: {
-    fontSize: 28
-  }
-};
-var FONT_48 = {
-  tablet: {
-    lineHeight: 50 / 48,
-    fontSize: 48,
-    spacing: _spacing.RESPONSIVE_6.tablet
+  36: {
+    mobile: {
+      fontSize: 24,
+      lineHeight: 25 / 24,
+      spacing: _spacing.RESPONSIVE_6.mobile
+    },
+    tablet: {
+      fontSize: 36,
+      lineHeight: 40 / 36,
+      spacing: _spacing.RESPONSIVE_6.tablet
+    },
+    print: {
+      fontSize: 24,
+      lineHeight: 1.05
+    }
   },
-  mobile: {
-    lineHeight: 35 / 32,
-    fontSize: 32,
-    spacing: _spacing.RESPONSIVE_6.mobile
+  27: {
+    mobile: {
+      fontSize: 18,
+      lineHeight: 20 / 18,
+      spacing: _spacing.RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 27,
+      lineHeight: 30 / 27,
+      spacing: _spacing.RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 18,
+      lineHeight: 1.15
+    }
   },
-  print: {
-    fontSize: 18
-  }
-};
-var FONT_36 = {
-  tablet: {
-    lineHeight: 40 / 36,
-    fontSize: 36,
-    spacing: _spacing.RESPONSIVE_4.tablet
+  24: {
+    mobile: {
+      fontSize: 18,
+      lineHeight: 20 / 18,
+      spacing: _spacing.RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 24,
+      lineHeight: 30 / 24,
+      spacing: _spacing.RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 18,
+      lineHeight: 1.15
+    }
   },
-  mobile: {
-    lineHeight: 25 / 24,
-    fontSize: 24,
-    spacing: _spacing.RESPONSIVE_4.mobile
+  19: {
+    mobile: {
+      fontSize: 16,
+      lineHeight: 20 / 16,
+      spacing: _spacing.RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 19,
+      lineHeight: 25 / 19,
+      spacing: _spacing.RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 14,
+      lineHeight: 1.15
+    }
   },
-  print: {
-    fontSize: 18
-  }
-};
-var FONT_27 = {
-  tablet: {
-    lineHeight: 30 / 27,
-    fontSize: 27,
-    spacing: _spacing.RESPONSIVE_4.tablet
+  16: {
+    mobile: {
+      fontSize: 14,
+      lineHeight: 16 / 14,
+      spacing: _spacing.RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 16,
+      lineHeight: 20 / 16,
+      spacing: _spacing.RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 14,
+      lineHeight: 1.2
+    }
   },
-  mobile: {
-    lineHeight: 20 / 18,
-    fontSize: 20,
-    spacing: _spacing.RESPONSIVE_4.mobile
-  },
-  print: {
-    fontSize: 16
+  14: {
+    mobile: {
+      fontSize: 12,
+      lineHeight: 15 / 12,
+      spacing: _spacing.RESPONSIVE_4.mobile
+    },
+    tablet: {
+      fontSize: 14,
+      lineHeight: 20 / 14,
+      spacing: _spacing.RESPONSIVE_4.tablet
+    },
+    print: {
+      fontSize: 12,
+      lineHeight: 1.2
+    }
   }
-};
-var FONT_24 = {
-  tablet: {
-    lineHeight: 30 / 24,
-    fontSize: 24,
-    spacing: _spacing.RESPONSIVE_4.tablet
-  },
-  mobile: {
-    lineHeight: 24 / 20,
-    fontSize: 18,
-    spacing: _spacing.RESPONSIVE_4.mobile
-  },
-  print: {
-    fontSize: 16
-  }
-};
-var FONT_19 = {
-  tablet: {
-    lineHeight: 25 / 19,
-    fontSize: 19,
-    spacing: _spacing.RESPONSIVE_4.tablet
-  },
-  mobile: {
-    lineHeight: 20 / 16,
-    fontSize: 16,
-    spacing: _spacing.RESPONSIVE_4.mobile
-  },
-  print: {
-    fontSize: 14
-  }
-};
-var FONT_16 = {
-  tablet: {
-    lineHeight: 20 / 16,
-    fontSize: 16,
-    spacing: _spacing.RESPONSIVE_4.tablet
-  },
-  mobile: {
-    lineHeight: 16 / 14,
-    fontSize: 14,
-    spacing: _spacing.RESPONSIVE_4.mobile
-  },
-  print: {
-    fontSize: 12
-  }
-}; // Association between 'xsmall' format used by https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss
-// and core-xx format used by https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss
-//
-// core-80 is misleading as it is not always 80px, therefore xsmall format is preferred,
-// but lookup to original mixin values is kept for clarity.
+}; // NB Spacing values set above relate to headings
+// body classes use different responsive margins
+// captions use govuk-spacing(1) for xl and l sizes only
+// TODO move spacing info out into separate data
+// heading sizes supported in govuk-frontend
 
-var XXLARGE = FONT_80;
-var XLARGE = FONT_48;
-var LARGE = FONT_36;
-var MEDIUMLARGE = FONT_27;
-var MEDIUM = FONT_24;
-var SMALL = FONT_19;
-var XSMALL = FONT_16; // all available font sizes
+exports.TYPOGRAPHY_SCALE = TYPOGRAPHY_SCALE;
+var HEADING_SIZES = {
+  XLARGE: 48,
+  XL: 48,
+  LARGE: 36,
+  L: 36,
+  MEDIUM: 24,
+  M: 24,
+  SMALL: 19,
+  S: 19
+}; // caption sizes supported in govuk-frontend
 
-var FONT_SIZES = {
-  XXLARGE: XXLARGE,
-  XLARGE: XLARGE,
-  LARGE: LARGE,
-  MEDIUMLARGE: MEDIUMLARGE,
-  MEDIUM: MEDIUM,
-  SMALL: SMALL,
-  XSMALL: XSMALL
+exports.HEADING_SIZES = HEADING_SIZES;
+var CAPTION_SIZES = {
+  XLARGE: 27,
+  XL: 27,
+  LARGE: 24,
+  L: 24,
+  MEDIUM: 19,
+  M: 19
+}; // body text sizes supported in govuk-frontend
+
+exports.CAPTION_SIZES = CAPTION_SIZES;
+var BODY_SIZES = {
+  LARGE: 24,
+  L: 24,
+  MEDIUM: 19,
+  M: 19,
+  SMALL: 16,
+  S: 16,
+  XSMALL: 14,
+  XS: 14
 }; // Lookup between numerical header level and associated html element
 
-exports.FONT_SIZES = FONT_SIZES;
+exports.BODY_SIZES = BODY_SIZES;
 var LEVEL_TAG = {
@@ -157,6 +197,11 @@ 1: 'h1',
   4: 'SMALL',
-  5: 'XSMALL',
-  6: 'XSMALL'
+  5: 'SMALL',
+  6: 'SMALL'
 };
 exports.LEVEL_SIZE = LEVEL_SIZE;
+var FONT_WEIGHTS = {
+  bold: '700',
+  regular: '400'
+};
+exports.FONT_WEIGHTS = FONT_WEIGHTS;
 //# sourceMappingURL=typography.js.map

package.json

 {
   "name": "@govuk-react/constants",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "dependencies": {
@@ -5,0 +5,0 @@ "govuk-colours": "^1.0.3"

src/index.js

@@ -0,12 +1,13 @@
+export * from './focus';
 export * from './spacing';
 export * from './typography';
 
+// Tracks https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_measurements.scss
 export const BORDER_WIDTH_MOBILE = '4px';
 export const BORDER_WIDTH_TABLET = '5px';
 export const BORDER_WIDTH_FORM_ELEMENT = '2px';
+export const BORDER_WIDTH_FORM_ELEMENT_ERROR = '4px';
 export const BORDER_WIDTH_ERROR = '4px';
 export const BORDER_WIDTH = '5px';
 export const BORDER_WIDTH_WIDE = '10px';
-export const FOCUS_WIDTH = '3px';
-// Tracks https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_measurements.scss
 export const SITE_WIDTH_PX = 960;
@@ -45,2 +46,3 @@ export const SITE_WIDTH = `${SITE_WIDTH_PX}px`;
   PRINT: '@media print',
+  TABLET: `@media only screen and (min-width: ${BREAKPOINTS.TABLET})`,
 };
@@ -51,11 +53,13 @@
 export const NTA_LIGHT_TABULAR = `ntatabularnumbers", ${NTA_LIGHT}`;
-export const FONT_STACK = `${NTA_LIGHT} !default`;
-export const FONT_STACK_TABULAR = `${NTA_LIGHT_TABULAR} !default`;
-export const FONT_STACK_PRINT = 'sans-serif !default';
+export const FONT_STACK = `${NTA_LIGHT}`;
+export const FONT_STACK_TABULAR = `${NTA_LIGHT_TABULAR}`;
+export const FONT_STACK_PRINT = 'sans-serif';
+
+// TODO FONT_SIZE and LINE_HEIGHT can be replaced with `govukFont` lib call
 export const FONT_SIZE = {
   SIZE_14: '14px',
   SIZE_16: '16px',
-  SIZE_18: '18px',
+  SIZE_18: '18px', // not directly used in govuk-frontend
   SIZE_19: '19px',
-  SIZE_20: '20px',
+  SIZE_20: '20px', // Not used in govuk-frontend
   SIZE_24: '24px',
@@ -68,5 +72,7 @@ SIZE_27: '27px',
   SIZE_16: '1.25',
-  SIZE_19: '1.3',
-  SIZE_18: '1.3',
+  SIZE_18: '1.3', // approximate - value in typography is correct
+  SIZE_19: '1.3', // ditto
+  // SIZE_24 differs here from 24 def in typography scale, which is 1.25
+  // however that appears to be a mistake
   SIZE_24: '1.35',
 };

src/spacing.js

@@ -1,2 +0,2 @@
-// https://github.com/alphagov/govuk-frontend/blob/master/src/globals/scss/settings/_spacing.scss
+// https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_spacing.scss
 
@@ -30,3 +30,3 @@ export const RESPONSIVE_0 = {
   mobile: 15,
-  tablet: 45,
+  tablet: 25,
 };
@@ -68,1 +68,14 @@
 export const SPACING_MAP_INDEX = Array.from(Array(SPACING_MAP.length).keys());
+
+export const SPACING_POINTS = {
+  0: 0,
+  1: '5px',
+  2: '10px',
+  3: '15px',
+  4: '20px',
+  5: '25px',
+  6: '30px',
+  7: '40px',
+  8: '50px',
+  9: '60px',
+};

src/typography.js

@@ -1,143 +0,183 @@
-// https://govuk-elements.herokuapp.com/typography/#typography-headings
-// https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss
-// https://github.com/alphagov/govuk-frontend/blob/master/src/globals/scss/core/_typography.scss
-// https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss
+// https://design-system.service.gov.uk/styles/typography/
+// https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_typography-responsive.scss
+// https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_typography-font.scss
+// https://github.com/alphagov/govuk-frontend/blob/master/src/core/_typography.scss
 
-// using spacing values from https://github.com/alphagov/govuk-frontend/blob/master/src/globals/scss/core/_typography.scss
 import { RESPONSIVE_8, RESPONSIVE_6, RESPONSIVE_4 } from './spacing';
 
-const FONT_80 = {
-  tablet: {
-    lineHeight: 80 / 80,
-    fontSize: 80,
-    spacing: RESPONSIVE_8.tablet,
+export const TYPOGRAPHY_SCALE = {
+  80: {
+    mobile: {
+      fontSize: 53,
+      lineHeight: 55 / 53,
+      spacing: RESPONSIVE_8.mobile,
+    },
+    tablet: {
+      fontSize: 80,
+      lineHeight: 80 / 80,
+      spacing: RESPONSIVE_8.tablet,
+    },
+    print: {
+      fontSize: 53,
+      lineHeight: 1.1,
+    },
   },
-  mobile: {
-    lineHeight: 55 / 53,
-    fontSize: 53,
-    spacing: RESPONSIVE_8.mobile,
+
+  48: {
+    mobile: {
+      fontSize: 32,
+      lineHeight: 35 / 32,
+      spacing: RESPONSIVE_8.mobile,
+    },
+    tablet: {
+      fontSize: 48,
+      lineHeight: 50 / 48,
+      spacing: RESPONSIVE_8.tablet,
+    },
+    print: {
+      fontSize: 32,
+      lineHeight: 1.15,
+    },
   },
-  print: {
-    fontSize: 28,
+
+  36: {
+    mobile: {
+      fontSize: 24,
+      lineHeight: 25 / 24,
+      spacing: RESPONSIVE_6.mobile,
+    },
+    tablet: {
+      fontSize: 36,
+      lineHeight: 40 / 36,
+      spacing: RESPONSIVE_6.tablet,
+    },
+    print: {
+      fontSize: 24,
+      lineHeight: 1.05,
+    },
   },
-};
 
-const FONT_48 = {
-  tablet: {
-    lineHeight: 50 / 48,
-    fontSize: 48,
-    spacing: RESPONSIVE_6.tablet,
+  27: {
+    mobile: {
+      fontSize: 18,
+      lineHeight: 20 / 18,
+      spacing: RESPONSIVE_4.mobile,
+    },
+    tablet: {
+      fontSize: 27,
+      lineHeight: 30 / 27,
+      spacing: RESPONSIVE_4.tablet,
+    },
+    print: {
+      fontSize: 18,
+      lineHeight: 1.15,
+    },
   },
-  mobile: {
-    lineHeight: 35 / 32,
-    fontSize: 32,
-    spacing: RESPONSIVE_6.mobile,
+
+  24: {
+    mobile: {
+      fontSize: 18,
+      lineHeight: 20 / 18,
+      spacing: RESPONSIVE_4.mobile,
+    },
+    tablet: {
+      fontSize: 24,
+      lineHeight: 30 / 24,
+      spacing: RESPONSIVE_4.tablet,
+    },
+    print: {
+      fontSize: 18,
+      lineHeight: 1.15,
+    },
   },
-  print: {
-    fontSize: 18,
-  },
-};
 
-const FONT_36 = {
-  tablet: {
-    lineHeight: 40 / 36,
-    fontSize: 36,
-    spacing: RESPONSIVE_4.tablet,
+  19: {
+    mobile: {
+      fontSize: 16,
+      lineHeight: 20 / 16,
+      spacing: RESPONSIVE_4.mobile,
+    },
+    tablet: {
+      fontSize: 19,
+      lineHeight: 25 / 19,
+      spacing: RESPONSIVE_4.tablet,
+    },
+    print: {
+      fontSize: 14,
+      lineHeight: 1.15,
+    },
   },
-  mobile: {
-    lineHeight: 25 / 24,
-    fontSize: 24,
-    spacing: RESPONSIVE_4.mobile,
-  },
-  print: {
-    fontSize: 18,
-  },
-};
 
-const FONT_27 = {
-  tablet: {
-    lineHeight: 30 / 27,
-    fontSize: 27,
-    spacing: RESPONSIVE_4.tablet,
+  16: {
+    mobile: {
+      fontSize: 14,
+      lineHeight: 16 / 14,
+      spacing: RESPONSIVE_4.mobile,
+    },
+    tablet: {
+      fontSize: 16,
+      lineHeight: 20 / 16,
+      spacing: RESPONSIVE_4.tablet,
+    },
+    print: {
+      fontSize: 14,
+      lineHeight: 1.2,
+    },
   },
-  mobile: {
-    lineHeight: 20 / 18,
-    fontSize: 20,
-    spacing: RESPONSIVE_4.mobile,
-  },
-  print: {
-    fontSize: 16,
-  },
-};
 
-const FONT_24 = {
-  tablet: {
-    lineHeight: 30 / 24,
-    fontSize: 24,
-    spacing: RESPONSIVE_4.tablet,
+  14: {
+    mobile: {
+      fontSize: 12,
+      lineHeight: 15 / 12,
+      spacing: RESPONSIVE_4.mobile,
+    },
+    tablet: {
+      fontSize: 14,
+      lineHeight: 20 / 14,
+      spacing: RESPONSIVE_4.tablet,
+    },
+    print: {
+      fontSize: 12,
+      lineHeight: 1.2,
+    },
   },
-  mobile: {
-    lineHeight: 24 / 20,
-    fontSize: 18,
-    spacing: RESPONSIVE_4.mobile,
-  },
-  print: {
-    fontSize: 16,
-  },
 };
 
-const FONT_19 = {
-  tablet: {
-    lineHeight: 25 / 19,
-    fontSize: 19,
-    spacing: RESPONSIVE_4.tablet,
-  },
-  mobile: {
-    lineHeight: 20 / 16,
-    fontSize: 16,
-    spacing: RESPONSIVE_4.mobile,
-  },
-  print: {
-    fontSize: 14,
-  },
+// NB Spacing values set above relate to headings
+// body classes use different responsive margins
+// captions use govuk-spacing(1) for xl and l sizes only
+// TODO move spacing info out into separate data
+
+// heading sizes supported in govuk-frontend
+export const HEADING_SIZES = {
+  XLARGE: 48,
+  XL: 48,
+  LARGE: 36,
+  L: 36,
+  MEDIUM: 24,
+  M: 24,
+  SMALL: 19,
+  S: 19,
 };
 
-const FONT_16 = {
-  tablet: {
-    lineHeight: 20 / 16,
-    fontSize: 16,
-    spacing: RESPONSIVE_4.tablet,
-  },
-  mobile: {
-    lineHeight: 16 / 14,
-    fontSize: 14,
-    spacing: RESPONSIVE_4.mobile,
-  },
-  print: {
-    fontSize: 12,
-  },
+// caption sizes supported in govuk-frontend
+export const CAPTION_SIZES = {
+  XLARGE: 27,
+  XL: 27,
+  LARGE: 24,
+  L: 24,
+  MEDIUM: 19,
+  M: 19,
 };
 
-// Association between 'xsmall' format used by https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss
-// and core-xx format used by https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss
-//
-// core-80 is misleading as it is not always 80px, therefore xsmall format is preferred,
-// but lookup to original mixin values is kept for clarity.
-const XXLARGE = FONT_80;
-const XLARGE = FONT_48;
-const LARGE = FONT_36;
-const MEDIUMLARGE = FONT_27;
-const MEDIUM = FONT_24;
-const SMALL = FONT_19;
-const XSMALL = FONT_16;
-
-// all available font sizes
-export const FONT_SIZES = {
-  XXLARGE,
-  XLARGE,
-  LARGE,
-  MEDIUMLARGE,
-  MEDIUM,
-  SMALL,
-  XSMALL,
+// body text sizes supported in govuk-frontend
+export const BODY_SIZES = {
+  LARGE: 24,
+  L: 24,
+  MEDIUM: 19,
+  M: 19,
+  SMALL: 16,
+  S: 16,
+  XSMALL: 14,
+  XS: 14,
 };
@@ -161,4 +201,9 @@
   4: 'SMALL',
-  5: 'XSMALL',
-  6: 'XSMALL',
+  5: 'SMALL',
+  6: 'SMALL',
 };
+
+export const FONT_WEIGHTS = {
+  bold: '700',
+  regular: '400',
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68378

increased by19.11%

Number of package files

26

increased by23.81%

Lines of code

1130

increased by25.14%

No dependency changes