Add atoms PasswordInput component

Author: wintondeshong

src/assets/scss/4-elements/__elements.scss

@@ -13,3 +13,4 @@
 @import "anchors";
 @import "buttons";
 @import "checkboxes";
+@import "inputs";

src/assets/scss/4-elements/_inputs.scss

@@ -0,0 +1,30 @@
+input {
+    @include placeholder() {
+        color: get-color-neutral("70");
+    }
+    @include font-style($font-primary, "base", get-color-neutral("90"), 400);
+    @include padding(13px, 18px);
+
+    border: 1px solid get-color-neutral("30");
+    border-radius: 5px;
+    box-sizing: border-box;
+
+    &:focus {
+        @include placeholder() {
+            color: get-color-neutral("50");
+        }
+    }
+    &:placeholder-shown {
+        text-overflow: ellipsis;
+    }
+
+    &[type="email"]:disabled,
+    &[type="password"]:disabled,
+    &[type="text"]:disabled {
+        background-color: get-color-neutral("05");
+        border-color: get-color-neutral("50");
+        -webkit-text-fill-color: get-color-neutral("90");
+        opacity: 1; /* required on iOS */
+        cursor: not-allowed;
+    }
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import { PasswordInput } from "./password-input";
+import Faker from "faker";
+
+export default {
+    component: PasswordInput,
+    title: "Atoms | Forms / Password Input",
+};
+
+export const passwordInputKnobs = () => (
+    <PasswordInput
+        disabled={boolean("Disabled", false)}
+        onChange={() => {}}
+        id={Faker.random.uuid()}
+        isVisible={boolean("Is Visible", false)}
+        placeholder={text("Placeholder", "Please enter password.")}
+        value={text("Value", "Password")}
+        isValid={boolean("Is Valid", true)}
+    />
+);

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

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

src/atoms/forms/password-input.tsx

@@ -0,0 +1,62 @@
+import { InputProperties } from "../interfaces/input-properties";
+import { InputTypes } from "../constants/input-types";
+import React from "react";
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface PasswordInputProps extends InputProperties {
+    id: string;
+    isVisible: boolean;
+
+    /**
+     * Unique identifier used select the underlying <input> for functional/e2e testing
+     */
+    testId?: string;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const PasswordInput: React.FC<PasswordInputProps> = (
+    props: PasswordInputProps
+) => {
+    const {
+        disabled,
+        id,
+        isVisible,
+        onChange,
+        placeholder,
+        testId,
+        value,
+    } = props;
+
+    const type = isVisible ? InputTypes.Text : InputTypes.Password;
+
+    return (
+        <input
+            data-test-id={testId}
+            disabled={disabled}
+            id={id}
+            maxLength={20}
+            onChange={onChange}
+            placeholder={placeholder}
+            type={type}
+            value={value}
+        />
+    );
+};
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Export
+// -----------------------------------------------------------------------------------------
+
+export { PasswordInput };
+
+// #endregion Export

src/atoms/interfaces/input-properties.ts

@@ -0,0 +1,11 @@
+import { InputTypes } from "../constants/input-types";
+
+export interface InputProperties {
+    ariaLabelledBy?: string;
+    disabled?: boolean;
+    isValid?: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    type?: InputTypes;
+    value?: string;
+}

src/index.ts

@@ -5,8 +5,11 @@
 export { Anchor } from "./atoms/anchors/anchor";
 export { AnchorWithIcon } from "./atoms/anchors/anchor-with-icon";
 export { Button } from "./atoms/buttons/button";
+
+// Forms
 export { CheckboxButton } from "./atoms/forms/checkbox-button";
 export { CheckboxInput } from "./atoms/forms/checkbox-input";
+export { PasswordInput } from "./atoms/forms/password-input";
 
 // Icons
 export { Icon } from "./atoms/icons/icon";
@@ -33,6 +36,7 @@ export { SvgIcons } from "./atoms/constants/svg-icons";
 // -----------------------------------------------------------------------------------------
 
 // To support babel we must use isolatedModules=true, thus we cannot re-export named interfaces
+export * from "./atoms/interfaces/input-properties";
 export * from "./atoms/interfaces/svg-icon";
 
 // #endregion Interfaces