@govuk-react/input - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

es/index.js

 var _styled;
 
-// https://github.com/alphagov/govuk-frontend/tree/master/src/components/
-import styled from 'react-emotion';
+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 _objectWithoutProperties(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]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'react-emotion';
 import { BLACK, YELLOW, ERROR_COLOUR } from 'govuk-colours';
@@ -33,18 +36,35 @@ import { withWhiteSpace } from '@govuk-react/hoc';
 });
+/**
+ *
+ * ### Usage
+ *
+ * Simple
+ * ```jsx
+ * <Input />
+ * ```
+ *
+ * ### References:
+ * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/
+ *
+ * ### TODO:
+ * - Remove `errorColor` and provide examples on how to extend the component
+ */
 
-var Input = function Input(props) {
-  return React.createElement(StyledInput, props);
+var Input = function Input(_ref2) {
+  var type = _ref2.type,
+      props = _objectWithoutProperties(_ref2, ["type"]);
+
+  return React.createElement(StyledInput, _extends({
+    type: type
+  }, props));
 };
 
 Input.defaultProps = {
-  value: undefined,
-  onChange: undefined,
-  type: 'text',
-  errorColor: undefined
+  type: 'text'
 };
 Input.propTypes = process.env.NODE_ENV !== "production" ? {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  type: PropTypes.string,
-  errorColor: PropTypes.string
+  /**
+   * HTML `<Input />` type
+   */
+  type: PropTypes.string
 } : {};
@@ -51,0 +71,0 @@ export default withWhiteSpace({

es/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { ORANGE } from 'govuk-colours';
+import { WithDocsCustom } from '@govuk-react/storybook-components';
 import Input from '.';
-storiesOf('Input', module).add('Component default', function () {
+import ReadMe from '../README.md';
+var stories = storiesOf('Form/Input', module);
+stories.addDecorator(WithDocsCustom(ReadMe));
+stories.add('Component default', function () {
   return React.createElement(Input, {
@@ -10,9 +13,2 @@ type: "text"
 });
-storiesOf('Input', module).add('Custom error colour', function () {
-  return React.createElement(Input, {
-    type: "text",
-    errorColor: ORANGE,
-    error: "example"
-  });
-});
 //# sourceMappingURL=stories.js.map

lib/index.js

@@ -6,4 +6,2 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
-
 var _react = _interopRequireDefault(require("react"));
@@ -13,2 +11,4 @@
 
+var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+
 var _govukColours = require("govuk-colours");
@@ -24,2 +24,6 @@
 
+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 _objectWithoutProperties(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]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 var StyledInput = (0, _reactEmotion.default)('input')((_styled = {
@@ -48,18 +52,35 @@ boxSizing: 'border-box',
 });
+/**
+ *
+ * ### Usage
+ *
+ * Simple
+ * ```jsx
+ * <Input />
+ * ```
+ *
+ * ### References:
+ * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/
+ *
+ * ### TODO:
+ * - Remove `errorColor` and provide examples on how to extend the component
+ */
 
-var Input = function Input(props) {
-  return _react.default.createElement(StyledInput, props);
+var Input = function Input(_ref2) {
+  var type = _ref2.type,
+      props = _objectWithoutProperties(_ref2, ["type"]);
+
+  return _react.default.createElement(StyledInput, _extends({
+    type: type
+  }, props));
 };
 
 Input.defaultProps = {
-  value: undefined,
-  onChange: undefined,
-  type: 'text',
-  errorColor: undefined
+  type: 'text'
 };
 Input.propTypes = process.env.NODE_ENV !== "production" ? {
-  value: _propTypes.default.string,
-  onChange: _propTypes.default.func,
-  type: _propTypes.default.string,
-  errorColor: _propTypes.default.string
+  /**
+   * HTML `<Input />` type
+   */
+  type: _propTypes.default.string
 } : {};
@@ -66,0 +87,0 @@

lib/stories.js

@@ -7,9 +7,13 @@ "use strict";
 
-var _govukColours = require("govuk-colours");
+var _storybookComponents = require("@govuk-react/storybook-components");
 
 var _ = _interopRequireDefault(require("."));
 
+var _README = _interopRequireDefault(require("../README.md"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react2.storiesOf)('Input', module).add('Component default', function () {
+var stories = (0, _react2.storiesOf)('Form/Input', module);
+stories.addDecorator((0, _storybookComponents.WithDocsCustom)(_README.default));
+stories.add('Component default', function () {
   return _react.default.createElement(_.default, {
@@ -19,9 +23,2 @@ type: "text"
 });
-(0, _react2.storiesOf)('Input', module).add('Custom error colour', function () {
-  return _react.default.createElement(_.default, {
-    type: "text",
-    errorColor: _govukColours.ORANGE,
-    error: "example"
-  });
-});
 //# sourceMappingURL=stories.js.map

package.json

 {
   "name": "@govuk-react/input",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "dependencies": {
-    "@govuk-react/constants": "^0.2.1",
-    "@govuk-react/hoc": "^0.2.1",
+    "@govuk-react/constants": "^0.2.2",
+    "@govuk-react/hoc": "^0.2.2",
     "govuk-colours": "^1.0.3"
@@ -25,3 +25,3 @@ },
   "license": "MIT",
-  "homepage": "https://github.com/penx/govuk-react#readme",
+  "homepage": "https://github.com/UKHomeOffice/govuk-react#readme",
   "description": "govuk-react: A port of the govuk-frontend components for React using Emotion.",
@@ -28,0 +28,0 @@ "private": false,

README.md

 Input
 =====
 
-![Component Image](./docs/Input.png)
+### Import
+```js
+  import Input from '@govuk-react/input';
+```
+<!-- STORY -->
 
+### Usage
 
+Simple
+```jsx
+<Input />
+```
+
+### References:
+- https://github.com/alphagov/govuk-frontend/tree/master/src/components/
+
+### TODO:
+- Remove `errorColor` and provide examples on how to extend the component
+
+### Properties
 Prop | Required | Default | Type | Description
 :--- | :------- | :------ | :--- | :----------
- `onChange` |  | undefined | func | 
- `type` |  | 'text' | string | 
- `value` |  | undefined | string | 
+ `type` |  | 'text' | string | HTML `<Input />` type
 
 

src/index.js

@@ -1,5 +0,4 @@
-// https://github.com/alphagov/govuk-frontend/tree/master/src/components/
-import styled from 'react-emotion';
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'react-emotion';
 
@@ -43,18 +42,30 @@ import { BLACK, YELLOW, ERROR_COLOUR } from 'govuk-colours';
 
-const Input = props => <StyledInput {...props} />;
+/**
+ *
+ * ### Usage
+ *
+ * Simple
+ * ```jsx
+ * <Input />
+ * ```
+ *
+ * ### References:
+ * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/
+ *
+ * ### TODO:
+ * - Remove `errorColor` and provide examples on how to extend the component
+ */
+const Input = ({ type, ...props }) => <StyledInput type={type} {...props} />;
 
 Input.defaultProps = {
-  value: undefined,
-  onChange: undefined,
   type: 'text',
-  errorColor: undefined,
 };
 
 Input.propTypes = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
+  /**
+   * HTML `<Input />` type
+   */
   type: PropTypes.string,
-  errorColor: PropTypes.string,
 };
 
 export default withWhiteSpace({ marginBottom: 0 })(Input);

src/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { ORANGE } from 'govuk-colours';
+import { WithDocsCustom } from '@govuk-react/storybook-components';
 
 import Input from '.';
+import ReadMe from '../README.md';
 
-storiesOf('Input', module).add('Component default', () => (
+const stories = storiesOf('Form/Input', module);
+
+stories.addDecorator(WithDocsCustom(ReadMe));
+
+stories.add('Component default', () => (
   <Input type="text" />
 ));
-
-storiesOf('Input', module).add('Custom error colour', () => (
-  <Input type="text" errorColor={ORANGE} error="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

30223

increased by4%

Lines of code

345

increased by6.48%

Number of lines in readme file

29

increased by107.14%

Worsened metrics

Number of package files

19

decreased by-20.83%

Dependency changes

• Updated@govuk-react/constants@^0.2.2

• Updated@govuk-react/hoc@^0.2.2