@dhasdk/simple-ui 1.0.8 → 1.0.10

package/src/lib/Modal.tsx

@@ -1,220 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { twMerge } from "tailwind-merge";
-import close from '../assets/img/closeModal.svg';
-
-interface VariantType {
-  [key: string]: {
-    container: string;
-    title: string;
-    titleHeading: string;
-    body: string;
-    button: string;
-  };
-}
-
-// do not remove this, it is required to preload tailwind classes
-const blurLevels = 'backdrop-blur-xs backdrop-blur-md backdrop-blur-lg backdrop-blur-xl backdrop-blur-2xl backdrop-blur-3xl';
-
-const variants: VariantType = {
-  default: {
-    container: 'mx-8 md:mx-32 lg:mx-64 bg-white rounded-xs shadow-lg w-full max-w-lg px-2 pt-2 pb-4 md:pb-6 lg:pb-7 focus:outline-hidden ',
-    title: "flex justify-between items-center mb-4",
-    titleHeading: 'text-black',
-    body: '',
-    button: 'px-4 py-2 bg-gray-500 text-white rounded-xs hover:bg-gray-600 focus:outline-hidden focus:ring ring-gray-700',
-  },
-  darker: {
-    container: 'mx-8 md:mx-32 lg:mx-64 bg-slate-600 rounded-xs shadow-lg w-full max-w-lg px-2 pt-2 pb-4 md:pb-6 lg:pb-7 focus:outline-hidden text-slate-200 ',
-    title: "flex justify-between items-center mb-4",
-    titleHeading: 'text-slate-200',
-    body: '',
-    button: 'px-4 py-2 bg-slate-100 text-gray-700 rounded-xs hover:bg-slate-300 focus:outline-hidden focus:ring ring-gray-400',
-  },
-  dark: {
-    container: 'mx-8 md:mx-32 lg:mx-64 bg-zinc-800 rounded-xs shadow-lg w-full max-w-lg px-2 pt-2 pb-4 md:pb-6 lg:pb-7 focus:outline-hidden text-slate-200 ',
-    title: "flex justify-between items-center mb-4",
-    titleHeading: 'text-slate-200',
-    body: '',
-    button: 'px-4 py-2 bg-slate-200 text-gray-700 rounded-xs hover:bg-slate-400 focus:outline-hidden focus:ring ring-slate-500',
-  },
-};
-
-
-export interface AccessibleModalProps {
-  isOpen: boolean; // Controls modal visibility
-  variant?: string;
-  className?: string;
-  closeButton?: boolean;
-  blurLevel?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-  onClose: () => void; // Close handler
-  title: string; // Modal title for screen readers
-  children: React.ReactNode; // Modal content
-  clickOutsideCloses?: boolean; // Close modal w/ click outside box? Default true
-  displayClosingX?: boolean;    // Display closing 'x' in top right or not
-  closeButtonText?: string;     // Text label for close button, default is "Close"
-  continueButton?: boolean;     // Display a Continue button?
-  continueButtonText?: string;  // Text label for continue button, default is "Continue"
-  continueButtonHandler?: () => void; // handler for Continue button
-}
-
-export const Modal = ({isOpen, variant = 'default', onClose, title, className,
-  closeButton = true, clickOutsideCloses = false, displayClosingX = true, closeButtonText='Close',
-  continueButton = false, continueButtonHandler, continueButtonText = 'Continue', blurLevel,
-  children}: AccessibleModalProps) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-
-  const defaultContainerClasses = 'fixed inset-0 z-50 flex items-center justify-center bg-black/50';
-
-  const [containerClass, setContainerClass] = useState<string>('');
-
-  useEffect( () => {
-    if (blurLevel) {
-      // console.log('blurLevel: ' + blurLevel);
-      const blur = 'backdrop-blur-' + blurLevel;
-      // console.log('blur: ' + blur);
-      setContainerClass(twMerge(defaultContainerClasses, blur));
-      // setContainerClass(twMerge(defaultContainerClasses, 'backdrop-blur-xs'));
-      // console.log('blur set');
-    }
-    else {
-      setContainerClass(defaultContainerClasses);
-      // console.log('no blur');
-    }
-  }, [blurLevel]);
-
-  // console.log('blurLevel: ' + blurLevel);
-
-  useEffect(() => {
-    if (clickOutsideCloses) {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-          onClose();
-        }
-      }
-
-
-      // attach event listener
-      document.addEventListener('mousedown', handleClickOutside);
-
-      return () => {
-        // cleanup listener on unmount
-        document.removeEventListener('mousedown', handleClickOutside);
-      }
-    }
-
-  }, [onClose]);
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && isOpen) {
-        onClose();
-      }
-    };
-
-    const trapFocus = (event: KeyboardEvent) => {
-      const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      const firstElement = focusableElements?.[0];
-      const lastElement = focusableElements?.[focusableElements.length - 1];
-
-      if (event.key === "Tab" && focusableElements) {
-        if (event.shiftKey && document.activeElement === firstElement) {
-          event.preventDefault();
-          lastElement?.focus();
-        } else if (!event.shiftKey && document.activeElement === lastElement) {
-          event.preventDefault();
-          firstElement?.focus();
-        }
-      }
-    };
-
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-      window.addEventListener("keydown", handleKeyDown);
-      window.addEventListener("keydown", trapFocus);
-      closeButtonRef.current?.focus();
-    } else {
-      document.body.style.overflow = "auto";
-    }
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("keydown", trapFocus);
-      document.body.style.overflow = "auto";
-    };
-
-  }, [isOpen, onClose]);
-
-  if (!isOpen) return null;
-
-  const continueHandler = () => {
-    if (continueButtonHandler) {
-      continueButtonHandler() // user supplied continue handler
-    }
-    onClose();
-  }
-
-  return (
-    <div
-      className={containerClass}
-      id="backdrop"
-    >
-      {/* Modal Content */}
-      <div
-        className={twMerge(variants[variant].container, className)}
-        ref={modalRef}
-        aria-label="modal-title"
-        role="dialog"
-        aria-modal="true"
-
-      >
-        {/* Modal Header */}
-        <div className="flex flex-col items-end">
-        { displayClosingX &&
-          <button
-            // ref={closeButtonRef}
-            onClick={onClose}
-            className={twMerge("text-xl text-gray-500 hover:text-gray-700 focus:outline-hidden focus:ring",
-              variants[variant].titleHeading
-            )}
-            aria-label="Close modal"
-          >
-            <img src={close} alt="close icon"></img>
-          </button>
-          }
-        </div>
-        <div className={twMerge(variants[variant].title)}>
-          <h2 id="modal-title" className={twMerge("text-[20px] md:text-[24px] lg:text-[32px] font-medium text-gray-900 text-center w-full", variants[variant].titleHeading)}>
-            {title}
-          </h2>
-        </div>
-
-        {/* Modal Body */}
-        <div className={twMerge('text-center lg:text-[18px] px-2', variants[variant].body)}>{children}</div>
-
-        {/* Modal Footer */}
-        {continueButton || closeButton ?
-          <div className="mt-4 flex justify-end px-4">
-            { closeButton &&
-            <button
-              ref={closeButtonRef}
-              onClick={onClose}
-              className={twMerge(variants[variant].button)}
-            >
-              {closeButtonText}
-            </button> }
-            {/* continueButton = false, continueButtonHandler, */}
-            { continueButton &&
-            <button
-              onClick={continueHandler}
-              className={twMerge(variants[variant].button, 'ms-4')}
-            >{continueButtonText}</button>
-            }
-          </div>
-          : ''}
-      </div>
-    </div>
-  );
-};

