@govuk-react/hoc - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

es/withWhiteSpace/index.js

@@ -1,10 +0,10 @@
-import PropTypes from 'prop-types';
+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 styled from 'react-emotion';
-import { SPACING_MAP, SPACING_MAP_INDEX, MEDIA_QUERIES } from '@govuk-react/constants';
+import { spacing } from '@govuk-react/lib'; // NB withWhiteSpace HOC is DEPRECATED
+// Please use `spacing.withWhiteSpace(config)` instead in styled components
 
 var withWhiteSpace = function withWhiteSpace(config) {
-  if (config === void 0) {
-    config = {};
-  }
-
   return function (Component) {
@@ -16,17 +16,4 @@ var StyledHoc =
       label: "StyledHoc"
-    })(function (_ref) {
-      var _ref2;
-
-      var _ref$mb = _ref.mb,
-          marginBottom = _ref$mb === void 0 ? config.marginBottom : _ref$mb;
-      return marginBottom !== undefined ? (_ref2 = {
-        marginBottom: marginBottom ? SPACING_MAP[marginBottom].mobile : 0
-      }, _ref2[MEDIA_QUERIES.LARGESCREEN] = {
-        marginBottom: marginBottom ? SPACING_MAP[marginBottom].tablet : 0
-      }, _ref2) : undefined;
-    }); // `mb` (Margin Bottom) prop name comes from the naming convention used by https://github.com/jxnblk/grid-styled
-
-    StyledHoc.propTypes = {
-      mb: PropTypes.oneOf(SPACING_MAP_INDEX)
-    };
+    })(spacing.withWhiteSpace(config));
+    StyledHoc.propTypes = _objectSpread({}, spacing.withWhiteSpace.propTypes);
     return StyledHoc;
@@ -33,0 +20,0 @@ };

es/withWhiteSpace/stories.js

@@ -1,4 +0,5 @@
-import React from 'react';
+import React, { Fragment } from 'react';
+import styled from 'react-emotion';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, number } from '@storybook/addon-knobs/react';
+import { withKnobs, number, object, text } from '@storybook/addon-knobs/react';
 import BackLink from '@govuk-react/back-link';
@@ -34,85 +35,70 @@ import Breadcrumb from '@govuk-react/breadcrumb';
 stories.addDecorator(withKnobs);
