@govuk-react/input-field - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

es/index.js

 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; }
+
 // https://github.com/alphagov/govuk-frontend/blob/master/src/components/input/_input.scss
@@ -13,2 +15,48 @@ // https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_forms.scss
 import { withWhiteSpace } from '@govuk-react/hoc';
+/**
+ *
+ * ### Usage
+ *
+ * Simple
+ * ```jsx
+ * <InputField name="group0">National Insurance number</InputField>
+ * ```
+ *
+ * Input with hint text
+ * ```jsx
+ * <InputField
+ *    name="group1"
+ *    hint={[
+ *      'It’s on your National Insurance card, benefit letter, payslip or P60.',
+ *      <br />,
+ *      'For example, ‘QQ 12 34 56 C’.',
+ *    ]}
+ *  >
+ *    National Insurance number
+ *  </InputField>
+ * ```
+ *
+ * Input with hint text & error
+ * ```jsx
+ *  const meta = {
+ *    touched: true,
+ *    error: 'Example',
+ *  };
+ *
+ *  <InputField
+ *    name="group1"
+ *    hint={[
+ *      'It’s on your National Insurance card, benefit letter, payslip or P60.',
+ *      <br />,
+ *      'For example, ‘QQ 12 34 56 C’.',
+ *    ]}
+ *    meta={meta}
+ *  >
+ *    National Insurance number
+ *  </InputField>
+ * ```
+ * ### References:
+ * - https://github.com/alphagov/govuk-frontend/blob/master/src/components/input/_input.scss
+ * - https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_forms.scss
+ */
 
