[DDW-880] Forward html attributes to input field

Author: renanvalentin

.github/workflows/test.yml

@@ -5,7 +5,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
       - name: install modules
-        run: yarn
+        run: yarn --frozen-lock
       - name: run tests
         run: yarn test

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

__tests__/Input.test.js

@@ -4,25 +4,31 @@ import { Input } from '../source/components/Input';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('Input renders correctly', () => {
-  expect(renderInSimpleTheme(
-    <Input />
-  )).toMatchSnapshot();
+  expect(renderInSimpleTheme(<Input />)).toMatchSnapshot();
 });
 
 test('Input renders with placeholder', () => {
-  expect(renderInSimpleTheme(
-    <Input placeholder="0.0000" />
-  )).toMatchSnapshot();
+  expect(renderInSimpleTheme(<Input placeholder="0.0000" />)).toMatchSnapshot();
 });
 
 test('Input renders with a value', () => {
-  expect(renderInSimpleTheme(
-    <Input value="there is value" />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(<Input value="there is value" />)
+  ).toMatchSnapshot();
 });
 
 test('Input is readOnly', () => {
-  expect(renderInSimpleTheme(
-    <Input readOnly />
-  )).toMatchSnapshot();
+  expect(renderInSimpleTheme(<Input readOnly />)).toMatchSnapshot();
+});
+
+test('Input renders with data-* attributes', () => {
+  const wrapper = renderInSimpleTheme(<Input data-testid="testId" />);
+  expect(wrapper.find('input').prop('data-testid')).toEqual('testId');
+});
+
+test('Input renders label with htmlFor attribute', () => {
+  const id = 'inputId';
+  const wrapper = renderInSimpleTheme(<Input id={id} label="label" />);
+  expect(wrapper.find('input').prop('id')).toEqual(id);
+  expect(wrapper.find('label').prop('for')).toEqual(id);
 });

netlify.toml

@@ -0,0 +1,2 @@
+[build]
+  environment = { YARN_VERSION = "1.22.4", NODE_VERSION = "14.17.0" }

package.json

@@ -10,7 +10,7 @@
     "js": "babel source -d lib -s",
     "js:watch": "yarn js --watch",
     "lint": "eslint --format=node_modules/eslint-formatter-pretty source stories *.js",
-    "prepare": "yarn clean && yarn build",
+    "prepare": "yarn clean && yarn build && husky install",
     "sass": "node 'scripts/prepare-sass-files-for-publishing.js'",
     "sass:watch": "nodemon -e scss --watch source/themes --exec 'yarn sass'",
     "storybook": "start-storybook -p 6543 -c storybook --ci",
@@ -23,7 +23,7 @@
     "@tippyjs/react": "4.2.1",
     "create-react-context": "0.2.2",
     "fast-password-entropy": "1.1.1",
-    "filter-react-dom-props": "0.0.2",
+    "filter-invalid-dom-props": "2.1.0",
     "popper.js": "1.16.1",
     "react-modal": "3.1.12",
     "react-scrollbars-custom": "4.0.21"
@@ -71,11 +71,13 @@
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "5.0.2",
     "flow-bin": "0.134.0",
+    "husky": "7.0.4",
     "identity-obj-proxy": "3.0.0",
     "jest": "25.1.0",
     "jest-enzyme": "7.1.2",
+    "lint-staged": "12.1.3",
     "lodash": "4.17.19",
-    "node-sass": "4.13.1",
+    "node-sass": "4.14.1",
     "nodemon": "1.12.1",
     "prettier": "2.0.5",
     "prettier-eslint": "9.0.1",
@@ -142,5 +144,13 @@
     "render prop",
     "skins",
     "themes"
-  ]
+  ],
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.{js,css,md}": "prettier --write"
+  },
+  "devEngines": {
+    "node": ">=14.17.0",
+    "yarn": "1.22.4"
+  }
 }

source/components/FormField.js

@@ -16,6 +16,7 @@ export type FormFieldProps = {
   disabled?: boolean,
   error?: string | Element<any>,
   formFieldRef: ElementRef<*>,
+  id?: string,
   isErrorHidden?: boolean,
   isErrorShown?: boolean,
   isShowingErrorOnFocus: boolean,

source/components/Input.js

@@ -23,6 +23,7 @@ export type InputProps = {
   inputRef?: RefObject,
   showErrorState?: boolean,
   hideErrorState?: boolean,
+  id?: string,
   isShowingErrorOnFocus: boolean,
   isShowingErrorOnHover: boolean,
   label?: string | Element<any>,

source/skins/simple/FormFieldSkin.js

@@ -40,6 +40,7 @@ export function FormFieldSkin(props: Props) {
           aria-hidden
           className={props.theme[props.themeId].label}
           onClick={props.focusChild}
+          htmlFor={props.id}
         >
           {props.label}
         </label>

source/skins/simple/InputSkin.js

@@ -57,6 +57,7 @@ export const InputSkin = (props: Props) => {
       disabled={props.disabled}
       label={props.label}
       error={props.error}
+      id={props.id}
       isShowingErrorOnHover={props.isShowingErrorOnHover}
       isShowingErrorOnFocus={props.isShowingErrorOnFocus}
       formFieldRef={props.inputRef}