@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Tabs.tsx

@@ -0,0 +1,188 @@
+/**
+ * Tabs component lets the developer split the UI into independent, reusable pieces, and think about each piece in isolation
+ * @returns JSX.Element
+ */
+import React, { useState, useRef, useCallback, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface VariantType {
+    [key: string]: {
+      container: string;
+      tab: string;
+      title: string;
+      active: string;
+      inactive: string;
+    };
+}
+
+// variant styling definition, both size and layout
+const variants: VariantType = {
+    default: {
+      container: 'flex border-b border-gray-200',
+      tab: 'text-[#092068]',
+      title: '',
+      active: 'border-b-2 border-[#092068] hover:border-b-2 hover:border-[#7392f3] hover:font-bold active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] focus:rounded-md',
+      inactive: 'hover:border-b-2 hover:border-[#7392f3] hover:font-bold',
+    },
+    outline: {
+      container: 'flex border-b border-gray-200',
+      tab: 'border-2 border-blue-500 text-blue-500',
+      title: '',
+      active: 'border-2 bg-[#092068] text-white hover:bg-[#d1dbfb] hover:text-[#092068] hover:font-bold active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1)]',
+      inactive: 'text-[#092068] hover:bg-[#d1dbfb] hover:font-bold',
+    },
+    transparent: {
+      container: 'flex border-b border-gray-200',
+      tab: 'text-[#092068]',
+      title: '',
+      active: 'border-b-2 border-[#092068] hover:border-b-2 hover:border-[#7392f3] hover:font-bold active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] focus:rounded-md',
+      inactive: 'hover:border-b-2 hover:border-[#7392f3] hover:font-bold',
+    },
+}
+
+export enum IconPosition {
+  Right = "right",
+  Left = "left",
+  IconOnly = "iconOnly",
+  None = "undefined"
+}
+
+interface Tab {
+  id: string;
+  label: string;
+  onClick?: () => void;
+  content?: ReactNode;
+  activeIcon?: ReactNode | undefined;
+  inactiveIcon?: ReactNode | undefined; // Accepts any valid React element (e.g., image, icon component)
+  iconPosition?: IconPosition;
+}
+
+export interface TabsProps {
+  variant?: string;
+  className?: string;
+  classNameContainer?: string;
+  customActiveClass?: string;
+  customInactiveClass?: string;
+  tabs: Tab[];
+}
+
+export const Tabs = ({ variant = 'default', tabs, className, classNameContainer, customActiveClass, customInactiveClass}: TabsProps) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [hover, setHover] = useState(false);
+  const [currentTitle, setCurrentTitle] = useState('');
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  if (variant === '') variant = 'default';  // empty variant, assign it value of 'default'
+
+  // Move focus to the active tab
+  const focusTab = useCallback((index: number) => {
+    tabRefs.current[index]?.focus();
+  }, []);
+
+  const handleTabClick = (index: number, onClick?: () => void) => {
+    if (onClick) {
+      onClick();
+    }
+    setActiveTab(index);
+  }
+
+  const makeTabRef = (i: number) => (el: HTMLButtonElement | null) => {
+    tabRefs.current[i] = el
+  }
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
+      if (event.key === "ArrowRight") {
+        const nextIndex = (index + 1) % tabs.length;
+        setActiveTab(nextIndex);
+        focusTab(nextIndex);
+      } else if (event.key === "ArrowLeft") {
+        const prevIndex = (index - 1 + tabs.length) % tabs.length;
+        setActiveTab(prevIndex);
+        focusTab(prevIndex);
+      } else if (event.key === "Home") {
+        setActiveTab(0);
+        focusTab(0);
+      } else if (event.key === "End") {
+        setActiveTab(tabs.length - 1);
+        focusTab(tabs.length - 1);
+      }
+    },
+    [tabs.length, focusTab]
+  );
+
+  const handleMouseOver = (title: string) => {
+    setHover(true);
+    setCurrentTitle(title);
+  };
+
+  return (
+    <div className={twMerge('w-full', classNameContainer)}>
+      {/* Tab List */}
+      <div
+        role="tablist"
+        aria-label="Tabs"
+        className={twMerge(variants[variant].container, className)}
+      >
+        {tabs.map((tab, index) => (
+          <button
+            key={tab.id}
+            role="tab"
+            id={`tab-${tab.id}`}
+            onMouseEnter={() => handleMouseOver(tab.id)}
+            onMouseLeave={() => setHover(false)}
+            aria-selected={activeTab === index}
+            aria-controls={`panel-${tab.id}`}
+            tabIndex={activeTab === index ? 0 : -1}
+            ref={makeTabRef(index)}
+            className={`flex px-6 py-3 md:py-[14px] lg:py-4 focus:outline-hidden ${(variant === "outline") ? (`border-[#092068] ${
+              index === 0
+                ? "border-l-2 border-t-2 border-b-2 rounded-l-md focus:rounded-l-md" // Left border for the first element
+                : index === tabs.length - 1
+                ? "border-r-2 border-t-2 border-b-2 rounded-r-md focus:rounded-r-md" // Right border for the last element
+                : "border-t-2 border-b-2" // Top and bottom borders for others
+            }`): ''} ${
+              activeTab === index
+                ? twMerge(variants[variant].active, customActiveClass)
+                : twMerge(variants[variant].inactive, customInactiveClass)
+            }`}
+            onClick={() => handleTabClick(index, tab.onClick)}
+            onKeyDown={(event) => handleKeyDown(event, index)}
+          >
+            {tab.iconPosition === IconPosition.Left && tab.activeIcon && (
+              <span className="icon-left mr-3 size-6 lg:mt-0.5">{activeTab === index ? (hover && currentTitle === tab.id) ? tab.inactiveIcon : tab.activeIcon : tab.inactiveIcon}</span>
+            )}
+            {
+              tab.iconPosition === "iconOnly" && tab.activeIcon ?
+              (
+                <span className="size-6 lg:mt-0.5">{activeTab === index ? (hover && currentTitle === tab.id) ? tab.inactiveIcon : tab.activeIcon : tab.inactiveIcon}</span>
+              )
+              :
+              (
+                <span className='text-sm md:text-base lg:text-lg mt-0.5 md:mt-0'>{tab.label}</span>
+              )
+            }
+            {tab.iconPosition === "right" && tab.activeIcon && (
+              <span className="icon-right ml-3 size-6 lg:mt-0.5">{activeTab === index ? (hover && currentTitle === tab.id) ? tab.inactiveIcon : tab.activeIcon : tab.inactiveIcon}</span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab Panels */}
+      {tabs.map((tab, index) => (
+        <div
+          key={tab.id}
+          role="tabpanel"
+          id={`panel-${tab.id}`}
+          aria-labelledby={`tab-${tab.id}`}
+          hidden={activeTab !== index}
+          //   className={`p-4 ${activeTab !== index ? 'hidden' : ''}`}
+          className="p-4"
+        >
+          {tab.content}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/lib/Tester.spec.tsx

@@ -0,0 +1,17 @@
+import { axe } from "vitest-axe";
+
+it("should demonstrate this matcher's usage", async () => {
+	const render = () => `<html>
+  <body>
+    <main>
+      <p aria-label="paragraph with image">
+        <img src="#" alt="image alt text" />
+      </p>
+    </main>
+  </body>
+</html>
+`;
+	// pass anything that outputs html to axe
+	const html = render();
+	expect(await axe(html)).toHaveNoViolations();
+});

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

@@ -0,0 +1,162 @@
+import { Meta, StoryObj, StoryFn } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import React, { useState } from 'react';
+import  { Toggle, ToggleProps }  from './Toggle';
+
+
+export default {
+  title: 'Components/Toggle',
+  component: Toggle,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  argTypes: {
+    className: { control: 'text' },
+    thumbClassName: { control: 'text' },
+    defaultChecked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} as Meta<ToggleProps>
+
+// Default story
+export const Default = {}
+
+
+// Default classes story
+export const Outlined = {
+  args: {
+    variant: 'Outlined'
+  }
+};
+
+// MedCard classes story
+export const MedCard = {
+  args: {
+    variant: 'MedCard'
+  }
+};
+
+// Alternate classes story
+export const AlternateClasses = {
+  args: {
+    className: 'border-4 border-black',
+    thumbClassName: 'bg-red-600 border-4 border-black',
+    defaultChecked: false,
+    disabled: false,
+  }
+};
+
+// Disabled toggle story
+export const DisabledToggle = {
+  args: {
+    disabled: true
+  }
+};
+
+// Toggle Handler
+export const ToggleHandler: StoryFn = () => {
+  const [selectUpdates, setSelectUpdates] = useState(false);
+  return (
+    <div className="grid place-items-center">
+      <Toggle
+        className="my-2"
+        defaultChecked={false}
+        onCheckedChange={(checked: boolean) => {
+          setSelectUpdates(checked);
+          console.log('checked: ', checked);
+        }
+        }
+        disabled={false}
+      />
+      <p className="" role="status">Checked: {selectUpdates ? 'true' : 'false'} </p>
+    </div>
+  );
+};
+
+export const ToggleTestRunner: StoryFn = () => {
+  const [selectUpdates, setSelectUpdates] = useState(false);
+  return (
+    <div className="grid place-items-center">
+      <Toggle
+        className="my-2"
+        defaultChecked={false}
+        onCheckedChange={(checked: boolean) => {
+          setSelectUpdates(checked);
+        }
+        }
+        disabled={false}
+      />
+      <p role="status">Checked: {selectUpdates ? 'true' : 'false'} </p>
+    </div>
+  );
+};
+
+ToggleTestRunner.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // Find the Toggle component and the Checked status text
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  const toggleButton = canvas.getByRole('switch'); // Adjust if Toggle uses a different role
+  const statusText = canvas.getByRole('status');   // get paragraph displaying status
+
+  // Initial state should be unchecked
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  expect(statusText).toHaveTextContent('Checked: false');
+
+  // Click the toggle to check it
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  await userEvent.click(toggleButton);
+  expect(statusText).toHaveTextContent('Checked: true');
+
+  // Click the toggle again to uncheck it
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  await userEvent.click(toggleButton);
+  expect(statusText).toHaveTextContent('Checked: false');
+};
+
+
+export const ToggleTestRunnerSlow: StoryFn = () => {
+  const [selectUpdates, setSelectUpdates] = useState(false);
+  return (
+    <div className="grid place-items-center">
+      <Toggle
+        className="my-2"
+        defaultChecked={false}
+        onCheckedChange={(checked: boolean) => {
+          setSelectUpdates(checked);
+        }
+        }
+        disabled={false}
+      />
+      <p role="status">Checked: {selectUpdates ? 'true' : 'false'} </p>
+    </div>
+  );
+};
+
+/*
+ToggleTestRunnerSlow.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // Find the Toggle component and the Checked status text
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  const toggleButton = canvas.getByRole('switch'); // Adjust if Toggle uses a different role
+  const statusText = canvas.getByRole('status');   // get paragraph displaying status
+
+  // Initial state should be unchecked
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  expect(statusText).toHaveTextContent('Checked: false');
+
+  // Click the toggle to check it
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+  await userEvent.click(toggleButton);
+  expect(statusText).toHaveTextContent('Checked: true');
+
+  // Click the toggle again to uncheck it
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+  await userEvent.click(toggleButton);
+  expect(statusText).toHaveTextContent('Checked: false');
+};
+*/
+
+

package/src/lib/Toggle.spec.tsx

@@ -0,0 +1,122 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { axe } from "vitest-axe";
+import { Toggle } from './Toggle';
+
+describe('Toggle Component', () => {
+  it('renders correctly with default props', () => {
+    render(<Toggle />);
+    const toggleButton = screen.getByRole('switch');
+    expect(toggleButton).toBeInTheDocument();
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('renders component with a label, toggles state on click', () => {
+    render(<Toggle label='Toggle' />);
+    const toggleButton = screen.getByRole('switch');
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-checked', 'true');
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('calls onCheckedChange with the correct value', () => {
+    const onCheckedChangeMock = vi.fn();
+    render(<Toggle onCheckedChange={onCheckedChangeMock} />);
+    const toggleButton = screen.getByRole('switch');
+
+    fireEvent.click(toggleButton);
+    expect(onCheckedChangeMock).toHaveBeenCalledWith(true);
+
+    fireEvent.click(toggleButton);
+    expect(onCheckedChangeMock).toHaveBeenCalledWith(false);
+  });
+
+  it('does not toggle when disabled', () => {
+    render(<Toggle disabled />);
+    const toggleButton = screen.getByRole('switch');
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('renders with the default variant correctly', () => {
+    render(<Toggle variant="default" />);
+    const toggleButton = screen.getByRole('switch');
+    expect(toggleButton).toHaveClass('bg-[#d0cfd1]'); // Check default class
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveClass('bg-[#053ea6]'); // Check toggled class
+  });
+
+  it('renders with a custom variant correctly', () => {
+    render(<Toggle variant="default" className='bg-gray-300' />);
+    const toggleButton = screen.getByRole('switch');
+    expect(toggleButton).toHaveClass('bg-gray-300'); // Check MedCard class
+    // fireEvent.click(toggleButton);
+    // expect(toggleButton).toHaveClass('bg-[#0256AB]'); // Check toggled MedCard class
+  });
+
+  it('applies additional custom class names', () => {
+    render(
+      <Toggle className="custom-class" classNameButton="custom-button-class" />
+    );
+    const toggleButton = screen.getByRole('switch');
+    const toggleCircle = toggleButton.querySelector('div');
+
+    expect(toggleButton).toHaveClass('custom-class');
+    expect(toggleCircle).toHaveClass('custom-button-class');
+  });
+
+  it('respects the defaultChecked prop', () => {
+    render(<Toggle defaultChecked />);
+    const toggleButton = screen.getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'true');
+  });
+});
+
+
+
+describe('Toggle Component Accessibility', () => {
+  it('should have no accessibility violations when rendered with default props', async () => {
+    const { container } = render(<Toggle />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations when toggled on', async () => {
+    const { container } = render(<Toggle defaultChecked />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations when disabled', async () => {
+    const { container } = render(<Toggle disabled />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations when rendered with a custom variant', async () => {
+    const { container } = render(<Toggle variant="MedCard" />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have accessible role and attributes', () => {
+    render(<Toggle />);
+    const toggleButton = screen.getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false');
+    expect(toggleButton).toHaveAttribute('aria-disabled', 'false');
+  });
+
+  it('should have correct aria-checked attribute when toggled', () => {
+    render(<Toggle defaultChecked />);
+    const toggleButton = screen.getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('should be inaccessible via pointer interactions when disabled', () => {
+    render(<Toggle disabled />);
+    const toggleButton = screen.getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-disabled', 'true');
+  });
+});

package/src/lib/Toggle.tsx

@@ -0,0 +1,96 @@
+import { on } from 'events';
+import { ButtonHTMLAttributes, forwardRef, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface VariantType {
+  variant: string;
+  classes: string;
+  buttonClasses: string;
+  toggledClasses: string;
+  toggledButtonClasses: string;
+}
+
+// w-16 = 64px, h-8 = 32px, w-6 = 24px h-6 = 24px
+// ! required for height to be respected at breaks
+// padding (p-1) used to space circle from end of container
+const baseClasses = 'w-16 h-8 flex lg:w-[49.74px] lg:h-[24.87px]! lg:p-[3.1px] items-center p-1 rounded-2xl  cursor-pointer transition-colors duration-300';
+const buttonBaseClasses = 'bg-white w-6 h-6 lg:w-[18.65px] lg:h-[18.65px]! rounded-full shadow-[0px_4px_4.900000095367432px_0px_rgba(0,0,0,0.12)] transform transition-transform duration-300';
+
+// w/h for std are working, on the lg: breakpoint the resulting w/h is 42x17 - 8px short on each dimension
+// this 8px appears to be 4px of padding or margin ... p-1 === 4px
+// changed padding to lg:p-[3.11px] and size is now 44x19
+
+  const variants: VariantType[]  = [
+    {
+      variant: 'default',
+      classes: 'bg-[#d0cfd1] hover:bg-[#bbbabc]',         // outer-button non-toggled
+      toggledClasses: 'bg-[#053ea6] hover:bg-[#0752dc]',  // outer-button toggled
+      buttonClasses: 'translate-x-0',                     // inner div (circle)
+      toggledButtonClasses: 'translate-x-8 lg:translate-x-6'    // inner div (circle) toggled
+      // lg:translate-x-[calc(100%-6px)] lg:translate-x-[28px]
+    },
+    {
+      variant:'outlined',
+      classes: 'bg-slate-300 border border-black hover:bg-[#abb5c2]',
+      toggledClasses: 'bg-blue-500/50 hover:bg-blue-400 border border-black',
+      buttonClasses: 'translate-x-0',
+      toggledButtonClasses: 'translate-x-8 lg:translate-x-6'
+    },
+  ];
+
+export interface ToggleProps extends ButtonHTMLAttributes<HTMLButtonElement>  {
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  label?: string;
+  onCheckedChange?: (checked: boolean) => void;
+  className?: string;
+  classNameButton?: string;
+  variant?: string; // Define allowed variants here, extend as necessary.
+}
+
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ defaultChecked=false, disabled=false, onCheckedChange, label,
+    className, classNameButton, variant = "default", type = "button",
+    children, ...props }, ref) => {
+
+  const [isToggled, setIsToggled] = useState(defaultChecked);
+
+  // handle change function if present
+  const handleCheckedChange = () => {
+    const newValue = !isToggled;
+    setIsToggled(newValue);
+    if (onCheckedChange) {  // if we have a handler function, call w/ new value
+      onCheckedChange(newValue);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCheckedChange}
+      disabled={disabled}
+      role="switch"
+      aria-checked={isToggled}
+      aria-disabled={disabled}
+      {...props}
+      ref={ref}
+      aria-label={label ? label: `Toggle ${isToggled ? 'on': 'off'}`}
+      className={twMerge(`${baseClasses}
+        ${isToggled ?
+          variants.find((v) => v.variant === variant)?.toggledClasses :
+          variants.find((v) => v.variant === variant)?.classes
+        }`,
+        className
+      )}
+    >
+      <div
+        className={twMerge(`${buttonBaseClasses}
+          ${ isToggled ?
+            variants.find((v) => v.variant === variant)?.toggledButtonClasses :
+            variants.find((v) => v.variant === variant)?.buttonClasses
+          }`,
+          classNameButton )}
+      ></div>
+    </button>
+  );
+});
+