@govuk-react/hoc - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

es/asAnchor/index.js

@@ -9,3 +9,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   return deprecate(function (props) {
-    return React.createElement(Link, _extends({
+    return /*#__PURE__*/React.createElement(Link, _extends({
       as: AnchorType
@@ -12,0 +12,0 @@ }, props));

es/asAnchor/stories.js

@@ -9,3 +9,3 @@ import React from 'react';
 stories.add('asAnchor passing in anchor', function () {
-  return React.createElement(AnchorTag, {
+  return /*#__PURE__*/React.createElement(AnchorTag, {
     href: "https://cats.org"
@@ -15,3 +15,3 @@ }, "AsAnchor anchor example");
 stories.add('asAnchor passing in anchor target=blank', function () {
-  return React.createElement(AnchorTag, {
+  return /*#__PURE__*/React.createElement(AnchorTag, {
     href: "https://cats.org",
@@ -22,3 +22,3 @@ target: "_blank"
 stories.add('asAnchor passing in React Router Link', function () {
-  return React.createElement(BrowserRouter, null, React.createElement(AnchorLink, {
+  return /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(AnchorLink, {
     to: "https://dogs.org"
@@ -25,0 +25,0 @@ }, "AsAnchor Link example"));

es/asAnchor/test.js

@@ -1,5 +0,3 @@
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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';
@@ -16,3 +14,3 @@ import { mount } from 'enzyme';
     jest.resetModules();
-    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+    process.env = _extends({}, OLD_ENV); // eslint-disable-next-line no-console
 
@@ -33,3 +31,3 @@ console.warn = function () {
     var AnchorTag = asAnchor('a');
-    mount(React.createElement(AnchorTag, {
+    mount( /*#__PURE__*/React.createElement(AnchorTag, {
       href: "https://example.com"
@@ -36,0 +34,0 @@ }, "Example"));

es/asPaginationItem/index.js

@@ -1,2 +0,2 @@
-var _styled, _styled2;
+var _styled$withConfig, _styled$withConfig2;
 
@@ -9,3 +9,6 @@ import React from 'react';
 import { ArrowRight as NextPageIcon, ArrowLeft as PrevPageIcon } from '@govuk-react/icons';
-var PaginationWrapper = styled('li')((_styled = {
+var PaginationWrapper = styled('li').withConfig({
+  displayName: "asPaginationItem__PaginationWrapper",
+  componentId: "sc-11fkgqu-0"
+})((_styled$withConfig = {
   boxSizing: 'border-box',
@@ -21,6 +24,6 @@ margin: 0,
   width: '100%'
-}, _styled[MEDIA_QUERIES.LARGESCREEN] = {
+}, _styled$withConfig[MEDIA_QUERIES.LARGESCREEN] = {
   fontSize: FONT_SIZE.SIZE_27,
   lineHeight: LINE_HEIGHT.SIZE_16
-}, _styled['> a'] = {
+}, _styled$withConfig['> a'] = {
   boxSizing: 'border-box',
@@ -46,3 +49,3 @@ color: BLUE,
   }
-}, _styled), function (_ref) {
+}, _styled$withConfig), function (_ref) {
   var previousPage = _ref.previousPage;
@@ -79,3 +82,6 @@ return {
 });
-var InnerWrap = styled('div')({
+var InnerWrap = styled('div').withConfig({
+  displayName: "asPaginationItem__InnerWrap",
+  componentId: "sc-11fkgqu-1"
+})({
   display: 'flex',
@@ -85,21 +91,24 @@ alignItems: 'center',
 });
-var PageTitle = styled('span')((_styled2 = {
+var PageTitle = styled('span').withConfig({
+  displayName: "asPaginationItem__PageTitle",
+  componentId: "sc-11fkgqu-2"
+})((_styled$withConfig2 = {
   fontSize: FONT_SIZE.SIZE_14,
   lineHeight: LINE_HEIGHT.SIZE_14,
   textDecoration: 'underline'
-}, _styled2[MEDIA_QUERIES.LARGESCREEN] = {
+}, _styled$withConfig2[MEDIA_QUERIES.LARGESCREEN] = {
   fontSize: FONT_SIZE.SIZE_16,
   lineHeight: LINE_HEIGHT.SIZE_16
-}, _styled2));
+}, _styled$withConfig2));
 
 var asPaginationItem = function asPaginationItem(AnchorType) {
   var PaginationItem = function PaginationItem(props) {
-    return React.createElement(PaginationWrapper, {
+    return /*#__PURE__*/React.createElement(PaginationWrapper, {
       previousPage: props.previousPage,
       nextPage: props.nextPage
-    }, React.createElement(AnchorType, {
+    }, /*#__PURE__*/React.createElement(AnchorType, {
       to: props.to,
       href: props.href,
       target: props.target
-    }, React.createElement(InnerWrap, null, props.previousPage && React.createElement(PrevPageIcon, null), props.children, props.nextPage && React.createElement(NextPageIcon, null)), props.pageTitle && React.createElement(PageTitle, null, props.pageTitle)));
+    }, /*#__PURE__*/React.createElement(InnerWrap, null, props.previousPage && /*#__PURE__*/React.createElement(PrevPageIcon, null), props.children, props.nextPage && /*#__PURE__*/React.createElement(NextPageIcon, null)), props.pageTitle && /*#__PURE__*/React.createElement(PageTitle, null, props.pageTitle)));
   };
@@ -106,0 +115,0 @@

es/asPaginationItem/stories.js

@@ -9,3 +9,3 @@ import React from 'react';
 stories.add('asPaginationItem passing in anchor', function () {
-  return React.createElement(PaginationTag, {
+  return /*#__PURE__*/React.createElement(PaginationTag, {
     href: "https://cats.org"
@@ -15,3 +15,3 @@ }, "asPaginationItem anchor example");
 stories.add('asPaginationItem passing in anchor target=blank', function () {
-  return React.createElement(PaginationTag, {
+  return /*#__PURE__*/React.createElement(PaginationTag, {
     href: "https://cats.org",
@@ -22,3 +22,3 @@ target: "_blank"
 stories.add('asPaginationItem passing in React Router Link', function () {
-  return React.createElement(BrowserRouter, null, React.createElement(PaginationLink, {
+  return /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(PaginationLink, {
     to: "https://cats.com"
@@ -25,0 +25,0 @@ }, "asPaginationItem Link example"));

es/asPaginationItem/test.js

@@ -6,3 +6,3 @@ import React from 'react';
 var PaginationTag = asPaginationItem('a');
-var wrapper = React.createElement(PaginationTag, {
+var wrapper = /*#__PURE__*/React.createElement(PaginationTag, {
   href: "https://example.com"
@@ -17,9 +17,9 @@ }, "Example");
     var div = document.createElement('div');
-    ReactDOM.render(React.createElement("div", null, React.createElement(PaginationTag, {
+    ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PaginationTag, {
       href: "https://example.com",
       nextPage: true
-    }, "Example"), React.createElement(PaginationTag, {
+    }, "Example"), /*#__PURE__*/React.createElement(PaginationTag, {
       href: "https://example.com",
       previousPage: true
-    }, "Example"), React.createElement(PaginationTag, {
+    }, "Example"), /*#__PURE__*/React.createElement(PaginationTag, {
       href: "https://example.com",
@@ -26,0 +26,0 @@ pageTitle: "This is an example"

es/deprecate/index.js

@@ -1,6 +0,4 @@
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
 // Deprecation HOC care of:
 // https://whawker.github.io/2016/07/15/deprecating-react-components-with-higher-order-components.html
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 
@@ -12,28 +10,12 @@ var deprecate = function deprecate(InnerComponent, msg) {
 
-  return (
-    /*#__PURE__*/
-    function (_Component) {
-      _inheritsLoose(_class, _Component);
-
-      function _class() {
-        return _Component.apply(this, arguments) || this;
+  return function (props) {
+    useEffect(function () {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn(InnerComponent.name + " is deprecated", msg);
       }
+    }, []); // Render the wrapped component with the same props
 
-      var _proto = _class.prototype;
-
-      _proto.componentWillMount = function componentWillMount() {
-        if (process.env.NODE_ENV !== 'production') {
-          // eslint-disable-next-line no-console
-          console.warn(InnerComponent.name + " is deprecated", msg);
-        }
-      };
-
-      _proto.render = function render() {
-        // Render the wrapped component with the same props
-        return React.createElement(InnerComponent, this.props);
-      };
-
-      return _class;
-    }(Component)
-  );
+    return /*#__PURE__*/React.createElement(InnerComponent, props);
+  };
 };
@@ -40,0 +22,0 @@

es/deprecate/test.js

@@ -1,7 +0,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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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 { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import deprecate from '.';
@@ -19,3 +17,3 @@ describe('deprecate HOC', function () {
     jest.resetModules();
-    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+    process.env = _extends({}, OLD_ENV); // eslint-disable-next-line no-console
 
@@ -36,5 +34,5 @@ console.warn = function () {
     var Comp = deprecate(function () {
-      return React.createElement("div", null, "Test");
+      return /*#__PURE__*/React.createElement("div", null, "Test");
     });
-    mount(React.createElement(Comp, null));
+    render( /*#__PURE__*/React.createElement(Comp, null));
     expect(warnCallCount).toEqual(1);
@@ -45,5 +43,5 @@ });
     var Comp = deprecate(function () {
-      return React.createElement("div", null, "Test");
+      return /*#__PURE__*/React.createElement("div", null, "Test");
     });
-    mount(React.createElement(Comp, null));
+    render( /*#__PURE__*/React.createElement(Comp, null));
     expect(warnCallCount).toEqual(0);
@@ -50,0 +48,0 @@ });

es/withWhiteSpace/index.js

@@ -1,5 +0,3 @@
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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 styled from 'styled-components';
@@ -12,4 +10,7 @@ import { spacing } from '@govuk-react/lib';
   return function (Component) {
-    var StyledHoc = styled(deprecate(Component, '(use of withWhiteSpace HOC - Please use `spacing.withWhiteSpace(config)` instead in styled components)'))(spacing.withWhiteSpace(config));
-    StyledHoc.propTypes = _objectSpread({}, spacing.withWhiteSpace.propTypes);
+    var StyledHoc = styled(deprecate(Component, '(use of withWhiteSpace HOC - Please use `spacing.withWhiteSpace(config)` instead in styled components)')).withConfig({
+      displayName: "withWhiteSpace__StyledHoc",
+      componentId: "sc-1q37fvx-0"
+    })(spacing.withWhiteSpace(config));
+    StyledHoc.propTypes = _extends({}, spacing.withWhiteSpace.propTypes);
     return StyledHoc;
@@ -16,0 +17,0 @@ };

es/withWhiteSpace/stories.js

 import React from 'react';
 import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, number, object, text } from '@storybook/addon-knobs/react';
+import { withKnobs, number, object, text } from '@storybook/addon-knobs';
 import BackLink from '@govuk-react/back-link';
@@ -35,7 +35,10 @@ import Breadcrumbs from '@govuk-react/breadcrumb';
 stories.addDecorator(withKnobs);
-var DemoComponent = withWhiteSpace()(styled('div')({
+var DemoComponent = withWhiteSpace()(styled('div').withConfig({
+  displayName: "stories__DemoComponent",
+  componentId: "sc-1koary0-0"
+})({
   border: '2px solid red'
 }));
 stories.add('demo component, simple single margins and padding', function () {
-  return React.createElement("div", null, React.createElement(DemoComponent, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoComponent, {
     margin: number('margin', 2, {
@@ -51,6 +54,6 @@ range: true,
     })
-  }, "Component with styles - use knobs to adjust"), React.createElement(DemoComponent, null, "Component without styles"));
+  }, "Component with styles - use knobs to adjust"), /*#__PURE__*/React.createElement(DemoComponent, null, "Component without styles"));
 });
 stories.add('demo component, single margins and padding (complex)', function () {
-  return React.createElement("div", null, React.createElement(DemoComponent // Use knobs for children content to kick knobs to life - storybook bug work-around
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/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
@@ -77,6 +80,6 @@ , {
     }
-  }), React.createElement(DemoComponent, null, "Component without styles"));
+  }), /*#__PURE__*/React.createElement(DemoComponent, null, "Component without styles"));
 });
 stories.add('demo component, multiple margins and padding (complex)', function () {
-  return React.createElement("div", null, React.createElement(DemoComponent, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoComponent, {
     margin: [number('margin (all)', 2, {
@@ -100,88 +103,88 @@ range: true,
     })]
-  }, "Component with styles - use knobs to adjust"), React.createElement(DemoComponent, null, "Component without styles"));
+  }, "Component with styles - use knobs to adjust"), /*#__PURE__*/React.createElement(DemoComponent, null, "Component without styles"));
 });
 stories.add('existing InputField with spacing size 1', function () {
-  return React.createElement("div", null, React.createElement(InputField, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputField, {
     mb: number('marginBottom', 1),
     name: "group1",
     hint: "Change whitespace value with knobs"
-  }, "Example 1"), React.createElement(Button, null, "Finish"));
+  }, "Example 1"), /*#__PURE__*/React.createElement(Button, null, "Finish"));
 });
 stories.add('existing InputField with various spacing sizes', function () {
-  return React.createElement("div", null, React.createElement(InputField, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputField, {
     mb: number('marginBottom1', 1),
     name: "group1",
     hint: "hi"
-  }, "Example 1"), React.createElement(InputField, {
+  }, "Example 1"), /*#__PURE__*/React.createElement(InputField, {
     mb: number('marginBottom2', 4),
     name: "group1",
     hint: "hi"
-  }, "Example 2"), React.createElement(InputField, {
+  }, "Example 2"), /*#__PURE__*/React.createElement(InputField, {
     mb: number('marginBottom3', 7),
     name: "group1",
     hint: "hi"
-  }, "Example 3"), React.createElement(InputField, {
+  }, "Example 3"), /*#__PURE__*/React.createElement(InputField, {
     mb: number('marginBottom4', 9),
     name: "group1",
     hint: "okay"
-  }, "Example 4"), React.createElement(Button, null, "Finish"));
+  }, "Example 4"), /*#__PURE__*/React.createElement(Button, null, "Finish"));
 });
 stories.add('multiple existing components', function () {
-  return React.createElement("div", null, React.createElement(BackLink, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BackLink, {
     mb: number('BackLink marginBottom', 9)
-  }, "Example"), React.createElement(Breadcrumbs, {
+  }, "Example"), /*#__PURE__*/React.createElement(Breadcrumbs, {
     mb: number('Breadcrumbs marginBottom', 9)
-  }, "Example"), React.createElement(Button, {
+  }, "Example"), /*#__PURE__*/React.createElement(Button, {
     mb: number('Button marginBottom', 9)
-  }, "Example"), React.createElement(Checkbox, {
+  }, "Example"), /*#__PURE__*/React.createElement(Checkbox, {
     mb: number('Checkbox marginBottom', 9)
-  }, "Example"), React.createElement(DateField, {
+  }, "Example"), /*#__PURE__*/React.createElement(DateField, {
     mb: number('DateField marginBottom', 9)
-  }, "Example"), React.createElement(ErrorText, {
+  }, "Example"), /*#__PURE__*/React.createElement(ErrorText, {
     mb: number('ErrorText marginBottom', 9)
-  }, "Example"), React.createElement(FileUpload, {
+  }, "Example"), /*#__PURE__*/React.createElement(FileUpload, {
     mb: number('File Upload marginBottom', 9)
-  }, "Example"), React.createElement(Heading, {
+  }, "Example"), /*#__PURE__*/React.createElement(Heading, {
     mb: number('Heading marginBottom', 9)
-  }, "Example"), React.createElement(HintText, {
+  }, "Example"), /*#__PURE__*/React.createElement(HintText, {
     mb: number('HintText marginBottom', 9)
-  }, "Example"), React.createElement(Input, {
+  }, "Example"), /*#__PURE__*/React.createElement(Input, {
     mb: number('Input marginBottom', 9)
-  }), React.createElement(InputField, {
+  }), /*#__PURE__*/React.createElement(InputField, {
     mb: number('Input-text marginBottom', 9)
-  }, "Example"), React.createElement(Label, {
+  }, "Example"), /*#__PURE__*/React.createElement(Label, {
     mb: number('Label marginBottom', 9)
-  }, "Label Example"), React.createElement(LabelText, {
+  }, "Label Example"), /*#__PURE__*/React.createElement(LabelText, {
     mb: number('LabelText marginBottom', 9)
-  }, "LabelText Example"), React.createElement(ListItem, {
+  }, "LabelText Example"), /*#__PURE__*/React.createElement(ListItem, {
     mb: number('ListItem marginBottom', 9)
-  }, "ListItem Example"), React.createElement(ListNavigation, {
+  }, "ListItem Example"), /*#__PURE__*/React.createElement(ListNavigation, {
     mb: number('ListNavigation marginBottom', 9)
-  }, "ListNavigation Example"), React.createElement(MultiChoice, {
+  }, "ListNavigation Example"), /*#__PURE__*/React.createElement(MultiChoice, {
     label: "example",
     mb: number('MultiChoice marginBottom', 9)
-  }, "MultiChoice Example"), React.createElement(OrderedList, {
+  }, "MultiChoice Example"), /*#__PURE__*/React.createElement(OrderedList, {
     mb: number('OrderedList marginBottom', 9)
-  }, "OrderedList Example"), React.createElement(Pagination, {
+  }, "OrderedList Example"), /*#__PURE__*/React.createElement(Pagination, {
     mb: number('Pagination marginBottom', 9)
-  }, "Pagination Example"), React.createElement(Panel, {
+  }, "Pagination Example"), /*#__PURE__*/React.createElement(Panel, {
     panelTitle: "Example",
     mb: number('Panel marginBottom', 9)
-  }, "Panel Example"), React.createElement(PhaseBanner, {
+  }, "Panel Example"), /*#__PURE__*/React.createElement(PhaseBanner, {
     level: "EXAMPLE",
     mb: number('PhaseBanner marginBottom', 9)
-  }, "PhaseBanner Example"), React.createElement(Radio, {
+  }, "PhaseBanner Example"), /*#__PURE__*/React.createElement(Radio, {
     mb: number('Radio marginBottom', 9)
-  }, "Radio Example"), React.createElement(RelatedItems, {
+  }, "Radio Example"), /*#__PURE__*/React.createElement(RelatedItems, {
     mb: number('RelatedItems marginBottom', 9)
-  }, "RelatedItems Example"), React.createElement(SearchBox, {
+  }, "RelatedItems Example"), /*#__PURE__*/React.createElement(SearchBox, {
     mb: number('SearchBox marginBottom', 9)
-  }, "SearchBox Example"), React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(SearchBox.Input, null), /*#__PURE__*/React.createElement(SearchBox.Button, null)), /*#__PURE__*/React.createElement(Select, {
     label: "example",
     mb: number('Select marginBottom', 9)
-  }, "Select Example"), React.createElement(Tag, {
+  }, "Select Example"), /*#__PURE__*/React.createElement(Tag, {
     mb: number('Tag marginBottom', 9)
-  }, "Tag"), React.createElement(TextArea, {
+  }, "Tag"), /*#__PURE__*/React.createElement(TextArea, {
     mb: number('TextArea marginBottom', 9)
-  }, "TextArea Example"), React.createElement(UnorderedList, {
+  }, "TextArea Example"), /*#__PURE__*/React.createElement(UnorderedList, {
     mb: number('UnorderedList marginBottom', 9)
@@ -188,0 +191,0 @@ }, "UnorderedList Example"));

es/withWhiteSpace/test.js

@@ -1,5 +0,3 @@
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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';
@@ -17,3 +15,3 @@ import styled from 'styled-components';
     jest.resetModules();
-    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+    process.env = _extends({}, OLD_ENV); // eslint-disable-next-line no-console
 
@@ -31,14 +29,20 @@ console.warn = function () {
   });
-  var WithoutConfig = withWhiteSpace()(styled('div')({}));
+  var WithoutConfig = withWhiteSpace()(styled('div').withConfig({
+    displayName: "test__WithoutConfig",
+    componentId: "k3lye6-0"
+  })({}));
   var WithConfig = withWhiteSpace({
     marginBottom: 0
-  })(styled('div')({}));
+  })(styled('div').withConfig({
+    displayName: "test__WithConfig",
+    componentId: "k3lye6-1"
+  })({}));
   it('renders without config without crashing', function () {
-    mount(React.createElement(WithoutConfig, null, "Example"));
+    mount( /*#__PURE__*/React.createElement(WithoutConfig, null, "Example"));
   });
   it('renders with config without crashing', function () {
-    mount(React.createElement(WithConfig, null, "Example"));
+    mount( /*#__PURE__*/React.createElement(WithConfig, null, "Example"));
   });
   it('renders with simple mb prop without crashing', function () {
-    mount(React.createElement(WithConfig, {
+    mount( /*#__PURE__*/React.createElement(WithConfig, {
       mb: 5
@@ -48,3 +52,3 @@ }, "Example"));
   it('renders with a margin prop without crashing', function () {
-    mount(React.createElement(WithConfig, {
+    mount( /*#__PURE__*/React.createElement(WithConfig, {
       margin: {
@@ -54,6 +58,6 @@ size: 5
     }, "Example"));
-    mount(React.createElement(WithConfig, {
+    mount( /*#__PURE__*/React.createElement(WithConfig, {
       margin: 5
     }, "Example"));
-    mount(React.createElement(WithConfig, {
+    mount( /*#__PURE__*/React.createElement(WithConfig, {
       margin: [5, {
@@ -66,3 +70,3 @@ size: 2,
   it('renders with a padding prop without crashing', function () {
-    mount(React.createElement(WithConfig, {
+    mount( /*#__PURE__*/React.createElement(WithConfig, {
       padding: {
@@ -72,6 +76,6 @@ size: 5
     }, "Example"));
-    mount(React.createElement(WithConfig, {
+    mount( /*#__PURE__*/React.createElement(WithConfig, {
       padding: 5
     }, "Example"));
-    mount(React.createElement(WithConfig, {
+    mount( /*#__PURE__*/React.createElement(WithConfig, {
       padding: [5, {
@@ -85,3 +89,3 @@ size: 2,
     process.env.NODE_ENV = 'development';
-    mount(React.createElement(WithoutConfig, null, "Example"));
+    mount( /*#__PURE__*/React.createElement(WithoutConfig, null, "Example"));
     expect(warnCallCount).not.toEqual(0);
@@ -88,0 +92,0 @@ });

lib/asAnchor/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -12,3 +12,3 @@ var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -18,4 +18,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var asAnchor = function asAnchor(AnchorType) {
-  return (0, _deprecate.default)(function (props) {
-    return _react.default.createElement(_link.default, _extends({
+  return (0, _deprecate["default"])(function (props) {
+    return /*#__PURE__*/_react["default"].createElement(_link["default"], _extends({
       as: AnchorType
@@ -27,4 +27,4 @@ }, props));
 var _default = asAnchor;
-exports.default = _default;
+exports["default"] = _default;
 module.exports = exports.default;
 //# sourceMappingURL=index.js.map

lib/asAnchor/stories.js

@@ -11,9 +11,9 @@ "use strict";
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var AnchorTag = (0, _.default)('a');
-var AnchorLink = (0, _.default)(_reactRouterDom.Link);
+var AnchorTag = (0, _["default"])('a');
+var AnchorLink = (0, _["default"])(_reactRouterDom.Link);
 var stories = (0, _react2.storiesOf)('Utilities/asAnchor', module);
 stories.add('asAnchor passing in anchor', function () {
-  return _react.default.createElement(AnchorTag, {
+  return /*#__PURE__*/_react["default"].createElement(AnchorTag, {
     href: "https://cats.org"
@@ -23,3 +23,3 @@ }, "AsAnchor anchor example");
 stories.add('asAnchor passing in anchor target=blank', function () {
-  return _react.default.createElement(AnchorTag, {
+  return /*#__PURE__*/_react["default"].createElement(AnchorTag, {
     href: "https://cats.org",
@@ -30,3 +30,3 @@ target: "_blank"
 stories.add('asAnchor passing in React Router Link', function () {
-  return _react.default.createElement(_reactRouterDom.BrowserRouter, null, _react.default.createElement(AnchorLink, {
+  return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react["default"].createElement(AnchorLink, {
     to: "https://dogs.org"
@@ -33,0 +33,0 @@ }, "AsAnchor Link example"));

lib/asAnchor/test.js

@@ -9,8 +9,6 @@ "use strict";
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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 () {
@@ -24,3 +22,3 @@ // capture console.warn as this is deprecated
     jest.resetModules();
-    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+    process.env = _extends({}, OLD_ENV); // eslint-disable-next-line no-console
 
@@ -40,4 +38,4 @@ console.warn = function () {
     process.env.NODE_ENV = 'development';
-    var AnchorTag = (0, _.default)('a');
-    (0, _enzyme.mount)(_react.default.createElement(AnchorTag, {
+    var AnchorTag = (0, _["default"])('a');
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(AnchorTag, {
       href: "https://example.com"
@@ -44,0 +42,0 @@ }, "Example"));

lib/asPaginationItem/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -18,7 +18,10 @@ var _react = _interopRequireDefault(require("react"));
 
-var _styled, _styled2;
+var _styled$withConfig, _styled$withConfig2;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var PaginationWrapper = (0, _styledComponents.default)('li')((_styled = {
+var PaginationWrapper = (0, _styledComponents["default"])('li').withConfig({
+  displayName: "asPaginationItem__PaginationWrapper",
+  componentId: "sc-11fkgqu-0"
+})((_styled$withConfig = {
   boxSizing: 'border-box',
@@ -34,6 +37,6 @@ margin: 0,
   width: '100%'
-}, _styled[_constants.MEDIA_QUERIES.LARGESCREEN] = {
+}, _styled$withConfig[_constants.MEDIA_QUERIES.LARGESCREEN] = {
   fontSize: _constants.FONT_SIZE.SIZE_27,
   lineHeight: _constants.LINE_HEIGHT.SIZE_16
-}, _styled['> a'] = {
+}, _styled$withConfig['> a'] = {
   boxSizing: 'border-box',
@@ -59,3 +62,3 @@ color: _govukColours.BLUE,
   }
-}, _styled), function (_ref) {
+}, _styled$withConfig), function (_ref) {
   var previousPage = _ref.previousPage;
@@ -92,3 +95,6 @@ return {
 });
-var InnerWrap = (0, _styledComponents.default)('div')({
+var InnerWrap = (0, _styledComponents["default"])('div').withConfig({
+  displayName: "asPaginationItem__InnerWrap",
+  componentId: "sc-11fkgqu-1"
+})({
   display: 'flex',
@@ -98,21 +104,24 @@ alignItems: 'center',
 });
-var PageTitle = (0, _styledComponents.default)('span')((_styled2 = {
+var PageTitle = (0, _styledComponents["default"])('span').withConfig({
+  displayName: "asPaginationItem__PageTitle",
+  componentId: "sc-11fkgqu-2"
+})((_styled$withConfig2 = {
   fontSize: _constants.FONT_SIZE.SIZE_14,
   lineHeight: _constants.LINE_HEIGHT.SIZE_14,
   textDecoration: 'underline'
-}, _styled2[_constants.MEDIA_QUERIES.LARGESCREEN] = {
+}, _styled$withConfig2[_constants.MEDIA_QUERIES.LARGESCREEN] = {
   fontSize: _constants.FONT_SIZE.SIZE_16,
   lineHeight: _constants.LINE_HEIGHT.SIZE_16
-}, _styled2));
+}, _styled$withConfig2));
 
 var asPaginationItem = function asPaginationItem(AnchorType) {
   var PaginationItem = function PaginationItem(props) {
-    return _react.default.createElement(PaginationWrapper, {
+    return /*#__PURE__*/_react["default"].createElement(PaginationWrapper, {
       previousPage: props.previousPage,
       nextPage: props.nextPage
-    }, _react.default.createElement(AnchorType, {
+    }, /*#__PURE__*/_react["default"].createElement(AnchorType, {
       to: props.to,
       href: props.href,
       target: props.target
-    }, _react.default.createElement(InnerWrap, null, props.previousPage && _react.default.createElement(_icons.ArrowLeft, null), props.children, props.nextPage && _react.default.createElement(_icons.ArrowRight, null)), props.pageTitle && _react.default.createElement(PageTitle, null, props.pageTitle)));
+    }, /*#__PURE__*/_react["default"].createElement(InnerWrap, null, props.previousPage && /*#__PURE__*/_react["default"].createElement(_icons.ArrowLeft, null), props.children, props.nextPage && /*#__PURE__*/_react["default"].createElement(_icons.ArrowRight, null)), props.pageTitle && /*#__PURE__*/_react["default"].createElement(PageTitle, null, props.pageTitle)));
   };
@@ -132,4 +141,4 @@
 var _default = asPaginationItem;
-exports.default = _default;
+exports["default"] = _default;
 module.exports = exports.default;
 //# sourceMappingURL=index.js.map

lib/asPaginationItem/stories.js

@@ -11,9 +11,9 @@ "use strict";
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var PaginationTag = (0, _.default)('a');
-var PaginationLink = (0, _.default)(_reactRouterDom.Link);
+var PaginationTag = (0, _["default"])('a');
+var PaginationLink = (0, _["default"])(_reactRouterDom.Link);
 var stories = (0, _react2.storiesOf)('Utilities/asPaginationItem', module);
 stories.add('asPaginationItem passing in anchor', function () {
-  return _react.default.createElement(PaginationTag, {
+  return /*#__PURE__*/_react["default"].createElement(PaginationTag, {
     href: "https://cats.org"
@@ -23,3 +23,3 @@ }, "asPaginationItem anchor example");
 stories.add('asPaginationItem passing in anchor target=blank', function () {
-  return _react.default.createElement(PaginationTag, {
+  return /*#__PURE__*/_react["default"].createElement(PaginationTag, {
     href: "https://cats.org",
@@ -30,3 +30,3 @@ target: "_blank"
 stories.add('asPaginationItem passing in React Router Link', function () {
-  return _react.default.createElement(_reactRouterDom.BrowserRouter, null, _react.default.createElement(PaginationLink, {
+  return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react["default"].createElement(PaginationLink, {
     to: "https://cats.com"
@@ -33,0 +33,0 @@ }, "asPaginationItem Link example"));

lib/asPaginationItem/test.js

@@ -11,7 +11,7 @@ "use strict";
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var PaginationTag = (0, _.default)('a');
+var PaginationTag = (0, _["default"])('a');
 
-var wrapper = _react.default.createElement(PaginationTag, {
+var wrapper = /*#__PURE__*/_react["default"].createElement(PaginationTag, {
   href: "https://example.com"
@@ -24,3 +24,3 @@ }, "Example");
 
-    _reactDom.default.render(wrapper, div);
+    _reactDom["default"].render(wrapper, div);
   });
@@ -30,9 +30,9 @@ it('renders a component for each prop without crashing', function () {
 
-    _reactDom.default.render(_react.default.createElement("div", null, _react.default.createElement(PaginationTag, {
+    _reactDom["default"].render( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(PaginationTag, {
       href: "https://example.com",
       nextPage: true
-    }, "Example"), _react.default.createElement(PaginationTag, {
+    }, "Example"), /*#__PURE__*/_react["default"].createElement(PaginationTag, {
       href: "https://example.com",
       previousPage: true
-    }, "Example"), _react.default.createElement(PaginationTag, {
+    }, "Example"), /*#__PURE__*/_react["default"].createElement(PaginationTag, {
       href: "https://example.com",
@@ -39,0 +39,0 @@ pageTitle: "This is an example"

lib/deprecate/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-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; } }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+// Deprecation HOC care of:
+// https://whawker.github.io/2016/07/15/deprecating-react-components-with-higher-order-components.html
 var deprecate = function deprecate(InnerComponent, msg) {
@@ -17,33 +19,17 @@ if (msg === void 0) {
 
-  return (
-    /*#__PURE__*/
-    function (_Component) {
-      _inheritsLoose(_class, _Component);
-
-      function _class() {
-        return _Component.apply(this, arguments) || this;
+  return function (props) {
+    (0, _react.useEffect)(function () {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn(InnerComponent.name + " is deprecated", msg);
       }
+    }, []); // Render the wrapped component with the same props
 
-      var _proto = _class.prototype;
-
-      _proto.componentWillMount = function componentWillMount() {
-        if (process.env.NODE_ENV !== 'production') {
-          // eslint-disable-next-line no-console
-          console.warn(InnerComponent.name + " is deprecated", msg);
-        }
-      };
-
-      _proto.render = function render() {
-        // Render the wrapped component with the same props
-        return _react.default.createElement(InnerComponent, this.props);
-      };
-
-      return _class;
-    }(_react.Component)
-  );
+    return /*#__PURE__*/_react["default"].createElement(InnerComponent, props);
+  };
 };
 
 var _default = deprecate;
-exports.default = _default;
+exports["default"] = _default;
 module.exports = exports.default;
 //# sourceMappingURL=index.js.map

lib/deprecate/test.js

@@ -5,12 +5,10 @@ "use strict";
 
-var _enzyme = require("enzyme");
+var _react2 = require("@testing-library/react");
 
 var _ = _interopRequireDefault(require("."));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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('deprecate HOC', function () {
@@ -27,3 +25,3 @@ var OLD_ENV = process.env; // eslint-disable-next-line no-console
     jest.resetModules();
-    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+    process.env = _extends({}, OLD_ENV); // eslint-disable-next-line no-console
 
@@ -43,6 +41,6 @@ console.warn = function () {
     process.env.NODE_ENV = 'development';
-    var Comp = (0, _.default)(function () {
-      return _react.default.createElement("div", null, "Test");
+    var Comp = (0, _["default"])(function () {
+      return /*#__PURE__*/_react["default"].createElement("div", null, "Test");
     });
-    (0, _enzyme.mount)(_react.default.createElement(Comp, null));
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Comp, null));
     expect(warnCallCount).toEqual(1);
@@ -52,6 +50,6 @@ });
     process.env.NODE_ENV = 'production';
-    var Comp = (0, _.default)(function () {
-      return _react.default.createElement("div", null, "Test");
+    var Comp = (0, _["default"])(function () {
+      return /*#__PURE__*/_react["default"].createElement("div", null, "Test");
     });
-    (0, _enzyme.mount)(_react.default.createElement(Comp, null));
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Comp, null));
     expect(warnCallCount).toEqual(0);
@@ -58,0 +56,0 @@ });

lib/index.js

@@ -8,17 +8,17 @@ "use strict";
 
-exports.asAnchor = _asAnchor.default;
+exports.asAnchor = _asAnchor["default"];
 
 var _asPaginationItem = _interopRequireDefault(require("./asPaginationItem"));
 
-exports.asPaginationItem = _asPaginationItem.default;
+exports.asPaginationItem = _asPaginationItem["default"];
 
 var _deprecate = _interopRequireDefault(require("./deprecate"));
 
-exports.deprecate = _deprecate.default;
+exports.deprecate = _deprecate["default"];
 
 var _withWhiteSpace = _interopRequireDefault(require("./withWhiteSpace"));
 
-exports.withWhiteSpace = _withWhiteSpace.default;
+exports.withWhiteSpace = _withWhiteSpace["default"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 //# sourceMappingURL=index.js.map

lib/test.js

@@ -5,4 +5,6 @@ "use strict";
 
-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; } }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 // every export from @govuk-react/hoc should be
@@ -9,0 +11,0 @@ // - a function that takes a component and returns a component

lib/withWhiteSpace/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -12,8 +12,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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; }
-
 // NB withWhiteSpace HOC is DEPRECATED
@@ -23,4 +21,7 @@ // Please use `spacing.withWhiteSpace(config)` instead in styled components
   return function (Component) {
-    var StyledHoc = (0, _styledComponents.default)((0, _deprecate.default)(Component, '(use of withWhiteSpace HOC - Please use `spacing.withWhiteSpace(config)` instead in styled components)'))(_lib.spacing.withWhiteSpace(config));
-    StyledHoc.propTypes = _objectSpread({}, _lib.spacing.withWhiteSpace.propTypes);
+    var StyledHoc = (0, _styledComponents["default"])((0, _deprecate["default"])(Component, '(use of withWhiteSpace HOC - Please use `spacing.withWhiteSpace(config)` instead in styled components)')).withConfig({
+      displayName: "withWhiteSpace__StyledHoc",
+      componentId: "sc-1q37fvx-0"
+    })(_lib.spacing.withWhiteSpace(config));
+    StyledHoc.propTypes = _extends({}, _lib.spacing.withWhiteSpace.propTypes);
     return StyledHoc;
@@ -31,4 +32,4 @@ };
 var _default = withWhiteSpace;
-exports.default = _default;
+exports["default"] = _default;
 module.exports = exports.default;
 //# sourceMappingURL=index.js.map

lib/withWhiteSpace/stories.js

@@ -9,3 +9,3 @@ "use strict";
 
-var _react3 = require("@storybook/addon-knobs/react");
+var _addonKnobs = require("@storybook/addon-knobs");
 
@@ -68,12 +68,15 @@ var _backLink = _interopRequireDefault(require("@govuk-react/back-link"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var stories = (0, _react2.storiesOf)('Utilities/withWhiteSpace', module);
-stories.addDecorator(_react3.withKnobs);
-var DemoComponent = (0, _.default)()((0, _styledComponents.default)('div')({
+stories.addDecorator(_addonKnobs.withKnobs);
+var DemoComponent = (0, _["default"])()((0, _styledComponents["default"])('div').withConfig({
+  displayName: "stories__DemoComponent",
+  componentId: "sc-1koary0-0"
+})({
   border: '2px solid red'
 }));
 stories.add('demo component, simple single margins and padding', function () {
-  return _react.default.createElement("div", null, _react.default.createElement(DemoComponent, {
-    margin: (0, _react3.number)('margin', 2, {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(DemoComponent, {
+    margin: (0, _addonKnobs.number)('margin', 2, {
       range: true,
@@ -83,3 +86,3 @@ min: -9,
     }),
-    padding: (0, _react3.number)('padding', 2, {
+    padding: (0, _addonKnobs.number)('padding', 2, {
       range: true,
@@ -89,11 +92,11 @@ min: 0,
     })
-  }, "Component with styles - use knobs to adjust"), _react.default.createElement(DemoComponent, null, "Component without styles"));
+  }, "Component with styles - use knobs to adjust"), /*#__PURE__*/_react["default"].createElement(DemoComponent, null, "Component without styles"));
 });
 stories.add('demo component, single margins and padding (complex)', function () {
-  return _react.default.createElement("div", null, _react.default.createElement(DemoComponent // Use knobs for children content to kick knobs to life - storybook bug work-around
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_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'),
+    children: (0, _addonKnobs.text)('content', 'Component with styles - use knobs to adjust'),
     margin: {
-      size: (0, _react3.number)('margin.size', 2, {
+      size: (0, _addonKnobs.number)('margin.size', 2, {
         range: true,
@@ -103,7 +106,7 @@ min: -9,
       }),
-      direction: (0, _react3.text)('margin.direction', 'all'),
-      adjustment: (0, _react3.number)('margin.adjustment', undefined)
+      direction: (0, _addonKnobs.text)('margin.direction', 'all'),
+      adjustment: (0, _addonKnobs.number)('margin.adjustment', undefined)
     },
     padding: {
-      size: (0, _react3.number)('padding.size', 2, {
+      size: (0, _addonKnobs.number)('padding.size', 2, {
         range: true,
@@ -113,14 +116,14 @@ min: 0,
       }),
-      direction: (0, _react3.text)('padding.direction', 'all'),
-      adjustment: (0, _react3.number)('padding.adjustment', undefined)
+      direction: (0, _addonKnobs.text)('padding.direction', 'all'),
+      adjustment: (0, _addonKnobs.number)('padding.adjustment', undefined)
     }
-  }), _react.default.createElement(DemoComponent, null, "Component without styles"));
+  }), /*#__PURE__*/_react["default"].createElement(DemoComponent, null, "Component without styles"));
 });
 stories.add('demo component, multiple margins and padding (complex)', function () {
-  return _react.default.createElement("div", null, _react.default.createElement(DemoComponent, {
-    margin: [(0, _react3.number)('margin (all)', 2, {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(DemoComponent, {
+    margin: [(0, _addonKnobs.number)('margin (all)', 2, {
       range: true,
       min: -9,
       max: 9
-    }), (0, _react3.object)('margin (first object)', {
+    }), (0, _addonKnobs.object)('margin (first object)', {
       size: 2,
@@ -130,7 +133,7 @@ direction: 'bottom',
     })],
-    padding: [(0, _react3.number)('padding (all)', 2, {
+    padding: [(0, _addonKnobs.number)('padding (all)', 2, {
       range: true,
       min: 0,
       max: 9
-    }), (0, _react3.object)('padding (first object)', {
+    }), (0, _addonKnobs.object)('padding (first object)', {
       size: 4,
@@ -140,91 +143,91 @@ direction: ['top', 'bottom'],
     })]
-  }, "Component with styles - use knobs to adjust"), _react.default.createElement(DemoComponent, null, "Component without styles"));
+  }, "Component with styles - use knobs to adjust"), /*#__PURE__*/_react["default"].createElement(DemoComponent, null, "Component without styles"));
 });
 stories.add('existing InputField with spacing size 1', function () {
-  return _react.default.createElement("div", null, _react.default.createElement(_inputField.default, {
-    mb: (0, _react3.number)('marginBottom', 1),
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_inputField["default"], {
+    mb: (0, _addonKnobs.number)('marginBottom', 1),
     name: "group1",
     hint: "Change whitespace value with knobs"
-  }, "Example 1"), _react.default.createElement(_button.default, null, "Finish"));
+  }, "Example 1"), /*#__PURE__*/_react["default"].createElement(_button["default"], null, "Finish"));
 });
 stories.add('existing InputField with various spacing sizes', function () {
-  return _react.default.createElement("div", null, _react.default.createElement(_inputField.default, {
-    mb: (0, _react3.number)('marginBottom1', 1),
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_inputField["default"], {
+    mb: (0, _addonKnobs.number)('marginBottom1', 1),
     name: "group1",
     hint: "hi"
-  }, "Example 1"), _react.default.createElement(_inputField.default, {
-    mb: (0, _react3.number)('marginBottom2', 4),
+  }, "Example 1"), /*#__PURE__*/_react["default"].createElement(_inputField["default"], {
+    mb: (0, _addonKnobs.number)('marginBottom2', 4),
     name: "group1",
     hint: "hi"
-  }, "Example 2"), _react.default.createElement(_inputField.default, {
-    mb: (0, _react3.number)('marginBottom3', 7),
+  }, "Example 2"), /*#__PURE__*/_react["default"].createElement(_inputField["default"], {
+    mb: (0, _addonKnobs.number)('marginBottom3', 7),
     name: "group1",
     hint: "hi"
-  }, "Example 3"), _react.default.createElement(_inputField.default, {
-    mb: (0, _react3.number)('marginBottom4', 9),
+  }, "Example 3"), /*#__PURE__*/_react["default"].createElement(_inputField["default"], {
+    mb: (0, _addonKnobs.number)('marginBottom4', 9),
     name: "group1",
     hint: "okay"
-  }, "Example 4"), _react.default.createElement(_button.default, null, "Finish"));
+  }, "Example 4"), /*#__PURE__*/_react["default"].createElement(_button["default"], null, "Finish"));
 });
 stories.add('multiple existing components', function () {
-  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)('Breadcrumbs marginBottom', 9)
-  }, "Example"), _react.default.createElement(_button.default, {
-    mb: (0, _react3.number)('Button marginBottom', 9)
-  }, "Example"), _react.default.createElement(_checkbox.default, {
-    mb: (0, _react3.number)('Checkbox marginBottom', 9)
-  }, "Example"), _react.default.createElement(_dateField.default, {
-    mb: (0, _react3.number)('DateField marginBottom', 9)
-  }, "Example"), _react.default.createElement(_errorText.default, {
-    mb: (0, _react3.number)('ErrorText marginBottom', 9)
-  }, "Example"), _react.default.createElement(_fileUpload.default, {
-    mb: (0, _react3.number)('File Upload marginBottom', 9)
-  }, "Example"), _react.default.createElement(_heading.default, {
-    mb: (0, _react3.number)('Heading marginBottom', 9)
-  }, "Example"), _react.default.createElement(_hintText.default, {
-    mb: (0, _react3.number)('HintText marginBottom', 9)
-  }, "Example"), _react.default.createElement(_input.default, {
-    mb: (0, _react3.number)('Input marginBottom', 9)
-  }), _react.default.createElement(_inputField.default, {
-    mb: (0, _react3.number)('Input-text marginBottom', 9)
-  }, "Example"), _react.default.createElement(_label.default, {
-    mb: (0, _react3.number)('Label marginBottom', 9)
-  }, "Label Example"), _react.default.createElement(_labelText.default, {
-    mb: (0, _react3.number)('LabelText marginBottom', 9)
-  }, "LabelText Example"), _react.default.createElement(_listItem.default, {
-    mb: (0, _react3.number)('ListItem marginBottom', 9)
-  }, "ListItem Example"), _react.default.createElement(_listNavigation.default, {
-    mb: (0, _react3.number)('ListNavigation marginBottom', 9)
-  }, "ListNavigation Example"), _react.default.createElement(_multiChoice.default, {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_backLink["default"], {
+    mb: (0, _addonKnobs.number)('BackLink marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_breadcrumb["default"], {
+    mb: (0, _addonKnobs.number)('Breadcrumbs marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    mb: (0, _addonKnobs.number)('Button marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
+    mb: (0, _addonKnobs.number)('Checkbox marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_dateField["default"], {
+    mb: (0, _addonKnobs.number)('DateField marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_errorText["default"], {
+    mb: (0, _addonKnobs.number)('ErrorText marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_fileUpload["default"], {
+    mb: (0, _addonKnobs.number)('File Upload marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_heading["default"], {
+    mb: (0, _addonKnobs.number)('Heading marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_hintText["default"], {
+    mb: (0, _addonKnobs.number)('HintText marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+    mb: (0, _addonKnobs.number)('Input marginBottom', 9)
+  }), /*#__PURE__*/_react["default"].createElement(_inputField["default"], {
+    mb: (0, _addonKnobs.number)('Input-text marginBottom', 9)
+  }, "Example"), /*#__PURE__*/_react["default"].createElement(_label["default"], {
+    mb: (0, _addonKnobs.number)('Label marginBottom', 9)
+  }, "Label Example"), /*#__PURE__*/_react["default"].createElement(_labelText["default"], {
+    mb: (0, _addonKnobs.number)('LabelText marginBottom', 9)
+  }, "LabelText Example"), /*#__PURE__*/_react["default"].createElement(_listItem["default"], {
+    mb: (0, _addonKnobs.number)('ListItem marginBottom', 9)
+  }, "ListItem Example"), /*#__PURE__*/_react["default"].createElement(_listNavigation["default"], {
+    mb: (0, _addonKnobs.number)('ListNavigation marginBottom', 9)
+  }, "ListNavigation Example"), /*#__PURE__*/_react["default"].createElement(_multiChoice["default"], {
     label: "example",
-    mb: (0, _react3.number)('MultiChoice marginBottom', 9)
-  }, "MultiChoice Example"), _react.default.createElement(_orderedList.default, {
-    mb: (0, _react3.number)('OrderedList marginBottom', 9)
-  }, "OrderedList Example"), _react.default.createElement(_pagination.default, {
-    mb: (0, _react3.number)('Pagination marginBottom', 9)
-  }, "Pagination Example"), _react.default.createElement(_panel.default, {
+    mb: (0, _addonKnobs.number)('MultiChoice marginBottom', 9)
+  }, "MultiChoice Example"), /*#__PURE__*/_react["default"].createElement(_orderedList["default"], {
+    mb: (0, _addonKnobs.number)('OrderedList marginBottom', 9)
+  }, "OrderedList Example"), /*#__PURE__*/_react["default"].createElement(_pagination["default"], {
+    mb: (0, _addonKnobs.number)('Pagination marginBottom', 9)
+  }, "Pagination Example"), /*#__PURE__*/_react["default"].createElement(_panel["default"], {
     panelTitle: "Example",
-    mb: (0, _react3.number)('Panel marginBottom', 9)
-  }, "Panel Example"), _react.default.createElement(_phaseBanner.default, {
+    mb: (0, _addonKnobs.number)('Panel marginBottom', 9)
+  }, "Panel Example"), /*#__PURE__*/_react["default"].createElement(_phaseBanner["default"], {
     level: "EXAMPLE",
-    mb: (0, _react3.number)('PhaseBanner marginBottom', 9)
-  }, "PhaseBanner Example"), _react.default.createElement(_radio.default, {
-    mb: (0, _react3.number)('Radio marginBottom', 9)
-  }, "Radio Example"), _react.default.createElement(_relatedItems.default, {
-    mb: (0, _react3.number)('RelatedItems marginBottom', 9)
-  }, "RelatedItems Example"), _react.default.createElement(_searchBox.default, {
-    mb: (0, _react3.number)('SearchBox marginBottom', 9)
-  }, "SearchBox Example"), _react.default.createElement(_select.default, {
+    mb: (0, _addonKnobs.number)('PhaseBanner marginBottom', 9)
+  }, "PhaseBanner Example"), /*#__PURE__*/_react["default"].createElement(_radio["default"], {
+    mb: (0, _addonKnobs.number)('Radio marginBottom', 9)
+  }, "Radio Example"), /*#__PURE__*/_react["default"].createElement(_relatedItems["default"], {
+    mb: (0, _addonKnobs.number)('RelatedItems marginBottom', 9)
+  }, "RelatedItems Example"), /*#__PURE__*/_react["default"].createElement(_searchBox["default"], {
+    mb: (0, _addonKnobs.number)('SearchBox marginBottom', 9)
+  }, /*#__PURE__*/_react["default"].createElement(_searchBox["default"].Input, null), /*#__PURE__*/_react["default"].createElement(_searchBox["default"].Button, null)), /*#__PURE__*/_react["default"].createElement(_select["default"], {
     label: "example",
-    mb: (0, _react3.number)('Select marginBottom', 9)
-  }, "Select Example"), _react.default.createElement(_tag.default, {
-    mb: (0, _react3.number)('Tag marginBottom', 9)
-  }, "Tag"), _react.default.createElement(_textArea.default, {
-    mb: (0, _react3.number)('TextArea marginBottom', 9)
-  }, "TextArea Example"), _react.default.createElement(_unorderedList.default, {
-    mb: (0, _react3.number)('UnorderedList marginBottom', 9)
+    mb: (0, _addonKnobs.number)('Select marginBottom', 9)
+  }, "Select Example"), /*#__PURE__*/_react["default"].createElement(_tag["default"], {
+    mb: (0, _addonKnobs.number)('Tag marginBottom', 9)
+  }, "Tag"), /*#__PURE__*/_react["default"].createElement(_textArea["default"], {
+    mb: (0, _addonKnobs.number)('TextArea marginBottom', 9)
+  }, "TextArea Example"), /*#__PURE__*/_react["default"].createElement(_unorderedList["default"], {
+    mb: (0, _addonKnobs.number)('UnorderedList marginBottom', 9)
   }, "UnorderedList Example"));
 });
 //# sourceMappingURL=stories.js.map

lib/withWhiteSpace/test.js

@@ -11,8 +11,6 @@ "use strict";
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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 () {
@@ -26,3 +24,3 @@ // capture console.warn as this is deprecated
     jest.resetModules();
-    process.env = _objectSpread({}, OLD_ENV); // eslint-disable-next-line no-console
+    process.env = _extends({}, OLD_ENV); // eslint-disable-next-line no-console
 
@@ -40,14 +38,20 @@ console.warn = function () {
   });
-  var WithoutConfig = (0, _.default)()((0, _styledComponents.default)('div')({}));
-  var WithConfig = (0, _.default)({
+  var WithoutConfig = (0, _["default"])()((0, _styledComponents["default"])('div').withConfig({
+    displayName: "test__WithoutConfig",
+    componentId: "k3lye6-0"
+  })({}));
+  var WithConfig = (0, _["default"])({
     marginBottom: 0
-  })((0, _styledComponents.default)('div')({}));
+  })((0, _styledComponents["default"])('div').withConfig({
+    displayName: "test__WithConfig",
+    componentId: "k3lye6-1"
+  })({}));
   it('renders without config without crashing', function () {
-    (0, _enzyme.mount)(_react.default.createElement(WithoutConfig, null, "Example"));
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithoutConfig, null, "Example"));
   });
   it('renders with config without crashing', function () {
-    (0, _enzyme.mount)(_react.default.createElement(WithConfig, null, "Example"));
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithConfig, null, "Example"));
   });
   it('renders with simple mb prop without crashing', function () {
-    (0, _enzyme.mount)(_react.default.createElement(WithConfig, {
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithConfig, {
       mb: 5
@@ -57,3 +61,3 @@ }, "Example"));
   it('renders with a margin prop without crashing', function () {
-    (0, _enzyme.mount)(_react.default.createElement(WithConfig, {
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithConfig, {
       margin: {
@@ -63,6 +67,6 @@ size: 5
     }, "Example"));
-    (0, _enzyme.mount)(_react.default.createElement(WithConfig, {
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithConfig, {
       margin: 5
     }, "Example"));
-    (0, _enzyme.mount)(_react.default.createElement(WithConfig, {
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithConfig, {
       margin: [5, {
@@ -75,3 +79,3 @@ size: 2,
   it('renders with a padding prop without crashing', function () {
-    (0, _enzyme.mount)(_react.default.createElement(WithConfig, {
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithConfig, {
       padding: {
@@ -81,6 +85,6 @@ size: 5
     }, "Example"));
-    (0, _enzyme.mount)(_react.default.createElement(WithConfig, {
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithConfig, {
       padding: 5
     }, "Example"));
-    (0, _enzyme.mount)(_react.default.createElement(WithConfig, {
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithConfig, {
       padding: [5, {
@@ -94,3 +98,3 @@ size: 2,
     process.env.NODE_ENV = 'development';
-    (0, _enzyme.mount)(_react.default.createElement(WithoutConfig, null, "Example"));
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(WithoutConfig, null, "Example"));
     expect(warnCallCount).not.toEqual(0);
@@ -97,0 +101,0 @@ });

package.json

 {
   "name": "@govuk-react/hoc",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "dependencies": {
-    "@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"
+    "@govuk-react/constants": "^0.8.0",
+    "@govuk-react/icons": "^0.8.0",
+    "@govuk-react/lib": "^0.8.0",
+    "@govuk-react/link": "^0.8.0",
+    "govuk-colours": "^1.1.0"
   },
   "peerDependencies": {
     "react": ">=16.2.0",
-    "styled-components": ">=4"
+    "styled-components": ">=5.1"
   },
@@ -15,0 +15,0 @@ "scripts": {

src/deprecate/index.js

 // Deprecation HOC care of:
 // https://whawker.github.io/2016/07/15/deprecating-react-components-with-higher-order-components.html
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 
-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 = '') => props => {
+  useEffect(() => {
+    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 the wrapped component with the same props
+  return <InnerComponent {...props} />;
+};
 
 export default deprecate;

src/deprecate/test.js

 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -34,3 +34,3 @@ import deprecate from '.';
 
-    mount(<Comp />);
+    render(<Comp />);
 
@@ -44,3 +44,3 @@ expect(warnCallCount).toEqual(1);
 
-    mount(<Comp />);
+    render(<Comp />);
 
@@ -47,0 +47,0 @@ expect(warnCallCount).toEqual(0);

src/withWhiteSpace/stories.js

 import React from 'react';
 import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, number, object, text } from '@storybook/addon-knobs/react';
+import { withKnobs, number, object, text } from '@storybook/addon-knobs';
 
@@ -161,3 +161,6 @@ import BackLink from '@govuk-react/back-link';
     <RelatedItems mb={number('RelatedItems marginBottom', 9)}>RelatedItems Example</RelatedItems>
-    <SearchBox mb={number('SearchBox marginBottom', 9)}>SearchBox Example</SearchBox>
+    <SearchBox mb={number('SearchBox marginBottom', 9)}>
+      <SearchBox.Input />
+      <SearchBox.Button />
+    </SearchBox>
     <Select label="example" mb={number('Select marginBottom', 9)}>
@@ -164,0 +167,0 @@ Select Example

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

161083

increased by1.4%

Lines of code

1818

increased by0.94%

Dependency changes

• + Added@govuk-react/constants@0.8.0(transitive)

• + Added@govuk-react/icons@0.8.0(transitive)

• + Added@govuk-react/lib@0.8.0(transitive)

• + Added@govuk-react/link@0.8.0(transitive)

• + Addednanoid@3.3.7(transitive)

• - Removed@govuk-react/constants@0.7.1(transitive)

• - Removed@govuk-react/icons@0.7.1(transitive)

• - Removed@govuk-react/lib@0.7.1(transitive)

• - Removed@govuk-react/link@0.7.1(transitive)

• - Removednanoid@3.3.8(transitive)

• Updated@govuk-react/constants@^0.8.0

• Updated@govuk-react/icons@^0.8.0

• Updated@govuk-react/lib@^0.8.0

• Updated@govuk-react/link@^0.8.0

• Updatedgovuk-colours@^1.1.0