@dhasdk/simple-ui 1.0.7 → 1.0.8

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

@@ -0,0 +1,454 @@
+import { Meta, StoryContext } from '@storybook/react';
+import { Modal, AccessibleModalProps } from './Modal';
+import { Button } from './Button';
+import { userEvent, within } from 'storybook/test';
+import { expect } from 'storybook/test';
+import { FC, useRef, useState } from 'react';
+
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'white',
+      values: [
+        { name: 'white', value: '#ffffff' },
+        { name: 'light', value: '#f0f0f0' },
+      ],
+    },
+  },
+  argTypes: {
+    isOpen: { control: 'boolean' },
+    title: { control: 'text' },
+  },
+  args: {
+    isOpen: true,
+    onClose: () => {console.log('modal closed');},
+    title: 'Storybook Modal',
+  },
+} as Meta<typeof Modal>;
+
+/*
+interface AccessibleModalProps {
+  isOpen: boolean; // Controls modal visibility
+  onClose: () => void; // Close handler
+  title: string; // Modal title for screen readers
+  children: React.ReactNode; // Modal content
+}
+*/
+
+// Define a story using an alternate method that contains state values
+export const DefaultModal = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="w-full h-full p-8 border-2 border-blue-500">
+      <p>A modal dialog is a UI component that temporarily interrupts the user’s workflow to display critical
+        information or request input. Its primary benefits include:
+      </p>
+
+      <ul className="list-disc ms-5 mt-4">
+        <li>Focus: By dimming the background, it ensures the user focuses solely on the content or action presented.</li>
+        <li>Context Preservation: Users can interact with the dialog without leaving the current page, keeping their workflow intact.</li>
+        <li>Efficiency: It’s ideal for quick tasks like confirmations, alerts, or forms, minimizing navigation.</li>
+        <li>User Guidance: Helps guide users through essential decisions or processes without distractions.</li>
+        <li>Overall, modals improve usability by keeping tasks concise and contextually relevant.</li>
+      </ul>
+
+      <Button onClick={() => setIsOpen(true)} className="mt-8" variant='default'>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Test Modal">
+        <p>This is a Modal dialog that can be used for many varying purposes, from informational messages
+          to taking user input, ideal for required quick tasks on a page.
+        </p>
+      </Modal>
+    </div>
+  );
+}
+
+// Define a story using an alternate method that contains state values
+export const DefaultClickOutside = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="w-full h-full p-8 border-2 border-blue-500">
+      <p>A modal dialog is a UI component that temporarily interrupts the user’s workflow to display critical
+        information or request input. Its primary benefits include:
+      </p>
+
+      <ul className="list-disc ms-5 mt-4">
+        <li>Focus: By dimming the background, it ensures the user focuses solely on the content or action presented.</li>
+        <li>Context Preservation: Users can interact with the dialog without leaving the current page, keeping their workflow intact.</li>
+        <li>Efficiency: It’s ideal for quick tasks like confirmations, alerts, or forms, minimizing navigation.</li>
+        <li>User Guidance: Helps guide users through essential decisions or processes without distractions.</li>
+        <li>Overall, modals improve usability by keeping tasks concise and contextually relevant.</li>
+      </ul>
+
+      <Button onClick={() => setIsOpen(true)} className="mt-8" variant='default'>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Test Modal" clickOutsideCloses>
+        <p>This is a Modal dialog that can be used for many varying purposes, from informational messages
+          to taking user input, ideal for required quick tasks on a page.
+        </p>
+      </Modal>
+    </div>
+  );
+}
+// Play function for the DefaultClickOutside story
+DefaultClickOutside.play = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
+
+  // Step 1: Open the modal by clicking the "Open Modal" button
+  const openButton = await canvas.getByRole('button', { name: 'Open Modal' });
+  await userEvent.click(openButton);
+
+  // Step 2: Assert that the modal dialog is now visible
+  const modal = await canvas.getByRole('dialog');
+  expect(modal).toBeInTheDocument();
+
+  // Step 3: Retrieve the modal backdrop and click on it
+  const backdrop = canvasElement.ownerDocument.getElementById('backdrop');
+  if (!backdrop) {
+    throw new Error('Backdrop element not found');
+  }
+  await userEvent.click(backdrop);
+
+  // Step 4: Assert that the modal is no longer visible
+  await expect(canvas.queryByRole('dialog', { name: 'Test Modal' })).not.toBeInTheDocument();
+};
+
+
+// Define a story using an alternate method that contains state values
+export const CancelCloseButtonText = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="w-full h-full p-8 border-2 border-blue-500">
+      <p>A modal dialog is a UI component that temporarily interrupts the user’s workflow to display critical
+        information or request input. Its primary benefits include:
+      </p>
+
+      <ul className="list-disc ms-5 mt-4">
+        <li>Focus: By dimming the background, it ensures the user focuses solely on the content or action presented.</li>
+        <li>Context Preservation: Users can interact with the dialog without leaving the current page, keeping their workflow intact.</li>
+        <li>Efficiency: It’s ideal for quick tasks like confirmations, alerts, or forms, minimizing navigation.</li>
+        <li>User Guidance: Helps guide users through essential decisions or processes without distractions.</li>
+        <li>Overall, modals improve usability by keeping tasks concise and contextually relevant.</li>
+      </ul>
+
+      <Button onClick={() => setIsOpen(true)} className="mt-8" variant='default'>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Test Modal" closeButtonText='Cancel'>
+        <p>This is a Modal dialog that can be used for many varying purposes, from informational messages
+          to taking user input, ideal for required quick tasks on a page.
+        </p>
+      </Modal>
+    </div>
+  );
+}
+
+// Define a story using an alternate method that contains state values
+export const WithContinueButton = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [continueClicked, setContinueClicked] = useState(false);
+
+  return (
+    <div className="w-full h-full p-8 border-2 border-blue-500">
+      <p>A modal dialog is a UI component that temporarily interrupts the user’s workflow to display critical
+        information or request input. Its primary benefits include:
+      </p>
+
+      <ul className="list-disc ms-5 mt-4">
+        <li>Focus: By dimming the background, it ensures the user focuses solely on the content or action presented.</li>
+        <li>Context Preservation: Users can interact with the dialog without leaving the current page, keeping their workflow intact.</li>
+        <li>Efficiency: It’s ideal for quick tasks like confirmations, alerts, or forms, minimizing navigation.</li>
+        <li>User Guidance: Helps guide users through essential decisions or processes without distractions.</li>
+        <li>Overall, modals improve usability by keeping tasks concise and contextually relevant.</li>
+      </ul>
+
+      <Button onClick={() => setIsOpen(true)} className="mt-8" variant='default'>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Test Modal" variant='default'
+        continueButton continueButtonHandler={() => setContinueClicked(!continueClicked)}
+        clickOutsideCloses
+        continueButtonText='Display Continue'
+        >
+        <p>This is a Modal dialog that can be used for many varying purposes, from informational messages
+          to taking user input, ideal for required quick tasks on a page.
+        </p>
+      </Modal>
+      { continueClicked && <div className='mt-10 font-lg bg-gray-200 rounded-md border p-6 border-black text-center'>
+        Continue button has been clicked
+      </div>
+        }
+    </div>
+  );
+}
+
+
+// Define a story using an alternate method that contains state values
+export const VariantDarker = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [continueClicked, setContinueClicked] = useState(false);
+
+  return (
+    <div className="w-full h-full p-8 border-2 border-blue-500">
+      <p>A modal dialog is a UI component that temporarily interrupts the user’s workflow to display critical
+        information or request input. Its primary benefits include:
+      </p>
+
+      <ul className="list-disc ms-5 mt-4">
+        <li>Focus: By dimming the background, it ensures the user focuses solely on the content or action presented.</li>
+        <li>Context Preservation: Users can interact with the dialog without leaving the current page, keeping their workflow intact.</li>
+        <li>Efficiency: It’s ideal for quick tasks like confirmations, alerts, or forms, minimizing navigation.</li>
+        <li>User Guidance: Helps guide users through essential decisions or processes without distractions.</li>
+        <li>Overall, modals improve usability by keeping tasks concise and contextually relevant.</li>
+      </ul>
+
+      <Button onClick={() => setIsOpen(true)} className="mt-8" variant='default'>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Test Modal" variant='darker'
+        continueButton continueButtonHandler={() => setContinueClicked(!continueClicked)}
+        clickOutsideCloses
+        continueButtonText='Display Continue'
+        >
+        <p>This is a Modal dialog that can be used for many varying purposes, from informational messages
+          to taking user input, ideal for required quick tasks on a page.
+        </p>
+      </Modal>
+      { continueClicked && <div className='mt-10 font-lg bg-gray-200 rounded-md border p-6 border-black text-center'>
+        Continue button has been clicked
+      </div>
+        }
+    </div>
+  );
+}
+
+// Define a story using an alternate method that contains state values
+export const VariantDark = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [continueClicked, setContinueClicked] = useState(false);
+
+  return (
+    <div className="w-full h-full p-8 border-2 border-blue-500">
+      <p>A modal dialog is a UI component that temporarily interrupts the user’s workflow to display critical
+        information or request input. Its primary benefits include:
+      </p>
+
+      <ul className="list-disc ms-5 mt-4">
+        <li>Focus: By dimming the background, it ensures the user focuses solely on the content or action presented.</li>
+        <li>Context Preservation: Users can interact with the dialog without leaving the current page, keeping their workflow intact.</li>
+        <li>Efficiency: It’s ideal for quick tasks like confirmations, alerts, or forms, minimizing navigation.</li>
+        <li>User Guidance: Helps guide users through essential decisions or processes without distractions.</li>
+        <li>Overall, modals improve usability by keeping tasks concise and contextually relevant.</li>
+      </ul>
+
+      <Button onClick={() => setIsOpen(true)} className="mt-8" variant='default'>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Test Modal" variant='dark'
+        continueButton continueButtonHandler={() => setContinueClicked(!continueClicked)}
+        clickOutsideCloses
+        continueButtonText='Display Continue'
+        >
+        <p>This is a Modal dialog that can be used for many varying purposes, from informational messages
+          to taking user input, ideal for required quick tasks on a page.
+        </p>
+      </Modal>
+      { continueClicked && <div className='mt-10 font-lg bg-gray-200 rounded-md border p-6 border-black text-center'>
+        Continue button has been clicked
+      </div>
+        }
+    </div>
+  );
+
+}
+
+
+// Define a story using an alternate method that contains state values
+export const VariantMedcard = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [continueClicked, setContinueClicked] = useState(false);
+
+  return (
+    <div className="w-full h-full p-8 border-2 border-blue-500">
+      <p>A modal dialog is a UI component that temporarily interrupts the user’s workflow to display critical
+        information or request input. Its primary benefits include:
+      </p>
+
+      <ul className="list-disc ms-5 mt-4">
+        <li>Focus: By dimming the background, it ensures the user focuses solely on the content or action presented.</li>
+        <li>Context Preservation: Users can interact with the dialog without leaving the current page, keeping their workflow intact.</li>
+        <li>Efficiency: It’s ideal for quick tasks like confirmations, alerts, or forms, minimizing navigation.</li>
+        <li>User Guidance: Helps guide users through essential decisions or processes without distractions.</li>
+        <li>Overall, modals improve usability by keeping tasks concise and contextually relevant.</li>
+      </ul>
+
+      <Button onClick={() => setIsOpen(true)} className="mt-8" variant='default'>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Test Modal" variant='default'
+        continueButton continueButtonHandler={() => setContinueClicked(!continueClicked)}
+        clickOutsideCloses
+        continueButtonText='Display Continue'
+        >
+        <p>This is a Modal dialog that can be used for many varying purposes, from informational messages
+          to taking user input, ideal for required quick tasks on a page.
+        </p>
+      </Modal>
+      { continueClicked && <div className='mt-10 font-lg bg-gray-200 rounded-md border p-6 border-black text-center'>
+        Continue button has been clicked
+      </div>
+        }
+    </div>
+  );
+}
+
+
+export const TrapFocus = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="p-8">
+      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Focus Trap Modal">
+        <p>Press Tab and Shift+Tab to test focus trapping.</p>
+      </Modal>
+    </div>
+  );
+};
+
+// Play function for testing focus trapping
+TrapFocus.play = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
+
+  // Open the modal
+  const openButton = canvas.getByRole('button', { name: 'Open Modal' });
+  await userEvent.click(openButton);
+
+  // Assert that the modal is open
+  const modal = await canvas.getByRole('dialog');
+  expect(modal).toBeInTheDocument();
+
+  // Get focusable elements
+  const closeX = canvas.getByLabelText('Close modal');
+  const closeButton = canvas.getByText('Close');
+
+  await userEvent.tab();
+  expect(closeX).toHaveFocus();
+
+  // Simulate Tab key press (focus should move forward)
+  await userEvent.tab();
+  expect(closeButton).toHaveFocus();
+
+  await userEvent.tab();
+  expect(closeX).toHaveFocus();
+
+  await userEvent.tab();
+  expect(closeButton).toHaveFocus();
+
+  await userEvent.tab();
+  expect(closeX).toHaveFocus();
+
+  // Simulate Shift + Tab key press (focus should move backward)
+  await userEvent.keyboard("{Shift>}{Tab}{/Shift}");
+  expect(closeButton).toHaveFocus();
+
+  await userEvent.keyboard("{Shift>}{Tab}{/Shift}");
+  expect(closeX).toHaveFocus();
+
+  await userEvent.keyboard("{Shift>}{Tab}{/Shift}");
+  expect(closeButton).toHaveFocus();
+
+  await userEvent.keyboard("{Shift>}{Tab}{/Shift}");
+  expect(closeX).toHaveFocus();
+
+};
+
+
+export const ContinueButtonHandler = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [text, setText] = useState("initial text value");
+
+  return (
+    <div className="p-8">
+      <p aria-label="paragraph text">{text}</p>
+      <Button
+        onClick={() => setIsOpen(true)}
+        >Open Modal</Button>
+      <Modal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        continueButton
+        continueButtonHandler={() => setText("text after continue button pressed")}
+        title="Focus Trap Modal">
+        <p>Press Tab and Shift+Tab to test focus trapping.</p>
+      </Modal>
+    </div>
+  );
+};
+
+// Play function for testing focus trapping
+ContinueButtonHandler.play = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
+
+  // Open the modal
+  const openButton = canvas.getByRole('button', { name: 'Open Modal' });
+  await userEvent.click(openButton);
+
+  // Retrieve paragraph
+  const paragraph = canvas.getByLabelText('paragraph text');
+  expect(paragraph).toHaveTextContent('initial text value')
+
+  // Assert that the modal is open
+  const modal = await canvas.getByRole('dialog');
+  expect(modal).toBeInTheDocument();
+
+  // Click Continue button
+  const continueButton = canvas.getByText("Continue");
+  await userEvent.click(continueButton);
+
+  // Test that Continue button handler changed paragraph text
+  expect(paragraph).toHaveTextContent('text after continue button pressed')
+
+};
+
+
+
+export const EscapeKeyCloses = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="p-8">
+      <Button
+        onClick={() => setIsOpen(true)}
+        >Open Modal</Button>
+      <Modal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Escape Key Closes">
+        <p>Press Escape to test closing the modal via an Escape key press.</p>
+      </Modal>
+    </div>
+  );
+};
+
+// Play function for testing focus trapping
+EscapeKeyCloses.play = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
+
+  // Open the modal
+  const openButton = canvas.getByRole('button', { name: 'Open Modal' });
+  await userEvent.click(openButton);
+
+  // Assert that the modal is open
+  const modal = await canvas.getByRole('dialog');
+  expect(modal).toBeInTheDocument();
+
+  // Press escape key
+  await userEvent.keyboard('{Escape}');
+
+  // Ensure Dialog is no long present
+  await expect(canvas.queryByRole('dialog')).not.toBeInTheDocument();
+
+};

