Added atoms TextInput and TextInputIcon

wintondeshong · wintondeshong · commit d567b7b80a82 · 2020-07-16T11:42:56.000-04:00
diff --git a/src/assets/scss/4-elements/__elements.scss b/src/assets/scss/4-elements/__elements.scss
@@ -13,4 +13,10 @@
 @import "anchors";
 @import "buttons";
 @import "checkboxes";
+@import "fieldsets";
+@import "forms";
+@import "headings";
 @import "inputs";
+@import "lists";
+@import "paragraphs";
+@import "text-area";
diff --git a/src/assets/scss/4-elements/_fieldsets.scss b/src/assets/scss/4-elements/_fieldsets.scss
@@ -0,0 +1,4 @@
+fieldset {
+    border: none;
+    margin: none;
+}
diff --git a/src/assets/scss/4-elements/_forms.scss b/src/assets/scss/4-elements/_forms.scss
@@ -0,0 +1,3 @@
+/*------------------------------------*\
+  FORMS
+\*------------------------------------*/
diff --git a/src/assets/scss/4-elements/_headings.scss b/src/assets/scss/4-elements/_headings.scss
@@ -0,0 +1,13 @@
+/*------------------------------------*\
+  HEADINGS
+\*------------------------------------*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+}
diff --git a/src/assets/scss/4-elements/_lists.scss b/src/assets/scss/4-elements/_lists.scss
@@ -0,0 +1,31 @@
+/*------------------------------------*\
+  LISTS
+\*------------------------------------*/
+
+ul {
+    position: relative;
+    list-style: none;
+    margin-left: 0;
+
+    > li {
+        @include margin-bottom(10px);
+    }
+
+    &.-has-icon {
+        li {
+            @include padding-left(10px);
+        }
+
+        &.-check > li:before {
+            position: absolute;
+            left: 0;
+            font-size: 20px;
+        }
+    }
+}
+
+ol {
+    > li {
+        @include margin-bottom(10px);
+    }
+}
diff --git a/src/assets/scss/4-elements/_paragraphs.scss b/src/assets/scss/4-elements/_paragraphs.scss
@@ -0,0 +1,6 @@
+/*------------------------------------*\
+  PARAGRAPHS
+\*------------------------------------*/
+
+p {
+}
diff --git a/src/assets/scss/4-elements/_text-area.scss b/src/assets/scss/4-elements/_text-area.scss
@@ -0,0 +1,22 @@
+textarea {
+    @include placeholder() {
+        color: get-color-neutral("70");
+    }
+    @include font-style(
+        $font-primary,
+        "base",
+        get-color-neutral("dark-text"),
+        400
+    );
+    @include padding(13px, 18px);
+
+    &:focus {
+        @include placeholder() {
+            color: get-color-neutral("50");
+        }
+    }
+
+    border: 1px solid get-color-neutral("30");
+    border-radius: 5px;
+    box-sizing: border-box;
+}
diff --git a/src/atoms/forms/text-input-icon.stories.tsx b/src/atoms/forms/text-input-icon.stories.tsx
@@ -0,0 +1,20 @@
+import { boolean, select } from "@storybook/addon-knobs";
+import { TextInputIcon } from "./text-input-icon";
+import React from "react";
+import { Icons } from "../constants/icons";
+import { IconSizes } from "../constants/icon-sizes";
+
+export default {
+    component: TextInputIcon,
+    title: "Atoms | Forms / Text Input Icon",
+};
+
+export const textInputIconKnobs = () => (
+    <TextInputIcon
+        icon={select("Icon", Icons, Icons.Search)}
+        iconSize={boolean("Icon Size", true) ? IconSizes.Large : IconSizes.Base}
+        id="text-input-icon-stories"
+        onChange={() => {}}
+        placeholder="Type to search..."
+    />
+);
diff --git a/src/atoms/forms/text-input-icon.test.tsx b/src/atoms/forms/text-input-icon.test.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("TextInputIcon", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/9", () => {});
+});
diff --git a/src/atoms/forms/text-input-icon.tsx b/src/atoms/forms/text-input-icon.tsx
@@ -0,0 +1,41 @@
+import { TextInput, TextInputProps } from "./text-input";
+import React from "react";
+import { Icons } from "../constants/icons";
+import { IconSizes } from "../constants/icon-sizes";
+import { Icon } from "../icons/icon";
+
+// -------------------------------------------------------------------------------------------------
+// #region Interfaces
+// -------------------------------------------------------------------------------------------------
+
+export interface TextInputIconProps extends TextInputProps {
+    icon: Icons;
+    iconSize?: IconSizes;
+}
+
+// #endregion Interfaces
+
+// -------------------------------------------------------------------------------------------------
+// #region Component
+// -------------------------------------------------------------------------------------------------
+
+const TextInputIcon: React.FC<TextInputIconProps> = (
+    props: TextInputIconProps
+) => {
+    return (
+        <div className="c-text-input-icon">
+            <Icon type={props.icon} size={props.iconSize || IconSizes.Large} />
+            <TextInput {...props} />
+        </div>
+    );
+};
+
+// #endregion Component
+
+// -------------------------------------------------------------------------------------------------
+// #region Exports
+// -------------------------------------------------------------------------------------------------
+
+export { TextInputIcon };
+
+// #endregion Exports
diff --git a/src/atoms/forms/text-input.stories.tsx b/src/atoms/forms/text-input.stories.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { text, boolean, number } from "@storybook/addon-knobs";
+import { TextInput } from "./text-input";
+import Faker from "faker";
+
+export default {
+    component: TextInput,
+    title: "Atoms | Forms / Text Input",
+};
+
+export const textInputKnobs = () => (
+    <TextInput
+        disabled={boolean("Disabled", false)}
+        id={Faker.random.uuid()}
+        maxLength={number("Max Length", 30)}
+        onChange={() => {}}
+        placeholder={text("Placeholder", "Placeholder...")}
+        value={text("Value", "Input Value")}
+        isValid={boolean("Valid", true)}
+    />
+);
diff --git a/src/atoms/forms/text-input.test.tsx b/src/atoms/forms/text-input.test.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("TextInput", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/9", () => {});
+});
diff --git a/src/atoms/forms/text-input.tsx b/src/atoms/forms/text-input.tsx
@@ -0,0 +1,64 @@
+import { InputTypes } from "../constants/input-types";
+import { InputProperties } from "../interfaces/input-properties";
+import React from "react";
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface TextInputProps extends InputProperties {
+    id: string;
+    maxLength?: number;
+    name?: string;
+
+    /**
+     * Unique identifier used select the underlying <input> for functional/e2e testing
+     */
+    testId?: string;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const TextInput: React.FC<TextInputProps> = (props: TextInputProps) => {
+    const {
+        ariaLabelledBy,
+        disabled,
+        id,
+        name,
+        onChange,
+        placeholder,
+        testId,
+        value,
+    } = props;
+
+    const maxLength = props.maxLength != null ? props.maxLength : 20;
+
+    return (
+        <input
+            aria-labelledby={ariaLabelledBy}
+            data-test-id={testId}
+            disabled={disabled}
+            id={id}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            name={name}
+            onChange={onChange}
+            type={InputTypes.Text}
+            value={value}
+        />
+    );
+};
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { TextInput };
+
+// #endregion Exports
diff --git a/src/index.ts b/src/index.ts
@@ -11,6 +11,8 @@ export { CheckboxButton } from "./atoms/forms/checkbox-button";
 export { CheckboxInput } from "./atoms/forms/checkbox-input";
 export { PasswordInput } from "./atoms/forms/password-input";
 export { SubmitButton } from "./atoms/forms/submit-button";
+export { TextInput } from "./atoms/forms/text-input";
+export { TextInputIcon } from "./atoms/forms/text-input-icon";
 
 // Icons
 export { Icon } from "./atoms/icons/icon";

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+/------------------------------------\`
	`2`	`+ FORMS`
	`3`	`+\------------------------------------/`