Added Molecules InputFormField

Author: wintondeshong

src/index.ts

@@ -66,6 +66,7 @@ export { ErrorBanner } from "./molecules/errors/error-banner";
 // Form Fields
 
 export { CheckboxFormField } from "./molecules/form-fields/checkbox-form-field";
+export { InputFormField } from "./molecules/form-fields/input-form-field";
 
 // #endregion Molecules
 

src/molecules/form-fields/input-form-field.stories.tsx

@@ -0,0 +1,24 @@
+import { InputFormField } from "./input-form-field";
+import { text, boolean, number, select } from "@storybook/addon-knobs";
+import React from "react";
+import { InputTypes } from "../../atoms/constants/input-types";
+
+export default {
+    component: InputFormField,
+    title: "Molecules | Forms / Input Form Field",
+};
+
+export const inputFormFieldKnobs = () => (
+    <InputFormField
+        disabled={boolean("Disabled", false)}
+        errorMessage={text("Error Message", "")}
+        isValid={boolean("Valid", true)}
+        label={text("Label", "Label")}
+        maxLength={number("Max Length", 30)}
+        onChange={() => {}}
+        placeholder={text("Placeholder", "Placeholder...")}
+        required={boolean("Required", true)}
+        type={select("Type", InputTypes, InputTypes.Text)}
+        value={text("Value", "Input Value")}
+    />
+);

src/molecules/form-fields/input-form-field.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { InputFormField } from "./input-form-field";
+import faker from "faker";
+
+describe("InputFormField", () => {
+    test("when default props, renders input with label", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByLabelText } = render(
+            <InputFormField label={expected} onChange={() => {}} />
+        );
+
+        // Assert
+        expect(getByLabelText(expected)).not.toBeNull();
+    });
+});

src/molecules/form-fields/input-form-field.tsx

@@ -0,0 +1,127 @@
+import React, { forwardRef, Ref, RefObject } from "react";
+import uuid from "uuid";
+import { CollectionUtils, StringUtils } from "andculturecode-javascript-core";
+import { InputCharacterCount } from "../../atoms/forms/input-character-count";
+import { InputTypes } from "../../atoms/constants/input-types";
+import { InputProperties } from "../../atoms/interfaces/input-properties";
+
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
+
+const COMPONENT_CLASS = "c-form-field";
+
+// #endregion Constants
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface InputFormFieldProps extends InputProperties {
+    errorMessage?: string;
+    errorMessages?: string[];
+
+    /**
+     * Unique identifier used select the underlying <input> for functional/e2e testing
+     */
+    inputTestId?: string;
+
+    fieldId?: string;
+    label: string;
+    maxLength?: number;
+    name?: string;
+    ref?: RefObject<HTMLInputElement>;
+    required?: boolean;
+    showCharacterCount?: boolean;
+    showLabelForScreenReadersOnly?: boolean;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const InputFormField: React.RefForwardingComponent<
+    HTMLInputElement,
+    InputFormFieldProps
+> = forwardRef((props: InputFormFieldProps, ref: Ref<HTMLInputElement>) => {
+    const {
+        disabled,
+        errorMessage,
+        errorMessages,
+        inputTestId,
+        isValid,
+        label,
+        maxLength,
+        name,
+        onChange,
+        placeholder,
+        required,
+        showCharacterCount,
+        showLabelForScreenReadersOnly,
+        type,
+        value,
+    } = props;
+
+    const fieldId = props.fieldId ?? uuid.v4();
+
+    return (
+        <div className={`${COMPONENT_CLASS} ${isValid ? "" : "-invalid"}`}>
+            <label htmlFor={fieldId}>
+                {showLabelForScreenReadersOnly ? (
+                    <span className="sr-only">{label}</span>
+                ) : (
+                    <React.Fragment>{label}</React.Fragment>
+                )}
+                {required && (
+                    <span className={`${COMPONENT_CLASS}__required`}>
+                        {" *"}
+                    </span>
+                )}
+            </label>
+            <input
+                data-test-id={inputTestId}
+                disabled={disabled}
+                id={fieldId}
+                placeholder={placeholder}
+                maxLength={maxLength ?? 20}
+                name={name}
+                onChange={onChange}
+                ref={ref}
+                type={type ?? InputTypes.Text}
+                value={value}
+            />
+            <div className={`${COMPONENT_CLASS}__bottom`}>
+                <div className={`${COMPONENT_CLASS}__bottom__errors`}>
+                    {// if
+                    StringUtils.hasValue(errorMessage) && (
+                        <label>{errorMessage}</label>
+                    )}
+                    {// if
+                    CollectionUtils.hasValues(errorMessages) &&
+                        errorMessages?.map((s: string) => (
+                            <label key={s}>{s}</label>
+                        ))}
+                </div>
+                {// if
+                showCharacterCount !== false && (
+                    <InputCharacterCount
+                        currentLength={(value ?? "").length}
+                        maxLength={maxLength ?? 20}
+                    />
+                )}
+            </div>
+        </div>
+    );
+});
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { InputFormField };
+
+// #endregion Exports