@govuk-react/hoc - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

es/asAnchor/test.js

@@ -0,21 +1,38 @@
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
-import asAnchor from './';
-var AnchorTag = asAnchor('a');
-var wrapper = React.createElement(AnchorTag, {
-  href: "https://example.com"
-}, "Example");
+import { mount } from 'enzyme';
+import asAnchor from '.';
 describe('asAnchor', function () {
-  it('renders without crashing', function () {
-    var div = document.createElement('div');
-    ReactDOM.render(wrapper, div);
+  // capture console.warn as this is deprecated
+  var OLD_ENV = process.env; // eslint-disable-next-line no-console
+
+  var nativeWarn = console.warn;
+  var warnCallCount;
+  beforeEach(function () {
+    jest.resetModules();
+    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+
+    console.warn = function () {
+      warnCallCount += 1;
+    };
+
+    warnCallCount = 0;
   });
-  it('returns a component', function () {
-    expect(shallow(wrapper).html()).toBeTruthy();
+  afterEach(function () {
+    // eslint-disable-next-line no-console
+    console.warn = nativeWarn;
+    process.env = OLD_ENV;
   });
-  it('matches wrapper snapshot', function () {
-    expect(shallow(wrapper)).toMatchSnapshot('wrapper mount');
+  it('produces a deprecation warning', function () {
+    process.env.NODE_ENV = 'development';
+    var AnchorTag = asAnchor('a');
+    mount(React.createElement(AnchorTag, {
+      href: "https://example.com"
+    }, "Example"));
+    expect(warnCallCount).not.toEqual(0);
   });
 });
 //# sourceMappingURL=test.js.map

es/withWhiteSpace/stories.js

@@ -1,2 +0,2 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import styled from 'styled-components';
@@ -6,3 +6,3 @@ import { storiesOf } from '@storybook/react';
 import BackLink from '@govuk-react/back-link';
-import Breadcrumb from '@govuk-react/breadcrumb';
+import Breadcrumbs from '@govuk-react/breadcrumb';
 import Button from '@govuk-react/button';
@@ -40,6 +40,6 @@ import Checkbox from '@govuk-react/checkbox';
 stories.add('demo component, simple single margins and padding', function () {
-  return React.createElement(Fragment, null, React.createElement(DemoComponent, {
+  return React.createElement("div", null, React.createElement(DemoComponent, {
     margin: number('margin', 2, {
       range: true,
-      min: 0,
+      min: -9,
       max: 9
@@ -55,7 +55,10 @@ }),
 stories.add('demo component, single margins and padding (complex)', function () {
-  return React.createElement(Fragment, null, React.createElement(DemoComponent, {
+  return React.createElement("div", null, React.createElement(DemoComponent // Use knobs for children content to kick knobs to life - storybook bug work-around
+  // eslint-disable-next-line react/no-children-prop
+  , {
+    children: text('content', 'Component with styles - use knobs to adjust'),
     margin: {
       size: number('margin.size', 2, {
         range: true,
-        min: 0,
+        min: -9,
         max: 9
@@ -75,9 +78,9 @@ }),
     }
-  }, "Component with styles - use knobs to adjust"), React.createElement(DemoComponent, null, "Component without styles"));
+  }), React.createElement(DemoComponent, null, "Component without styles"));
 });
 stories.add('demo component, multiple margins and padding (complex)', function () {
-  return React.createElement(Fragment, null, React.createElement(DemoComponent, {
+  return React.createElement("div", null, React.createElement(DemoComponent, {
     margin: [number('margin (all)', 2, {
       range: true,
-      min: 0,
+      min: -9,
       max: 9
@@ -101,3 +104,3 @@ }), object('margin (first object)', {
 stories.add('existing InputField with spacing size 1', function () {
-  return React.createElement(Fragment, null, React.createElement(InputField, {
+  return React.createElement("div", null, React.createElement(InputField, {
     mb: number('marginBottom', 1),
@@ -109,3 +112,3 @@ name: "group1",
 stories.add('existing InputField with various spacing sizes', function () {
-  return React.createElement(Fragment, null, React.createElement(InputField, {
+  return React.createElement("div", null, React.createElement(InputField, {
     mb: number('marginBottom1', 1),
@@ -129,6 +132,6 @@ name: "group1",
 stories.add('multiple existing components', function () {
-  return React.createElement(Fragment, null, React.createElement(BackLink, {
+  return React.createElement("div", null, React.createElement(BackLink, {
     mb: number('BackLink marginBottom', 9)
-  }, "Example"), React.createElement(Breadcrumb, {
-    mb: number('Breadcrumb marginBottom', 9)
+  }, "Example"), React.createElement(Breadcrumbs, {
+    mb: number('Breadcrumbs marginBottom', 9)
   }, "Example"), React.createElement(Button, {
@@ -135,0 +138,0 @@ mb: number('Button marginBottom', 9)

es/withWhiteSpace/test.js

@@ -0,1 +1,5 @@
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import React from 'react';
@@ -5,7 +9,27 @@ import styled from 'styled-components';
 import withWhiteSpace from '.';
-var WithoutConfig = withWhiteSpace()(styled('div')({}));
-var WithConfig = withWhiteSpace({
-  marginBottom: 0
-})(styled('div')({}));
 describe('withWhiteSpace', function () {
+  // capture console.warn as this is deprecated
+  var OLD_ENV = process.env; // eslint-disable-next-line no-console
+
+  var nativeWarn = console.warn;
+  var warnCallCount;
+  beforeEach(function () {
+    jest.resetModules();
+    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+
+    console.warn = function () {
+      warnCallCount += 1;
+    };
+
+    warnCallCount = 0;
+  });
+  afterEach(function () {
+    // eslint-disable-next-line no-console
+    console.warn = nativeWarn;
+    process.env = OLD_ENV;
+  });
+  var WithoutConfig = withWhiteSpace()(styled('div')({}));
+  var WithConfig = withWhiteSpace({
+    marginBottom: 0
+  })(styled('div')({}));
   it('renders without config without crashing', function () {
@@ -54,9 +78,8 @@ mount(React.createElement(WithoutConfig, null, "Example"));
   });
-  it('matches wrapper snapshot', function () {
-    var wrapper = mount(React.createElement(WithConfig, {
-      mb: 5
-    }, "Example"));
-    expect(wrapper).toMatchSnapshot();
+  it('produces a deprecation warning in development', function () {
+    process.env.NODE_ENV = 'development';
+    mount(React.createElement(WithoutConfig, null, "Example"));
+    expect(warnCallCount).not.toEqual(0);
   });
 });
 //# sourceMappingURL=test.js.map

lib/asAnchor/test.js

@@ -5,29 +5,42 @@ "use strict";
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _enzyme = require("enzyme");
 
-var _ = _interopRequireDefault(require("./"));
+var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var AnchorTag = (0, _.default)('a');
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-var wrapper = _react.default.createElement(AnchorTag, {
-  href: "https://example.com"
-}, "Example");
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 describe('asAnchor', function () {
-  it('renders without crashing', function () {
-    var div = document.createElement('div');
+  // capture console.warn as this is deprecated
+  var OLD_ENV = process.env; // eslint-disable-next-line no-console
 
-    _reactDom.default.render(wrapper, div);
+  var nativeWarn = console.warn;
+  var warnCallCount;
+  beforeEach(function () {
+    jest.resetModules();
+    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+
+    console.warn = function () {
+      warnCallCount += 1;
+    };
+
+    warnCallCount = 0;
   });
-  it('returns a component', function () {
-    expect((0, _enzyme.shallow)(wrapper).html()).toBeTruthy();
+  afterEach(function () {
+    // eslint-disable-next-line no-console
+    console.warn = nativeWarn;
+    process.env = OLD_ENV;
   });
-  it('matches wrapper snapshot', function () {
-    expect((0, _enzyme.shallow)(wrapper)).toMatchSnapshot('wrapper mount');
+  it('produces a deprecation warning', function () {
+    process.env.NODE_ENV = 'development';
+    var AnchorTag = (0, _.default)('a');
+    (0, _enzyme.mount)(_react.default.createElement(AnchorTag, {
+      href: "https://example.com"
+    }, "Example"));
+    expect(warnCallCount).not.toEqual(0);
   });
 });
 //# sourceMappingURL=test.js.map

lib/withWhiteSpace/stories.js

 "use strict";
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
@@ -69,4 +69,2 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
 var stories = (0, _react2.storiesOf)('Utilities/withWhiteSpace', module);
@@ -78,6 +76,6 @@ stories.addDecorator(_react3.withKnobs);
 stories.add('demo component, simple single margins and padding', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(DemoComponent, {
+  return _react.default.createElement("div", null, _react.default.createElement(DemoComponent, {
     margin: (0, _react3.number)('margin', 2, {
       range: true,
-      min: 0,
+      min: -9,
       max: 9
@@ -93,7 +91,10 @@ }),
 stories.add('demo component, single margins and padding (complex)', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(DemoComponent, {
+  return _react.default.createElement("div", null, _react.default.createElement(DemoComponent // Use knobs for children content to kick knobs to life - storybook bug work-around
+  // eslint-disable-next-line react/no-children-prop
+  , {
+    children: (0, _react3.text)('content', 'Component with styles - use knobs to adjust'),
     margin: {
       size: (0, _react3.number)('margin.size', 2, {
         range: true,
-        min: 0,
+        min: -9,
         max: 9
@@ -113,9 +114,9 @@ }),
     }
-  }, "Component with styles - use knobs to adjust"), _react.default.createElement(DemoComponent, null, "Component without styles"));
+  }), _react.default.createElement(DemoComponent, null, "Component without styles"));
 });
 stories.add('demo component, multiple margins and padding (complex)', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(DemoComponent, {
+  return _react.default.createElement("div", null, _react.default.createElement(DemoComponent, {
     margin: [(0, _react3.number)('margin (all)', 2, {
       range: true,
-      min: 0,
+      min: -9,
       max: 9
@@ -139,3 +140,3 @@ }), (0, _react3.object)('margin (first object)', {
 stories.add('existing InputField with spacing size 1', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_inputField.default, {
+  return _react.default.createElement("div", null, _react.default.createElement(_inputField.default, {
     mb: (0, _react3.number)('marginBottom', 1),
@@ -147,3 +148,3 @@ name: "group1",
 stories.add('existing InputField with various spacing sizes', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_inputField.default, {
+  return _react.default.createElement("div", null, _react.default.createElement(_inputField.default, {
     mb: (0, _react3.number)('marginBottom1', 1),
@@ -167,6 +168,6 @@ name: "group1",
 stories.add('multiple existing components', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_backLink.default, {
+  return _react.default.createElement("div", null, _react.default.createElement(_backLink.default, {
     mb: (0, _react3.number)('BackLink marginBottom', 9)
   }, "Example"), _react.default.createElement(_breadcrumb.default, {
-    mb: (0, _react3.number)('Breadcrumb marginBottom', 9)
+    mb: (0, _react3.number)('Breadcrumbs marginBottom', 9)
   }, "Example"), _react.default.createElement(_button.default, {
@@ -173,0 +174,0 @@ mb: (0, _react3.number)('Button marginBottom', 9)

lib/withWhiteSpace/test.js

@@ -13,7 +13,31 @@ "use strict";
 
-var WithoutConfig = (0, _.default)()((0, _styledComponents.default)('div')({}));
-var WithConfig = (0, _.default)({
-  marginBottom: 0
-})((0, _styledComponents.default)('div')({}));
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 describe('withWhiteSpace', function () {
+  // capture console.warn as this is deprecated
+  var OLD_ENV = process.env; // eslint-disable-next-line no-console
+
+  var nativeWarn = console.warn;
+  var warnCallCount;
+  beforeEach(function () {
+    jest.resetModules();
+    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+
+    console.warn = function () {
+      warnCallCount += 1;
+    };
+
+    warnCallCount = 0;
+  });
+  afterEach(function () {
+    // eslint-disable-next-line no-console
+    console.warn = nativeWarn;
+    process.env = OLD_ENV;
+  });
+  var WithoutConfig = (0, _.default)()((0, _styledComponents.default)('div')({}));
+  var WithConfig = (0, _.default)({
+    marginBottom: 0
+  })((0, _styledComponents.default)('div')({}));
   it('renders without config without crashing', function () {
@@ -62,9 +86,8 @@ (0, _enzyme.mount)(_react.default.createElement(WithoutConfig, null, "Example"));
   });
-  it('matches wrapper snapshot', function () {
-    var wrapper = (0, _enzyme.mount)(_react.default.createElement(WithConfig, {
-      mb: 5
-    }, "Example"));
-    expect(wrapper).toMatchSnapshot();
+  it('produces a deprecation warning in development', function () {
+    process.env.NODE_ENV = 'development';
+    (0, _enzyme.mount)(_react.default.createElement(WithoutConfig, null, "Example"));
+    expect(warnCallCount).not.toEqual(0);
   });
 });
 //# sourceMappingURL=test.js.map

package.json

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

src/asAnchor/index.js

@@ -6,7 +6,5 @@ import React from 'react';
 
-const asAnchor = AnchorType => deprecate(
-  props => <Link as={AnchorType} {...props} />,
-  '(use of asAnchor HOC - please use Link component instead)',
-);
+const asAnchor = AnchorType =>
+  deprecate(props => <Link as={AnchorType} {...props} />, '(use of asAnchor HOC - please use Link component instead)');
 
 export default asAnchor;

src/asAnchor/stories.js

@@ -12,22 +12,14 @@ import React from 'react';
 
-stories.add('asAnchor passing in anchor', () => (
-  <AnchorTag href="https://cats.org">AsAnchor anchor example</AnchorTag>
+stories.add('asAnchor passing in anchor', () => <AnchorTag href="https://cats.org">AsAnchor anchor example</AnchorTag>);
+
+stories.add('asAnchor passing in anchor target=blank', () => (
+  <AnchorTag href="https://cats.org" target="_blank">
+    AsAnchor anchor example
+  </AnchorTag>
 ));
 
-stories.add(
-  'asAnchor passing in anchor target=blank',
-  () => (
-    <AnchorTag href="https://cats.org" target="_blank">
-      AsAnchor anchor example
-    </AnchorTag>
-  ),
-);
-
-stories.add(
-  'asAnchor passing in React Router Link',
-  () => (
-    <BrowserRouter>
-      <AnchorLink to="https://dogs.org">AsAnchor Link example</AnchorLink>
-    </BrowserRouter>
-  ),
-);
+stories.add('asAnchor passing in React Router Link', () => (
+  <BrowserRouter>
+    <AnchorLink to="https://dogs.org">AsAnchor Link example</AnchorLink>
+  </BrowserRouter>
+));

src/asAnchor/test.js

 import React from 'react';
-import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
-import asAnchor from './';
+import { mount } from 'enzyme';
 
-const AnchorTag = asAnchor('a');
+import asAnchor from '.';
 
-const wrapper = <AnchorTag href="https://example.com">Example</AnchorTag>;
-
 describe('asAnchor', () => {
-  it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(wrapper, div);
+  // capture console.warn as this is deprecated
+  const OLD_ENV = process.env;
+  // eslint-disable-next-line no-console
+  const nativeWarn = console.warn;
+  let warnCallCount;
+  beforeEach(() => {
+    jest.resetModules();
+    process.env = { ...OLD_ENV };
+    // eslint-disable-next-line no-console
+    console.warn = () => {
+      warnCallCount += 1;
+    };
+    warnCallCount = 0;
   });
 
-  it('returns a component', () => {
-    expect(shallow(wrapper).html()).toBeTruthy();
+  afterEach(() => {
+    // eslint-disable-next-line no-console
+    console.warn = nativeWarn;
+    process.env = OLD_ENV;
   });
 
-  it('matches wrapper snapshot', () => {
-    expect(shallow(wrapper)).toMatchSnapshot('wrapper mount');
+  it('produces a deprecation warning', () => {
+    process.env.NODE_ENV = 'development';
+
+    const AnchorTag = asAnchor('a');
+
+    mount(<AnchorTag href="https://example.com">Example</AnchorTag>);
+
+    expect(warnCallCount).not.toEqual(0);
   });
 });

src/asPaginationItem/index.js

@@ -5,9 +5,3 @@ import React from 'react';
 import { BLUE, GREY_4, PURPLE, YELLOW, WHITE } from 'govuk-colours';
-import {
-  FONT_SIZE,
-  LINE_HEIGHT,
-  SPACING,
-  MEDIA_QUERIES,
-  NTA_LIGHT,
-} from '@govuk-react/constants';
+import { FONT_SIZE, LINE_HEIGHT, SPACING, MEDIA_QUERIES, NTA_LIGHT } from '@govuk-react/constants';
 
@@ -81,3 +75,3 @@ import { ArrowRight as NextPageIcon, ArrowLeft as PrevPageIcon } from '@govuk-react/icons';
     },
-  }),
+  })
 );
@@ -101,8 +95,5 @@
 
-const asPaginationItem = (AnchorType) => {
+const asPaginationItem = AnchorType => {
   const PaginationItem = props => (
-    <PaginationWrapper
-      previousPage={props.previousPage}
-      nextPage={props.nextPage}
-    >
+    <PaginationWrapper previousPage={props.previousPage} nextPage={props.nextPage}>
       <AnchorType to={props.to} href={props.href} target={props.target}>
@@ -120,4 +111,3 @@ <InnerWrap>
   PaginationItem.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-      .isRequired,
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
     previousPage: PropTypes.bool,
@@ -124,0 +114,0 @@ nextPage: PropTypes.bool,

src/asPaginationItem/stories.js

@@ -12,29 +12,16 @@ import React from 'react';
 
-stories.add(
-  'asPaginationItem passing in anchor',
-  () => (
-    <PaginationTag href="https://cats.org">
-      asPaginationItem anchor example
-    </PaginationTag>
-  ),
-);
+stories.add('asPaginationItem passing in anchor', () => (
+  <PaginationTag href="https://cats.org">asPaginationItem anchor example</PaginationTag>
+));
 
-stories.add(
-  'asPaginationItem passing in anchor target=blank',
-  () => (
-    <PaginationTag href="https://cats.org" target="_blank">
-      asPaginationItem anchor example
-    </PaginationTag>
-  ),
-);
+stories.add('asPaginationItem passing in anchor target=blank', () => (
+  <PaginationTag href="https://cats.org" target="_blank">
+    asPaginationItem anchor example
+  </PaginationTag>
+));
 
-stories.add(
-  'asPaginationItem passing in React Router Link',
-  () => (
-    <BrowserRouter>
-      <PaginationLink to="https://cats.com">
-        asPaginationItem Link example
-      </PaginationLink>
-    </BrowserRouter>
-  ),
-);
+stories.add('asPaginationItem passing in React Router Link', () => (
+  <BrowserRouter>
+    <PaginationLink to="https://cats.com">asPaginationItem Link example</PaginationLink>
+  </BrowserRouter>
+));

src/asPaginationItem/test.js

@@ -8,5 +8,3 @@ import React from 'react';
 
-const wrapper = (
-  <PaginationTag href="https://example.com">Example</PaginationTag>
-);
+const wrapper = <PaginationTag href="https://example.com">Example</PaginationTag>;
 
@@ -29,10 +27,7 @@ describe('asPaginationItem', () => {
         </PaginationTag>
-        <PaginationTag
-          href="https://example.com"
-          pageTitle="This is an example"
-        >
+        <PaginationTag href="https://example.com" pageTitle="This is an example">
           Example
         </PaginationTag>
       </div>,
-      div,
+      div
     );
@@ -39,0 +34,0 @@ });

src/deprecate/index.js

@@ -5,18 +5,17 @@ // Deprecation HOC care of:
 
-const deprecate = (InnerComponent, msg = '') => class extends Component {
-  componentWillMount() {
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.warn(`${InnerComponent.name} is deprecated`, msg);
+const deprecate = (InnerComponent, msg = '') =>
+  class extends Component {
+    componentWillMount() {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn(`${InnerComponent.name} is deprecated`, msg);
+      }
     }
-  }
 
-  render() {
-    // Render the wrapped component with the same props
-    return (
-      <InnerComponent {...this.props} />
-    );
-  }
-};
+    render() {
+      // Render the wrapped component with the same props
+      return <InnerComponent {...this.props} />;
+    }
+  };
 
 export default deprecate;

src/deprecate/test.js

@@ -18,3 +18,5 @@ import React from 'react';
     // eslint-disable-next-line no-console
-    console.warn = () => { warnCallCount += 1; };
+    console.warn = () => {
+      warnCallCount += 1;
+    };
     warnCallCount = 0;
@@ -21,0 +23,0 @@ });

src/withWhiteSpace/index.js

@@ -9,7 +9,9 @@ import styled from 'styled-components';
 
-const withWhiteSpace = config => (Component) => {
-  const StyledHoc = styled(deprecate(
-    Component,
-    '(use of withWhiteSpace HOC - Please use `spacing.withWhiteSpace(config)` instead in styled components)',
-  ))(spacing.withWhiteSpace(config));
+const withWhiteSpace = config => Component => {
+  const StyledHoc = styled(
+    deprecate(
+      Component,
+      '(use of withWhiteSpace HOC - Please use `spacing.withWhiteSpace(config)` instead in styled components)'
+    )
+  )(spacing.withWhiteSpace(config));
 
@@ -16,0 +18,0 @@ StyledHoc.propTypes = {

src/withWhiteSpace/stories.js

@@ -1,2 +0,2 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import styled from 'styled-components';
@@ -7,3 +7,3 @@ import { storiesOf } from '@storybook/react';
 import BackLink from '@govuk-react/back-link';
-import Breadcrumb from '@govuk-react/breadcrumb';
+import Breadcrumbs from '@govuk-react/breadcrumb';
 import Button from '@govuk-react/button';
@@ -40,10 +40,12 @@ import Checkbox from '@govuk-react/checkbox';
 
-const DemoComponent = withWhiteSpace()(styled('div')({
-  border: '2px solid red',
-}));
+const DemoComponent = withWhiteSpace()(
+  styled('div')({
+    border: '2px solid red',
+  })
+);
 
 stories.add('demo component, simple single margins and padding', () => (
-  <Fragment>
+  <div>
     <DemoComponent
-      margin={number('margin', 2, { range: true, min: 0, max: 9 })}
+      margin={number('margin', 2, { range: true, min: -9, max: 9 })}
       padding={number('padding', 2, { range: true, min: 0, max: 9 })}
@@ -54,10 +56,13 @@ >
     <DemoComponent>Component without styles</DemoComponent>
-  </Fragment>
+  </div>
 ));
 
 stories.add('demo component, single margins and padding (complex)', () => (
-  <Fragment>
+  <div>
     <DemoComponent
+      // Use knobs for children content to kick knobs to life - storybook bug work-around
+      // eslint-disable-next-line react/no-children-prop
+      children={text('content', 'Component with styles - use knobs to adjust')}
       margin={{
-        size: number('margin.size', 2, { range: true, min: 0, max: 9 }),
+        size: number('margin.size', 2, { range: true, min: -9, max: 9 }),
         direction: text('margin.direction', 'all'),
@@ -71,14 +76,12 @@ adjustment: number('margin.adjustment', undefined),
       }}
-    >
-      Component with styles - use knobs to adjust
-    </DemoComponent>
+    />
     <DemoComponent>Component without styles</DemoComponent>
-  </Fragment>
+  </div>
 ));
 
 stories.add('demo component, multiple margins and padding (complex)', () => (
-  <Fragment>
+  <div>
     <DemoComponent
       margin={[
-        number('margin (all)', 2, { range: true, min: 0, max: 9 }),
+        number('margin (all)', 2, { range: true, min: -9, max: 9 }),
         object('margin (first object)', {
@@ -102,27 +105,36 @@ size: 2,
     <DemoComponent>Component without styles</DemoComponent>
-  </Fragment>
+  </div>
 ));
 
-
 stories.add('existing InputField with spacing size 1', () => (
-  <Fragment>
-    <InputField mb={number('marginBottom', 1)} name="group1" hint="Change whitespace value with knobs">Example 1</InputField>
+  <div>
+    <InputField mb={number('marginBottom', 1)} name="group1" hint="Change whitespace value with knobs">
+      Example 1
+    </InputField>
     <Button>Finish</Button>
-  </Fragment>
+  </div>
 ));
 
 stories.add('existing InputField with various spacing sizes', () => (
-  <Fragment>
-    <InputField mb={number('marginBottom1', 1)} name="group1" hint="hi">Example 1</InputField>
-    <InputField mb={number('marginBottom2', 4)} name="group1" hint="hi">Example 2</InputField>
-    <InputField mb={number('marginBottom3', 7)} name="group1" hint="hi">Example 3</InputField>
-    <InputField mb={number('marginBottom4', 9)} name="group1" hint="okay">Example 4</InputField>
+  <div>
+    <InputField mb={number('marginBottom1', 1)} name="group1" hint="hi">
+      Example 1
+    </InputField>
+    <InputField mb={number('marginBottom2', 4)} name="group1" hint="hi">
+      Example 2
+    </InputField>
+    <InputField mb={number('marginBottom3', 7)} name="group1" hint="hi">
+      Example 3
+    </InputField>
+    <InputField mb={number('marginBottom4', 9)} name="group1" hint="okay">
+      Example 4
+    </InputField>
     <Button>Finish</Button>
-  </Fragment>
+  </div>
 ));
 
 stories.add('multiple existing components', () => (
-  <Fragment>
+  <div>
     <BackLink mb={number('BackLink marginBottom', 9)}>Example</BackLink>
-    <Breadcrumb mb={number('Breadcrumb marginBottom', 9)}>Example</Breadcrumb>
+    <Breadcrumbs mb={number('Breadcrumbs marginBottom', 9)}>Example</Breadcrumbs>
     <Button mb={number('Button marginBottom', 9)}>Example</Button>
@@ -141,15 +153,23 @@ <Checkbox mb={number('Checkbox marginBottom', 9)}>Example</Checkbox>
     <ListNavigation mb={number('ListNavigation marginBottom', 9)}>ListNavigation Example</ListNavigation>
-    <MultiChoice label="example" mb={number('MultiChoice marginBottom', 9)}>MultiChoice Example</MultiChoice>
+    <MultiChoice label="example" mb={number('MultiChoice marginBottom', 9)}>
+      MultiChoice Example
+    </MultiChoice>
     <OrderedList mb={number('OrderedList marginBottom', 9)}>OrderedList Example</OrderedList>
     <Pagination mb={number('Pagination marginBottom', 9)}>Pagination Example</Pagination>
-    <Panel panelTitle="Example" mb={number('Panel marginBottom', 9)}>Panel Example</Panel>
-    <PhaseBanner level="EXAMPLE" mb={number('PhaseBanner marginBottom', 9)}>PhaseBanner Example</PhaseBanner>
+    <Panel panelTitle="Example" mb={number('Panel marginBottom', 9)}>
+      Panel Example
+    </Panel>
+    <PhaseBanner level="EXAMPLE" mb={number('PhaseBanner marginBottom', 9)}>
+      PhaseBanner Example
+    </PhaseBanner>
     <Radio mb={number('Radio marginBottom', 9)}>Radio Example</Radio>
     <RelatedItems mb={number('RelatedItems marginBottom', 9)}>RelatedItems Example</RelatedItems>
     <SearchBox mb={number('SearchBox marginBottom', 9)}>SearchBox Example</SearchBox>
-    <Select label="example" mb={number('Select marginBottom', 9)}>Select Example</Select>
+    <Select label="example" mb={number('Select marginBottom', 9)}>
+      Select Example
+    </Select>
     <Tag mb={number('Tag marginBottom', 9)}>Tag</Tag>
     <TextArea mb={number('TextArea marginBottom', 9)}>TextArea Example</TextArea>
     <UnorderedList mb={number('UnorderedList marginBottom', 9)}>UnorderedList Example</UnorderedList>
-  </Fragment>
+  </div>
 ));

src/withWhiteSpace/test.js

@@ -6,6 +6,27 @@ import React from 'react';
 
-const WithoutConfig = withWhiteSpace()(styled('div')({}));
-const WithConfig = withWhiteSpace({ marginBottom: 0 })(styled('div')({}));
+describe('withWhiteSpace', () => {
+  // capture console.warn as this is deprecated
+  const OLD_ENV = process.env;
+  // eslint-disable-next-line no-console
+  const nativeWarn = console.warn;
+  let warnCallCount;
+  beforeEach(() => {
+    jest.resetModules();
+    process.env = { ...OLD_ENV };
+    // eslint-disable-next-line no-console
+    console.warn = () => {
+      warnCallCount += 1;
+    };
+    warnCallCount = 0;
+  });
 
-describe('withWhiteSpace', () => {
+  afterEach(() => {
+    // eslint-disable-next-line no-console
+    console.warn = nativeWarn;
+    process.env = OLD_ENV;
+  });
+
+  const WithoutConfig = withWhiteSpace()(styled('div')({}));
+  const WithConfig = withWhiteSpace({ marginBottom: 0 })(styled('div')({}));
+
   it('renders without config without crashing', () => {
@@ -35,6 +56,8 @@ mount(<WithoutConfig>Example</WithoutConfig>);
 
-  it('matches wrapper snapshot', () => {
-    const wrapper = mount(<WithConfig mb={5}>Example</WithConfig>);
-    expect(wrapper).toMatchSnapshot();
+  it('produces a deprecation warning in development', () => {
+    process.env.NODE_ENV = 'development';
+    mount(<WithoutConfig>Example</WithoutConfig>);
+
+    expect(warnCallCount).not.toEqual(0);
   });
 });

No alert changes

Improved metrics

Total package byte prevSize

158855

increased by4.27%

Lines of code

1801

increased by5.01%

Worsened metrics

Number of package files

67

decreased by-2.9%

Number of low supply chain risk alerts

43

increased by126.32%

Dependency changes

• Updated@govuk-react/constants@^0.7.1

• Updated@govuk-react/icons@^0.7.1

• Updated@govuk-react/lib@^0.7.1

• Updated@govuk-react/link@^0.7.1