@@ -20,7 +68,7 @@ var InputField = function InputField(_ref) {
       input = _ref.input,
-      className = _ref.className;
-  return React.createElement(Label, {
-    className: className,
+      props = _objectWithoutProperties(_ref, ["meta", "children", "hint", "input"]);
+
+  return React.createElement(Label, _extends({}, props, {
     error: meta.touched && meta.error
-  }, React.createElement(LabelText, null, children), hint && React.createElement(HintText, null, hint), meta.touched && meta.error && React.createElement(ErrorText, null, meta.error), React.createElement(Input, _extends({
+  }), React.createElement(LabelText, null, children), hint && React.createElement(HintText, null, hint), meta.touched && meta.error && React.createElement(ErrorText, null, meta.error), React.createElement(Input, _extends({
     error: meta.touched && meta.error
@@ -33,4 +81,3 @@ }, input)));
   input: {},
-  meta: {},
-  className: undefined
+  meta: {}
 };
@@ -61,4 +108,3 @@ InputField.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
+  children: PropTypes.node.isRequired
 } : {};
@@ -65,0 +111,0 @@ export default withWhiteSpace({

es/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { WithDocsCustom } from '@govuk-react/storybook-components';
 import InputField from '.';
+import ReadMe from '../README.md';
 var meta = {
@@ -8,3 +10,6 @@ touched: true,
 };
-storiesOf('InputField', module).add('Component default', function () {
+var stories = storiesOf('Form/InputField', module);
+var examples = storiesOf('Form/InputField/Examples', module);
+stories.addDecorator(WithDocsCustom(ReadMe));
+stories.add('Component default', function () {
   return React.createElement(InputField, {
@@ -14,3 +19,3 @@ name: "group0"
 });
-storiesOf('InputField', module).add('Input with HintText', function () {
+examples.add('Input with HintText', function () {
   return React.createElement(InputField, {
@@ -21,3 +26,3 @@ name: "group1",
 });
-storiesOf('InputField', module).add('Input with HintText & error', function () {
+examples.add('Input with HintText & error', function () {
   return React.createElement(InputField, {
@@ -24,0 +29,0 @@ name: "group1",

lib/index.js

@@ -26,2 +26,50 @@ "use strict";
 
+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; }
+
+/**
+ *
+ * ### Usage
+ *
+ * Simple
+ * ```jsx
+ * <InputField name="group0">National Insurance number</InputField>
+ * ```
+ *
+ * Input with hint text
+ * ```jsx
+ * <InputField
+ *    name="group1"
+ *    hint={[
+ *      'It’s on your National Insurance card, benefit letter, payslip or P60.',
+ *      <br />,
+ *      'For example, ‘QQ 12 34 56 C’.',
+ *    ]}
+ *  >
+ *    National Insurance number
+ *  </InputField>
+ * ```
+ *
+ * Input with hint text & error
+ * ```jsx
+ *  const meta = {
+ *    touched: true,
+ *    error: 'Example',
+ *  };
+ *
+ *  <InputField
+ *    name="group1"
+ *    hint={[
+ *      'It’s on your National Insurance card, benefit letter, payslip or P60.',
+ *      <br />,
+ *      'For example, ‘QQ 12 34 56 C’.',
+ *    ]}
+ *    meta={meta}
+ *  >
+ *    National Insurance number
+ *  </InputField>
+ * ```
+ * ### References:
+ * - https://github.com/alphagov/govuk-frontend/blob/master/src/components/input/_input.scss
+ * - https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_forms.scss
+ */
 var InputField = function InputField(_ref) {
@@ -32,7 +80,7 @@ var meta = _ref.meta,
       input = _ref.input,
-      className = _ref.className;
-  return _react.default.createElement(_label.default, {
-    className: className,
+      props = _objectWithoutProperties(_ref, ["meta", "children", "hint", "input"]);
+
+  return _react.default.createElement(_label.default, _extends({}, props, {
     error: meta.touched && meta.error
-  }, _react.default.createElement(_labelText.default, null, children), hint && _react.default.createElement(_hintText.default, null, hint), meta.touched && meta.error && _react.default.createElement(_errorText.default, null, meta.error), _react.default.createElement(_input.default, _extends({
+  }), _react.default.createElement(_labelText.default, null, children), hint && _react.default.createElement(_hintText.default, null, hint), meta.touched && meta.error && _react.default.createElement(_errorText.default, null, meta.error), _react.default.createElement(_input.default, _extends({
     error: meta.touched && meta.error
@@ -45,4 +93,3 @@ }, input)));
   input: {},
-  meta: {},
-  className: undefined
+  meta: {}
 };
@@ -73,4 +120,3 @@ InputField.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
-  children: _propTypes.default.node.isRequired,
-  className: _propTypes.default.string
+  children: _propTypes.default.node.isRequired
 } : {};
@@ -77,0 +123,0 @@

lib/stories.js

@@ -7,4 +7,8 @@ "use strict";
 
+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 }; }
@@ -16,3 +20,6 @@
 };
-(0, _react2.storiesOf)('InputField', module).add('Component default', function () {
+var stories = (0, _react2.storiesOf)('Form/InputField', module);
+var examples = (0, _react2.storiesOf)('Form/InputField/Examples', module);
+stories.addDecorator((0, _storybookComponents.WithDocsCustom)(_README.default));
+stories.add('Component default', function () {
   return _react.default.createElement(_.default, {
@@ -22,3 +29,3 @@ name: "group0"
 });
-(0, _react2.storiesOf)('InputField', module).add('Input with HintText', function () {
+examples.add('Input with HintText', function () {
   return _react.default.createElement(_.default, {
@@ -29,3 +36,3 @@ name: "group1",
 });
-(0, _react2.storiesOf)('InputField', module).add('Input with HintText & error', function () {
+examples.add('Input with HintText & error', function () {
   return _react.default.createElement(_.default, {
@@ -32,0 +39,0 @@ name: "group1",

package.json

 {
   "name": "@govuk-react/input-field",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "dependencies": {
-    "@govuk-react/constants": "^0.2.1",
-    "@govuk-react/error-text": "^0.2.1",
-    "@govuk-react/hint-text": "^0.2.1",
-    "@govuk-react/hoc": "^0.2.1",
-    "@govuk-react/input": "^0.2.1",
-    "@govuk-react/label": "^0.2.1",
-    "@govuk-react/label-text": "^0.2.1",
+    "@govuk-react/constants": "^0.2.2",
+    "@govuk-react/error-text": "^0.2.2",
+    "@govuk-react/hint-text": "^0.2.2",
+    "@govuk-react/hoc": "^0.2.2",
+    "@govuk-react/input": "^0.2.2",
+    "@govuk-react/label": "^0.2.2",
+    "@govuk-react/label-text": "^0.2.2",
     "govuk-colours": "^1.0.3"
@@ -30,3 +30,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.",
@@ -33,0 +33,0 @@ "private": false,

README.md

 InputField
 ==========
 
-![Component Image](./docs/InputField.png)
+### Import
+```js
+  import InputField from '@govuk-react/input-field';
+```
+<!-- STORY -->
 
+### Usage
 
+Simple
+```jsx
+<InputField name="group0">National Insurance number</InputField>
+```
+
+Input with hint text
+```jsx
+<InputField
+   name="group1"
+   hint={[
+     'It’s on your National Insurance card, benefit letter, payslip or P60.',
+     <br />,
+     'For example, ‘QQ 12 34 56 C’.',
+   ]}
+ >
+   National Insurance number
+ </InputField>
+```
+
+Input with hint text & error
+```jsx
+ const meta = {
+   touched: true,
+   error: 'Example',
+ };
+
+ <InputField
+   name="group1"
+   hint={[
+     'It’s on your National Insurance card, benefit letter, payslip or P60.',
+     <br />,
+     'For example, ‘QQ 12 34 56 C’.',
+   ]}
+   meta={meta}
+ >
+   National Insurance number
+ </InputField>
+```
+### References:
+- https://github.com/alphagov/govuk-frontend/blob/master/src/components/input/_input.scss
+- https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_forms.scss
+
+### Properties
 Prop | Required | Default | Type | Description
@@ -8,0 +56,0 @@ :--- | :------- | :------ | :--- | :----------

src/index.js

@@ -13,6 +13,52 @@ // https://github.com/alphagov/govuk-frontend/blob/master/src/components/input/_input.scss
 
+/**
+ *
+ * ### Usage
+ *
+ * Simple
+ * ```jsx
+ * <InputField name="group0">National Insurance number</InputField>
+ * ```
+ *
+ * Input with hint text
+ * ```jsx
+ * <InputField
+ *    name="group1"
+ *    hint={[
+ *      'It’s on your National Insurance card, benefit letter, payslip or P60.',
+ *      <br />,
+ *      'For example, ‘QQ 12 34 56 C’.',
+ *    ]}
+ *  >
+ *    National Insurance number
+ *  </InputField>
+ * ```
+ *
+ * Input with hint text & error
+ * ```jsx
+ *  const meta = {
+ *    touched: true,
+ *    error: 'Example',
+ *  };
+ *
+ *  <InputField
+ *    name="group1"
+ *    hint={[
+ *      'It’s on your National Insurance card, benefit letter, payslip or P60.',
+ *      <br />,
+ *      'For example, ‘QQ 12 34 56 C’.',
+ *    ]}
+ *    meta={meta}
+ *  >
+ *    National Insurance number
+ *  </InputField>
+ * ```
+ * ### References:
+ * - https://github.com/alphagov/govuk-frontend/blob/master/src/components/input/_input.scss
+ * - https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_forms.scss
+ */
 const InputField = ({
-  meta, children, hint, input, className,
+  meta, children, hint, input, ...props
 }) => (
-  <Label className={className} error={meta.touched && meta.error}>
+  <Label {...props} error={meta.touched && meta.error}>
     <LabelText>{children}</LabelText>
@@ -29,3 +75,2 @@ {hint && <HintText>{hint}</HintText>}
   meta: {},
-  className: undefined,
 };
@@ -58,5 +103,4 @@
   children: PropTypes.node.isRequired,
-  className: PropTypes.string,
 };
 
 export default withWhiteSpace({ marginBottom: 0 })(InputField);

src/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { WithDocsCustom } from '@govuk-react/storybook-components';
+
 import InputField from '.';
+import ReadMe from '../README.md';
 
@@ -10,7 +13,12 @@ const meta = {
 
-storiesOf('InputField', module).add('Component default', () => (
+const stories = storiesOf('Form/InputField', module);
+const examples = storiesOf('Form/InputField/Examples', module);
+
+stories.addDecorator(WithDocsCustom(ReadMe));
+
+stories.add('Component default', () => (
   <InputField name="group0">National Insurance number</InputField>
 ));
 
-storiesOf('InputField', module).add('Input with HintText', () => (
+examples.add('Input with HintText', () => (
   <InputField
@@ -28,3 +36,3 @@ name="group1"
 
-storiesOf('InputField', module).add('Input with HintText & error', () => (
+examples.add('Input with HintText & error', () => (
   <InputField
@@ -31,0 +39,0 @@ name="group1"

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

44055

increased by19.05%

Lines of code

513

increased by34.65%

Number of lines in readme file

63

increased by320%

Worsened metrics

Number of package files

19

decreased by-20.83%

Dependency changes

• Updated@govuk-react/constants@^0.2.2

• Updated@govuk-react/error-text@^0.2.2

• Updated@govuk-react/hint-text@^0.2.2

• Updated@govuk-react/hoc@^0.2.2

• Updated@govuk-react/input@^0.2.2

• Updated@govuk-react/label@^0.2.2

• Updated@govuk-react/label-text@^0.2.2