@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Modal.tsx

@@ -0,0 +1,220 @@
+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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,106 @@
+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();
+  });
+});