@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Shield.spec.tsx

@@ -0,0 +1,275 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from "vitest";
+import { Shield, ShieldProps } from './Shield';
+import React, { createRef } from 'react';
+import { axe } from "vitest-axe";
+import closeIcon from '../assets/img/close_small.svg';
+import warning from '../assets/img/warning.svg';
+import emergency from '../assets/img/emergency_home.svg';
+import thumbUp from '../assets/img/thumb_up.svg';
+
+
+const imagePath = new URL('/src/assets/pill.svg', import.meta.url).href;
+
+describe('Shield', () => {
+
+  it('renders the correct icon for variant "warning"', () => {
+    render(<Shield variant="warning" subVariant="half">Warning Shield</Shield>);
+    const icon = screen.getByRole('img', { name: /warning icon/i });
+    expect(icon).toHaveAttribute('src', warning);
+  });
+
+  it('renders the correct icon for variant "hazard"', () => {
+    render(<Shield variant="hazard" subVariant="half">Hazard Shield</Shield>);
+    const icon = screen.getByRole('img', { name: /hazard icon/i });
+    expect(icon).toHaveAttribute('src', emergency);
+  });
+
+  it('renders the correct icon for variant "thumbUp"', () => {
+    render(<Shield variant="go" subVariant="half">Thumb Up Shield</Shield>);
+    const icon = screen.getByRole('img', { name: /go icon/i });
+    expect(icon).toHaveAttribute('src', thumbUp);
+  });
+
+  it('renders children inside the Shield', () => {
+    render(<Shield variant="warning" subVariant="half">This is a warning</Shield>);
+    expect(screen.getByText('This is a warning')).toBeInTheDocument();
+  });
+
+  it('closes the Shield when the close button is clicked', () => {
+    render(<Shield variant="warning" subVariant="half">Closable Shield</Shield>);
+
+    const shieldElement = screen.getByText('Closable Shield').parentElement;
+    const closeButton = screen.getByRole('button', { name: /close modal/i });
+
+    expect(shieldElement).toBeVisible();
+
+    fireEvent.click(closeButton);
+
+    expect(shieldElement).toHaveClass('hidden');
+  });
+
+  it('renders the close button with the correct icon', () => {
+    render(<Shield variant="warning" subVariant="half">Shield with Close</Shield>);
+
+    const closeIconImg = screen.getByRole('img', { name: /close alert icon/i });
+
+    expect(closeIconImg).toHaveAttribute('src', closeIcon);
+  });
+
+  // ---
+
+
+  // Test basic render - default variant / default subvariant
+  it('should render successfully', () => {
+    const { baseElement } = render(<Shield variant={'default'} subVariant={'default'}>
+      <h1>Heading</h1>
+      <p>Content Body</p>
+    </Shield>);
+    expect(baseElement).toBeTruthy();
+  });
+
+  // Test basic render - icon variant / blue subvariant
+  it('should render successfully', () => {
+    const { baseElement } = render(<Shield variant={'icon'} subVariant={'blue'}>
+      I'm a Shield!
+    </Shield>);
+    expect(baseElement).toBeTruthy();
+  });
+
+  // Test basic render - media variant / default subvariant
+  it('should render successfully', () => {
+    const { baseElement } = render(<Shield variant={'media'} subVariant={'default'} imagePath={imagePath} imageAlt='Pill icon'>
+      <h1>Heading</h1>
+      <p>Content Body</p>
+    </Shield>);
+    expect(baseElement).toBeTruthy();
+  });
+
+  // Test diff variant & size props
+  it('should apply the correct class for the default variant', () => {
+    const { container } = render(<Shield variant="default" subVariant={'default'} >I'm a Shield!</Shield>);
+    const shieldElement = container.firstChild as HTMLElement;
+    expect(shieldElement.className).toContain('bg-gray-500/10');
+  });
+
+
+  it('should apply the correct class for the icon variant', () => {
+    const { container } = render(<Shield variant="icon" subVariant={'default'} >I'm a Shield!</Shield>);
+    const shieldElement = container.firstChild as HTMLElement;
+    expect(shieldElement.className).toContain('bg-gray-500');
+  });
+
+
+  it('should apply the correct class for media variant', () => {
+    const { container } = render(<Shield variant={'media'} subVariant={'default'} >
+      <h1>Heading</h1>
+      <p>Body content</p>
+    </Shield>);
+    const shieldElement = container.firstChild as HTMLElement;
+    expect(shieldElement.className).toContain('w-[250px] mx-2 border-l-8 border-black grid grid-cols-6 rounded-md bg-gray-400/10 pr-2 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20 overflow-hidden');
+  });
+
+  // Test image prop and accessibility
+  it('should render an image with the correct alt text', () => {
+    const { container } = render(<Shield variant={'media'} subVariant={'default'} imagePath={imagePath} imageAlt='Test Image'>
+      <h1>Heading</h1>
+      <p>Body Content</p>
+    </Shield>);
+    const image = container.querySelector('img');
+    expect(image).toBeTruthy();
+    // expect(image?.getAttribute('src')).toBe('path/to/image.jpg');
+    expect(image?.getAttribute('alt')).toBe('Test Image');
+  });
+
+  it('renders without children if none are provided', () => {
+    const { container } = render(<Shield variant="default" subVariant="gray" />);
+    const shield = container.firstChild as HTMLElement;
+    expect(shield).toBeInTheDocument();
+    expect(shield).toHaveClass('mx-2 inline-flex items-center rounded-md bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-400/20');
+  });
+
+  it('renders a custom media shield with additional image classes', () => {
+    render(
+      <Shield
+        variant="media"
+        subVariant="green"
+        imagePath="/path/to/image.jpg"
+        imageAlt="Custom Image"
+        classNameImage="rounded-lg"
+      >
+        Custom Media Shield
+      </Shield>
+    );
+    const img = screen.getByAltText('Custom Image');
+    expect(img).toHaveClass('h-full rounded-lg');
+  });
+
+  // handles empty props gracefully
+  it('handles empty props gracefully', () => {
+    const { container } = render(<Shield variant="default" subVariant="default" />);
+    const shield = container.firstChild as HTMLElement;
+    expect(shield).toBeInTheDocument();
+  });
+
+  it('should forward the ref to the correct DOM element', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Shield ref={ref} variant="default" subVariant="default">
+        Shield with Ref
+      </Shield>
+    );
+
+    // Confirm the ref is attached to the span element
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current?.textContent).toBe('Shield with Ref');
+  });
+
+  it('should forward the ref to the correct element for media variant', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Shield
+        ref={ref}
+        variant="media"
+        subVariant="default"
+        imagePath="/path/to/image.jpg"
+        imageAlt="Media Image"
+      >
+        Media Shield with Ref
+      </Shield>
+    );
+
+    // Confirm the ref is attached to the div element
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current?.textContent).toContain('Media Shield with Ref');
+  });
+
+
+  it('merges custom classNameSvg with default classNameSvg for "icon" variant and "custom" subVariant', () => {
+    const customSvgClasses = 'custom-size custom-fill';
+
+    // Render the Shield component with the "icon" variant and "custom" subVariant
+    render(
+      <Shield variant="icon" subVariant="custom" classNameSvg={customSvgClasses}>
+        Icon Shield
+      </Shield>
+    );
+
+    // Use act to ensure updates triggered by useEffect are applied
+    const svgElement = screen.getByRole('img', { hidden: true }); // Finds the SVG element
+
+    // Verify that the final svgClassValue is merged correctly
+    expect(svgElement).toHaveClass('size-1.5 fill-gray-400'); // From "default" subVariant in "icon" variant
+    expect(svgElement).toHaveClass('custom-size custom-fill'); // Custom svgClasses
+  });
+
+});
+
+describe('Shield Accessibility Tests', () => {
+  const renderComponent = (props: ShieldProps) => render(<Shield {...props}>Accessible Shield</Shield>);
+
+  it('should have no accessibility violations for default variant', async () => {
+    const { container } = renderComponent({ variant: 'default', subVariant: 'default' });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations for icon variant', async () => {
+    const { container } = renderComponent({ variant: 'icon', subVariant: 'blue' });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations for media variant with image', async () => {
+    const { container } = renderComponent({
+      variant: 'media',
+      subVariant: 'green',
+      imagePath: 'https://via.placeholder.com/50',
+      imageAlt: 'Sample Image',
+    });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should include alt text for images in media variant', () => {
+    const { getByAltText } = renderComponent({
+      variant: 'media',
+      subVariant: 'green',
+      imagePath: 'https://via.placeholder.com/50',
+      imageAlt: 'Accessible Image',
+    });
+    expect(getByAltText('Accessible Image')).toBeTruthy();
+  });
+
+  it('should not have duplicate or missing roles in icon variant', async () => {
+    const { container } = renderComponent({ variant: 'icon', subVariant: 'red' });
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('role', 'img');
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('should support custom class merging without accessibility issues', async () => {
+    const { container } = renderComponent({
+      variant: 'default',
+      subVariant: 'custom',
+      className: 'custom-class',
+    });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should handle empty or missing children gracefully', async () => {
+    const { container } = renderComponent({ variant: 'default', subVariant: 'default', children: null });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should support ARIA attributes for assistive technologies', () => {
+    const { container } = renderComponent({
+      variant: 'icon',
+      subVariant: 'yellow',
+      'aria-label': 'Yellow Shield',
+    });
+    expect(container.querySelector('div')).toHaveAttribute('aria-label', 'Yellow Shield');
+  });
+});

package/src/lib/Shield.tsx

@@ -0,0 +1,239 @@
+import { forwardRef, HTMLAttributes, ReactNode, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import thumbUp from '../assets/img/thumb_up.svg';
+import warning from '../assets/img/warning.svg';
+import emergency from '../assets/img/emergency_home.svg';
+import closeIcon from '../assets/img/close_small.svg'
+
+interface VariantType {
+  variant: string;         // type of shield
+  subVariant: string;      // variant of shield
+  classes?: string;     // class property for this variant
+  classNameSvg?: string;  // classNameSvg if relevant
+}
+
+const variants: VariantType[]  = [
+  {
+    variant: 'default',
+    subVariant: 'default',
+    classes: 'mx-2 inline-flex items-center rounded-md bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-400/20'
+  },
+  {
+    variant: 'default',
+    subVariant: 'gray',
+    classes: 'mx-2 inline-flex items-center rounded-md bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-400/20'
+  },
+  {
+    variant: 'default',
+    subVariant: 'red',
+    classes: 'mx-2 inline-flex items-center rounded-md bg-red-500/10 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-400/20'
+  },
+  {
+    variant: 'default',
+    subVariant: 'yellow',
+    classes: 'mx-2 inline-flex items-center rounded-md bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-400/20'
+  },
+  {
+    variant: 'default',
+    subVariant: 'green',
+    classes: 'mx-2 inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-500/20'
+  },
+  {
+    variant: 'default',
+    subVariant: 'blue',
+    classes: 'mx-2 inline-flex items-center rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/30'
+  },
+
+  {
+    variant: 'warning',
+    subVariant: 'half',
+    classes: 'flex flex-row w-1/2 bg-[#fff1be] border-[#efbd1f] p-2 rounded-md border justify-center items-start gap-2.5 inline-flex">'
+  },
+  {
+    variant: 'warning',
+    subVariant: 'full',
+    classes: 'flex flex-row w-full bg-[#fff1be] border-[#efbd1f] p-2 rounded-md border justify-center items-start gap-2.5 inline-flex'
+  },
+
+  {
+    variant: 'hazard',
+    subVariant: 'half',
+    classes: 'flex flex-row w-1/2 bg-[#f4c2c2] border-[#efbd1f] p-2 rounded-md border justify-center items-start gap-2.5 inline-flex">'
+  },
+  {
+    variant: 'hazard',
+    subVariant: 'full',
+    classes: 'flex flex-row w-full bg-[#f4c2c2] border-[#efbd1f] p-2 rounded-md border justify-center items-start gap-2.5 inline-flex">'
+  },
+
+  {
+    variant: 'go',
+    subVariant: 'half',
+    classes: 'flex flex-row w-1/2 bg-[#d6f4d5] border-[#40bf40] p-2 rounded-md border justify-center items-start gap-2.5 inline-flex">'
+  },
+  {
+    variant: 'go',
+    subVariant: 'full',
+    classes: 'flex flex-row w-full bg-[#d6f4d5] border-[#40bf40] p-2 rounded-md border justify-center items-start gap-2.5 inline-flex">'
+  },
+
+
+  {
+    variant: 'icon',
+    subVariant: 'default',
+    classes: 'inline-flex items-center gap-x-1.5 rounded-full bg-gray-500 px-2 py-1 text-xs font-medium text-gray-700',
+    classNameSvg: 'size-1.5 fill-gray-400'
+  },
+  {
+    variant: 'icon',
+    subVariant: 'gray',
+    classes: 'inline-flex items-center gap-x-1.5 rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700',
+    classNameSvg: 'size-1.5 fill-gray-400'
+  },
+  {
+    variant: 'icon',
+    subVariant: 'red',
+    classes: 'inline-flex items-center gap-x-1.5 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700',
+    classNameSvg: 'size-1.5 fill-red-400'
+  },
+  {
+    variant: 'icon',
+    subVariant: 'yellow',
+    classes: 'inline-flex items-center gap-x-1.5 rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-700',
+    classNameSvg: 'size-1.5 fill-yellow-400'
+  },
+  {
+    variant: 'icon',
+    subVariant: 'green',
+    classes: 'inline-flex items-center gap-x-1.5 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700',
+    classNameSvg: 'size-1.5 fill-green-400'
+  },
+  {
+    variant: 'icon',
+    subVariant: 'blue',
+    classes: 'inline-flex items-center gap-x-1.5 rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700',
+    classNameSvg: 'size-1.5 fill-blue-400'
+  },
+  {
+    variant: 'media',
+    subVariant: 'default',
+    classes: 'w-[250px] mx-2 border-l-8 border-black grid grid-cols-6 rounded-md bg-gray-400/10 pr-2 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20 overflow-hidden',
+  },
+  {
+    variant: 'media',
+    subVariant: 'gray',
+    classes: 'w-[250px] mx-2 border-l-8 border-black grid grid-cols-6 rounded-md bg-gray-400/10 pr-2 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-400/20 overflow-hidden',
+  },
+  {
+    variant: 'media',
+    subVariant: 'green',
+    classes: 'w-[250px] mx-2 border-l-8 border-black grid grid-cols-6 rounded-md bg-gray-400/10 pr-2 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-400/20 overflow-hidden',
+  },
+]
+
+  export interface ShieldProps extends HTMLAttributes<HTMLDivElement>  {
+    variant: string;
+    subVariant: string;
+    className?: string;
+    classNameSvg?: string;
+    imagePath?: string;
+    imageAlt?: string;
+    classNameImage?: string;
+    children?: ReactNode;
+  }
+
+  export const Shield = forwardRef<HTMLDivElement, ShieldProps>(
+    ({ variant = 'default', subVariant = 'default', className,
+    classNameSvg = 'size-1.5 fill-yellow-400', imagePath, imageAlt,
+    classNameImage, children, ...props }, ref) => {
+
+    const [classValue, setClassValue] = useState<string>();
+    const [svgClassValue, setSvgClassValue] = useState<string>();
+    const [svgSource, setSvgSource] = useState(warning);
+
+    const onClose = () => {
+      setClassValue(twMerge(classValue, 'hidden'));
+    }
+
+    // set selected value for classValue and svgClassValue
+    useEffect(() => {
+
+      // If dev specifies 'custom' for subVariant, use 'default' classes as the base
+      // so we can merge their custom classes later using twMerge
+      const tempSubVariant = (subVariant === 'custom') ? 'default' : subVariant;
+
+      const tempClasses = variants.find(
+        (v) => v.variant === variant && v.subVariant === tempSubVariant
+      )?.classes;
+
+      // assign classNameSvg after finding variant & subVariant
+      if (variant === 'icon') {
+        const tempSvgClasses = variants.find(
+          (v) => v.variant === variant && v.subVariant === tempSubVariant
+        )?.classNameSvg;
+
+        if (subVariant === 'custom') {
+          setSvgClassValue(twMerge(tempSvgClasses, classNameSvg));
+        } else {
+          setSvgClassValue(tempSvgClasses);
+        }
+      }
+
+      // set proper icon path if variant warning, hazard, or thumbUp
+      if (variant === 'hazard') {
+        setSvgSource(emergency);
+      } else if (variant === 'go') {
+        setSvgSource(thumbUp);
+      }
+
+      // merge custom classes (dev can set custom classes whether using custom component or not)
+      setClassValue(twMerge(tempClasses, className));
+
+    }, [subVariant, className, variant, classNameSvg]);
+
+    // console.log(imagePath);
+
+    return (
+      <>
+        {variant === 'default' &&
+          <div className={classValue} {...props} ref={ref}>
+            {children}
+          </div>
+        }
+        { (variant === 'warning' || variant === 'hazard' || variant ==='go') &&
+          <div className={classValue}>
+            <div className="size-6 flex-col justify-center items-center gap-2.5 inline-flex overflow-hidden relative">
+              <div className="left-0 top-0 absolute"><img className='size-6' src={svgSource} alt={`${variant} icon`} /></div>
+            </div>
+            <div className="grow shrink basis-0 self-stretch text-black text-sm font-normal font-['Arial'] leading-[19px]">{children}</div>
+            <button
+              // ref={closeButtonRef}
+              onClick={onClose} // adds 'hidden' to class list for parent div
+              className="size-3 py-px justify-center items-center gap-2.5 flex"
+              aria-label="Close modal"
+              >
+              <img src={closeIcon} alt='close alert icon' />
+            </button>
+          </div>
+        }
+        {variant === 'icon' &&
+          <div className={classValue} {...props} ref={ref}>
+            <svg viewBox="0 0 6 6" aria-hidden="true" className={svgClassValue} role="img">
+              <circle r={3} cx={3} cy={3} />
+            </svg>
+            {children}
+          </div>
+        }
+        {variant === 'media' &&
+          <div className={classValue} {...props} ref={ref}>
+            <div className="col-start-1 col-span-2">
+              <img className={twMerge('h-full',classNameImage)} src={imagePath} alt={imageAlt} />
+            </div>
+            <div className="w-full ml-2 col-start-3 col-span-3">
+                {children}
+            </div>
+          </div>
+        }
+      </>
+    );
+  });

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

@@ -0,0 +1,136 @@
+import { Meta, StoryContext } from '@storybook/react';
+import { SideBarNav, SideBarNavProps } from './SideBarNav';
+// import List from './List';
+import { Link } from 'react-router-dom';
+
+import hospital from '../assets/img/hospital.jpg';
+import home from '../assets/img/home.svg';
+import pill from '../assets/img/pill.svg';
+import prescription from '../assets/img/prescription.svg';
+import { userEvent, waitFor, within } from 'storybook/test';
+import { expect } from 'storybook/test';
+import { useState } from 'react';
+
+const imagePath = 'src/assets/img/hospital.jpg';
+
+/*
+  className?: string;
+  variant?: string;
+  image?: ReactNode;
+  classNameImage?: string;
+  version: string;
+*/
+const menuItems = [
+  {
+    children: <>
+        <img className='max-h-[2em] max-w-[2em] pr-1 inline' src={pill} alt='home link icon' />
+        <p className='inline'>TEST Link 1</p>
+        {/* <Link to='https://google.com' target='_blank'>Link 1</Link> */}
+      </>
+  },
+  {
+    children: <>
+      <img className='max-h-[2em] max-w-[2em] pr-1 inline' src={pill} alt='link icon 2' />
+      <p className='inline'>Link 2</p>
+      {/* <Link to='https://google.com' target='_blank'>Link 2</Link> */}
+    </>
+  },
+  {
+    children: <>
+      <img className="max-h-[2em] max-w-[2em] pr-1 inline" src={prescription} alt='link icon 3' />
+      <p className='inline'>TEST Link 3</p>
+      {/* <Link to='https://google.com' target='_blank'>Link 3</Link> */}
+    </>
+  }
+]
+
+// A wrapper that lets you unmount the SideBarNav component, used in the test to cover line 40
+const UnmountWrapper = (props: SideBarNavProps) => {
+  const [mounted, setMounted] = useState(true);
+  return (
+    <div>
+      {mounted && <SideBarNav {...props} />}
+      <button style={{ marginTop: '1rem' }} onClick={() => setMounted(false)}>
+        Unmount
+      </button>
+    </div>
+  );
+};
+
+
+// Meta object - defines basic storybook options for this story
+export default {
+  title: 'Components/SideBarNav',
+  component: SideBarNav,
+  argTypes: {
+    // variant: {
+    //   control: 'select',
+    //   options: ['','']
+    //   },
+    },
+  args: {
+    image: hospital,
+    menuItems: menuItems,
+    // label: 'Button', // set default argument values
+  },
+  parameters: {
+    layout: 'centered', // options are 'centered', 'fullscreen', and 'padded' (default value)
+    backgrounds: { default: 'dark' }, // options are light, medium, or dark
+  },
+} as Meta<SideBarNavProps>;
+
+// Define "Default" story
+export const Default = {
+  args: {
+
+  }
+};
+
+// Story to test the hamburger menu, toggle behavior, and click-outside close
+export const HamburgerMenuToggle = {
+  args: {
+    menu: true,
+    clickOutsideCloses: true
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    // Find the hamburger menu button (rendered only when menu=true)
+    const button = await canvas.findByTestId('hamburgerMenu');
+    // Click the button to toggle (open) the sidebar
+    await userEvent.click(button);
+
+    // Wait for the sidebar to slide in (i.e. have class 'translate-x-0')
+    await waitFor(() => {
+      // Query for the sidebar element by its unique width class
+      const sidebar = canvasElement.querySelector('div.w-56');
+      expect(sidebar?.className).toContain('translate-x-0');
+    });
+
+    // Simulate a click outside the sidebar to trigger clickOutsideCloses logic
+    await userEvent.click(document.body);
+    await waitFor(() => {
+      const sidebar = canvasElement.querySelector('div.w-56');
+      expect(sidebar?.className).not.toContain('translate-x-0');
+    });
+  }
+};
+
+
+// Story to cover the unmount (cleanup) logic (line 40 of the component)
+export const UnmountCleanup = {
+  render: (args: SideBarNavProps) => <UnmountWrapper {...args} menu={true} clickOutsideCloses={true} />,
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+
+    // Open the sidebar by clicking the hamburger button
+    const toggleButton = await canvas.findByRole('button', { name: /menu/i }).catch(() => canvas.getAllByRole('button')[0]);
+    await userEvent.click(toggleButton);
+
+    // Click the "Unmount" button to remove the component (which triggers cleanup)
+    const unmountButton = await canvas.findByRole('button', { name: /unmount/i });
+    await userEvent.click(unmountButton);
+
+    // Optionally, click outside and verify no error occurs (since the listener is removed)
+    await userEvent.click(document.body);
+  }
+};