@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/ProgressBar.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { twMerge } from 'tailwind-merge';
+
+//needs work, will need additional props for sure
+//idea here is that the currentStep is held outside of the component as a piece of state
+export interface ProgressBarProps {
+  isStep?: boolean;
+  classNameFillColor?: string;
+  classNameBorderColor?: string;
+  classNameGradient?: string;
+  classNameArrowColor?: string;
+  /** Total number of steps in the progress bar */
+  totalSteps: number;
+  /** Current active step (1-based index) */
+  currentStep: number;
+}
+
+/**
+ * A progress bar component that shows a series of steps as circles with connecting lines.
+ * When steps are completed that step as well as the line up to the next circle are filled
+ * in with the specified color
+ */
+export const ProgressBar: React.FC<ProgressBarProps> = (
+  {
+    totalSteps,
+    currentStep,
+    classNameArrowColor='fill-[#305B25]',
+    classNameFillColor='bg-green-500',
+    classNameBorderColor='border-[#305B25]',
+    classNameGradient='from-[#305B25] to-[#5AAB46]',
+    isStep=true
+  }
+  ) => {
+  // Generate an array of step indices up to totalSteps
+  const steps = Array.from({ length: totalSteps }, (_, i) => i + 1);
+
+  return (
+    <div className="flex items-center w-full">
+      {steps.map((step, index) => {
+        const isActive = step <= currentStep-1;
+        const isLast = index === steps.length - 1;
+        return (
+          <>
+            {/* Circle for each step */}
+            <div
+              className={twMerge(`flex items-center justify-center size-8 rounded-full border-[3px] border-gray-300 text-gray-500`,
+                `${isActive && `${classNameFillColor} ${classNameBorderColor}`}`)}
+            >
+              {isStep ? <div className={`${!isActive ? 'text-gray-400' : 'text-white'}`}>{step}</div>
+              : isActive ? (
+                <svg width="24" height="25" viewBox="0 0 24 25" className={`${!isActive ? 'fill-gray-400' : 'fill-white'}`} xmlns="http://www.w3.org/2000/svg">
+                  <g id="check_box">
+                    <mask id="mask0_4855_19004" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
+                      <rect id="Bounding box" y="0.5" width="24" height="24"/>
+                    </mask>
+                    <g mask="url(#mask0_4855_19004)">
+                      <path id="Icon" d="M10.6001 14.2465L8.27711 11.9232C8.13861 11.7849 7.96453 11.7141 7.75486
+                      11.7107C7.54536 11.7076 7.36811 11.7784 7.22311 11.9232C7.07828 12.0682 7.00586 12.2439 7.00586
+                      12.4502C7.00586 12.6566 7.07828 12.8322 7.22311 12.9772L9.96736 15.7215C10.1482 15.9021 10.3591
+                      15.9925 10.6001 15.9925C10.8411 15.9925 11.052 15.9021 11.2329 15.7215L16.7964 10.158C16.9347
+                      10.0195 17.0055 9.84538 17.0089 9.63572C17.012 9.42622 16.9412 9.24897 16.7964 9.10397C16.6514
+                      8.95914 16.4757 8.88672 16.2694 8.88672C16.063 8.88672 15.8874 8.95914 15.7424 9.10397L10.6001 14.2465Z"/>
+                    </g>
+                  </g>
+                </svg>
+              ) : (
+              <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g id="check_box">
+                  <mask id="mask0_4855_17150" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
+                    <rect id="Bounding box" y="0.5" width="24" height="24" fill="#D9D9D9"/>
+                  </mask>
+                  <g mask="url(#mask0_4855_17150)">
+                    <path id="Icon" d="M15.75 13H7.75C7.53717 13 7.359 12.9282 7.2155 12.7845C7.07183 12.641 7 12.4628 7
+                    12.25C7 12.0372 7.07183 11.859 7.2155 11.7155C7.359 11.5718 7.53717 11.5 7.75 11.5H15.75C15.9628 11.5
+                    16.141 11.5718 16.2845 11.7155C16.4282 11.859 16.5 12.0372 16.5 12.25C16.5 12.4628 16.4282 12.641 16.2845
+                    12.7845C16.141 12.9282 15.9628 13 15.75 13Z" fill="#939194"/>
+                  </g>
+                </g>
+              </svg>
+              )}
+            </div>
+
+            {/* Line between circles, except after the last step */}
+            {!isLast && (
+              <div
+                className={twMerge(`relative -z-10 -mx-[0.1em] flex-1 h-1 bg-gray-300`,
+                  `${isActive && `bg-linear-to-r ${classNameGradient} from-50%`}`
+                )}
+              >
+                {/* Arrow in the middle of the completed segment */}
+                {step < currentStep && step > currentStep - 2 &&(
+                  <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" >
+                    <svg viewBox="0 0 23 18" className="size-8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <g id="Arrow">
+                        <rect width="22.48" height="18" />
+                        <path id="Polygon 1" className={classNameArrowColor} d="M13.452 9.79161C13.9706 9.39128 13.9706 8.60871 13.452
+                        8.20839L9.61096 5.24354C8.95357 4.73611 7.99993 5.2047 7.99993 6.03514L7.99993
+                        11.9649C7.99993 12.7953 8.95357 13.2639 9.61096 12.7565L13.452 9.79161Z"/>
+                      </g>
+                    </svg>
+                  </div>
+                )}
+              </div>
+            )}
+          </>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/lib/RadioGroup.spec.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { RadioGroup, RadioOption } from "./RadioGroup";
+import { vi } from "vitest";
+
+describe("RadioGroup Component", () => {
+  const options: RadioOption[] = [
+    { label: "Option A", value: "a" },
+    { label: "Option B", value: "b", disabled: true },
+    { label: "Option C", value: "c" },
+  ];
+
+  it("renders all radio options with proper labels and role", () => {
+    render(<RadioGroup options={options} />);
+    const radios = screen.getAllByRole("radio");
+    expect(radios).toHaveLength(3);
+    options.forEach(({ label }) => {
+      const radio = screen.getByRole("radio", { name: label });
+      expect(radio).toBeInTheDocument();
+    });
+  });
+
+  it("no option is selected by default", () => {
+    render(<RadioGroup options={options} />);
+    options.forEach(({ label }) => {
+      const radio = screen.getByRole("radio", { name: label });
+      expect(radio).not.toBeChecked();
+    });
+  });
+
+  it("selects an option when clicked and expects it to be checked", () => {
+    render(<RadioGroup options={options} />);
+    const radioA = screen.getByRole("radio", { name: "Option A" });
+
+    fireEvent.click(radioA);
+
+    expect(radioA).toBeChecked();
+  });
+
+  it("properly renders a disabled radio button", () => {
+    render(<RadioGroup options={options} />);
+    const radioB = screen.getByRole("radio", { name: "Option B" });
+
+    expect(radioB).toBeDisabled();
+  });
+
+  it("applies custom classes to container, label, and input elements", () => {
+    render(
+      <RadioGroup
+        options={options}
+        classNameContainer="container-class"
+        classNameLabel="label-class"
+        classNameInput="input-class"
+      />
+    );
+
+    const group = screen.getByRole("radiogroup");
+    expect(group).toHaveClass("container-class");
+
+    const labelA = screen.getByText("Option A").closest("label");
+    expect(labelA).toHaveClass("label-class");
+
+    const inputA = screen.getByRole("radio", { name: "Option A" });
+    expect(inputA).toHaveClass("input-class");
+  });
+});
+
+describe("RadioGroup Accessibility Tests", () => {
+  it("should have no accessibility violations by default", async () => {
+    const { container } = render(<RadioGroup options={[]} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("should have no accessibility violations with disabled options", async () => {
+    const opts: RadioOption[] = [
+      { label: "Disabled Option", value: "d", disabled: true },
+    ];
+    const { container } = render(<RadioGroup options={opts} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/lib/RadioGroup.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { twMerge } from 'tailwind-merge';
+// import circleBorder from '../assets/img/circle-border.svg';
+import { RadioIcon } from './RadioIcon';
+
+export type RadioOption = {
+  label: string;
+  value: string;
+  id: string;
+  disabled?: boolean;
+};
+
+type RadioGroupProps = {
+  title?: string;
+  classNameLabel?: string;
+  classNameInput?: string;
+  classNameContainer?: string;
+  options: RadioOption[];
+};
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  title,
+  classNameLabel,
+  classNameInput,
+  classNameContainer,
+  options,
+}) => {
+  const [internalValue, setInternalValue] = useState('');
+
+  const handleChange = (val: string) => {
+    setInternalValue(val);
+  };
+
+  const selectedValue = internalValue;
+
+
+  return (
+    <fieldset role="radiogroup" className={classNameContainer}>
+      <p className="mb-2">{title}</p>
+      {options.map(({ label, value: val, id, disabled }) => (
+        // const isSelected = internalValue === val;
+
+        <label
+          key={val}
+          className={twMerge(`flex mb-2 items-center gap-1 cursor-pointer ${
+          disabled ? "opacity-50 cursor-not-allowed" : ""
+          }`, classNameLabel)}
+        >
+
+          <span className="rounded-full size-4 border border-black flex items-center justify-center">
+            {val === internalValue &&
+            // <img className='fill-red-500'
+            //   src={circleCenter}
+            //   alt={"radio button selected"}
+            // />
+            <RadioIcon className='' />
+            }
+          </span>
+
+          <input
+            id={id}
+            className='hidden'
+            type="radio"
+            value={val}
+            disabled={disabled}
+            checked={selectedValue === val}
+            onChange={() => handleChange(val)}
+          />
+          &nbsp;{label}
+        </label>
+      ))}
+    </fieldset>
+  );
+};

package/src/lib/RadioIcon.tsx

@@ -0,0 +1,13 @@
+// RadioIcon.tsx
+export function RadioIcon({ className }: { className?: string }) {
+    console.log('RadioIcon: className = ' + className);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      className={className}
+    >
+      <circle cx="50" cy="50" r="35" fill="currentColor" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { Meta, StoryContext } from '@storybook/react';
+import { Search, SearchProps, DataSearchResults } from './Search';
+import { SearchableData } from './SearchContent';
+import { userEvent, within, waitFor } from 'storybook/test';
+import { expect } from 'storybook/test';
+import { Component, FC, ReactNode, useRef, useState } from 'react';
+
+
+export default {
+  title: 'Components/Search',
+  component: Search,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#f0f0f0' },
+        { name: 'dark', value: '#444849' },
+      ],
+    },
+  },
+  argTypes: {
+    className: { control: 'text' },
+    classNameLabel: { control: 'text' },
+    ariaLabel: { control: 'text' },
+    placeholder: { control: 'text' },
+  },
+  args: {
+    
+  },
+} as Meta<typeof Search>;
+
+
+export const DefaultSearch = (props: SearchProps) => {
+  const [searchResults, setSearchResults] = useState<DataSearchResults>();
+  
+  return (
+    <>
+
+      <div className='block md:hidden mb-4 text-blue-500'>small</div>
+      <div className="hidden md:block lg:hidden mb-4 text-blue-500">medium</div>
+      <div className="hidden lg:block mb-4 text-blue-500">large</div>
+      <Search
+        searchableData={SearchableData}
+        setSearchResults={setSearchResults}
+      />
+
+    </>
+  );
+};
+
+// export const XClears = (props: SearchProps) => {
+//   const [searchResults, setSearchResults] = useState<DataSearchResults>();
+  
+//   return (
+//     <>
+
+//       <div className='block md:hidden mb-4 text-blue-500'>small</div>
+//       <div className="hidden md:block lg:hidden mb-4 text-blue-500">medium</div>
+//       <div className="hidden lg:block mb-4 text-blue-500">large</div>
+//       <Search
+//         searchableData={SearchableData}
+//         setSearchResults={setSearchResults}
+//       />
+//     </>
+//   );
+// };

package/src/lib/Search.spec.tsx

@@ -0,0 +1,182 @@
+import React, { createRef } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { axe } from 'vitest-axe';
+import { Search, DataSearchResults } from './Search';
+
+// Mock SearchableData for predictable search behavior
+const data =  [
+    { path: '/page1', title: 'Page One', content: 'Alpha bravo charlie delta alpha bravo' },
+    { path: '/page2', title: 'Page Two', content: 'Echo foxtrot golf hotel echo foxtrot' },
+  ];
+
+
+describe('Search Component', () => {
+  let setSearchResults: vi.Mock;
+
+  beforeEach(() => {
+    setSearchResults = vi.fn();
+  });
+
+  it('renders an input with default classes and forwarded props', () => {
+    render(<Search searchableData={data} ariaLabel="Search Label" placeholder="Search..." setSearchResults={setSearchResults} data-testid="search-input" />);
+    const input = screen.getByTestId('search-input');
+    expect(input).toBeInTheDocument();
+    // Should have baseClasses from implementation
+    expect(input).toHaveClass('h-8', 'py-2', 'border-[#07192d]');
+    expect(input).toHaveAttribute('placeholder', 'Search...');
+    // aria-label should match label prop
+    expect(input).toHaveAttribute('aria-label', 'Search Label');
+  });
+
+  it('forwards ref to the input element', () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<Search searchableData={data} ref={ref} setSearchResults={setSearchResults} />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it('has no accessibility violations by default', async () => {
+    const { container } = render(<Search searchableData={data} setSearchResults={setSearchResults} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has no accessibility violations with search results', async () => {
+    const { container } = render(<Search searchableData={data} setSearchResults={setSearchResults} />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'echo' } });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('expands from icon-only view when iconLink is true', () => {
+    render(
+      <Search
+        searchableData={data}
+        setSearchResults={setSearchResults}
+        iconLink
+        ariaLabel="Search Label"
+      />
+    );
+    // initially there's no textbox
+    expect(screen.queryByRole('textbox')).toBeNull();
+
+    // click the lone search-icon button
+    const iconButton = screen.getByRole('button');
+    fireEvent.click(iconButton);
+
+    // now the input should be rendered
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('calls setSearchResults on clicking the search button with non-empty input', () => {
+    render(<Search searchableData={data} setSearchResults={setSearchResults} />);
+
+    // type a query
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'alpha' } });
+
+    // click the first search button (small-screen icon)
+    const [smallSearchButton] = screen.getAllByRole('button');
+    fireEvent.click(smallSearchButton);
+
+    // should have been called with the filtered results object
+    expect(setSearchResults).toHaveBeenCalledWith(
+      expect.objectContaining({
+        input: 'alpha',
+        pages: expect.any(Array),
+      }) as DataSearchResults
+    );
+  });
+
+  it('calls setSearchResults with empty pages when clicking search on an empty input', () => {
+    render(<Search searchableData={data} setSearchResults={setSearchResults} />);
+
+    // immediately click the search button
+    const [smallSearchButton] = screen.getAllByRole('button');
+    fireEvent.click(smallSearchButton);
+
+    expect(setSearchResults).toHaveBeenCalledWith({
+      input: '',
+      pages: [{ results: [] }],
+    });
+  });
+
+  it('clears the input and hides results when clicking the clear (X) button', () => {
+    render(<Search searchableData={data} setSearchResults={setSearchResults} />);
+
+    // type something that yields results
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'echo' } });
+
+    // the clear button is the last <button> in the DOM
+    const buttons = screen.getAllByRole('button');
+    const clearButton = buttons[buttons.length - 1];
+    fireEvent.click(clearButton);
+
+    // input should be reset
+    expect(input).toHaveValue('');
+
+    // results list should be gone
+    expect(screen.queryByText('echo')).toBeNull();
+  });
+
+  it('navigates to the first result path when pressing Enter without setSearchResults', () => {
+    // stub out window.location so we can observe the href assignment
+    // @ts-expect-error expecting an error
+    delete window.location;
+    // @ts-expect-error expecting an error
+    window.location = { href: '' };
+
+    render(<Search searchableData={data} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'echo' } });
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+    expect(window.location.href).toBe('/page2');
+  });
+
+  it('shows "no search results" message when there are no matches', () => {
+    render(<Search searchableData={data} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'zebra' } });
+
+    expect(screen.getByText('no search results')).toBeInTheDocument();
+  });
+
+  it('calls handleSearchClick (setSearchResults) on Enter when setSearchResults is provided', () => {
+    render(<Search searchableData={data} setSearchResults={setSearchResults} />);
+
+    // type a query so that value is non-empty
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'bravo' } });
+
+    // press Enter
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+    // should have delegated to handleSearchClick, i.e. called setSearchResults
+    expect(setSearchResults).toHaveBeenCalledWith(
+      expect.objectContaining({
+        input: 'bravo',
+        pages: expect.any(Array),
+      }) as DataSearchResults
+    );
+  });
+
+  it('clears out results when the user manually deletes all text', () => {
+    render(<Search searchableData={data} />);
+
+    // type something to show real‐time results
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'charlie' } });
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+    // now clear via typing
+    fireEvent.change(input, { target: { value: '' } });
+
+    // the listbox should be gone
+    expect(screen.queryByRole('listbox')).toBeNull();
+  });
+});