Added molecules examples

Author: kpunith8

config/componentData.js

@@ -0,0 +1,106 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ProgressBar from "../ProgressBar";
+import EyeIcon from "../EyeIcon";
+import TextInput from "../TextInput";
+
+/** Password input with integrated label, quality tips, and show password toggle. */
+class PasswordInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showPassword: false
+    };
+  }
+
+  toggleShowPassword = event => {
+    this.setState(prevState => {
+      return { showPassword: !prevState.showPassword };
+    });
+    if (event) event.preventDefault();
+  };
+
+  render() {
+    const {
+      htmlId,
+      value,
+      label,
+      error,
+      onChange,
+      placeholder,
+      maxLength,
+      showVisibilityToggle,
+      quality,
+      ...props
+    } = this.props;
+    const { showPassword } = this.state;
+
+    return (
+      <TextInput
+        htmlId={htmlId}
+        label={label}
+        placeholder={placeholder}
+        type={showPassword ? "text" : "password"}
+        onChange={onChange}
+        value={value}
+        maxLength={maxLength}
+        error={error}
+        required
+        {...props}
+      >
+        {showVisibilityToggle && (
+          <a
+            href=""
+            onClick={this.toggleShowPassword}
+            style={{ marginLeft: 5 }}
+          >
+            <EyeIcon />
+          </a>
+        )}
+        {value.length > 0 && quality && (
+          <ProgressBar percent={quality} width={130} />
+        )}
+      </TextInput>
+    );
+  }
+}
+
+PasswordInput.propTypes = {
+  /** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */
+  htmlId: PropTypes.string.isRequired,
+
+  /** Input name. Recommend setting this to match object's property so a single change handler can be used by convention.*/
+  name: PropTypes.string.isRequired,
+
+  /** Password value */
+  value: PropTypes.any,
+
+  /** Input label */
+  label: PropTypes.string,
+
+  /** Function called when password input value changes */
+  onChange: PropTypes.func.isRequired,
+
+  /** Max password length accepted */
+  maxLength: PropTypes.number,
+
+  /** Placeholder displayed when no password is entered */
+  placeholder: PropTypes.string,
+
+  /** Set to true to show the toggle for displaying the currently entered password */
+  showVisibilityToggle: PropTypes.bool,
+
+  /** Display password quality visually via ProgressBar, accepts a number between 0 and 100 */
+  quality: PropTypes.number,
+
+  /** Validation error to display */
+  error: PropTypes.string
+};
+
+PasswordInput.defaultProps = {
+  maxLength: 50,
+  showVisibilityToggle: false,
+  label: "Password"
+};
+
+export default PasswordInput;

src/components/PasswordInput/PasswordInput.js

@@ -0,0 +1 @@
+export { default } from './PasswordInput';

src/components/PasswordInput/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Label from "../Label";
+
+/** Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker. */
+function TextInput({
+  htmlId,
+  name,
+  label,
+  type = "text",
+  required = false,
+  onChange,
+  placeholder,
+  value,
+  error,
+  children,
+  ...props
+}) {
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <Label htmlFor={htmlId} label={label} required={required} />
+      <input
+        id={htmlId}
+        type={type}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        style={error && { border: "solid 1px red" }}
+        {...props}
+      />
+      {children}
+      {error && (
+        <div className="error" style={{ color: "red" }}>
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+TextInput.propTypes = {
+  /** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */
+  htmlId: PropTypes.string.isRequired,
+
+  /** Input name. Recommend setting this to match object's property so a single change handler can be used. */
+  name: PropTypes.string.isRequired,
+
+  /** Input label */
+  label: PropTypes.string.isRequired,
+
+  /** Input type */
+  type: PropTypes.oneOf(["text", "number", "password"]),
+
+  /** Mark label with asterisk if set to true */
+  required: PropTypes.bool,
+
+  /** Function to call onChange */
+  onChange: PropTypes.func.isRequired,
+
+  /** Placeholder to display when empty */
+  placeholder: PropTypes.string,
+
+  /** Value */
+  value: PropTypes.any,
+
+  /** String to display when error occurs */
+  error: PropTypes.string,
+
+  /** Child component to display next to the input */
+  children: PropTypes.node
+};
+
+export default TextInput;

src/components/TextInput/TextInput.js

@@ -0,0 +1 @@
+export { default } from './TextInput';

src/components/TextInput/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+import PasswordInput from "comp/PasswordInput";
+
+/** All features enabled */
+class ExampleAllFeatures extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      password: ""
+    };
+  }
+
+  getQuality() {
+    const length = this.state.password.length;
+    return length > 10 ? 100 : length * 10;
+  }
+
+  render() {
+    return (
+      <div>
+        <PasswordInput
+          htmlId="password-input-example-all-features"
+          name="password"
+          onChange={event => this.setState({ password: event.target.value })}
+          value={this.state.password}
+          minLength={8}
+          placeholder="Enter password"
+          showVisibilityToggle
+          quality={this.getQuality()}
+          {...this.props}
+        />
+      </div>
+    );
+  }
+}
+
+export default ExampleAllFeatures;

src/docs/examples/PasswordInput/ExampleAllFeatures.js

@@ -0,0 +1,18 @@
+import React from "react";
+import TextInput from "comp/TextInput";
+
+/** Required TextBox with error */
+export default class ExampleError extends React.Component {
+  render() {
+    return (
+      <TextInput
+        htmlId="example-optional"
+        label="First Name"
+        name="firstname"
+        onChange={() => {}}
+        required
+        error="First name is required."
+      />
+    );
+  }
+}

src/docs/examples/TextInput/ExampleError.js

@@ -0,0 +1,16 @@
+import React from "react";
+import TextInput from "comp/TextInput";
+
+/** Optional TextBox */
+export default class ExampleOptional extends React.Component {
+  render() {
+    return (
+      <TextInput
+        htmlId="example-optional"
+        label="First Name"
+        name="firstname"
+        onChange={() => {}}
+      />
+    );
+  }
+}