@govuk-react/lib - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

es/spacing/index.js

@@ -10,3 +10,4 @@ // This lib is effectively a port of govuk-frontend's spacing sass helpers
 export function simple(size) {
-  var scale = SPACING_POINTS[size];
+  var scale = SPACING_POINTS[Math.abs(size)];
+  var polarity = size < 0 ? -1 : 1;
 
@@ -17,3 +18,3 @@ if (scale === undefined) {
 
-  return scale;
+  return scale * polarity;
 }
@@ -38,3 +39,4 @@
 
-  var scale = SPACING_MAP[size];
+  var scale = SPACING_MAP[Math.abs(size)];
+  var polarity = size < 0 ? -1 : 1;
 
@@ -55,9 +57,9 @@ if (scale === undefined) {
     return Object.assign.apply(Object, [{}].concat(direction.map(function (dir) {
-      return styleForDirection(scale.mobile + adjustment, property, dir);
+      return styleForDirection(scale.mobile * polarity + adjustment, property, dir);
     }), [(_ref3 = {}, _ref3[MEDIA_QUERIES.TABLET] = Object.assign.apply(Object, [{}].concat(direction.map(function (dir) {
-      return styleForDirection(scale.tablet + adjustment, property, dir);
+      return styleForDirection(scale.tablet * polarity + adjustment, property, dir);
     }))), _ref3)]));
   }
 
-  return Object.assign({}, styleForDirection(scale.mobile + adjustment, property, direction), (_Object$assign = {}, _Object$assign[MEDIA_QUERIES.TABLET] = styleForDirection(scale.tablet + adjustment, property, direction), _Object$assign));
+  return Object.assign({}, styleForDirection(scale.mobile * polarity + adjustment, property, direction), (_Object$assign = {}, _Object$assign[MEDIA_QUERIES.TABLET] = styleForDirection(scale.tablet * polarity + adjustment, property, direction), _Object$assign));
 }
@@ -64,0 +66,0 @@ export function responsiveMargin(value) {

es/spacing/test.js

@@ -10,2 +10,10 @@ import { MEDIA_QUERIES, SPACING_MAP, SPACING_MAP_INDEX, SPACING_POINTS, WIDTHS } from '@govuk-react/constants';
     });
