@govuk-react/search-box - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

es/index.js

@@ -1,6 +0,5 @@
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; 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); }
 
 // https://govuk-static.herokuapp.com/component-guide/search
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -10,13 +9,8 @@ import { LIGHT_BLUE, GREY_2, WHITE, YELLOW } from 'govuk-colours';
 import { Search } from '@govuk-react/icons';
-import { spacing } from '@govuk-react/lib';
-var SearchBoxWrapper = styled('div')({
-  boxSizing: 'border-box',
-  display: 'flex',
-  width: '100%',
-  background: WHITE
-}, spacing.withWhiteSpace({
-  marginBottom: 0
-})); // css normalize is hiding the input:search clear SearchButton
+import { spacing } from '@govuk-react/lib'; // css normalize is hiding the input:search clear SearchButton
 
-var InputSearchBox = styled('input')({
+var Input = styled('input').withConfig({
+  displayName: "src__Input",
+  componentId: "ln53op-0"
+})({
   width: '100%',
@@ -46,3 +40,9 @@ height: '40px',
 });
-var SearchButton = styled('button')({
+Input.defaultProps = {
+  type: 'search'
+};
+var SearchButton = styled('button').withConfig({
+  displayName: "src__SearchButton",
+  componentId: "ln53op-1"
+})({
   backgroundColor: LIGHT_BLUE,
@@ -65,2 +65,22 @@ border: 0,
 });
+
+var Button = function Button(props) {
+  return /*#__PURE__*/React.createElement(SearchButton, _extends({
+    title: "Search"
+  }, props), /*#__PURE__*/React.createElement(Search, {
+    fill: WHITE
+  }));
+};
+
+var StyledSearchBox = styled('div').withConfig({
+  displayName: "src__StyledSearchBox",
+  componentId: "ln53op-2"
+})({
+  boxSizing: 'border-box',
+  display: 'flex',
+  width: '100%',
+  background: WHITE
+}, spacing.withWhiteSpace({
+  marginBottom: 0
+}));
 /**
@@ -79,3 +99,6 @@ *
  *      <GridCol>
- *        <SearchBox placeholder="Search GOV.UK">SearchBox example</SearchBox>
+ *        <SearchBox>
+ *          <SearchBox.Input placeholder="Search GOV.UK" />
+ *          <SearchBox.Button />
+ *        </SearchBox>
  *      </GridCol>
@@ -91,20 +114,9 @@ *    </GridRow>
 
-var SearchBox = function SearchBox(_ref) {
-  var placeholder = _ref.placeholder,
-      props = _objectWithoutPropertiesLoose(_ref, ["placeholder"]);
-
-  return React.createElement(SearchBoxWrapper, props, React.createElement(InputSearchBox, {
-    type: "search",
-    placeholder: placeholder
-  }), React.createElement(SearchButton, {
-    title: "Search"
-  }, React.createElement(Search, {
-    fill: WHITE
-  })));
+var SearchBox = function SearchBox(props) {
+  return /*#__PURE__*/React.createElement(StyledSearchBox, props);
 };
 
-SearchBox.defaultProps = {
-  placeholder: undefined
-};
+SearchBox.Input = Input;
+SearchBox.Button = Button;
 export default SearchBox;
 //# sourceMappingURL=index.js.map

es/stories.js

@@ -12,6 +12,6 @@ import React from 'react';
 stories.add('Component default', function () {
-  return React.createElement(Layout, null, React.createElement(GridRow, null, React.createElement(GridCol, null, React.createElement(SearchBox, {
+  return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(GridRow, null, /*#__PURE__*/React.createElement(GridCol, null, /*#__PURE__*/React.createElement(SearchBox, null, /*#__PURE__*/React.createElement(SearchBox.Input, {
     placeholder: "Search GOV.UK"
-  }, "SearchBox example"))));
+  }), /*#__PURE__*/React.createElement(SearchBox.Button, null)))));
 });
 //# sourceMappingURL=stories.js.map

es/test.js

@@ -6,5 +6,5 @@ import React from 'react';
 var example = 'example';
-var wrapper = React.createElement(SearchBox, {
+var wrapper = /*#__PURE__*/React.createElement(SearchBox, null, /*#__PURE__*/React.createElement(SearchBox.Input, {
   placeholder: example
-}, example);
+}), /*#__PURE__*/React.createElement(SearchBox.Button, null));
 describe('SearchBox', function () {
@@ -11,0 +11,0 @@ it('renders without crashing', function () {

lib/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -20,17 +18,12 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; 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); }
 
-var SearchBoxWrapper = (0, _styledComponents.default)('div')({
-  boxSizing: 'border-box',
-  display: 'flex',
+// css normalize is hiding the input:search clear SearchButton
+var Input = (0, _styledComponents["default"])('input').withConfig({
+  displayName: "src__Input",
+  componentId: "ln53op-0"
+})({
   width: '100%',
-  background: _govukColours.WHITE
-}, _lib.spacing.withWhiteSpace({
-  marginBottom: 0
-})); // css normalize is hiding the input:search clear SearchButton
-
-var InputSearchBox = (0, _styledComponents.default)('input')({
-  width: '100%',
   height: '40px',
@@ -59,3 +52,9 @@ padding: '6px',
 });
-var SearchButton = (0, _styledComponents.default)('button')({
+Input.defaultProps = {
+  type: 'search'
+};
+var SearchButton = (0, _styledComponents["default"])('button').withConfig({
+  displayName: "src__SearchButton",
+  componentId: "ln53op-1"
+})({
   backgroundColor: _govukColours.LIGHT_BLUE,
@@ -78,2 +77,22 @@ border: 0,
 });
+
+var Button = function Button(props) {
+  return /*#__PURE__*/_react["default"].createElement(SearchButton, _extends({
+    title: "Search"
+  }, props), /*#__PURE__*/_react["default"].createElement(_icons.Search, {
+    fill: _govukColours.WHITE
+  }));
+};
+
+var StyledSearchBox = (0, _styledComponents["default"])('div').withConfig({
+  displayName: "src__StyledSearchBox",
+  componentId: "ln53op-2"
+})({
+  boxSizing: 'border-box',
+  display: 'flex',
+  width: '100%',
+  background: _govukColours.WHITE
+}, _lib.spacing.withWhiteSpace({
+  marginBottom: 0
+}));
 /**
@@ -92,3 +111,6 @@ *
  *      <GridCol>
- *        <SearchBox placeholder="Search GOV.UK">SearchBox example</SearchBox>
+ *        <SearchBox>
+ *          <SearchBox.Input placeholder="Search GOV.UK" />
+ *          <SearchBox.Button />
+ *        </SearchBox>
  *      </GridCol>
@@ -104,22 +126,11 @@ *    </GridRow>
 
-var SearchBox = function SearchBox(_ref) {
-  var placeholder = _ref.placeholder,
-      props = _objectWithoutPropertiesLoose(_ref, ["placeholder"]);
-
-  return _react.default.createElement(SearchBoxWrapper, props, _react.default.createElement(InputSearchBox, {
-    type: "search",
-    placeholder: placeholder
-  }), _react.default.createElement(SearchButton, {
-    title: "Search"
-  }, _react.default.createElement(_icons.Search, {
-    fill: _govukColours.WHITE
-  })));
+var SearchBox = function SearchBox(props) {
+  return /*#__PURE__*/_react["default"].createElement(StyledSearchBox, props);
 };
 
-SearchBox.defaultProps = {
-  placeholder: undefined
-};
+SearchBox.Input = Input;
+SearchBox.Button = Button;
 var _default = SearchBox;
-exports.default = _default;
+exports["default"] = _default;
 module.exports = exports.default;
 //# sourceMappingURL=index.js.map

lib/stories.js

@@ -19,11 +19,11 @@ "use strict";
 
-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)('Form/SearchBox', module);
-stories.addDecorator((0, _storybookComponents.withDocsCustom)(_README.default));
+stories.addDecorator((0, _storybookComponents.withDocsCustom)(_README["default"]));
 stories.add('Component default', function () {
-  return _react.default.createElement(_layout.default, null, _react.default.createElement(_gridRow.default, null, _react.default.createElement(_gridCol.default, null, _react.default.createElement(_.default, {
+  return /*#__PURE__*/_react["default"].createElement(_layout["default"], null, /*#__PURE__*/_react["default"].createElement(_gridRow["default"], null, /*#__PURE__*/_react["default"].createElement(_gridCol["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Input, {
     placeholder: "Search GOV.UK"
-  }, "SearchBox example"))));
+  }), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null)))));
 });
 //# sourceMappingURL=stories.js.map

lib/test.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 example = 'example';
 
-var wrapper = _react.default.createElement(_.default, {
+var wrapper = /*#__PURE__*/_react["default"].createElement(_["default"], null, /*#__PURE__*/_react["default"].createElement(_["default"].Input, {
   placeholder: example
-}, example);
+}), /*#__PURE__*/_react["default"].createElement(_["default"].Button, null));
 
@@ -24,3 +24,3 @@ describe('SearchBox', function () {
 
-    _reactDom.default.render(wrapper, div);
+    _reactDom["default"].render(wrapper, div);
   });
@@ -27,0 +27,0 @@ it('matches wrapper snapshot', function () {

package.json

 {
   "name": "@govuk-react/search-box",
-  "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-colours": "^1.0.3"
+    "@govuk-react/constants": "^0.8.0",
+    "@govuk-react/icons": "^0.8.0",
+    "@govuk-react/lib": "^0.8.0",
+    "govuk-colours": "^1.1.0"
   },
   "peerDependencies": {
     "react": ">=16.2.0",
-    "styled-components": ">=4"
+    "styled-components": ">=5.1"
   },
@@ -14,0 +14,0 @@ "scripts": {

README.md

@@ -21,3 +21,6 @@ SearchBox
      <GridCol>
-       <SearchBox placeholder="Search GOV.UK">SearchBox example</SearchBox>
+       <SearchBox>
+         <SearchBox.Input placeholder="Search GOV.UK" />
+         <SearchBox.Button />
+       </SearchBox>
      </GridCol>
@@ -31,7 +34,2 @@ </GridRow>
 
-### Properties
-Prop | Required | Default | Type | Description
-:--- | :------- | :------ | :--- | :----------
- `placeholder` |  | ```undefined``` | string | 
 
-

src/index.js

 // https://govuk-static.herokuapp.com/component-guide/search
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -12,14 +11,4 @@ import { LIGHT_BLUE, GREY_2, WHITE, YELLOW } from 'govuk-colours';
 
-const SearchBoxWrapper = styled('div')(
-  {
-    boxSizing: 'border-box',
-    display: 'flex',
-    width: '100%',
-    background: WHITE,
-  },
-  spacing.withWhiteSpace({ marginBottom: 0 })
-);
-
 // css normalize is hiding the input:search clear SearchButton
-const InputSearchBox = styled('input')({
+const Input = styled('input')({
   width: '100%',
@@ -50,2 +39,6 @@ height: '40px',
 
+Input.defaultProps = {
+  type: 'search',
+};
+
 const SearchButton = styled('button')({
@@ -70,2 +63,18 @@ backgroundColor: LIGHT_BLUE,
 
+const Button = props => (
+  <SearchButton title="Search" {...props}>
+    <Search fill={WHITE} />
+  </SearchButton>
+);
+
+const StyledSearchBox = styled('div')(
+  {
+    boxSizing: 'border-box',
+    display: 'flex',
+    width: '100%',
+    background: WHITE,
+  },
+  spacing.withWhiteSpace({ marginBottom: 0 })
+);
+
 /**
@@ -84,3 +93,6 @@ *
  *      <GridCol>
- *        <SearchBox placeholder="Search GOV.UK">SearchBox example</SearchBox>
+ *        <SearchBox>
+ *          <SearchBox.Input placeholder="Search GOV.UK" />
+ *          <SearchBox.Button />
+ *        </SearchBox>
  *      </GridCol>
@@ -95,19 +107,7 @@ *    </GridRow>
  */
-const SearchBox = ({ placeholder, ...props }) => (
-  <SearchBoxWrapper {...props}>
-    <InputSearchBox type="search" placeholder={placeholder} />
-    <SearchButton title="Search">
-      <Search fill={WHITE} />
-    </SearchButton>
-  </SearchBoxWrapper>
-);
+const SearchBox = props => <StyledSearchBox {...props} />;
 
-SearchBox.defaultProps = {
-  placeholder: undefined,
-};
+SearchBox.Input = Input;
+SearchBox.Button = Button;
 
-SearchBox.propTypes = {
-  placeholder: PropTypes.string,
-};
-
 export default SearchBox;

src/stories.js

@@ -20,3 +20,6 @@ import React from 'react';
       <GridCol>
-        <SearchBox placeholder="Search GOV.UK">SearchBox example</SearchBox>
+        <SearchBox>
+          <SearchBox.Input placeholder="Search GOV.UK" />
+          <SearchBox.Button />
+        </SearchBox>
       </GridCol>
@@ -23,0 +26,0 @@ </GridRow>

src/test.js

@@ -8,3 +8,8 @@ import React from 'react';
 const example = 'example';
-const wrapper = <SearchBox placeholder={example}>{example}</SearchBox>;
+const wrapper = (
+  <SearchBox>
+    <SearchBox.Input placeholder={example} />
+    <SearchBox.Button />
+  </SearchBox>
+);
 
@@ -11,0 +16,0 @@ describe('SearchBox', () => {

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

437

increased by7.64%

Worsened metrics

Total package byte prevSize

34151

decreased by-5.58%

Number of lines in readme file

34

decreased by-5.56%

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)

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

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

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

• Updated@govuk-react/constants@^0.8.0

• Updated@govuk-react/icons@^0.8.0

• Updated@govuk-react/lib@^0.8.0

• Updatedgovuk-colours@^1.1.0