-var BackLinkWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(BackLink);
-var BreadcrumbWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Breadcrumb);
-var ButtonWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Button);
-var CheckboxWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Checkbox);
-var DateFieldWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(DateField);
-var ErrorTextWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(ErrorText);
-var FileUploadWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(FileUpload);
-var HeaderWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Header);
-var HintTextWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(HintText);
-var InputWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Input);
-var InputFieldWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(InputField);
-var LabelWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Label);
-var LabelTextWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(LabelText);
-var ListItemWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(ListItem);
-var ListNavigationWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(ListNavigation);
-var MultiChoiceWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(MultiChoice);
-var OrderedListWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(OrderedList);
-var PaginationWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Pagination);
-var PanelWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Panel);
-var PhaseBadgeWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(PhaseBadge);
-var PhaseBannerWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(PhaseBanner);
-var RadioWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Radio);
-var RelatedItemsWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(RelatedItems);
-var SearchBoxWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(SearchBox);
-var SelectWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(Select);
-var TextAreaWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(TextArea);
-var UnorderedListWithWhiteSpace = withWhiteSpace({
-  marginBottom: 1
-})(UnorderedList);
-stories.add('with spacing default size 1', function () {
-  return React.createElement(React.Fragment, null, React.createElement(InputFieldWithWhiteSpace, {
+var DemoComponent = withWhiteSpace()(
+/*#__PURE__*/
+styled('div', {
+  target: "e1wrnit60",
+  label: "DemoComponent"
+})({
+  border: '2px solid red'
+}));
+stories.add('demo component, simple single margins and padding', function () {
+  return React.createElement(Fragment, null, React.createElement(DemoComponent, {
+    margin: number('margin', 2, {
+      range: true,
+      min: 0,
+      max: 9
+    }),
+    padding: number('padding', 2, {
+      range: true,
+      min: 0,
+      max: 9
+    })
+  }, "Component with styles - use knobs to adjust"), React.createElement(DemoComponent, null, "Component without styles"));
+});
+stories.add('demo component, single margins and padding (complex)', function () {
+  return React.createElement(Fragment, null, React.createElement(DemoComponent, {
+    margin: {
+      size: number('margin.size', 2, {
+        range: true,
+        min: 0,
+        max: 9
+      }),
+      direction: text('margin.direction', 'all'),
+      adjustment: number('margin.adjustment', undefined)
+    },
+    padding: {
+      size: number('padding.size', 2, {
+        range: true,
+        min: 0,
+        max: 9
+      }),
+      direction: text('padding.direction', 'all'),
+      adjustment: number('padding.adjustment', undefined)
+    }
+  }, "Component with styles - use knobs to adjust"), 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, {
+    margin: [number('margin (all)', 2, {
+      range: true,
+      min: 0,
+      max: 9
+    }), object('margin (first object)', {
+      size: 2,
+      direction: 'bottom',
+      adjustment: -5
+    })],
+    padding: [number('padding (all)', 2, {
+      range: true,
+      min: 0,
+      max: 9
+    }), object('padding (first object)', {
+      size: 4,
+      direction: ['top', 'bottom'],
+      adjustment: 11
+    })]
+  }, "Component with styles - use knobs to adjust"), React.createElement(DemoComponent, null, "Component without styles"));
+});
+stories.add('existing InputField with spacing size 1', function () {
+  return React.createElement(Fragment, null, React.createElement(InputField, {
     mb: number('marginBottom', 1),
@@ -123,16 +109,16 @@ name: "group1",
 });
-stories.add('with various spacing sizes', function () {
-  return React.createElement(React.Fragment, null, React.createElement(InputFieldWithWhiteSpace, {
+stories.add('existing InputField with various spacing sizes', function () {
+  return React.createElement(Fragment, null, React.createElement(InputField, {
     mb: number('marginBottom1', 1),
     name: "group1",
     hint: "hi"
-  }, "Example 1"), React.createElement(InputFieldWithWhiteSpace, {
+  }, "Example 1"), React.createElement(InputField, {
     mb: number('marginBottom2', 4),
     name: "group1",
     hint: "hi"
-  }, "Example 2"), React.createElement(InputFieldWithWhiteSpace, {
+  }, "Example 2"), React.createElement(InputField, {
     mb: number('marginBottom3', 7),
     name: "group1",
     hint: "hi"
-  }, "Example 3"), React.createElement(InputFieldWithWhiteSpace, {
+  }, "Example 3"), React.createElement(InputField, {
     mb: number('marginBottom4', 9),
@@ -143,60 +129,60 @@ name: "group1",
 });
-stories.add('with multiple components', function () {
-  return React.createElement(React.Fragment, null, React.createElement(BackLinkWhiteSpace, {
+stories.add('multiple existing components', function () {
+  return React.createElement(Fragment, null, React.createElement(BackLink, {
     mb: number('BackLink marginBottom', 9)
-  }, "Example"), React.createElement(BreadcrumbWhiteSpace, {
+  }, "Example"), React.createElement(Breadcrumb, {
     mb: number('Breadcrumb marginBottom', 9)
-  }, "Example"), React.createElement(ButtonWhiteSpace, {
+  }, "Example"), React.createElement(Button, {
     mb: number('Button marginBottom', 9)
-  }, "Example"), React.createElement(CheckboxWhiteSpace, {
+  }, "Example"), React.createElement(Checkbox, {
     mb: number('Checkbox marginBottom', 9)
-  }, "Example"), React.createElement(DateFieldWhiteSpace, {
+  }, "Example"), React.createElement(DateField, {
     mb: number('DateField marginBottom', 9)
-  }, "Example"), React.createElement(ErrorTextWhiteSpace, {
+  }, "Example"), React.createElement(ErrorText, {
     mb: number('ErrorText marginBottom', 9)
-  }, "Example"), React.createElement(FileUploadWhiteSpace, {
+  }, "Example"), React.createElement(FileUpload, {
     mb: number('File Upload marginBottom', 9)
-  }, "Example"), React.createElement(HeaderWhiteSpace, {
+  }, "Example"), React.createElement(Header, {
     mb: number('Header marginBottom', 9)
-  }, "Example"), React.createElement(HintTextWhiteSpace, {
+  }, "Example"), React.createElement(HintText, {
     mb: number('HintText marginBottom', 9)
-  }, "Example"), React.createElement(InputWhiteSpace, {
+  }, "Example"), React.createElement(Input, {
     mb: number('Input marginBottom', 9)
-  }), React.createElement(InputFieldWithWhiteSpace, {
+  }), React.createElement(InputField, {
     mb: number('Input-text marginBottom', 9)
-  }, "Example"), React.createElement(LabelWithWhiteSpace, {
+  }, "Example"), React.createElement(Label, {
     mb: number('Label marginBottom', 9)
-  }, "Label Example"), React.createElement(LabelTextWithWhiteSpace, {
+  }, "Label Example"), React.createElement(LabelText, {
     mb: number('LabelText marginBottom', 9)
-  }, "LabelText Example"), React.createElement(ListItemWithWhiteSpace, {
+  }, "LabelText Example"), React.createElement(ListItem, {
     mb: number('ListItem marginBottom', 9)
-  }, "ListItem Example"), React.createElement(ListNavigationWithWhiteSpace, {
+  }, "ListItem Example"), React.createElement(ListNavigation, {
     mb: number('ListNavigation marginBottom', 9)
-  }, "ListNavigation Example"), React.createElement(MultiChoiceWithWhiteSpace, {
+  }, "ListNavigation Example"), React.createElement(MultiChoice, {
     label: "example",
     mb: number('MultiChoice marginBottom', 9)
-  }, "MultiChoice Example"), React.createElement(OrderedListWithWhiteSpace, {
+  }, "MultiChoice Example"), React.createElement(OrderedList, {
     mb: number('OrderedList marginBottom', 9)
-  }, "OrderedList Example"), React.createElement(PaginationWithWhiteSpace, {
+  }, "OrderedList Example"), React.createElement(Pagination, {
     mb: number('Pagination marginBottom', 9)
-  }, "Pagination Example"), React.createElement(PanelWithWhiteSpace, {
+  }, "Pagination Example"), React.createElement(Panel, {
     panelTitle: "Example",
     mb: number('Panel marginBottom', 9)
-  }, "Panel Example"), React.createElement(PhaseBadgeWithWhiteSpace, {
+  }, "Panel Example"), React.createElement(PhaseBadge, {
     mb: number('PhaseBadge marginBottom', 9)
-  }, "PhaseBadge"), React.createElement(PhaseBannerWithWhiteSpace, {
+  }, "PhaseBadge"), React.createElement(PhaseBanner, {
     level: "EXAMPLE",
     mb: number('PhaseBanner marginBottom', 9)
-  }, "PhaseBanner Example"), React.createElement(RadioWithWhiteSpace, {
+  }, "PhaseBanner Example"), React.createElement(Radio, {
     mb: number('Radio marginBottom', 9)
-  }, "Radio Example"), React.createElement(RelatedItemsWithWhiteSpace, {
+  }, "Radio Example"), React.createElement(RelatedItems, {
     mb: number('RelatedItems marginBottom', 9)
-  }, "RelatedItems Example"), React.createElement(SearchBoxWithWhiteSpace, {
+  }, "RelatedItems Example"), React.createElement(SearchBox, {
     mb: number('SearchBox marginBottom', 9)
-  }, "SearchBox Example"), React.createElement(SelectWithWhiteSpace, {
+  }, "SearchBox Example"), React.createElement(Select, {
     label: "example",
     mb: number('Select marginBottom', 9)
-  }, "Select Example"), React.createElement(TextAreaWithWhiteSpace, {
+  }, "Select Example"), React.createElement(TextArea, {
     mb: number('TextArea marginBottom', 9)
-  }, "TextArea Example"), React.createElement(UnorderedListWithWhiteSpace, {
+  }, "TextArea Example"), React.createElement(UnorderedList, {
     mb: number('UnorderedList marginBottom', 9)
@@ -203,0 +189,0 @@ }, "UnorderedList Example"));

es/withWhiteSpace/test.js

 import React from 'react';
+import styled from 'react-emotion';
 import { shallow } from 'enzyme';
-import InputField from '@govuk-react/input-field';
-import withWhiteSpace from './';
-var WithoutConfig = withWhiteSpace()(InputField);
+import withWhiteSpace from '.';
+var WithoutConfig = withWhiteSpace()(styled('div'));
 var WithConfig = withWhiteSpace({
   marginBottom: 0
-})(InputField);
-var wrapper;
+})(styled('div'));
 describe('withWhiteSpace', function () {
@@ -17,11 +16,43 @@ it('renders without config without crashing', function () {
   });
-  it('renders with props without crashing', function () {
-    wrapper = shallow(React.createElement(WithConfig, {
+  it('renders with simple mb prop without crashing', function () {
+    shallow(React.createElement(WithConfig, {
       mb: 5
     }, "Example"));
   });
-  it('renders an InputField', function () {
-    expect(wrapper.find('InputField').exists()).toBe(true);
+  it('renders with a margin prop without crashing', function () {
+    shallow(React.createElement(WithConfig, {
+      margin: {
+        size: 5
+      }
+    }, "Example"));
+    shallow(React.createElement(WithConfig, {
+      margin: 5
+    }, "Example"));
+    shallow(React.createElement(WithConfig, {
+      margin: [5, {
+        size: 2,
+        direction: 'top'
+      }]
+    }, "Example"));
   });
+  it('renders with a padding prop without crashing', function () {
+    shallow(React.createElement(WithConfig, {
+      padding: {
+        size: 5
+      }
+    }, "Example"));
+    shallow(React.createElement(WithConfig, {
+      padding: 5
+    }, "Example"));
+    shallow(React.createElement(WithConfig, {
+      padding: [5, {
+        size: 2,
+        direction: 'top'
+      }]
+    }, "Example"));
+  });
   it('matches wrapper snapshot', function () {
+    var wrapper = shallow(React.createElement(WithConfig, {
+      mb: 5
+    }, "Example"));
     expect(wrapper).toMatchSnapshot();
@@ -28,0 +59,0 @@ });

lib/withWhiteSpace/index.js

@@ -6,15 +6,15 @@ "use strict";
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactEmotion = _interopRequireDefault(require("react-emotion"));
 
-var _constants = require("@govuk-react/constants");
+var _lib = require("@govuk-react/lib");
 
 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 _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
+// Please use `spacing.withWhiteSpace(config)` instead in styled components
 var withWhiteSpace = function withWhiteSpace(config) {
-  if (config === void 0) {
-    config = {};
-  }
-
   return function (Component) {
@@ -26,17 +26,4 @@ var StyledHoc =
       label: "StyledHoc"
-    })(function (_ref) {
-      var _ref2;
-
-      var _ref$mb = _ref.mb,
-          marginBottom = _ref$mb === void 0 ? config.marginBottom : _ref$mb;
-      return marginBottom !== undefined ? (_ref2 = {
-        marginBottom: marginBottom ? _constants.SPACING_MAP[marginBottom].mobile : 0
-      }, _ref2[_constants.MEDIA_QUERIES.LARGESCREEN] = {
-        marginBottom: marginBottom ? _constants.SPACING_MAP[marginBottom].tablet : 0
-      }, _ref2) : undefined;
-    }); // `mb` (Margin Bottom) prop name comes from the naming convention used by https://github.com/jxnblk/grid-styled
-
-    StyledHoc.propTypes = {
-      mb: _propTypes.default.oneOf(_constants.SPACING_MAP_INDEX)
-    };
+    })(_lib.spacing.withWhiteSpace(config));
+    StyledHoc.propTypes = _objectSpread({}, _lib.spacing.withWhiteSpace.propTypes);
     return StyledHoc;
@@ -43,0 +30,0 @@ };

lib/withWhiteSpace/stories.js

 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
+var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+
 var _react2 = require("@storybook/react");
@@ -67,87 +69,74 @@
 
+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);
 stories.addDecorator(_react3.withKnobs);
-var BackLinkWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_backLink.default);
-var BreadcrumbWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_breadcrumb.default);
-var ButtonWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_button.default);
-var CheckboxWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_checkbox.default);
-var DateFieldWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_dateField.default);
-var ErrorTextWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_errorText.default);
-var FileUploadWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_fileUpload.default);
-var HeaderWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_header.default);
-var HintTextWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_hintText.default);
-var InputWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_input.default);
-var InputFieldWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_inputField.default);
-var LabelWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_label.default);
-var LabelTextWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_labelText.default);
-var ListItemWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_listItem.default);
-var ListNavigationWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_listNavigation.default);
-var MultiChoiceWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_multiChoice.default);
-var OrderedListWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_orderedList.default);
-var PaginationWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_pagination.default);
-var PanelWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_panel.default);
-var PhaseBadgeWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_phaseBadge.default);
-var PhaseBannerWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_phaseBanner.default);
-var RadioWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_radio.default);
-var RelatedItemsWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_relatedItems.default);
-var SearchBoxWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_searchBox.default);
-var SelectWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_select.default);
-var TextAreaWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_textArea.default);
-var UnorderedListWithWhiteSpace = (0, _.default)({
-  marginBottom: 1
-})(_unorderedList.default);
-stories.add('with spacing default size 1', function () {
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(InputFieldWithWhiteSpace, {
+var DemoComponent = (0, _.default)()(
+/*#__PURE__*/
+(0, _reactEmotion.default)('div', {
+  target: "e1wrnit60",
+  label: "DemoComponent"
+})({
+  border: '2px solid red'
+}));
+stories.add('demo component, simple single margins and padding', function () {
+  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(DemoComponent, {
+    margin: (0, _react3.number)('margin', 2, {
+      range: true,
+      min: 0,
+      max: 9
+    }),
+    padding: (0, _react3.number)('padding', 2, {
+      range: true,
+      min: 0,
+      max: 9
+    })
+  }, "Component with styles - use knobs to adjust"), _react.default.createElement(DemoComponent, null, "Component without styles"));
+});
+stories.add('demo component, single margins and padding (complex)', function () {
+  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(DemoComponent, {
+    margin: {
+      size: (0, _react3.number)('margin.size', 2, {
+        range: true,
+        min: 0,
+        max: 9
+      }),
+      direction: (0, _react3.text)('margin.direction', 'all'),
+      adjustment: (0, _react3.number)('margin.adjustment', undefined)
+    },
+    padding: {
+      size: (0, _react3.number)('padding.size', 2, {
+        range: true,
+        min: 0,
+        max: 9
+      }),
+      direction: (0, _react3.text)('padding.direction', 'all'),
+      adjustment: (0, _react3.number)('padding.adjustment', undefined)
+    }
+  }, "Component with styles - use knobs to adjust"), _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, {
+    margin: [(0, _react3.number)('margin (all)', 2, {
+      range: true,
+      min: 0,
+      max: 9
+    }), (0, _react3.object)('margin (first object)', {
+      size: 2,
+      direction: 'bottom',
+      adjustment: -5
+    })],
+    padding: [(0, _react3.number)('padding (all)', 2, {
+      range: true,
+      min: 0,
+      max: 9
+    }), (0, _react3.object)('padding (first object)', {
+      size: 4,
+      direction: ['top', 'bottom'],
+      adjustment: 11
+    })]
+  }, "Component with styles - use knobs to adjust"), _react.default.createElement(DemoComponent, null, "Component without styles"));
+});
+stories.add('existing InputField with spacing size 1', function () {
+  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_inputField.default, {
     mb: (0, _react3.number)('marginBottom', 1),
@@ -158,16 +147,16 @@ name: "group1",
 });
-stories.add('with various spacing sizes', function () {
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(InputFieldWithWhiteSpace, {
+stories.add('existing InputField with various spacing sizes', function () {
+  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_inputField.default, {
     mb: (0, _react3.number)('marginBottom1', 1),
     name: "group1",
     hint: "hi"
-  }, "Example 1"), _react.default.createElement(InputFieldWithWhiteSpace, {
+  }, "Example 1"), _react.default.createElement(_inputField.default, {
     mb: (0, _react3.number)('marginBottom2', 4),
     name: "group1",
     hint: "hi"
-  }, "Example 2"), _react.default.createElement(InputFieldWithWhiteSpace, {
+  }, "Example 2"), _react.default.createElement(_inputField.default, {
     mb: (0, _react3.number)('marginBottom3', 7),
     name: "group1",
     hint: "hi"
-  }, "Example 3"), _react.default.createElement(InputFieldWithWhiteSpace, {
+  }, "Example 3"), _react.default.createElement(_inputField.default, {
     mb: (0, _react3.number)('marginBottom4', 9),
@@ -178,60 +167,60 @@ name: "group1",
 });
-stories.add('with multiple components', function () {
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(BackLinkWhiteSpace, {
+stories.add('multiple existing components', function () {
+  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_backLink.default, {
     mb: (0, _react3.number)('BackLink marginBottom', 9)
-  }, "Example"), _react.default.createElement(BreadcrumbWhiteSpace, {
+  }, "Example"), _react.default.createElement(_breadcrumb.default, {
     mb: (0, _react3.number)('Breadcrumb marginBottom', 9)
-  }, "Example"), _react.default.createElement(ButtonWhiteSpace, {
+  }, "Example"), _react.default.createElement(_button.default, {
     mb: (0, _react3.number)('Button marginBottom', 9)
-  }, "Example"), _react.default.createElement(CheckboxWhiteSpace, {
+  }, "Example"), _react.default.createElement(_checkbox.default, {
     mb: (0, _react3.number)('Checkbox marginBottom', 9)
-  }, "Example"), _react.default.createElement(DateFieldWhiteSpace, {
+  }, "Example"), _react.default.createElement(_dateField.default, {
     mb: (0, _react3.number)('DateField marginBottom', 9)
-  }, "Example"), _react.default.createElement(ErrorTextWhiteSpace, {
+  }, "Example"), _react.default.createElement(_errorText.default, {
     mb: (0, _react3.number)('ErrorText marginBottom', 9)
-  }, "Example"), _react.default.createElement(FileUploadWhiteSpace, {
+  }, "Example"), _react.default.createElement(_fileUpload.default, {
     mb: (0, _react3.number)('File Upload marginBottom', 9)
-  }, "Example"), _react.default.createElement(HeaderWhiteSpace, {
+  }, "Example"), _react.default.createElement(_header.default, {
     mb: (0, _react3.number)('Header marginBottom', 9)
-  }, "Example"), _react.default.createElement(HintTextWhiteSpace, {
+  }, "Example"), _react.default.createElement(_hintText.default, {
     mb: (0, _react3.number)('HintText marginBottom', 9)
-  }, "Example"), _react.default.createElement(InputWhiteSpace, {
+  }, "Example"), _react.default.createElement(_input.default, {
     mb: (0, _react3.number)('Input marginBottom', 9)
-  }), _react.default.createElement(InputFieldWithWhiteSpace, {
+  }), _react.default.createElement(_inputField.default, {
     mb: (0, _react3.number)('Input-text marginBottom', 9)
-  }, "Example"), _react.default.createElement(LabelWithWhiteSpace, {
+  }, "Example"), _react.default.createElement(_label.default, {
     mb: (0, _react3.number)('Label marginBottom', 9)
-  }, "Label Example"), _react.default.createElement(LabelTextWithWhiteSpace, {
+  }, "Label Example"), _react.default.createElement(_labelText.default, {
     mb: (0, _react3.number)('LabelText marginBottom', 9)
-  }, "LabelText Example"), _react.default.createElement(ListItemWithWhiteSpace, {
+  }, "LabelText Example"), _react.default.createElement(_listItem.default, {
     mb: (0, _react3.number)('ListItem marginBottom', 9)
-  }, "ListItem Example"), _react.default.createElement(ListNavigationWithWhiteSpace, {
+  }, "ListItem Example"), _react.default.createElement(_listNavigation.default, {
     mb: (0, _react3.number)('ListNavigation marginBottom', 9)
-  }, "ListNavigation Example"), _react.default.createElement(MultiChoiceWithWhiteSpace, {
+  }, "ListNavigation Example"), _react.default.createElement(_multiChoice.default, {
     label: "example",
     mb: (0, _react3.number)('MultiChoice marginBottom', 9)
-  }, "MultiChoice Example"), _react.default.createElement(OrderedListWithWhiteSpace, {
+  }, "MultiChoice Example"), _react.default.createElement(_orderedList.default, {
     mb: (0, _react3.number)('OrderedList marginBottom', 9)
-  }, "OrderedList Example"), _react.default.createElement(PaginationWithWhiteSpace, {
+  }, "OrderedList Example"), _react.default.createElement(_pagination.default, {
     mb: (0, _react3.number)('Pagination marginBottom', 9)
-  }, "Pagination Example"), _react.default.createElement(PanelWithWhiteSpace, {
+  }, "Pagination Example"), _react.default.createElement(_panel.default, {
     panelTitle: "Example",
     mb: (0, _react3.number)('Panel marginBottom', 9)
-  }, "Panel Example"), _react.default.createElement(PhaseBadgeWithWhiteSpace, {
+  }, "Panel Example"), _react.default.createElement(_phaseBadge.default, {
     mb: (0, _react3.number)('PhaseBadge marginBottom', 9)
-  }, "PhaseBadge"), _react.default.createElement(PhaseBannerWithWhiteSpace, {
+  }, "PhaseBadge"), _react.default.createElement(_phaseBanner.default, {
     level: "EXAMPLE",
     mb: (0, _react3.number)('PhaseBanner marginBottom', 9)
-  }, "PhaseBanner Example"), _react.default.createElement(RadioWithWhiteSpace, {
+  }, "PhaseBanner Example"), _react.default.createElement(_radio.default, {
     mb: (0, _react3.number)('Radio marginBottom', 9)
-  }, "Radio Example"), _react.default.createElement(RelatedItemsWithWhiteSpace, {
+  }, "Radio Example"), _react.default.createElement(_relatedItems.default, {
     mb: (0, _react3.number)('RelatedItems marginBottom', 9)
-  }, "RelatedItems Example"), _react.default.createElement(SearchBoxWithWhiteSpace, {
+  }, "RelatedItems Example"), _react.default.createElement(_searchBox.default, {
     mb: (0, _react3.number)('SearchBox marginBottom', 9)
-  }, "SearchBox Example"), _react.default.createElement(SelectWithWhiteSpace, {
+  }, "SearchBox Example"), _react.default.createElement(_select.default, {
     label: "example",
     mb: (0, _react3.number)('Select marginBottom', 9)
-  }, "Select Example"), _react.default.createElement(TextAreaWithWhiteSpace, {
+  }, "Select Example"), _react.default.createElement(_textArea.default, {
     mb: (0, _react3.number)('TextArea marginBottom', 9)
-  }, "TextArea Example"), _react.default.createElement(UnorderedListWithWhiteSpace, {
+  }, "TextArea Example"), _react.default.createElement(_unorderedList.default, {
     mb: (0, _react3.number)('UnorderedList marginBottom', 9)
@@ -238,0 +227,0 @@ }, "UnorderedList Example"));

lib/withWhiteSpace/test.js

@@ -5,15 +5,14 @@ "use strict";
 
+var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+
 var _enzyme = require("enzyme");
 
-var _inputField = _interopRequireDefault(require("@govuk-react/input-field"));
+var _ = _interopRequireDefault(require("."));
 
-var _ = _interopRequireDefault(require("./"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var WithoutConfig = (0, _.default)()(_inputField.default);
+var WithoutConfig = (0, _.default)()((0, _reactEmotion.default)('div'));
 var WithConfig = (0, _.default)({
   marginBottom: 0
-})(_inputField.default);
-var wrapper;
+})((0, _reactEmotion.default)('div'));
 describe('withWhiteSpace', function () {
@@ -26,11 +25,43 @@ it('renders without config without crashing', function () {
   });
-  it('renders with props without crashing', function () {
-    wrapper = (0, _enzyme.shallow)(_react.default.createElement(WithConfig, {
+  it('renders with simple mb prop without crashing', function () {
+    (0, _enzyme.shallow)(_react.default.createElement(WithConfig, {
       mb: 5
     }, "Example"));
   });
-  it('renders an InputField', function () {
-    expect(wrapper.find('InputField').exists()).toBe(true);
+  it('renders with a margin prop without crashing', function () {
+    (0, _enzyme.shallow)(_react.default.createElement(WithConfig, {
+      margin: {
+        size: 5
+      }
+    }, "Example"));
+    (0, _enzyme.shallow)(_react.default.createElement(WithConfig, {
+      margin: 5
+    }, "Example"));
+    (0, _enzyme.shallow)(_react.default.createElement(WithConfig, {
+      margin: [5, {
+        size: 2,
+        direction: 'top'
+      }]
+    }, "Example"));
   });
+  it('renders with a padding prop without crashing', function () {
+    (0, _enzyme.shallow)(_react.default.createElement(WithConfig, {
+      padding: {
+        size: 5
+      }
+    }, "Example"));
+    (0, _enzyme.shallow)(_react.default.createElement(WithConfig, {
+      padding: 5
+    }, "Example"));
+    (0, _enzyme.shallow)(_react.default.createElement(WithConfig, {
+      padding: [5, {
+        size: 2,
+        direction: 'top'
+      }]
+    }, "Example"));
+  });
   it('matches wrapper snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)(_react.default.createElement(WithConfig, {
+      mb: 5
+    }, "Example"));
     expect(wrapper).toMatchSnapshot();
@@ -37,0 +68,0 @@ });

package.json

 {
   "name": "@govuk-react/hoc",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "dependencies": {
-    "@govuk-react/constants": "^0.5.0",
-    "@govuk-react/icons": "^0.5.0",
+    "@govuk-react/constants": "^0.5.1",
+    "@govuk-react/icons": "^0.5.1",
+    "@govuk-react/lib": "^0.5.1",
     "govuk-colours": "^1.0.3"
@@ -8,0 +9,0 @@ },

src/withWhiteSpace/index.js

@@ -1,18 +0,12 @@
-import PropTypes from 'prop-types';
 import styled from 'react-emotion';
-import { SPACING_MAP, SPACING_MAP_INDEX, MEDIA_QUERIES } from '@govuk-react/constants';
+import { spacing } from '@govuk-react/lib';
 
-const withWhiteSpace = (config = {}) => (Component) => {
-  const StyledHoc = styled(Component)(({ mb: marginBottom = config.marginBottom }) => (
-    marginBottom !== undefined ? {
-      marginBottom: marginBottom ? SPACING_MAP[marginBottom].mobile : 0,
-      [MEDIA_QUERIES.LARGESCREEN]: {
-        marginBottom: marginBottom ? SPACING_MAP[marginBottom].tablet : 0,
-      },
-    } : undefined
-  ));
+// NB withWhiteSpace HOC is DEPRECATED
+// Please use `spacing.withWhiteSpace(config)` instead in styled components
 
-  // `mb` (Margin Bottom) prop name comes from the naming convention used by https://github.com/jxnblk/grid-styled
+const withWhiteSpace = config => (Component) => {
+  const StyledHoc = styled(Component)(spacing.withWhiteSpace(config));
+
   StyledHoc.propTypes = {
-    mb: PropTypes.oneOf(SPACING_MAP_INDEX),
+    ...spacing.withWhiteSpace.propTypes,
   };
@@ -24,2 +18,1 @@
 export default withWhiteSpace;
-

src/withWhiteSpace/stories.js

@@ -1,4 +0,6 @@
-import React from 'react';
+import React, { Fragment } from 'react';
+import styled from 'react-emotion';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, number } from '@storybook/addon-knobs/react';
+import { withKnobs, number, object, text } from '@storybook/addon-knobs/react';
+
 import BackLink from '@govuk-react/back-link';
@@ -15,3 +17,2 @@ import Breadcrumb from '@govuk-react/breadcrumb';
 import InputField from '@govuk-react/input-field';
-
 import Label from '@govuk-react/label';
@@ -39,79 +40,112 @@ import LabelText from '@govuk-react/label-text';
 
-const BackLinkWhiteSpace = withWhiteSpace({ marginBottom: 1 })(BackLink);
-const BreadcrumbWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Breadcrumb);
-const ButtonWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Button);
-const CheckboxWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Checkbox);
-const DateFieldWhiteSpace = withWhiteSpace({ marginBottom: 1 })(DateField);
-const ErrorTextWhiteSpace = withWhiteSpace({ marginBottom: 1 })(ErrorText);
-const FileUploadWhiteSpace = withWhiteSpace({ marginBottom: 1 })(FileUpload);
-const HeaderWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Header);
-const HintTextWhiteSpace = withWhiteSpace({ marginBottom: 1 })(HintText);
-const InputWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Input);
-const InputFieldWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(InputField);
+const DemoComponent = withWhiteSpace()(styled('div')({
+  border: '2px solid red',
+}));
 
-const LabelWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Label);
-const LabelTextWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(LabelText);
-const ListItemWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(ListItem);
-const ListNavigationWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(ListNavigation);
-const MultiChoiceWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(MultiChoice);
-const OrderedListWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(OrderedList);
-const PaginationWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Pagination);
-const PanelWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Panel);
-const PhaseBadgeWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(PhaseBadge);
-const PhaseBannerWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(PhaseBanner);
-const RadioWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Radio);
-const RelatedItemsWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(RelatedItems);
-const SearchBoxWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(SearchBox);
-const SelectWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(Select);
-const TextAreaWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(TextArea);
-const UnorderedListWithWhiteSpace = withWhiteSpace({ marginBottom: 1 })(UnorderedList);
+stories.add('demo component, simple single margins and padding', () => (
+  <Fragment>
+    <DemoComponent
+      margin={number('margin', 2, { range: true, min: 0, max: 9 })}
+      padding={number('padding', 2, { range: true, min: 0, max: 9 })}
+    >
+      Component with styles - use knobs to adjust
+    </DemoComponent>
+    <DemoComponent>Component without styles</DemoComponent>
+  </Fragment>
+));
 
-stories.add('with spacing default size 1', () => (
-  <React.Fragment>
-    <InputFieldWithWhiteSpace mb={number('marginBottom', 1)} name="group1" hint="Change whitespace value with knobs">Example 1</InputFieldWithWhiteSpace>
+stories.add('demo component, single margins and padding (complex)', () => (
+  <Fragment>
+    <DemoComponent
+      margin={{
+        size: number('margin.size', 2, { range: true, min: 0, max: 9 }),
+        direction: text('margin.direction', 'all'),
+        adjustment: number('margin.adjustment', undefined),
+      }}
+      padding={{
+        size: number('padding.size', 2, { range: true, min: 0, max: 9 }),
+        direction: text('padding.direction', 'all'),
+        adjustment: number('padding.adjustment', undefined),
+      }}
+    >
+      Component with styles - use knobs to adjust
+    </DemoComponent>
+    <DemoComponent>Component without styles</DemoComponent>
+  </Fragment>
+));
+
+stories.add('demo component, multiple margins and padding (complex)', () => (
+  <Fragment>
+    <DemoComponent
+      margin={[
+        number('margin (all)', 2, { range: true, min: 0, max: 9 }),
+        object('margin (first object)', {
+          size: 2,
+          direction: 'bottom',
+          adjustment: -5,
+        }),
+      ]}
+      padding={[
+        number('padding (all)', 2, { range: true, min: 0, max: 9 }),
+        object('padding (first object)', {
+          size: 4,
+          direction: ['top', 'bottom'],
+          adjustment: 11,
+        }),
+      ]}
+    >
+      Component with styles - use knobs to adjust
+    </DemoComponent>
+    <DemoComponent>Component without styles</DemoComponent>
+  </Fragment>
+));
+
+
+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>
     <Button>Finish</Button>
-  </React.Fragment>
+  </Fragment>
 ));
 
-stories.add('with various spacing sizes', () => (
-  <React.Fragment>
-    <InputFieldWithWhiteSpace mb={number('marginBottom1', 1)} name="group1" hint="hi">Example 1</InputFieldWithWhiteSpace>
-    <InputFieldWithWhiteSpace mb={number('marginBottom2', 4)} name="group1" hint="hi">Example 2</InputFieldWithWhiteSpace>
-    <InputFieldWithWhiteSpace mb={number('marginBottom3', 7)} name="group1" hint="hi">Example 3</InputFieldWithWhiteSpace>
-    <InputFieldWithWhiteSpace mb={number('marginBottom4', 9)} name="group1" hint="okay">Example 4</InputFieldWithWhiteSpace>
+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>
     <Button>Finish</Button>
-  </React.Fragment>
+  </Fragment>
 ));
 
-stories.add('with multiple components', () => (
-  <React.Fragment>
-    <BackLinkWhiteSpace mb={number('BackLink marginBottom', 9)}>Example</BackLinkWhiteSpace>
-    <BreadcrumbWhiteSpace mb={number('Breadcrumb marginBottom', 9)}>Example</BreadcrumbWhiteSpace>
-    <ButtonWhiteSpace mb={number('Button marginBottom', 9)}>Example</ButtonWhiteSpace>
-    <CheckboxWhiteSpace mb={number('Checkbox marginBottom', 9)}>Example</CheckboxWhiteSpace>
-    <DateFieldWhiteSpace mb={number('DateField marginBottom', 9)}>Example</DateFieldWhiteSpace>
-    <ErrorTextWhiteSpace mb={number('ErrorText marginBottom', 9)}>Example</ErrorTextWhiteSpace>
-    <FileUploadWhiteSpace mb={number('File Upload marginBottom', 9)}>Example</FileUploadWhiteSpace>
-    <HeaderWhiteSpace mb={number('Header marginBottom', 9)}>Example</HeaderWhiteSpace>
-    <HintTextWhiteSpace mb={number('HintText marginBottom', 9)}>Example</HintTextWhiteSpace>
-    <InputWhiteSpace mb={number('Input marginBottom', 9)} />
-    <InputFieldWithWhiteSpace mb={number('Input-text marginBottom', 9)}>Example</InputFieldWithWhiteSpace>
-
-    <LabelWithWhiteSpace mb={number('Label marginBottom', 9)}>Label Example</LabelWithWhiteSpace>
-    <LabelTextWithWhiteSpace mb={number('LabelText marginBottom', 9)}>LabelText Example</LabelTextWithWhiteSpace>
-    <ListItemWithWhiteSpace mb={number('ListItem marginBottom', 9)}>ListItem Example</ListItemWithWhiteSpace>
-    <ListNavigationWithWhiteSpace mb={number('ListNavigation marginBottom', 9)}>ListNavigation Example</ListNavigationWithWhiteSpace>
-    <MultiChoiceWithWhiteSpace label="example" mb={number('MultiChoice marginBottom', 9)}>MultiChoice Example</MultiChoiceWithWhiteSpace>
-    <OrderedListWithWhiteSpace mb={number('OrderedList marginBottom', 9)}>OrderedList Example</OrderedListWithWhiteSpace>
-    <PaginationWithWhiteSpace mb={number('Pagination marginBottom', 9)}>Pagination Example</PaginationWithWhiteSpace>
-    <PanelWithWhiteSpace panelTitle="Example" mb={number('Panel marginBottom', 9)}>Panel Example</PanelWithWhiteSpace>
-    <PhaseBadgeWithWhiteSpace mb={number('PhaseBadge marginBottom', 9)}>PhaseBadge</PhaseBadgeWithWhiteSpace>
-    <PhaseBannerWithWhiteSpace level="EXAMPLE" mb={number('PhaseBanner marginBottom', 9)}>PhaseBanner Example</PhaseBannerWithWhiteSpace>
-    <RadioWithWhiteSpace mb={number('Radio marginBottom', 9)}>Radio Example</RadioWithWhiteSpace>
-    <RelatedItemsWithWhiteSpace mb={number('RelatedItems marginBottom', 9)}>RelatedItems Example</RelatedItemsWithWhiteSpace>
-    <SearchBoxWithWhiteSpace mb={number('SearchBox marginBottom', 9)}>SearchBox Example</SearchBoxWithWhiteSpace>
-    <SelectWithWhiteSpace label="example" mb={number('Select marginBottom', 9)}>Select Example</SelectWithWhiteSpace>
-    <TextAreaWithWhiteSpace mb={number('TextArea marginBottom', 9)}>TextArea Example</TextAreaWithWhiteSpace>
-    <UnorderedListWithWhiteSpace mb={number('UnorderedList marginBottom', 9)}>UnorderedList Example</UnorderedListWithWhiteSpace>
-  </React.Fragment>
+stories.add('multiple existing components', () => (
+  <Fragment>
+    <BackLink mb={number('BackLink marginBottom', 9)}>Example</BackLink>
+    <Breadcrumb mb={number('Breadcrumb marginBottom', 9)}>Example</Breadcrumb>
+    <Button mb={number('Button marginBottom', 9)}>Example</Button>
+    <Checkbox mb={number('Checkbox marginBottom', 9)}>Example</Checkbox>
+    <DateField mb={number('DateField marginBottom', 9)}>Example</DateField>
+    <ErrorText mb={number('ErrorText marginBottom', 9)}>Example</ErrorText>
+    <FileUpload mb={number('File Upload marginBottom', 9)}>Example</FileUpload>
+    <Header mb={number('Header marginBottom', 9)}>Example</Header>
+    <HintText mb={number('HintText marginBottom', 9)}>Example</HintText>
+    <Input mb={number('Input marginBottom', 9)} />
+    <InputField mb={number('Input-text marginBottom', 9)}>Example</InputField>
+    <Label mb={number('Label marginBottom', 9)}>Label Example</Label>
+    <LabelText mb={number('LabelText marginBottom', 9)}>LabelText Example</LabelText>
+    <ListItem mb={number('ListItem marginBottom', 9)}>ListItem Example</ListItem>
+    <ListNavigation mb={number('ListNavigation marginBottom', 9)}>ListNavigation Example</ListNavigation>
+    <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>
+    <PhaseBadge mb={number('PhaseBadge marginBottom', 9)}>PhaseBadge</PhaseBadge>
+    <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>
+    <TextArea mb={number('TextArea marginBottom', 9)}>TextArea Example</TextArea>
+    <UnorderedList mb={number('UnorderedList marginBottom', 9)}>UnorderedList Example</UnorderedList>
+  </Fragment>
 ));

src/withWhiteSpace/test.js

 import React from 'react';
+import styled from 'react-emotion';
 import { shallow } from 'enzyme';
-import InputField from '@govuk-react/input-field';
-import withWhiteSpace from './';
+import withWhiteSpace from '.';
 
-const WithoutConfig = withWhiteSpace()(InputField);
-const WithConfig = withWhiteSpace({ marginBottom: 0 })(InputField);
-let wrapper;
+const WithoutConfig = withWhiteSpace()(styled('div'));
+const WithConfig = withWhiteSpace({ marginBottom: 0 })(styled('div'));
 
@@ -19,13 +18,22 @@ describe('withWhiteSpace', () => {
 
-  it('renders with props without crashing', () => {
-    wrapper = shallow(<WithConfig mb={5}>Example</WithConfig>);
+  it('renders with simple mb prop without crashing', () => {
+    shallow(<WithConfig mb={5}>Example</WithConfig>);
   });
 
-  it('renders an InputField', () => {
-    expect(wrapper.find('InputField').exists()).toBe(true);
+  it('renders with a margin prop without crashing', () => {
+    shallow(<WithConfig margin={{ size: 5 }}>Example</WithConfig>);
+    shallow(<WithConfig margin={5}>Example</WithConfig>);
+    shallow(<WithConfig margin={[5, { size: 2, direction: 'top' }]}>Example</WithConfig>);
   });
 
+  it('renders with a padding prop without crashing', () => {
+    shallow(<WithConfig padding={{ size: 5 }}>Example</WithConfig>);
+    shallow(<WithConfig padding={5}>Example</WithConfig>);
+    shallow(<WithConfig padding={[5, { size: 2, direction: 'top' }]}>Example</WithConfig>);
+  });
+
   it('matches wrapper snapshot', () => {
+    const wrapper = shallow(<WithConfig mb={5}>Example</WithConfig>);
     expect(wrapper).toMatchSnapshot();
   });
 });

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

Lines of code

1618

increased by2.99%

Worsened metrics

Total package byte prevSize

137218

decreased by-1.85%

Dependency count

7

increased by16.67%

Dependency changes

• + Added@govuk-react/lib@^0.5.1

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

• Updated@govuk-react/constants@^0.5.1

• Updated@govuk-react/icons@^0.5.1