package/src/lib/Pill--Pill.stories.tsx

@@ -1,98 +0,0 @@
-import { Meta} from '@storybook/react';
-import { Pill } from './Pill';
-
-// Import your images
-import pill from '../assets/img/pill.svg';
-import pillWhite from '../assets/img/pill-white.svg';
-import stethoscope from '../assets/img/stethoscope.svg';
-import stethoscopeWhite from '../assets/img/stethoscope-white.svg';
-import { useState } from 'react';
-// https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Filled
-
-export default {
-  title: 'Components/Pill',
-  component: Pill,
-  args: {
-    iconLeft: <img src={pill} alt='pill icon' />,
-    iconRight: <img src={stethoscope} alt='stethoscope icon' />,
-    children: 'Pill',
-  },
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'white', value: '#ffffff' },
-        { name: 'light', value: '#f0f0f0' },
-      ],
-    },
-  },
-} as Meta<typeof Pill>;
-
-
-export const Default = {
-  args: { }
-};
-
-export const PillSelect = () => {
-  const [selected, setSelected] = useState<boolean>(false);
-
-  const onClick = () => {
-    // do something & set selected or !selected
-    setSelected(!selected);
-  };
-
-  return (
-    <>
-    <Pill
-      iconLeft={<img src={pill} alt='pill icon' />}
-      iconLeftSelected={<img src={pillWhite} alt='pill icon' />}
-      iconRight={<img src={stethoscope} alt='stethoscope icon' />}
-      iconRightSelected={<img src={stethoscopeWhite} alt='stethoscope icon' />}
-      selected={selected}
-      onClick={onClick}
-    >Pill</Pill>
-    <div>{selected ? 'selected' : 'not selected'}</div>
-    </>
-  );
-}
-
-
-export const Disabled =() => {
-  return (
-    <Pill
-      disabled
-    >Pill</Pill>
-  );
-};
-
-export const IconLeft = () => {
-  return (
-    <Pill
-      iconLeft={<img src={pill} alt='pill icon' />}
-      selected={true}
-    >Pill</Pill>
-  );
-};
-
-export const IconRight = () => {
-  return (
-    <Pill
-      iconRight={<img src={pill} alt='pill icon' />}
-    >Pill</Pill>
-  );
-};
-
-
-export const NoIcons = () => {
-  return (
-    <Pill
-      iconLeft={null}
-      // iconLeftSelected={null}
-      iconRight={null}
-      // iconRightSelected={null}
-    >Pill</Pill>
-  );
-};
-
-

