Added Molecules PasswordFormField

Author: wintondeshong

src/index.ts

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

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

@@ -0,0 +1,21 @@
+import { text, boolean } from "@storybook/addon-knobs";
+import React from "react";
+import { PasswordFormField } from "./password-form-field";
+
+export default {
+    component: PasswordFormField,
+    title: "Molecules | Forms / Password Form Field",
+};
+
+export const passwordFormFieldKnobs = () => (
+    <PasswordFormField
+        disabled={boolean("Disabled", false)}
+        errorMessage={text("Error Message", "")}
+        label={text("Label", "Password")}
+        onChange={() => {}}
+        placeholder={text("Placeholder", "Placeholder...")}
+        required={boolean("Required", true)}
+        value={text("Value", "Password")}
+        isValid={boolean("Valid", true)}
+    />
+);

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

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

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

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import uuid from "uuid";
+import { InputProperties } from "../../atoms/interfaces/input-properties";
+import { PasswordInput } from "../../atoms/forms/password-input";
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface PasswordFormFields extends InputProperties {
+    errorMessage?: string;
+
+    /**
+     * Unique identifier used select the underlying <input> for functional/e2e testing
+     */
+    inputTestId?: string;
+
+    label: string;
+    required?: boolean;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const PasswordFormField: React.FC<PasswordFormFields> = (
+    props: PasswordFormFields
+) => {
+    const {
+        disabled,
+        errorMessage,
+        inputTestId,
+        isValid,
+        label,
+        placeholder,
+        onChange,
+        required,
+        value,
+    } = props;
+
+    const fieldId = uuid.v4();
+    const [isVisible, setIsVisible] = useState<boolean>(false);
+    const disableShowHide = value == null || value === "" || disabled;
+    const passwordShowHideLabel = isVisible ? "Hide" : "Show";
+
+    const onChangeIsVisible = (
+        event: React.MouseEvent<Element, MouseEvent>
+    ) => {
+        event.preventDefault();
+
+        setIsVisible(!isVisible);
+    };
+
+    if (disabled && isVisible === true) {
+        setIsVisible(false);
+    }
+
+    return (
+        <div className={`c-form-field -password ${isValid ? "" : "-invalid"}`}>
+            <label htmlFor={fieldId}>
+                {label}
+                {required && (
+                    <span className="c-form-field__required">{" *"}</span>
+                )}
+            </label>
+            {// if
+            !disableShowHide && (
+                <button
+                    type="button"
+                    aria-label={`${passwordShowHideLabel} Password`}
+                    onClick={(event) => onChangeIsVisible(event)}>
+                    {passwordShowHideLabel}
+                </button>
+            )}
+            <PasswordInput
+                disabled={disabled}
+                id={fieldId}
+                isValid={isValid}
+                isVisible={isVisible}
+                onChange={onChange}
+                placeholder={placeholder}
+                testId={inputTestId}
+                value={value}
+            />
+            <div className="c-form-field__bottom">
+                <div className="c-form-field__bottom__errors">
+                    <label>{errorMessage}</label>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { PasswordFormField };
+
+// #endregion Exports