package/src/lib/Modal.spec.tsx

@@ -0,0 +1,202 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { describe, it, expect, vi } from "vitest";
+import { Modal } from "./Modal";
+
+describe("Modal Component", () => {
+  const handleClose = vi.fn();
+
+  it("renders when open", () => {
+    render(
+      <Modal isOpen={true} onClose={handleClose} title="Test Modal">
+        <p>Modal Content</p>
+      </Modal>
+    );
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Modal Content")).toBeInTheDocument();
+  });
+
+  it("does not render when closed", () => {
+    render(
+      <Modal isOpen={false} onClose={handleClose} title="Test Modal">
+        <p>Modal Content</p>
+      </Modal>
+    );
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+
+  it("utilizes Continue button and hanlder", () => {
+    const handleContinue = vi.fn();
+    render(
+      <Modal isOpen={true} onClose={handleClose} title="Test Modal" continueButton continueButtonHandler={handleContinue}>
+        <p>Modal Content</p>
+      </Modal>
+    );
+
+    // capture and click on Continue button
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    // verify Continue button handler was executed
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+
+  it("renders modal with a medium blur level and no close button, closes on Close button click", () => {
+    const handleClose = vi.fn();
+    render(
+      <Modal closeButton={false} blurLevel="md" isOpen={true} onClose={handleClose} title="Test Modal">
+        <p>Modal Content</p>
+      </Modal>
+    );
+
+    const closeButton = screen.getByLabelText("Close modal");
+    fireEvent.click(closeButton);
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("click outside closes the modal", () => {
+    const handleClose = vi.fn();
+    render(
+      <Modal isOpen={true} onClose={handleClose} title="Test Modal" clickOutsideCloses>
+        <p>Modal Content</p>
+      </Modal>
+    );
+
+    // Simulate clicking outside the modal
+    fireEvent.mouseDown(document.body);
+
+    // Check if the onClose function was called
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("closes on Escape key press", () => {
+    const handleClose = vi.fn();
+    render(
+      <Modal isOpen={true} onClose={handleClose} title="Test Modal">
+        <p>Modal Content</p>
+      </Modal>
+    );
+
+    fireEvent.keyDown(document, { key: "Escape", code: "Escape" });
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Modal Accessibility Tests", () => {
+    const handleClose = vi.fn();
+
+    it("should have no accessibility violations", async () => {
+      const { container } = render(
+        <Modal isOpen={true} onClose={handleClose} title="Accessible Modal">
+          <p>Modal Content</p>
+        </Modal>
+      );
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it("has a valid ARIA role and label", () => {
+        render(
+          <Modal isOpen={true} onClose={handleClose} title="Accessible Modal">
+            <p>Modal Content</p>
+          </Modal>
+        );
+
+        const dialog = screen.getByRole("dialog");
+
+        expect(dialog).toBeInTheDocument();
+      });
+
+    it("allows tabbing through interactive elements within the modal, closes via enter key press", async () => {
+      const handleClose = vi.fn();
+      render(
+        <Modal isOpen={true} onClose={handleClose} title="Test Modal">
+          <p>I am a Modal dialog!  Behold my GREATNESS!</p>
+        </Modal>
+      );
+
+      const user = userEvent.setup();
+
+      // Get buttons inside the modal
+      const xButton = screen.getByLabelText("Close modal");
+      const closeButton = screen.getByText("Close");
+
+      // Initial focus should be on the first button
+      xButton.focus();
+      expect(document.activeElement).toBe(xButton);
+
+      // Press Tab to move to the second button
+      await user.tab();
+      expect(document.activeElement).toBe(closeButton);
+
+      // Press Tab to move to the second button
+      await user.tab();
+      expect(document.activeElement).toBe(xButton);
+
+      // Press Tab to move to the second button
+      await user.tab();
+      expect(document.activeElement).toBe(closeButton);
+
+      // Press Tab to move to the second button
+      await user.tab();
+      expect(document.activeElement).toBe(xButton);
+
+      // Press Tab to move to the second button
+      await user.tab();
+      expect(document.activeElement).toBe(closeButton);
+
+      // Simulate pressing Enter
+      await user.keyboard("{Enter}");
+
+    });
+
+    it("allows tabbing in reverse w/ shift key through interactive elements within the modal, closes via enter key press", async () => {
+      const handleClose = vi.fn();
+      render(
+        <Modal isOpen={true} onClose={handleClose} title="Test Modal">
+          <p>I am a Modal dialog!  Behold my GREATNESS!</p>
+        </Modal>
+      );
+
+      const user = userEvent.setup();
+
+      // Get buttons inside the modal
+      const xButton = screen.getByLabelText("Close modal");
+      const closeButton = screen.getByText("Close");
+
+      // Initial focus should be on the first button
+      xButton.focus();
+      expect(document.activeElement).toBe(xButton);
+
+      // Press Tab to move to the second button
+      await user.tab();
+      expect(document.activeElement).toBe(closeButton);
+
+      // Press Tab to move to the second button
+      await user.keyboard("{Shift>}{Tab}{/Shift}");
+      expect(document.activeElement).toBe(xButton);
+
+      // Press Tab to move to the second button
+      await user.keyboard("{Shift>}{Tab}{/Shift}");
+      expect(document.activeElement).toBe(closeButton);
+
+      // Press Tab to move to the second button
+      await user.keyboard("{Shift>}{Tab}{/Shift}");
+      expect(document.activeElement).toBe(xButton);
+
+      // Press Tab to move to the second button
+      await user.keyboard("{Shift>}{Tab}{/Shift}");
+      expect(document.activeElement).toBe(closeButton);
+
+      // Simulate pressing Enter
+      await user.keyboard("{Enter}");
+
+    });
+});