package/src/lib/Pill.spec.tsx

@@ -1,103 +0,0 @@
-import React, { createRef } from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Pill } from './Pill';
-import { vi } from 'vitest';
-import pill from '../assets/img/pill.svg';
-describe('Pill Component', () => {
-  it('renders the Pill with children and default styles when no icons are provided', () => {
-    render(<Pill>Test Pill</Pill>);
-    const button = screen.getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveTextContent('Test Pill');
-
-    // When no icons are provided, the children container should get "ml-6 mr-6"
-    const childrenDiv = button.querySelector('div');
-    expect(childrenDiv?.className).toMatch(/ml-6 mr-6/);
-  });
-
-  it('calls onClick handler when clicked', () => {
-    const onClickMock = vi.fn();
-    render(<Pill onClick={onClickMock}>Clickable Pill</Pill>);
-    const button = screen.getByRole('button');
-    fireEvent.click(button);
-    expect(onClickMock).toHaveBeenCalled();
-  });
-
-  it('renders left icon and applies proper margin when only iconLeft is provided', () => {
-    render(
-      <Pill iconLeft={pill} data-testid='icon-left'>
-        Pill with Left Icon
-      </Pill>
-    );
-    expect(screen.getByTestId('icon-left')).toBeInTheDocument();
-    // When only iconLeft is provided, children container should have "mr-6"
-    const childrenDiv = screen.getByText('Pill with Left Icon');
-    expect(childrenDiv?.className).toMatch(/mr-6/);
-  });
-
-  it('renders right icon and applies proper margin when only iconRight is provided', () => {
-    render(
-      <Pill iconRight={pill} data-testid='icon-right'>
-        Pill with Right Icon
-      </Pill>
-    );
-    expect(screen.getByTestId('icon-right')).toBeInTheDocument();
-    // When only iconRight is provided, children container should have "ml-6"
-    const childrenDiv = screen.getByText('Pill with Right Icon');
-    expect(childrenDiv?.className).toMatch(/ml-6/);
-  });
-
-  it('renders both icons and does not add extra margin to children', () => {
-    render(
-      <Pill
-        iconLeft={<span data-testid="icon-left">{pill}</span>}
-        iconRight={<span data-testid="icon-right">{pill}</span>}
-      >
-        Pill with Both Icons
-      </Pill>
-    );
-    expect(screen.getByTestId('icon-left')).toBeInTheDocument();
-    expect(screen.getByTestId('icon-right')).toBeInTheDocument();
-
-    // When both icons are provided, the base children classes should be used without extra margin.
-    const childrenDiv = screen.getByText('Pill with Both Icons');
-    // The base childrenClasses is: "text-lg font-normal font-['Arial'] leading-normal "
-    // (without extra margin)
-    expect(childrenDiv?.className.trim()).toBe("text-lg font-normal font-['Arial'] leading-normal");
-  });
-
-  it('renders selected state with selected icons', () => {
-    render(
-      <Pill
-        selected
-        iconLeft={<span data-testid="icon-left">L</span>}
-        iconLeftSelected={<span data-testid="icon-left-selected">L-S</span>}
-        iconRight={<span data-testid="icon-right">R</span>}
-        iconRightSelected={<span data-testid="icon-right-selected">R-S</span>}
-      >
-        Selected Pill
-      </Pill>
-    );
-
-    // For selected state, the left and right icons should render the selected versions
-    expect(screen.getByTestId('icon-left-selected')).toBeInTheDocument();
-    expect(screen.getByTestId('icon-right-selected')).toBeInTheDocument();
-
-    // Additionally, check that the button's classes contain selected styles
-    const button = screen.getByRole('button');
-    expect(button.className).toMatch(/bg-\[#092068\]/);
-    expect(button.className).toMatch(/text-white/);
-  });
-
-  it('merges custom className with computed classes', () => {
-    render(<Pill className="custom-class">Custom Class Pill</Pill>);
-    const button = screen.getByRole('button');
-    expect(button.className).toMatch(/custom-class/);
-  });
-
-  it('forwards ref to the button element', () => {
-    const ref = createRef<HTMLButtonElement>();
-    render(<Pill ref={ref}>Ref Forwarding Pill</Pill>);
-    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-  });
-});

package/src/lib/Pill.tsx

@@ -1,91 +0,0 @@
-import { forwardRef, ButtonHTMLAttributes, ReactNode, useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-
-  export interface PillProps extends ButtonHTMLAttributes<HTMLButtonElement>  {
-    className?: string;
-    iconLeft?: ReactNode;
-    iconLeftSelected?: ReactNode;
-    iconRight?: ReactNode
-    iconRightSelected?: ReactNode;
-    children?: ReactNode;
-    onClick?: () => void;
-    selected?: boolean;
-    disabled?: boolean;
-  }
-
-  export const Pill = forwardRef<HTMLButtonElement, PillProps>(
-    ({ className = '', iconLeft, iconLeftSelected,
-      iconRight, iconRightSelected, children,
-      onClick, selected = false, disabled= false, ...props }, ref) => {
-
-    const [classValue, setClassValue] = useState<string>();
-    const [childrenClasses, setChildrenClasses] = useState<string>();
-    const [pillSelectedClasses, setPillSelectedClasses] = useState<string>('bg-white');
-
-    useEffect(() => {
-      const baseClasses = "text-lg font-normal font-['Arial'] leading-normal "
-      if (iconLeft && iconRight) {  // we have both iconLeft & iconRight
-        setChildrenClasses(baseClasses)
-      } else if (iconLeft) {        // we have only iconLeft
-        setChildrenClasses(baseClasses + "mr-6");
-      } else if (iconRight) {       // we have only iconRight
-        setChildrenClasses(baseClasses + "ml-6");
-      } else {                      // we have no icons
-        setChildrenClasses(baseClasses + "ml-6 mr-6");
-      }
-    }, [iconLeft, iconRight, children])
-
-    useEffect(() => {
-
-      if (selected) {
-        setPillSelectedClasses('bg-[#092068] focus:bg-[#092068] text-white');
-      } else {
-        setPillSelectedClasses('bg-white');
-      }
-
-      // 'pressed' bg-[#9FC5F0], place inside onClick
-      setClassValue(twMerge('relative inline-flex items-center justify-center ' +
-        'whitespace-nowrap rounded-3xl  ' +
-        'transition-colors focus-visible:outline-hidden font-[`Arial`] ' +
-        'disabled:pointer-events-none ' +
-        'disabled:opacity-50 ' +
-        'border-2 border-[#092068] text-[#092068] text-lg ' +
-        'focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] ' +
-
-        // active psuedo class applies to click, i.e. 'pressed' in figma
-        'bg-white hover:bg-[#D1DBFB] active:bg-[#9fc5f0] focus:bg-white disabled:bg-[#939194] ' +
-
-        // 'hover:text-white ' +
-        'disabled:bg-dha-mc-bottom-nav-background ' +
-        'disabled:text-dha-mc-checkbox-inactive ' +
-        'focus:border-black ' +
-        'disabled:border-dha-mc-secondary-border disabled:border-2 h-[48px] mt-1'
-        , pillSelectedClasses, className));
-        // console.log('pillSelectedClasses :', pillSelectedClasses);
-    }, [className, pillSelectedClasses, selected])
-
-    return (
-      <button
-        // type='button'    // default to 'button'
-        onClick={onClick}
-        className={classValue}
-        ref={ref}
-        {...props}
-        disabled={disabled}
-      >
-        {/* Conditionally render icon on the left or right based on iconPosition */}
-        {/* ms/e-3 === 12px */}
-        {iconLeft &&  (
-          <span className="ml-6 mr-2.5 size-6">{selected && iconLeftSelected ? iconLeftSelected : iconLeft}</span>
-        )}
-
-        <div className={childrenClasses}>{children}</div>
-
-        {iconRight && (
-          <span className="ml-2.5 mr-6 size-6">{selected && iconRightSelected ? iconRightSelected :
-              iconRight}</span>
-        )}
-      </button>
-    );
-  });

package/src/lib/ProgressBar.spec.tsx

@@ -1,106 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { axe } from "vitest-axe";
-import ProgressBar from "./ProgressBar";
-
-describe("ProgressBar Component", () => {
-  it("renders the correct number of steps", () => {
-    const totalSteps = 5;
-    const currentStep = 3;
-    const { container } = render(
-      <ProgressBar totalSteps={totalSteps} currentStep={currentStep} />
-    );
-    const circles = container.getElementsByClassName("rounded-full");
-    expect(circles).toHaveLength(totalSteps);
-  });
-
-  it("applies default styling to completed and upcoming steps", () => {
-    const totalSteps = 3;
-    const currentStep = 2;
-    const { container } = render(
-      <ProgressBar totalSteps={totalSteps} currentStep={currentStep} />
-    );
-    const circles = container.getElementsByClassName("rounded-full");
-    // Only the first step (step 1) should be marked as completed
-    expect(circles[0]).toHaveClass("bg-green-500", "border-[#305B25]");
-    expect(circles[1]).not.toHaveClass("bg-green-500");
-    expect(circles[2]).not.toHaveClass("bg-green-500");
-  });
-
-  it("respects custom className props", () => {
-    const totalSteps = 2;
-    const currentStep = 2;
-    const customFill = "bg-red-500";
-    const customBorder = "border-blue-500";
-    const { container } = render(
-      <ProgressBar
-        totalSteps={totalSteps}
-        currentStep={currentStep}
-        classNameFillColor={customFill}
-        classNameBorderColor={customBorder}
-        classNameGradient="from-red to-blue"
-        classNameArrowColor="fill-yellow-500"
-      />
-    );
-    const circles = container.getElementsByClassName("rounded-full");
-    expect(circles[0]).toHaveClass(customFill, customBorder);
-  });
-
-  it("renders step numbers when isStep is true", () => {
-    const totalSteps = 3;
-    const currentStep = 1;
-    render(
-      <ProgressBar totalSteps={totalSteps} currentStep={currentStep} isStep />
-    );
-    for (let i = 1; i <= totalSteps; i++) {
-      expect(screen.getByText(`${i}`)).toBeInTheDocument();
-    }
-  });
-
-  it("renders check icons when isStep is false", () => {
-    const totalSteps = 1;
-    const currentStep = 1;
-    const { container } = render(
-      <ProgressBar
-        totalSteps={totalSteps}
-        currentStep={currentStep}
-        isStep={false}
-      />
-    );
-    const svgs = container.getElementsByTagName("svg");
-    expect(svgs).toHaveLength(1);
-  });
-
-  it("renders check icons when isStep is false and uses correct styles when at least one step is completed", () => {
-    const totalSteps = 5;
-    const currentStep = 3;
-    const { container } = render(
-      <ProgressBar
-        totalSteps={totalSteps}
-        currentStep={currentStep}
-        isStep={false}
-      />
-    );
-    const svgs = container.getElementsByTagName("svg");
-    expect(svgs[5]).toHaveAttribute('fill', 'none')
-    expect(svgs[1]).toHaveClass('fill-white')
-  });
-});
-
-describe("ProgressBar Accessibility Tests", () => {
-  it("should have no accessibility violations with default props", async () => {
-    const { container } = render(
-      <ProgressBar totalSteps={3} currentStep={2} />
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("should have no accessibility violations when there are no steps", async () => {
-    const { container } = render(
-      <ProgressBar totalSteps={0} currentStep={0} />
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});