From dfce8c064d6a10fa93383c36a9fc7456a660b6ff Mon Sep 17 00:00:00 2001
From: Nick Grato <ngrato@gmail.com>
Date: Tue, 2 Apr 2024 14:57:25 -0700
Subject: [PATCH] commit (#54)

* commit

* fixing pr callouts and adding tool tip padding

---------

Co-authored-by: Nick Grato <nickgrato@ngrato-27545.local>
---
 src/components/Badge/Badge.tsx                | 13 +--
 src/components/Badge/index.ts                 |  2 +-
 src/components/Button/Button.module.scss      |  1 -
 src/components/Button/Button.tsx              | 66 +++++++++++-----
 src/components/Button/index.ts                |  2 +-
 src/components/Input/Input.module.scss        |  9 ++-
 src/components/Input/Input.tsx                | 72 +++++++++--------
 src/components/Input/index.ts                 |  2 +-
 src/components/Notification/Notification.tsx  | 26 ++----
 .../Notification/NotificationMessage.tsx      | 51 ++++++------
 src/components/Notification/index.ts          |  4 +-
 src/components/Notification/types.ts          | 26 ++++++
 src/components/Select/Select.module.scss      |  1 -
 src/components/Select/Select.tsx              | 12 ++-
 src/components/Switch/Switch.tsx              | 12 +--
 src/components/TextArea/TextArea.module.scss  |  9 ++-
 src/components/TextArea/TextArea.tsx          | 79 +++++++++++--------
 src/components/TextArea/index.ts              |  2 +-
 src/components/ToolTip/ToolTip.module.scss    |  5 ++
 src/components/ToolTip/ToolTip.tsx            |  6 +-
 src/components/ToolTip/index.ts               |  2 +-
 src/components/index.ts                       | 20 ++---
 src/stories/Badge.stories.tsx                 | 25 +++---
 src/stories/Button.stories.tsx                |  7 ++
 src/stories/Input.stories.tsx                 |  2 +-
 25 files changed, 267 insertions(+), 189 deletions(-)

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 4d4b768..e063f5f 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,22 +1,15 @@
 import React from 'react';
 import styles from './Badge.module.scss';
 
-export enum BadgeCategoriesE {
-  PRIMARY = 'primary',
-  SECONDARY = 'secondary',
-}
+export type BadgeCategoriesT = 'primary' | 'secondary';
 
 export type BadgePropsT = {
   name: string;
-  category: BadgeCategoriesE;
+  category: BadgeCategoriesT;
   classProp?: string;
 };
 
-const Badge = ({
-  name,
-  category = BadgeCategoriesE.PRIMARY,
-  classProp = '',
-}: BadgePropsT) => {
+const Badge = ({ name, category = 'primary', classProp = '' }: BadgePropsT) => {
   return (
     <span
       className={`
diff --git a/src/components/Badge/index.ts b/src/components/Badge/index.ts
index 40530bd..0bf8487 100644
--- a/src/components/Badge/index.ts
+++ b/src/components/Badge/index.ts
@@ -1 +1 @@
-export { default, BadgeCategoriesE } from './Badge';
+export { default, type BadgeCategoriesT } from './Badge';
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 3ba5c06..dabd29f 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -7,7 +7,6 @@
   line-height: 24px;
   border-radius: $button-border-radius;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
-  text-transform: capitalize;
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index ed4181b..3ef82fa 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -27,28 +27,34 @@ export type ButtonPropsT = {
   category?: ButtonCategoriesT;
   size?: ButtonSizesT;
   disabled?: boolean;
-  icon?: IconT;
+  icon?: IconT | React.ReactNode;
   iconPlacedRight?: boolean;
   href?: string;
   target?: string;
   onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
   classProp?: string;
+  LinkComponent?: React.ComponentType<{
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+    id?: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    target?: string;
+  }>;
 };
 
 type ButtonIconT = {
-  icon: IconT | undefined;
+  icon: IconT | React.ReactNode;
   hasText: boolean;
   position: 'left' | 'right';
 };
 
 const ButtonIcon = ({ icon, hasText, position = 'left' }: ButtonIconT) => {
-  if (!icon) {
-    return <></>;
-  }
+  if (typeof icon !== 'string') return <>{icon}</>;
 
   return (
     <Icon
-      name={icon}
+      name={icon as IconT}
       color="currentColor"
       size={22}
       classProp={hasText ? styles[position] : ''}
@@ -71,10 +77,11 @@ const Button = ({
   href,
   target = '_self',
   classProp = '',
+  LinkComponent,
 }: ButtonPropsT) => {
   const content = (
     <>
-      {!iconPlacedRight && (
+      {!iconPlacedRight && icon && (
         <ButtonIcon
           icon={icon}
           hasText={Boolean(text?.length)}
@@ -85,7 +92,7 @@ const Button = ({
       {/* Button Text  */}
       {text}
 
-      {iconPlacedRight && (
+      {iconPlacedRight && icon && (
         <ButtonIcon
           icon={icon}
           hasText={Boolean(text?.length)}
@@ -106,19 +113,36 @@ const Button = ({
     ${active && styles['button_' + category + '_active']}
   `;
 
-  return href ? (
-    // ANCHOR LINK
-    <a
-      className={className}
-      id={id}
-      target={target}
-      href={href}
-      onClick={onClick}
-    >
-      {content}
-    </a>
-  ) : (
-    // BUTTON
+  if (href && LinkComponent) {
+    // To support NextJs Link
+    return (
+      <LinkComponent
+        className={className}
+        href={href}
+        onClick={onClick}
+        target={target}
+      >
+        {content}
+      </LinkComponent>
+    );
+  }
+
+  if (href) {
+    // Fall back to a standard <a> tag if LinkComponent is not provided
+    return (
+      <a
+        className={className}
+        id={id}
+        target={target}
+        href={href}
+        onClick={onClick}
+      >
+        {content}
+      </a>
+    );
+  }
+  // Button logic remains unchanged
+  return (
     <button
       className={className}
       id={id}
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 6c70852..d2a1f84 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,2 +1,2 @@
-export { default, type ButtonT, ButtonCategoriesT, ButtonSizesT } from './Button';
+export { default, type ButtonT, type ButtonCategoriesT, type ButtonSizesT } from './Button';
 
diff --git a/src/components/Input/Input.module.scss b/src/components/Input/Input.module.scss
index 5592fe3..2f22973 100644
--- a/src/components/Input/Input.module.scss
+++ b/src/components/Input/Input.module.scss
@@ -7,7 +7,6 @@
     position: relative;
     flex-direction: column;
     width: 100%;
-    padding-bottom: 10px;
 
     label {
       @include font-size(16);
@@ -20,6 +19,12 @@
         color: $color-semantic-critical;
       }
     }
+  }
+
+  &_container {
+    display: flex;
+    position: relative;
+    flex-direction: column;
 
     input {
       @include font-size(16);
@@ -73,7 +78,7 @@
 
 @mixin icon() {
   position: absolute;
-  top: 44px;
+  top: 14px;
   right: 12px;
 }
 
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index fe49278..b74fe0f 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -43,10 +43,6 @@ type InputProps = {
   name: string;
   type?: InputT;
   info?: string;
-  classProp?: string;
-  onBlur?: Function;
-  onFocus?: Function;
-  onChange?: Function;
   validator?: Function;
   required?: boolean;
   isError?: boolean;
@@ -60,6 +56,11 @@ type InputProps = {
   id?: string;
   readOnly?: boolean;
   showLabel?: boolean;
+  onBlur?: Function;
+  onFocus?: Function;
+  onChange?: Function;
+  mask?: RegExp;
+  classProp?: string;
 };
 
 const Input = forwardRef(
@@ -71,9 +72,7 @@ const Input = forwardRef(
       type = 'text',
       name,
       info = '',
-      classProp = '',
       onChange,
-      onBlur,
       onFocus,
       validator = () => true,
       required = false,
@@ -88,6 +87,9 @@ const Input = forwardRef(
       id,
       readOnly,
       showLabel = true,
+      onBlur,
+      mask,
+      classProp = '',
     }: InputProps,
     ref
   ) => {
@@ -140,8 +142,8 @@ const Input = forwardRef(
     }, [isDirty, isValid, isError]);
 
     useEffect(() => {
-      setShowInfo(Boolean(info.length) && !showError);
-    }, [info, showError]);
+      setShowInfo(Boolean(info.length));
+    }, [info]);
 
     /**
      * Handle Input Change
@@ -151,11 +153,13 @@ const Input = forwardRef(
       event: ChangeEvent<HTMLInputElement>
     ): ChangeEvent<HTMLInputElement> => {
       const newValue = event.target.value;
-      typeof onChange === 'function' && onChange(event);
 
+      if (mask && !mask.test(newValue)) return event;
+      typeof onChange === 'function' && onChange(event);
       // If initial value was empty any change makes form dirty
       const isDirty = initialValue === '' ? true : initialValue !== newValue;
       setIsDirty(isDirty);
+
       return event;
     };
 
@@ -192,30 +196,32 @@ const Input = forwardRef(
           </label>
         )}
 
-        <input
-          readOnly={readOnly}
-          ref={inputRef}
-          aria-label={label}
-          id={id}
-          type={type}
-          name={name}
-          value={value}
-          required={required}
-          placeholder={placeholder ? placeholder : label}
-          onChange={handleOnChange}
-          onBlur={handleOnBlur}
-          onFocus={handleOnFocus}
-          maxLength={maxLength}
-          minLength={minLength}
-          pattern={pattern}
-          className={`${icon && styles.has_icon} ${
-            showError && styles.has_error
-          }`}
-        />
-
-        {icon ? (
-          <Icon name={icon} classProp={styles['icon_' + iconColor]} />
-        ) : null}
+        <div className={styles.input_container}>
+          <input
+            readOnly={readOnly}
+            ref={inputRef}
+            aria-label={label}
+            id={id}
+            type={type}
+            name={name}
+            value={value}
+            required={required}
+            placeholder={placeholder ? placeholder : label}
+            onChange={handleOnChange}
+            onFocus={handleOnFocus}
+            maxLength={maxLength}
+            minLength={minLength}
+            onBlur={handleOnBlur}
+            pattern={pattern}
+            className={`${icon && styles.has_icon} ${
+              showError && styles.has_error
+            }`}
+          />
+
+          {icon ? (
+            <Icon name={icon} classProp={styles['icon_' + iconColor]} />
+          ) : null}
+        </div>
 
         {/* Error Message */}
         {showError ? (
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
index bad2b96..2778bcd 100644
--- a/src/components/Input/index.ts
+++ b/src/components/Input/index.ts
@@ -1 +1 @@
-export { default, type InputInterfaceT, type InputT, InputIconColorT } from './Input';
+export { default, type InputInterfaceT, type InputT, type InputIconColorT } from './Input';
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index afca04a..6f89390 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -1,8 +1,7 @@
 import React, { useState, forwardRef, useImperativeHandle } from 'react';
-import { NotificationTypesT, NotificationLocationT } from './types';
+import { NewNotificationT, DEFAULT_NOTIFICATION } from './types';
 import styles from './Notification.module.scss';
-import NotificationMessage, { CategoryT } from './NotificationMessage';
-import { IconT } from '../Icon/Icon';
+import NotificationMessage from './NotificationMessage';
 
 export type NotificationPropsT = {
   classProp?: string;
@@ -12,21 +11,6 @@ export type NotificationInterfaceT = {
   dispatchNotification: Function;
 };
 
-export type NewNotificationT = {
-  title: string;
-  description: string;
-  duration?: number;
-  autoClose?: boolean;
-  hasIcon?: boolean;
-  icon?: IconT;
-  type?: NotificationTypesT;
-  callback?: Function;
-  callbackCta?: string;
-  location?: NotificationLocationT;
-  pauseOnHover?: boolean;
-  category: CategoryT;
-};
-
 export interface NotificationI extends NewNotificationT {
   id: string;
 }
@@ -44,12 +28,18 @@ const Notification = forwardRef(
       };
     });
 
+    /**
+     * Defult options
+     * Note: other options that are optional are defaulted in child components
+     */
+
     /**
      * Dispatch Notification
      * @param newNotifcation
      */
     const dispatchNotification = (newNotifcation: NewNotificationT) => {
       const notification = {
+        ...DEFAULT_NOTIFICATION,
         ...newNotifcation,
         id: String(Date.now()),
       };
diff --git a/src/components/Notification/NotificationMessage.tsx b/src/components/Notification/NotificationMessage.tsx
index dc4266d..6b2ef02 100644
--- a/src/components/Notification/NotificationMessage.tsx
+++ b/src/components/Notification/NotificationMessage.tsx
@@ -1,13 +1,16 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import styles from './ToastMessage.module.scss';
 import FadeIn from '../FadeIn';
-import { NotificationTypesT, NotificationLocationT } from './types';
+import {
+  NotificationTypesT,
+  NotificationLocationT,
+  CategoryT,
+  DEFAULT_NOTIFICATION,
+} from './types';
 import { IconT } from '../Icon';
 import ToastMessage from './ToastMessage';
 import CrumbMessage from './CrumbMessage';
 
-export type CategoryT = 'toast' | 'crumb';
-
 export type NotificationMessagePropsT = {
   title: string;
   description: string;
@@ -21,7 +24,7 @@ export type NotificationMessagePropsT = {
   location?: NotificationLocationT;
   pauseOnHover?: boolean;
   hasIcon?: boolean;
-  category: CategoryT;
+  category?: CategoryT;
   icon?: IconT;
   classProp?: string;
 };
@@ -35,11 +38,11 @@ const NotificationMessage = ({
   callbackCta = 'Confirm',
   duration = 2000,
   autoClose = true,
-  type = 'success',
-  location = 'top_right',
+  type = DEFAULT_NOTIFICATION.type,
+  location = DEFAULT_NOTIFICATION.location,
   pauseOnHover = true,
   hasIcon = false,
-  category,
+  category = DEFAULT_NOTIFICATION.category,
   icon,
 }: NotificationMessagePropsT) => {
   const [isOpen, setIsOpen] = useState(true);
@@ -203,7 +206,22 @@ const NotificationMessage = ({
     ></div>
   );
 
-  const renderMessage = (param: CategoryT) => {
+  const renderMessage = (param: CategoryT | undefined) => {
+    const Toast = (
+      <ToastMessage
+        title={title}
+        description={description}
+        ref={notificationRef}
+        callback={callback}
+        callbackCta={callbackCta}
+        type={type}
+        mouseEnter={handleMouseEnter}
+        mouseLeave={handleMouseLeave}
+        close={handleClose}
+        progressBar={ProgressBar}
+      />
+    );
+
     switch (param) {
       case 'crumb':
         return (
@@ -219,20 +237,9 @@ const NotificationMessage = ({
           />
         );
       case 'toast':
-        return (
-          <ToastMessage
-            title={title}
-            description={description}
-            ref={notificationRef}
-            callback={callback}
-            callbackCta={callbackCta}
-            type={type}
-            mouseEnter={handleMouseEnter}
-            mouseLeave={handleMouseLeave}
-            close={handleClose}
-            progressBar={ProgressBar}
-          />
-        );
+        return Toast;
+      default:
+        return Toast;
     }
   };
 
diff --git a/src/components/Notification/index.ts b/src/components/Notification/index.ts
index 34006d7..21f1f80 100644
--- a/src/components/Notification/index.ts
+++ b/src/components/Notification/index.ts
@@ -1,7 +1,5 @@
 export {
   default,
   type NotificationInterfaceT,
-  type NewNotificationT,
 } from './Notification';
-export { CategoryT } from './NotificationMessage';
-export { NotificationTypesT, NotificationLocationT } from './types';
+export { type NotificationTypesT, type NotificationLocationT , type CategoryT, type NewNotificationT} from './types';
diff --git a/src/components/Notification/types.ts b/src/components/Notification/types.ts
index c2c30c0..47f310c 100644
--- a/src/components/Notification/types.ts
+++ b/src/components/Notification/types.ts
@@ -1,3 +1,5 @@
+import { IconT } from '../Icon/Icon';
+
 export type NotificationTypesT =
   | 'neutral'
   | 'success'
@@ -12,3 +14,27 @@ export type NotificationLocationT =
   | 'bottom_center'
   | 'bottom_right'
   | 'bottom_left';
+
+export type CategoryT = 'toast' | 'crumb';
+
+export type NewNotificationT = {
+  title: string;
+  description: string;
+  duration?: number;
+  autoClose?: boolean;
+  hasIcon?: boolean;
+  icon?: IconT;
+  type?: NotificationTypesT;
+  callback?: Function;
+  callbackCta?: string;
+  location?: NotificationLocationT;
+  pauseOnHover?: boolean;
+  category?: CategoryT;
+};
+
+export const DEFAULT_NOTIFICATION: Partial<NewNotificationT> = {
+  type: 'success',
+  location: 'bottom_right',
+  category: 'toast',
+  description: '',
+};
diff --git a/src/components/Select/Select.module.scss b/src/components/Select/Select.module.scss
index 278b66f..2f88f69 100644
--- a/src/components/Select/Select.module.scss
+++ b/src/components/Select/Select.module.scss
@@ -7,7 +7,6 @@
     position: relative;
     flex-direction: column;
     width: 100%;
-    padding-bottom: 10px;
     position: relative;
 
     label {
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index d8e8eb0..28eb2a0 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -33,6 +33,7 @@ type SelectPropsT = {
   onChange?: Function;
   validator?: Function;
   required?: boolean;
+  showLabel?: boolean;
   isError?: boolean;
   customErrorMessage?: string;
   value: string | number | readonly string[] | undefined;
@@ -52,6 +53,7 @@ const Select = forwardRef(
       onFocus,
       validator = () => true,
       required = false,
+      showLabel = true,
       isError,
       customErrorMessage,
       value,
@@ -148,10 +150,12 @@ const Select = forwardRef(
           showError ? styles.select_error : null
         } ${classProp}`}
       >
-        <label htmlFor={id}>
-          {label}
-          <span> {required ? '*' : ''}</span>
-        </label>
+        {showLabel && (
+          <label htmlFor={id}>
+            {label}
+            <span> {required ? '*' : ''}</span>
+          </label>
+        )}
 
         <div className={styles.select_container}>
           <select
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 936b200..5edfc38 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -50,10 +50,6 @@ const Switch = forwardRef(
       };
     });
 
-    useEffect(() => {
-      typeof onChange === 'function' && onChange(isOn);
-    }, [isOn]);
-
     useEffect(() => {
       // If "on" find out if we put iconOn up or not
       if (isOn) {
@@ -71,7 +67,11 @@ const Switch = forwardRef(
 
     const handleSwitchClick = () => {
       if (disabled) return;
-      setIsOn((state) => !state);
+      setIsOn((state) => {
+        onChange(!state);
+
+        return !state;
+      });
     };
 
     return (
@@ -81,7 +81,7 @@ const Switch = forwardRef(
           role="switch"
           type="button"
           onClick={handleSwitchClick}
-          className={disabled && styles.disabled}
+          className={disabled ? styles.disabled : ''}
         >
           <div className={isOn ? styles.track_on : styles.track_off}>
             <div className={isOn ? styles.handle_on : styles.handle_off}>
diff --git a/src/components/TextArea/TextArea.module.scss b/src/components/TextArea/TextArea.module.scss
index 40bea22..6b31ea2 100644
--- a/src/components/TextArea/TextArea.module.scss
+++ b/src/components/TextArea/TextArea.module.scss
@@ -7,7 +7,6 @@
     position: relative;
     flex-direction: column;
     width: 100%;
-    padding-bottom: 10px;
 
     label {
       @include font-size(16);
@@ -20,6 +19,12 @@
         color: $color-semantic-critical;
       }
     }
+  }
+
+  &_container {
+    display: flex;
+    position: relative;
+    flex-direction: column;
 
     textarea {
       @include font-size(16);
@@ -74,7 +79,7 @@
 
 @mixin icon() {
   position: absolute;
-  top: 42px;
+  top: 14px;
   right: 12px;
 }
 
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index ce33493..6736e18 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -26,14 +26,11 @@ export type TextAreaIconColorT = 'success' | 'error' | 'default';
 
 type TextAreaPropsT = {
   label: string;
+  showLabel?: boolean;
   placeholder: string;
   toolTip?: string;
   name: string;
   info?: string;
-  classProp?: string;
-  onBlur?: Function;
-  onFocus?: Function;
-  onChange?: Function;
   disabled?: boolean;
   validator?: Function;
   required?: boolean;
@@ -44,13 +41,19 @@ type TextAreaPropsT = {
   value: string | number | readonly string[] | undefined;
   icon?: IconT;
   iconColor?: TextAreaIconColorT;
+  readOnly?: boolean;
   id?: string;
+  onBlur?: Function;
+  onFocus?: Function;
+  onChange?: Function;
+  classProp?: string;
 };
 
 const TextArea = forwardRef(
   (
     {
       label,
+      showLabel = true,
       placeholder,
       toolTip,
       name,
@@ -66,6 +69,7 @@ const TextArea = forwardRef(
       customErrorMessage,
       maxLength,
       minLength,
+      readOnly,
       value,
       icon,
       iconColor = 'default',
@@ -162,37 +166,42 @@ const TextArea = forwardRef(
           showError ? styles.text_area_error : null
         } ${classProp}`}
       >
-        <label className={styles.label}>
-          {label}
-          <span> {required ? '*' : ''}</span>
-          {toolTip && (
-            <ToolTip description={toolTip} classProp={styles.tool_tip}>
-              <Icon name="info" />
-            </ToolTip>
-          )}
-        </label>
-
-        <textarea
-          ref={textAreaRef}
-          id={id}
-          name={name}
-          value={value}
-          required={required}
-          placeholder={placeholder ? placeholder : label}
-          onChange={handleOnChange}
-          onBlur={handleOnBlur}
-          onFocus={handleOnFocus}
-          disabled={disabled}
-          maxLength={maxLength}
-          minLength={minLength}
-          className={`${icon && styles.has_icon} ${
-            showError && styles.has_error
-          }`}
-        ></textarea>
-
-        {icon ? (
-          <Icon name={icon} classProp={styles['icon_' + iconColor]} />
-        ) : null}
+        {showLabel && (
+          <label className={styles.label}>
+            {label}
+            <span> {required ? '*' : ''}</span>
+            {toolTip && (
+              <ToolTip description={toolTip} classProp={styles.tool_tip}>
+                <Icon name="info" />
+              </ToolTip>
+            )}
+          </label>
+        )}
+
+        <div className={styles.text_area_container}>
+          <textarea
+            readOnly={readOnly}
+            ref={textAreaRef}
+            id={id}
+            name={name}
+            value={value}
+            required={required}
+            placeholder={placeholder ? placeholder : label}
+            onChange={handleOnChange}
+            onBlur={handleOnBlur}
+            onFocus={handleOnFocus}
+            disabled={disabled}
+            maxLength={maxLength}
+            minLength={minLength}
+            className={`${icon && styles.has_icon} ${
+              showError && styles.has_error
+            }`}
+          ></textarea>
+
+          {icon ? (
+            <Icon name={icon} classProp={styles['icon_' + iconColor]} />
+          ) : null}
+        </div>
 
         {/* Error Message */}
         {showError ? (
diff --git a/src/components/TextArea/index.ts b/src/components/TextArea/index.ts
index 96227d6..5e4d2a9 100644
--- a/src/components/TextArea/index.ts
+++ b/src/components/TextArea/index.ts
@@ -1 +1 @@
-export { default, type TextAreaInterfaceT, TextAreaIconColorT } from './TextArea';
+export { default, type TextAreaInterfaceT, type TextAreaIconColorT } from './TextArea';
diff --git a/src/components/ToolTip/ToolTip.module.scss b/src/components/ToolTip/ToolTip.module.scss
index 91313c5..d3d270d 100644
--- a/src/components/ToolTip/ToolTip.module.scss
+++ b/src/components/ToolTip/ToolTip.module.scss
@@ -30,6 +30,7 @@ $tip-width: 250px;
 .right {
   right: 0px;
   transform: translate(100%);
+  padding-left: 12px;
   p {
     margin-top: 0px;
     margin-left: 10px;
@@ -39,6 +40,8 @@ $tip-width: 250px;
 .left {
   left: 0px;
   transform: translate(-100%);
+  padding-right: 12px;
+
   p {
     margin-top: 0px;
     margin-right: 10px;
@@ -49,12 +52,14 @@ $tip-width: 250px;
   left: 0px;
   top: 0px;
   transform: translate(0, -100%);
+  padding-bottom: 12px;
 }
 
 .bottom {
   left: 0px;
   bottom: 0px;
   transform: translate(0, 100%);
+  padding-top: 12px;
 }
 
 /*-------------------------------
diff --git a/src/components/ToolTip/ToolTip.tsx b/src/components/ToolTip/ToolTip.tsx
index 7f72d39..5dc6782 100644
--- a/src/components/ToolTip/ToolTip.tsx
+++ b/src/components/ToolTip/ToolTip.tsx
@@ -33,7 +33,11 @@ const ToolTip = ({
   return (
     <section className={styles.wrapper}>
       {/* Contents that trigger tool top */}
-      <div onMouseEnter={handleOpen} onMouseLeave={handleClose}>
+      <div
+        onMouseEnter={handleOpen}
+        onMouseLeave={handleClose}
+        className={styles.target}
+      >
         {children}
       </div>
 
diff --git a/src/components/ToolTip/index.ts b/src/components/ToolTip/index.ts
index c50d852..aeef91d 100644
--- a/src/components/ToolTip/index.ts
+++ b/src/components/ToolTip/index.ts
@@ -1 +1 @@
-export { default, ToolTipLocationT, ToolTipCategoriesT } from './ToolTip';
+export { default, type ToolTipLocationT, type ToolTipCategoriesT } from './ToolTip';
diff --git a/src/components/index.ts b/src/components/index.ts
index ccbf561..868dbbd 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,12 +1,12 @@
 export { default as Avatar } from './Avatar';
-export { default as Badge, BadgeCategoriesE } from './Badge';
+export { default as Badge, type BadgeCategoriesT } from './Badge';
 export { default as Pill } from './Pill';
 export { default as Dropdown, type AlignmentT, type dropdownT } from './Dropdown';
 export {
   default as Button,
   type ButtonT,
-  ButtonCategoriesT,
-  ButtonSizesT,
+  type ButtonCategoriesT,
+  type ButtonSizesT,
 } from './Button';
 export { default as Checkbox } from './Checkbox';
 export { default as CopyButton } from './CopyButton';
@@ -15,9 +15,9 @@ export {
   default as Notification,
   type NotificationInterfaceT,
   type NewNotificationT,
-  NotificationTypesT,
-  NotificationLocationT,
-  CategoryT
+  type NotificationTypesT,
+  type NotificationLocationT,
+  type CategoryT
 } from './Notification';
 export { default as Icon, type IconT } from './Icon';
 export { default as HubIcon, type HubIconT } from './HubIcon';
@@ -25,7 +25,7 @@ export {
   default as Input,
   type InputInterfaceT,
   type InputT,
-  InputIconColorT,
+  type InputIconColorT,
 } from './Input';
 export { default as Modal } from './Modal'
 export { default as ProgressBar } from './ProgressBar';
@@ -35,10 +35,10 @@ export { default as Switch, type switchT } from './Switch';
 export {
   default as TextArea,
   type TextAreaInterfaceT,
-  TextAreaIconColorT,
+  type TextAreaIconColorT,
 } from './TextArea';
 export {
   default as ToolTip,
-  ToolTipLocationT,
-  ToolTipCategoriesT, 
+  type ToolTipLocationT,
+  type ToolTipCategoriesT, 
 } from './ToolTip';
diff --git a/src/stories/Badge.stories.tsx b/src/stories/Badge.stories.tsx
index f56b2ae..8f782b0 100644
--- a/src/stories/Badge.stories.tsx
+++ b/src/stories/Badge.stories.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import Badge, { BadgeCategoriesE }from '../components/Badge/Badge'
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Badge, { BadgeCategoriesT } from '../components/Badge/Badge';
 
 export default {
   title: 'Example/Badge',
@@ -8,15 +8,12 @@ export default {
   argTypes: {
     category: {
       control: {
-        type: 'select', 
-        options: [
-          BadgeCategoriesE.PRIMARY,
-          BadgeCategoriesE.SECONDARY
-        ]
-      }
-    }
+        type: 'select',
+        options: ['primary', 'secondary'],
+      },
+    },
   },
-} as ComponentMeta<typeof Badge>
+} as ComponentMeta<typeof Badge>;
 
 const Template: ComponentStory<typeof Badge> = (args) => (
   <>
@@ -31,8 +28,8 @@ const Template: ComponentStory<typeof Badge> = (args) => (
   </>
 );
 
-export const Main = Template.bind({})
+export const Main = Template.bind({});
 Main.args = {
   name: 'Badge',
-  category: BadgeCategoriesE.PRIMARY
-}
+  category: 'primary',
+};
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 7018285..dbe702a 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -41,6 +41,13 @@ export default {
         ],
       },
     },
+    // Note: adding a react node as an option does not work in Story book
+    customIcon: {
+      control: {
+        type: 'select',
+        options: [],
+      },
+    },
     iconPlacedRight: {
       control: {
         type: 'boolean',
diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
index b040504..be1e1eb 100644
--- a/src/stories/Input.stories.tsx
+++ b/src/stories/Input.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Input from '../components/Input/Input';
 
 const initialValues = {
-  firstName: 'Dr.Duck',
+  firstName: '',
 };
 
 export default {