Added Atoms CheckboxInput

Author: wintondeshong

src/atoms/forms/checkbox-input.stories.tsx

@@ -0,0 +1,17 @@
+import { CheckboxInput } from "./checkbox-input";
+import React from "react";
+import { boolean, text } from "@storybook/addon-knobs";
+
+export default {
+    title: "Atoms | Forms / Checkbox Input",
+    component: CheckboxInput,
+};
+
+export const checkboxInputKnobs = () => (
+    <CheckboxInput
+        checked={boolean("Checked", false)}
+        label={text("Label", "Remember Me")}
+        disabled={boolean("Disabled", false)}
+        onChange={() => {}}
+    />
+);

src/atoms/forms/checkbox-input.test.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("CheckboxInput", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/6", () => {});
+});

src/atoms/forms/checkbox-input.tsx

@@ -0,0 +1,61 @@
+import { InputTypes } from "../constants/input-types";
+import React from "react";
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface CheckboxInputProperties {
+    checked: boolean;
+    disabled?: boolean;
+    label: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
+
+const BASE_CLASS_NAME = "e-checkbox";
+
+// #endregion Constants
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const CheckboxInput: React.FC<CheckboxInputProperties> = (
+    props: CheckboxInputProperties
+) => {
+    const { checked, disabled, label, onChange } = props;
+    let className = BASE_CLASS_NAME;
+    if (disabled) {
+        className += " -disabled";
+    }
+
+    return (
+        <label className={className}>
+            {label}
+            <input
+                checked={checked}
+                disabled={disabled}
+                onChange={onChange}
+                type={InputTypes.Checkbox}
+                value={checked.toString()}
+            />
+            <span className={`${BASE_CLASS_NAME}__checkmark`}></span>
+        </label>
+    );
+};
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Export
+// -----------------------------------------------------------------------------------------
+
+export { CheckboxInput };
+
+// #endregion Export

src/index.ts

@@ -6,6 +6,7 @@ export { Anchor } from "./atoms/anchors/anchor";
 export { AnchorWithIcon } from "./atoms/anchors/anchor-with-icon";
 export { Button } from "./atoms/buttons/button";
 export { CheckboxButton } from "./atoms/forms/checkbox-button";
+export { CheckboxInput } from "./atoms/forms/checkbox-input";
 
 // Icons
 export { Icon } from "./atoms/icons/icon";