+    it('returns negative spacing values from the spacing scale', function () {
+      Object.keys(SPACING_POINTS).forEach(function (key) {
+        // skip zero, as -0 !== 0 in JS
+        if ("" + key !== '0') {
+          expect(spacing.simple(-key)).toEqual(-SPACING_POINTS[key]);
+        }
+      });
+    });
     it('throws when not given a size', function () {
@@ -40,2 +48,19 @@ expect(function () {
     });
+    it('returns negative spacing styles for given sizes on the spacing scale', function () {
+      SPACING_MAP_INDEX.forEach(function (size) {
+        // skip zero, as -0 !== 0 in JS
+        if (size !== 0) {
+          var style = spacing.responsive({
+            size: -size,
+            property: 'test'
+          });
+          expect(style).toEqual(expect.objectContaining({
+            test: -SPACING_MAP[size].mobile
+          }));
+          expect(style[MEDIA_QUERIES.TABLET]).toEqual(expect.objectContaining({
+            test: -SPACING_MAP[size].tablet
+          }));
+        }
+      });
+    });
     it('throws when not given a size', function () {
@@ -42,0 +67,0 @@ expect(function () {

es/visually-hidden/index.js

@@ -38,3 +38,3 @@ // This lib is effectively a port of govuk-frontend's visually-hidden sass helpers
 
-visuallyHidden.focusable = function focusable(_temp2) {
+function focusable(_temp2) {
   var _ref2 = _temp2 === void 0 ? {} : _temp2,
@@ -48,5 +48,7 @@ _ref2$important = _ref2.important,
   });
-};
+}
 
+visuallyHidden.focusable = focusable;
 export default visuallyHidden;
+export { focusable };
 //# sourceMappingURL=index.js.map

lib/spacing/index.js

@@ -24,4 +24,6 @@ "use strict";
 function simple(size) {
-  var scale = _constants.SPACING_POINTS[size];
+  var scale = _constants.SPACING_POINTS[Math.abs(size)];
 
+  var polarity = size < 0 ? -1 : 1;
+
   if (scale === undefined) {
@@ -31,3 +33,3 @@ throw Error("Unknown spacing size " + size + " - expected a point from the spacing scale.");
 
-  return scale;
+  return scale * polarity;
 }
@@ -52,4 +54,6 @@
 
-  var scale = _constants.SPACING_MAP[size];
+  var scale = _constants.SPACING_MAP[Math.abs(size)];
 
+  var polarity = size < 0 ? -1 : 1;
+
   if (scale === undefined) {
@@ -69,9 +73,9 @@ throw Error("Unknown responsive spacing size " + size + " - expected a point from the responsive spacing scale.");
     return Object.assign.apply(Object, [{}].concat(direction.map(function (dir) {
-      return styleForDirection(scale.mobile + adjustment, property, dir);
+      return styleForDirection(scale.mobile * polarity + adjustment, property, dir);
     }), [(_ref3 = {}, _ref3[_constants.MEDIA_QUERIES.TABLET] = Object.assign.apply(Object, [{}].concat(direction.map(function (dir) {
-      return styleForDirection(scale.tablet + adjustment, property, dir);
+      return styleForDirection(scale.tablet * polarity + adjustment, property, dir);
     }))), _ref3)]));
   }
 
-  return Object.assign({}, styleForDirection(scale.mobile + adjustment, property, direction), (_Object$assign = {}, _Object$assign[_constants.MEDIA_QUERIES.TABLET] = styleForDirection(scale.tablet + adjustment, property, direction), _Object$assign));
+  return Object.assign({}, styleForDirection(scale.mobile * polarity + adjustment, property, direction), (_Object$assign = {}, _Object$assign[_constants.MEDIA_QUERIES.TABLET] = styleForDirection(scale.tablet * polarity + adjustment, property, direction), _Object$assign));
 }
@@ -78,0 +82,0 @@

lib/spacing/test.js

@@ -16,2 +16,10 @@ "use strict";
     });
+    it('returns negative spacing values from the spacing scale', function () {
+      Object.keys(_constants.SPACING_POINTS).forEach(function (key) {
+        // skip zero, as -0 !== 0 in JS
+        if ("" + key !== '0') {
+          expect(spacing.simple(-key)).toEqual(-_constants.SPACING_POINTS[key]);
+        }
+      });
+    });
     it('throws when not given a size', function () {
@@ -46,2 +54,19 @@ expect(function () {
     });
+    it('returns negative spacing styles for given sizes on the spacing scale', function () {
+      _constants.SPACING_MAP_INDEX.forEach(function (size) {
+        // skip zero, as -0 !== 0 in JS
+        if (size !== 0) {
+          var style = spacing.responsive({
+            size: -size,
+            property: 'test'
+          });
+          expect(style).toEqual(expect.objectContaining({
+            test: -_constants.SPACING_MAP[size].mobile
+          }));
+          expect(style[_constants.MEDIA_QUERIES.TABLET]).toEqual(expect.objectContaining({
+            test: -_constants.SPACING_MAP[size].tablet
+          }));
+        }
+      });
+    });
     it('throws when not given a size', function () {
@@ -48,0 +73,0 @@ expect(function () {

lib/visually-hidden/index.js

 "use strict";
 
 exports.__esModule = true;
+exports.focusable = focusable;
 exports.default = void 0;
@@ -43,3 +44,3 @@
 
-visuallyHidden.focusable = function focusable(_temp2) {
+function focusable(_temp2) {
   var _ref2 = _temp2 === void 0 ? {} : _temp2,
@@ -53,7 +54,7 @@ _ref2$important = _ref2.important,
   });
-};
+}
 
+visuallyHidden.focusable = focusable;
 var _default = visuallyHidden;
 exports.default = _default;
-module.exports = exports.default;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@govuk-react/lib",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "dependencies": {
-    "@govuk-react/constants": "^0.7.0",
+    "@govuk-react/constants": "^0.7.1",
     "govuk-colours": "^1.0.3"
@@ -7,0 +7,0 @@ },

src/link/index.js

 // Tracking:
 // https://github.com/alphagov/govuk-frontend/blob/master/src/helpers/_links.scss
+import { FOCUSABLE_FILL, MEDIA_QUERIES } from '@govuk-react/constants';
 import {
-  FOCUSABLE_FILL,
-  MEDIA_QUERIES,
-} from '@govuk-react/constants';
-import {
   BLACK, // in lieu of a FOCUS_TEXT_COLOUR...
@@ -9,0 +6,0 @@ LINK_COLOUR,

src/shape/index.js

@@ -43,8 +43,3 @@ // Tracking:
 // eslint-disable-next-line import/prefer-default-export
-export function arrow({
-  direction,
-  base = 0,
-  height = equilateralHeight(base),
-  display = 'block',
-}) {
+export function arrow({ direction, base = 0, height = equilateralHeight(base), display = 'block' }) {
   return {
@@ -51,0 +46,0 @@ display,

src/shape/test.js

@@ -12,3 +12,3 @@ import * as shape from '.';
     it('returns styles for an arrow for up/down/left/right directions', () => {
-      directions.forEach((direction) => {
+      directions.forEach(direction => {
         expect(shape.arrow({ direction })).toBeTruthy();
@@ -15,0 +15,0 @@ });

src/spacing/index.js

@@ -9,12 +9,7 @@ // This lib is effectively a port of govuk-frontend's spacing sass helpers
 import PropTypes from 'prop-types';
-import {
-  MEDIA_QUERIES,
-  SPACING_MAP,
-  SPACING_MAP_INDEX,
-  SPACING_POINTS,
-  WIDTHS,
-} from '@govuk-react/constants';
+import { MEDIA_QUERIES, SPACING_MAP, SPACING_MAP_INDEX, SPACING_POINTS, WIDTHS } from '@govuk-react/constants';
 
 export function simple(size) {
-  const scale = SPACING_POINTS[size];
+  const scale = SPACING_POINTS[Math.abs(size)];
+  const polarity = size < 0 ? -1 : 1;
 
@@ -25,3 +20,3 @@ if (scale === undefined) {
 
-  return scale;
+  return scale * polarity;
 }
@@ -32,14 +27,12 @@
   return {
-    [(direction && direction !== 'all') ? `${property}-${direction}` : property]: size,
+    [direction && direction !== 'all' ? `${property}-${direction}` : property]: size,
   };
 }
 
-export function responsive({
-  size, property, direction, adjustment = 0,
-} = {}) {
-  const scale = SPACING_MAP[size];
+export function responsive({ size, property, direction, adjustment = 0 } = {}) {
+  const scale = SPACING_MAP[Math.abs(size)];
+  const polarity = size < 0 ? -1 : 1;
 
   if (scale === undefined) {
-    throw Error(`Unknown responsive spacing size ${
-      size} - expected a point from the responsive spacing scale.`);
+    throw Error(`Unknown responsive spacing size ${size} - expected a point from the responsive spacing scale.`);
   }
@@ -57,19 +50,15 @@
       {},
-      ...direction.map(dir => styleForDirection(scale.mobile + adjustment, property, dir)),
+      ...direction.map(dir => styleForDirection(scale.mobile * polarity + adjustment, property, dir)),
       {
         [MEDIA_QUERIES.TABLET]: Object.assign(
           {},
-          ...direction.map(dir => styleForDirection(scale.tablet + adjustment, property, dir)),
+          ...direction.map(dir => styleForDirection(scale.tablet * polarity + adjustment, property, dir))
         ),
-      },
+      }
     );
   }
 
-  return Object.assign(
-    {},
-    styleForDirection(scale.mobile + adjustment, property, direction),
-    {
-      [MEDIA_QUERIES.TABLET]: styleForDirection(scale.tablet + adjustment, property, direction),
-    },
-  );
+  return Object.assign({}, styleForDirection(scale.mobile * polarity + adjustment, property, direction), {
+    [MEDIA_QUERIES.TABLET]: styleForDirection(scale.tablet * polarity + adjustment, property, direction),
+  });
 }
@@ -85,3 +74,6 @@
   return responsive({
-    size, property: 'margin', direction, adjustment,
+    size,
+    property: 'margin',
+    direction,
+    adjustment,
   });
@@ -98,3 +90,6 @@ }
   return responsive({
-    size, property: 'padding', direction, adjustment,
+    size,
+    property: 'padding',
+    direction,
+    adjustment,
   });
@@ -116,7 +111,3 @@ }
 export function withWhiteSpace(config = {}) {
-  return ({
-    margin = config.margin,
-    padding = config.padding,
-    mb: marginBottom = config.marginBottom,
-  } = {}) => {
+  return ({ margin = config.margin, padding = config.padding, mb: marginBottom = config.marginBottom } = {}) => {
     const styles = [];
@@ -172,5 +163,3 @@
 export function withWidth(config = {}) {
-  return ({
-    setWidth = config.width,
-  } = {}) => {
+  return ({ setWidth = config.width } = {}) => {
     if (setWidth) {
@@ -177,0 +166,0 @@ const width = WIDTHS[setWidth] || setWidth;

src/spacing/test.js

@@ -1,8 +0,2 @@
-import {
-  MEDIA_QUERIES,
-  SPACING_MAP,
-  SPACING_MAP_INDEX,
-  SPACING_POINTS,
-  WIDTHS,
-} from '@govuk-react/constants';
+import { MEDIA_QUERIES, SPACING_MAP, SPACING_MAP_INDEX, SPACING_POINTS, WIDTHS } from '@govuk-react/constants';
 
@@ -14,3 +8,3 @@ import * as spacing from '.';
     it('returns spacing values from the spacing scale', () => {
-      Object.keys(SPACING_POINTS).forEach((key) => {
+      Object.keys(SPACING_POINTS).forEach(key => {
         expect(spacing.simple(key)).toEqual(SPACING_POINTS[key]);
@@ -20,2 +14,11 @@ });
 
+    it('returns negative spacing values from the spacing scale', () => {
+      Object.keys(SPACING_POINTS).forEach(key => {
+        // skip zero, as -0 !== 0 in JS
+        if (`${key}` !== '0') {
+          expect(spacing.simple(-key)).toEqual(-SPACING_POINTS[key]);
+        }
+      });
+    });
+
     it('throws when not given a size', () => {
@@ -33,11 +36,22 @@ expect(() => spacing.simple()).toThrow();
     it('returns spacing styles for given sizes on the spacing scale', () => {
-      SPACING_MAP_INDEX.forEach((size) => {
+      SPACING_MAP_INDEX.forEach(size => {
         const style = spacing.responsive({ size, property: 'test' });
 
         expect(style).toEqual(expect.objectContaining({ test: SPACING_MAP[size].mobile }));
-        expect(style[MEDIA_QUERIES.TABLET])
-          .toEqual(expect.objectContaining({ test: SPACING_MAP[size].tablet }));
+        expect(style[MEDIA_QUERIES.TABLET]).toEqual(expect.objectContaining({ test: SPACING_MAP[size].tablet }));
       });
     });
 
+    it('returns negative spacing styles for given sizes on the spacing scale', () => {
+      SPACING_MAP_INDEX.forEach(size => {
+        // skip zero, as -0 !== 0 in JS
+        if (size !== 0) {
+          const style = spacing.responsive({ size: -size, property: 'test' });
+
+          expect(style).toEqual(expect.objectContaining({ test: -SPACING_MAP[size].mobile }));
+          expect(style[MEDIA_QUERIES.TABLET]).toEqual(expect.objectContaining({ test: -SPACING_MAP[size].tablet }));
+        }
+      });
+    });
+
     it('throws when not given a size', () => {
@@ -57,40 +71,59 @@ expect(() => spacing.responsive()).toThrow();
     it('returns spacing style for a given direction', () => {
-      expect(spacing.responsive({ size: 0, property: 'test', direction: 'east' }))
-        .toEqual(expect.objectContaining({ 'test-east': SPACING_MAP[0].mobile }));
+      expect(spacing.responsive({ size: 0, property: 'test', direction: 'east' })).toEqual(
+        expect.objectContaining({ 'test-east': SPACING_MAP[0].mobile })
+      );
     });
 
     it('returns spacing style for a given array of direction', () => {
-      const style = spacing.responsive({ size: 0, property: 'test', direction: ['east', 'west'] });
+      const style = spacing.responsive({
+        size: 0,
+        property: 'test',
+        direction: ['east', 'west'],
+      });
 
-      expect(style).toEqual(expect.objectContaining({
-        'test-east': SPACING_MAP[0].mobile,
-        'test-west': SPACING_MAP[0].mobile,
-      }));
-      expect(style[MEDIA_QUERIES.TABLET]).toEqual(expect.objectContaining({
-        'test-east': SPACING_MAP[0].tablet,
-        'test-west': SPACING_MAP[0].tablet,
-      }));
+      expect(style).toEqual(
+        expect.objectContaining({
+          'test-east': SPACING_MAP[0].mobile,
+          'test-west': SPACING_MAP[0].mobile,
+        })
+      );
+      expect(style[MEDIA_QUERIES.TABLET]).toEqual(
+        expect.objectContaining({
+          'test-east': SPACING_MAP[0].tablet,
+          'test-west': SPACING_MAP[0].tablet,
+        })
+      );
     });
 
     it('treats all direction as no direction', () => {
-      expect(spacing.responsive({ size: 0, property: 'test', direction: 'all' }))
-        .toEqual(expect.objectContaining({ test: SPACING_MAP[0].mobile }));
+      expect(spacing.responsive({ size: 0, property: 'test', direction: 'all' })).toEqual(
+        expect.objectContaining({ test: SPACING_MAP[0].mobile })
+      );
     });
 
     it('treats all direction in a direction array as no direction', () => {
-      const style = spacing.responsive({ size: 0, property: 'test', direction: ['all', 'west'] });
+      const style = spacing.responsive({
+        size: 0,
+        property: 'test',
+        direction: ['all', 'west'],
+      });
 
-      expect(style).toEqual(expect.objectContaining({
-        test: SPACING_MAP[0].mobile,
-        'test-west': SPACING_MAP[0].mobile,
-      }));
-      expect(style[MEDIA_QUERIES.TABLET]).toEqual(expect.objectContaining({
-        test: SPACING_MAP[0].tablet,
-        'test-west': SPACING_MAP[0].tablet,
-      }));
+      expect(style).toEqual(
+        expect.objectContaining({
+          test: SPACING_MAP[0].mobile,
+          'test-west': SPACING_MAP[0].mobile,
+        })
+      );
+      expect(style[MEDIA_QUERIES.TABLET]).toEqual(
+        expect.objectContaining({
+          test: SPACING_MAP[0].tablet,
+          'test-west': SPACING_MAP[0].tablet,
+        })
+      );
     });
 
     it('adjusts a spacing by the adjustment amount', () => {
-      expect(spacing.responsive({ size: 0, property: 'test', adjustment: 7 }))
-        .toEqual(expect.objectContaining({ test: SPACING_MAP[0].mobile + 7 }));
+      expect(spacing.responsive({ size: 0, property: 'test', adjustment: 7 })).toEqual(
+        expect.objectContaining({ test: SPACING_MAP[0].mobile + 7 })
+      );
     });
@@ -101,3 +134,3 @@ });
     it('returns margin styles for given sizes on the spacing scale', () => {
-      SPACING_MAP_INDEX.forEach((size) => {
+      SPACING_MAP_INDEX.forEach(size => {
         expect(spacing.responsiveMargin({ size })).toEqual(spacing.responsive({ size, property: 'margin' }));
@@ -108,3 +141,3 @@ });
     it('returns margin styles for given sizes on the spacing scale using simple numeric value', () => {
-      SPACING_MAP_INDEX.forEach((size) => {
+      SPACING_MAP_INDEX.forEach(size => {
         expect(spacing.responsiveMargin(size)).toEqual(spacing.responsive({ size, property: 'margin' }));
@@ -117,3 +150,3 @@ });
     it('returns padding styles for given sizes on the spacing scale', () => {
-      SPACING_MAP_INDEX.forEach((size) => {
+      SPACING_MAP_INDEX.forEach(size => {
         expect(spacing.responsivePadding({ size })).toEqual(spacing.responsive({ size, property: 'padding' }));
@@ -124,3 +157,3 @@ });
     it('returns padding styles for given sizes on the spacing scale using simple numeric value', () => {
-      SPACING_MAP_INDEX.forEach((size) => {
+      SPACING_MAP_INDEX.forEach(size => {
         expect(spacing.responsivePadding(size)).toEqual(spacing.responsive({ size, property: 'padding' }));
@@ -142,5 +175,5 @@ });
 
-        expect(whiteSpaceFunc()).toEqual(expect.arrayContaining([
-          expect.objectContaining({ 'margin-bottom': SPACING_MAP[2].mobile }),
-        ]));
+        expect(whiteSpaceFunc()).toEqual(
+          expect.arrayContaining([expect.objectContaining({ 'margin-bottom': SPACING_MAP[2].mobile })])
+        );
       });
@@ -151,5 +184,5 @@
 
-        expect(whiteSpaceFunc({ mb: 4 })).toEqual(expect.arrayContaining([
-          expect.objectContaining({ 'margin-bottom': SPACING_MAP[4].mobile }),
-        ]));
+        expect(whiteSpaceFunc({ mb: 4 })).toEqual(
+          expect.arrayContaining([expect.objectContaining({ 'margin-bottom': SPACING_MAP[4].mobile })])
+        );
       });
@@ -160,5 +193,5 @@
 
-        expect(whiteSpaceFunc({ mb: 4 })).toEqual(expect.arrayContaining([
-          expect.objectContaining({ 'margin-bottom': SPACING_MAP[4].mobile }),
-        ]));
+        expect(whiteSpaceFunc({ mb: 4 })).toEqual(
+          expect.arrayContaining([expect.objectContaining({ 'margin-bottom': SPACING_MAP[4].mobile })])
+        );
       });
@@ -171,5 +204,5 @@ });
 
-        expect(whiteSpaceFunc()).toEqual(expect.arrayContaining([
-          expect.objectContaining({ margin: SPACING_MAP[4].mobile }),
-        ]));
+        expect(whiteSpaceFunc()).toEqual(
+          expect.arrayContaining([expect.objectContaining({ margin: SPACING_MAP[4].mobile })])
+        );
       });
@@ -180,9 +213,11 @@
 
-        expect(whiteSpaceFunc({ margin: 4 })).toEqual(expect.arrayContaining([
-          expect.objectContaining({ margin: SPACING_MAP[4].mobile }),
-        ]));
+        expect(whiteSpaceFunc({ margin: 4 })).toEqual(
+          expect.arrayContaining([expect.objectContaining({ margin: SPACING_MAP[4].mobile })])
+        );
       });
 
       it('accepts an array of margins', () => {
-        const whiteSpaceFunc = spacing.withWhiteSpace({ margin: [1, { direction: 'top', size: 3 }] });
+        const whiteSpaceFunc = spacing.withWhiteSpace({
+          margin: [1, { direction: 'top', size: 3 }],
+        });
 
@@ -192,9 +227,7 @@ // styles need to be flattened for checking
 
-        expect(result).toEqual(expect.arrayContaining([
-          expect.objectContaining({ margin: SPACING_MAP[1].mobile }),
-        ]));
+        expect(result).toEqual(expect.arrayContaining([expect.objectContaining({ margin: SPACING_MAP[1].mobile })]));
 
-        expect(result).toEqual(expect.arrayContaining([
-          expect.objectContaining({ 'margin-top': SPACING_MAP[3].mobile }),
-        ]));
+        expect(result).toEqual(
+          expect.arrayContaining([expect.objectContaining({ 'margin-top': SPACING_MAP[3].mobile })])
+        );
       });
@@ -207,5 +240,5 @@ });
 
-        expect(whiteSpaceFunc()).toEqual(expect.arrayContaining([
-          expect.objectContaining({ padding: SPACING_MAP[4].mobile }),
-        ]));
+        expect(whiteSpaceFunc()).toEqual(
+          expect.arrayContaining([expect.objectContaining({ padding: SPACING_MAP[4].mobile })])
+        );
       });
@@ -216,9 +249,11 @@
 
-        expect(whiteSpaceFunc({ padding: 4 })).toEqual(expect.arrayContaining([
-          expect.objectContaining({ padding: SPACING_MAP[4].mobile }),
-        ]));
+        expect(whiteSpaceFunc({ padding: 4 })).toEqual(
+          expect.arrayContaining([expect.objectContaining({ padding: SPACING_MAP[4].mobile })])
+        );
       });
 
       it('accepts an array of paddings', () => {
-        const whiteSpaceFunc = spacing.withWhiteSpace({ padding: [1, { direction: 'top', size: 3 }] });
+        const whiteSpaceFunc = spacing.withWhiteSpace({
+          padding: [1, { direction: 'top', size: 3 }],
+        });
 
@@ -228,9 +263,7 @@ // styles need to be flattened for checking
 
-        expect(result).toEqual(expect.arrayContaining([
-          expect.objectContaining({ padding: SPACING_MAP[1].mobile }),
-        ]));
+        expect(result).toEqual(expect.arrayContaining([expect.objectContaining({ padding: SPACING_MAP[1].mobile })]));
 
-        expect(result).toEqual(expect.arrayContaining([
-          expect.objectContaining({ 'padding-top': SPACING_MAP[3].mobile }),
-        ]));
+        expect(result).toEqual(
+          expect.arrayContaining([expect.objectContaining({ 'padding-top': SPACING_MAP[3].mobile })])
+        );
       });
@@ -258,6 +291,8 @@ });
 
-        expect(widthStyle).toEqual(expect.objectContaining({
-          width: '100%',
-          [MEDIA_QUERIES.TABLET]: { width: value },
-        }));
+        expect(widthStyle).toEqual(
+          expect.objectContaining({
+            width: '100%',
+            [MEDIA_QUERIES.TABLET]: { width: value },
+          })
+        );
       });
@@ -269,9 +304,11 @@ });
 
-      ['95%', '200px'].forEach((setWidth) => {
+      ['95%', '200px'].forEach(setWidth => {
         const widthStyle = widthFunc({ setWidth });
 
-        expect(widthStyle).toEqual(expect.objectContaining({
-          width: '100%',
-          [MEDIA_QUERIES.TABLET]: { width: setWidth },
-        }));
+        expect(widthStyle).toEqual(
+          expect.objectContaining({
+            width: '100%',
+            [MEDIA_QUERIES.TABLET]: { width: setWidth },
+          })
+        );
       });
@@ -282,6 +319,8 @@
 
-        expect(widthStyle).toEqual(expect.objectContaining({
-          width: '100%',
-          [MEDIA_QUERIES.TABLET]: { width: value },
-        }));
+        expect(widthStyle).toEqual(
+          expect.objectContaining({
+            width: '100%',
+            [MEDIA_QUERIES.TABLET]: { width: value },
+          })
+        );
       });
@@ -293,14 +332,18 @@ });
 
-      expect(widthFunc()).toEqual(expect.objectContaining({
-        width: '100%',
-        [MEDIA_QUERIES.TABLET]: { width: Object.values(WIDTHS)[0] },
-      }));
+      expect(widthFunc()).toEqual(
+        expect.objectContaining({
+          width: '100%',
+          [MEDIA_QUERIES.TABLET]: { width: Object.values(WIDTHS)[0] },
+        })
+      );
 
-      ['95%', '200px'].forEach((setWidth) => {
+      ['95%', '200px'].forEach(setWidth => {
         const widthStyle = widthFunc({ setWidth });
 
-        expect(widthStyle).toEqual(expect.objectContaining({
-          width: '100%',
-          [MEDIA_QUERIES.TABLET]: { width: setWidth },
-        }));
+        expect(widthStyle).toEqual(
+          expect.objectContaining({
+            width: '100%',
+            [MEDIA_QUERIES.TABLET]: { width: setWidth },
+          })
+        );
       });
@@ -311,6 +354,8 @@
 
-        expect(widthStyle).toEqual(expect.objectContaining({
-          width: '100%',
-          [MEDIA_QUERIES.TABLET]: { width: value },
-        }));
+        expect(widthStyle).toEqual(
+          expect.objectContaining({
+            width: '100%',
+            [MEDIA_QUERIES.TABLET]: { width: value },
+          })
+        );
       });
@@ -322,16 +367,20 @@ });
 
-      ['95%', '200px'].forEach((setWidth) => {
+      ['95%', '200px'].forEach(setWidth => {
         const widthStyle = widthFunc({ setWidth });
 
-        expect(widthStyle).not.toEqual(expect.objectContaining({
-          width: '100%',
-        }));
+        expect(widthStyle).not.toEqual(
+          expect.objectContaining({
+            width: '100%',
+          })
+        );
       });
 
-      Object.values(WIDTHS).forEach((setWidth) => {
+      Object.values(WIDTHS).forEach(setWidth => {
         const widthStyle = widthFunc({ setWidth });
 
-        expect(widthStyle).not.toEqual(expect.objectContaining({
-          width: '100%',
-        }));
+        expect(widthStyle).not.toEqual(
+          expect.objectContaining({
+            width: '100%',
+          })
+        );
       });
@@ -338,0 +387,0 @@ });

src/test.js

@@ -5,5 +5,7 @@ import * as packageExports from '.';
   // all exports are truthy
-  Object.keys(packageExports).map(exportName => it(`${exportName} is truthy`, () => {
-    expect(!!packageExports[exportName]).toBe(true);
-  }));
+  Object.keys(packageExports).map(exportName =>
+    it(`${exportName} is truthy`, () => {
+      expect(!!packageExports[exportName]).toBe(true);
+    })
+  );
 });

src/typography/index.js

@@ -49,15 +49,9 @@ // This lib is effectively a port of govuk-frontend's typography sass helpers
 
-  return Object.assign(
-    {},
-    getSizeStyle(scale.mobile, overrideLineHeight),
-    {
-      [MEDIA_QUERIES.TABLET]: getSizeStyle(scale.tablet, overrideLineHeight),
-      [MEDIA_QUERIES.PRINT]: getSizeStyle(scale.print, overrideLineHeight),
-    },
-  );
+  return Object.assign({}, getSizeStyle(scale.mobile, overrideLineHeight), {
+    [MEDIA_QUERIES.TABLET]: getSizeStyle(scale.tablet, overrideLineHeight),
+    [MEDIA_QUERIES.PRINT]: getSizeStyle(scale.print, overrideLineHeight),
+  });
 }
 
-export function font({
-  size, weight = 'regular', tabular = false, lineHeight,
-} = {}) {
+export function font({ size, weight = 'regular', tabular = false, lineHeight } = {}) {
   return Object.assign(
@@ -67,4 +61,4 @@ {},
     FONT_WEIGHTS[weight] ? { fontWeight: FONT_WEIGHTS[weight] } : undefined,
-    size ? responsive(size, lineHeight) : undefined,
+    size ? responsive(size, lineHeight) : undefined
   );
 }

src/typography/test.js

@@ -38,3 +38,3 @@ import {
     it('allows any font size defined in the typography scale', () => {
-      Object.keys(TYPOGRAPHY_SCALE).forEach((size) => {
+      Object.keys(TYPOGRAPHY_SCALE).forEach(size => {
         expect(() => typography.responsive(size)).not.toThrow();
@@ -59,3 +59,3 @@ });
     it('can override lineHeight', () => {
-      Object.keys(TYPOGRAPHY_SCALE).forEach((size) => {
+      Object.keys(TYPOGRAPHY_SCALE).forEach(size => {
         const style = typography.responsive(size, 999);
@@ -83,4 +83,7 @@
 
-      expect(style)
-        .toEqual(Object.assign({}, typography.common(), { fontWeight: FONT_WEIGHTS.regular }));
+      expect(style).toEqual(
+        Object.assign({}, typography.common(), {
+          fontWeight: FONT_WEIGHTS.regular,
+        })
+      );
     });
@@ -105,3 +108,3 @@
     it('allows size and custom lineHeight to be set', () => {
-      Object.keys(TYPOGRAPHY_SCALE).forEach((size) => {
+      Object.keys(TYPOGRAPHY_SCALE).forEach(size => {
         const style = typography.font({ size, lineHeight: 999 });
@@ -108,0 +111,0 @@

src/visually-hidden/index.js

@@ -5,6 +5,3 @@ // This lib is effectively a port of govuk-frontend's visually-hidden sass helpers
 
-function visuallyHidden({
-  important: isImportant = true,
-  focusable: isFocusable = false,
-} = {}) {
+function visuallyHidden({ important: isImportant = true, focusable: isFocusable = false } = {}) {
   const important = isImportant ? ' !important' : '';
@@ -28,26 +25,31 @@ return Object.assign(
     },
-    isFocusable ? {
-      '&:active,&:focus': {
-        position: `static${important}`,
+    isFocusable
+      ? {
+          '&:active,&:focus': {
+            position: `static${important}`,
 
-        width: `auto${important}`,
-        height: `auto${important}`,
-        margin: `inherit${important}`,
+            width: `auto${important}`,
+            height: `auto${important}`,
+            margin: `inherit${important}`,
 
-        overflow: `visible${important}`,
-        clip: `auto${important}`,
-        clipPath: `none${important}`,
+            overflow: `visible${important}`,
+            clip: `auto${important}`,
+            clipPath: `none${important}`,
 
-        whiteSpace: `inherit${important}`,
-      },
-    } : {
-      padding: `0${important}`,
-    },
+            whiteSpace: `inherit${important}`,
+          },
+        }
+      : {
+          padding: `0${important}`,
+        }
   );
 }
 
-visuallyHidden.focusable = function focusable({ important = true } = {}) {
+function focusable({ important = true } = {}) {
   return visuallyHidden({ important, focusable: true });
-};
+}
 
+visuallyHidden.focusable = focusable;
+
 export default visuallyHidden;
+export { focusable };

src/visually-hidden/test.js

@@ -15,3 +15,3 @@ import visuallyHidden, { focusable } from '.';
 
-      Object.values(style).forEach((value) => {
+      Object.values(style).forEach(value => {
         expect(value).toContain(' !important');
@@ -24,3 +24,3 @@ });
 
-      Object.values(style).forEach((value) => {
+      Object.values(style).forEach(value => {
         expect(value).not.toContain('!important');
@@ -38,4 +38,3 @@ });
 
-      const hasStyles = Object.keys(style).some(key =>
-        [':focus', ':active'].some(checkKey => key.includes(checkKey)));
+      const hasStyles = Object.keys(style).some(key => [':focus', ':active'].some(checkKey => key.includes(checkKey)));
 
@@ -50,3 +49,3 @@ expect(hasStyles).toBe(true);
         if ([':focus', ':active'].some(checkKey => key.includes(checkKey))) {
-          Object.values(value).forEach((activeValue) => {
+          Object.values(value).forEach(activeValue => {
             expect(activeValue).toContain(' !important');
@@ -65,3 +64,3 @@ });
         if ([':focus', ':active'].some(checkKey => key.includes(checkKey))) {
-          Object.values(value).forEach((activeValue) => {
+          Object.values(value).forEach(activeValue => {
             expect(activeValue).not.toContain(' !important');
@@ -68,0 +67,0 @@ });

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

254347

increased by3.51%

Lines of code

2979

increased by2.87%

Dependency changes

• Updated@govuk-react/constants@^0.7.1