Added Molecules CheckboxFormField

Author: wintondeshong

src/atoms/forms/checkbox-input.tsx

@@ -1,6 +1,14 @@
 import { InputTypes } from "../constants/input-types";
 import React from "react";
 
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
+
+const ELEMENT_CLASS = "e-checkbox";
+
+// #endregion Constants
+
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
 // -----------------------------------------------------------------------------------------
@@ -14,14 +22,6 @@ export interface CheckboxInputProperties {
 
 // #endregion Interfaces
 
-// -----------------------------------------------------------------------------------------
-// #region Constants
-// -----------------------------------------------------------------------------------------
-
-const BASE_CLASS_NAME = "e-checkbox";
-
-// #endregion Constants
-
 // -----------------------------------------------------------------------------------------
 // #region Component
 // -----------------------------------------------------------------------------------------
@@ -30,7 +30,8 @@ const CheckboxInput: React.FC<CheckboxInputProperties> = (
     props: CheckboxInputProperties
 ) => {
     const { checked, disabled, label, onChange } = props;
-    let className = BASE_CLASS_NAME;
+
+    let className = ELEMENT_CLASS;
     if (disabled) {
         className += " -disabled";
     }
@@ -45,7 +46,7 @@ const CheckboxInput: React.FC<CheckboxInputProperties> = (
                 type={InputTypes.Checkbox}
                 value={checked.toString()}
             />
-            <span className={`${BASE_CLASS_NAME}__checkmark`}></span>
+            <span className={`${ELEMENT_CLASS}__checkmark`}></span>
         </label>
     );
 };

src/index.ts

@@ -63,6 +63,10 @@ export { Card } from "./molecules/cards/card";
 export { DropdownButton } from "./molecules/dropdown-button/dropdown-button";
 export { ErrorBanner } from "./molecules/errors/error-banner";
 
+// Form Fields
+
+export { CheckboxFormField } from "./molecules/form-fields/checkbox-form-field";
+
 // #endregion Molecules
 
 // -----------------------------------------------------------------------------------------

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { boolean, text } from "@storybook/addon-knobs";
+import { CheckboxFormField } from "./checkbox-form-field";
+
+export default {
+    component: CheckboxFormField,
+    title: "Molecules | Forms / Checkbox Form Field",
+};
+
+export const checkboxFormFieldKnobs = () => (
+    <CheckboxFormField
+        checked={boolean("Checked", false)}
+        label={text("Label", "Remember Me")}
+        disabled={boolean("Disabled", false)}
+        onChange={() => {}}
+    />
+);

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

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

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

@@ -0,0 +1,66 @@
+import {
+    CheckboxInput,
+    CheckboxInputProperties,
+} from "../../atoms/forms/checkbox-input";
+import React from "react";
+import { StringUtils } from "andculturecode-javascript-core";
+
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
+
+const COMPONENT_CLASS = "c-form-field";
+
+// #endregion Constants
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface CheckboxFormFieldProperties extends CheckboxInputProperties {
+    /**
+     * An error message to display under the current checkbox with more information.
+     *
+     * @type {string}
+     * @memberof CheckboxFormFieldProperties
+     */
+    errorMessage?: string;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const CheckboxFormField: React.FC<CheckboxFormFieldProperties> = (props) => {
+    const { checked, disabled, errorMessage, label, onChange } = props;
+
+    const hasError = StringUtils.hasValue(errorMessage);
+
+    return (
+        <div className={COMPONENT_CLASS}>
+            <CheckboxInput
+                checked={checked}
+                disabled={disabled}
+                label={label}
+                onChange={onChange}
+            />
+            {hasError && (
+                <div className={`${COMPONENT_CLASS}__errors`}>
+                    <label>{errorMessage}</label>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { CheckboxFormField };
+
+// #endregion Exports