commit (#54)

* commit * fixing pr callouts and adding tool tip padding --------- Co-authored-by: Nick Grato <[email protected]>
mozilla · Apr 2, 2024 · dfce8c0 · dfce8c0
1 parent 60c5b5b
commit dfce8c0
Show file tree

Hide file tree

Showing 25 changed files with 267 additions and 189 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()),
       };