@govuk-react/constants - npm Package Compare versions

Comparing version 0.2.7 to 0.3.1

es/index.js

@@ -9,13 +9,17 @@ export * from './spacing';
 export var BORDER_WIDTH_WIDE = '10px';
-export var FOCUS_WIDTH = '3px';
-export var SITE_WIDTH = '960px';
-export var FULL_WIDTH = '100%';
+export var FOCUS_WIDTH = '3px'; // Tracks https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_measurements.scss
+
+export var SITE_WIDTH_PX = 960;
+export var SITE_WIDTH = SITE_WIDTH_PX + "px";
+export var FULL_WIDTH = '100%'; // tracks $govuk-breakpoints at https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_media-queries.scss
+
 export var BREAKPOINTS = {
   SMALLSCREEN: '320px',
-  LARGESCREEN: '641px'
+  // @deprecated
+  LARGESCREEN: '641px',
+  // @deprecated
+  MOBILE: '320px',
+  TABLET: '641px',
+  DESKTOP: '769px'
 };
-export var MEDIA_QUERIES = {
-  LARGESCREEN: "@media only screen and (min-width: " + BREAKPOINTS.LARGESCREEN + ")",
-  PRINT: '@media print'
-};
 export var GUTTER_PX = 30;
@@ -32,2 +36,8 @@ export var GUTTER = GUTTER_PX + "px";
   SCALE_6: '60px'
+};
+export var SITE_WIDTH_PLUS_GUTTERS = SITE_WIDTH_PX + 2 * GUTTER_PX + "px";
+export var MEDIA_QUERIES = {
+  LARGESCREEN: "@media only screen and (min-width: " + BREAKPOINTS.LARGESCREEN + ")",
+  MAX: "@media only screen and (min-width: " + SITE_WIDTH_PLUS_GUTTERS + ")",
+  PRINT: '@media print'
 }; // TODO: figure out how to optionally include locally installed font, e.g. "GDS Transport Website"
@@ -34,0 +44,0 @@

lib/index.js

@@ -12,6 +12,6 @@ "use strict";
   FOCUS_WIDTH: true,
+  SITE_WIDTH_PX: true,
   SITE_WIDTH: true,
   FULL_WIDTH: true,
   BREAKPOINTS: true,
-  MEDIA_QUERIES: true,
   GUTTER_PX: true,
@@ -22,2 +22,4 @@ GUTTER: true,
   SPACING: true,
+  SITE_WIDTH_PLUS_GUTTERS: true,
+  MEDIA_QUERIES: true,
   NTA_LIGHT: true,
@@ -31,3 +33,3 @@ NTA_LIGHT_TABULAR: 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.SPACING = exports.GUTTER_ONE_THIRD = exports.GUTTER_HALF = exports.GUTTER = exports.GUTTER_PX = exports.MEDIA_QUERIES = exports.BREAKPOINTS = exports.FULL_WIDTH = exports.SITE_WIDTH = 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.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;
 
@@ -61,18 +63,22 @@ var _spacing = require("./spacing");
 exports.BORDER_WIDTH_WIDE = BORDER_WIDTH_WIDE;
-var FOCUS_WIDTH = '3px';
+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 = '960px';
+var SITE_WIDTH_PX = 960;
+exports.SITE_WIDTH_PX = SITE_WIDTH_PX;
+var SITE_WIDTH = SITE_WIDTH_PX + "px";
 exports.SITE_WIDTH = SITE_WIDTH;
-var FULL_WIDTH = '100%';
+var FULL_WIDTH = '100%'; // tracks $govuk-breakpoints at https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_media-queries.scss
+
 exports.FULL_WIDTH = FULL_WIDTH;
 var BREAKPOINTS = {
   SMALLSCREEN: '320px',
-  LARGESCREEN: '641px'
+  // @deprecated
+  LARGESCREEN: '641px',
+  // @deprecated
+  MOBILE: '320px',
+  TABLET: '641px',
+  DESKTOP: '769px'
 };
 exports.BREAKPOINTS = BREAKPOINTS;
-var MEDIA_QUERIES = {
-  LARGESCREEN: "@media only screen and (min-width: " + BREAKPOINTS.LARGESCREEN + ")",
-  PRINT: '@media print'
-};
-exports.MEDIA_QUERIES = MEDIA_QUERIES;
 var GUTTER_PX = 30;
@@ -93,5 +99,13 @@ exports.GUTTER_PX = GUTTER_PX;
   SCALE_6: '60px'
+};
+exports.SPACING = SPACING;
+var SITE_WIDTH_PLUS_GUTTERS = SITE_WIDTH_PX + 2 * GUTTER_PX + "px";
+exports.SITE_WIDTH_PLUS_GUTTERS = SITE_WIDTH_PLUS_GUTTERS;
+var MEDIA_QUERIES = {
+  LARGESCREEN: "@media only screen and (min-width: " + BREAKPOINTS.LARGESCREEN + ")",
+  MAX: "@media only screen and (min-width: " + SITE_WIDTH_PLUS_GUTTERS + ")",
+  PRINT: '@media print'
 }; // TODO: figure out how to optionally include locally installed font, e.g. "GDS Transport Website"
 
-exports.SPACING = SPACING;
+exports.MEDIA_QUERIES = MEDIA_QUERIES;
 var NTA_LIGHT = '"nta", Arial, sans-serif';
@@ -98,0 +112,0 @@ exports.NTA_LIGHT = NTA_LIGHT;

package.json

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

src/index.js

@@ -11,14 +11,17 @@ export * from './spacing';
 export const FOCUS_WIDTH = '3px';
-export const SITE_WIDTH = '960px';
+// Tracks https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_measurements.scss
+export const SITE_WIDTH_PX = 960;
+export const SITE_WIDTH = `${SITE_WIDTH_PX}px`;
+
 export const FULL_WIDTH = '100%';
+
+// tracks $govuk-breakpoints at https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_media-queries.scss
 export const BREAKPOINTS = {
-  SMALLSCREEN: '320px',
-  LARGESCREEN: '641px',
+  SMALLSCREEN: '320px', // @deprecated
+  LARGESCREEN: '641px', // @deprecated
+  MOBILE: '320px',
+  TABLET: '641px',
+  DESKTOP: '769px',
 };
 
-export const MEDIA_QUERIES = {
-  LARGESCREEN: `@media only screen and (min-width: ${BREAKPOINTS.LARGESCREEN})`,
-  PRINT: '@media print',
-};
-
 export const GUTTER_PX = 30;
@@ -37,2 +40,10 @@ export const GUTTER = `${GUTTER_PX}px`;
 
+export const SITE_WIDTH_PLUS_GUTTERS = `${SITE_WIDTH_PX + (2 * GUTTER_PX)}px`;
+
+export const MEDIA_QUERIES = {
+  LARGESCREEN: `@media only screen and (min-width: ${BREAKPOINTS.LARGESCREEN})`,
+  MAX: `@media only screen and (min-width: ${SITE_WIDTH_PLUS_GUTTERS})`,
+  PRINT: '@media print',
+};
+
 // TODO: figure out how to optionally include locally installed font, e.g. "GDS Transport Website"
@@ -39,0 +50,0 @@ export const NTA_LIGHT = '"nta", Arial, sans-serif';

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

53753

increased by6.53%

Lines of code

903

increased by3.2%

No dependency changes