@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Accordion.spec.tsx

@@ -0,0 +1,384 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from "vitest";
+import { Accordion, AccordionParent, AccordionParentProps, AccordionProps } from './Accordion';
+import React, { createRef } from 'react';
+import { axe } from "vitest-axe";
+
+const imagePath = new URL('/src/assets/pill.svg', import.meta.url).href;
+
+describe('Accordion', () => {
+
+  it('renders the Accordion component with the given label', () => {
+    render(<Accordion label="Test Accordion" />);
+    expect(screen.getByText('Test Accordion')).toBeInTheDocument();
+  });
+
+  it('renders an accordion with chevron icons instead of plus/minus', () => {
+    render(<Accordion chevron label="Test Accordion" useBackground={false} />);
+
+    const closedImg = screen.getByAltText('Open Icon');
+    expect(closedImg).toHaveAttribute('src', expect.stringContaining('chevron-down'));
+
+    const button = screen.getByText('Test Accordion');
+    fireEvent.click(button);
+
+    const openImg = screen.getByAltText('Close Icon');
+    expect(openImg).toHaveAttribute('src', expect.stringContaining('chevron-up'));
+  });
+
+  it('renders an accordion with useBackground set to false and ensures conditional class is not applied',  () => {
+    render(<Accordion label="Test Accordion" useBackground={false} />);
+
+    const button = screen.getByText('Test Accordion');
+    fireEvent.click(button);
+
+    const content = screen.getByRole('region');
+    expect(content).not.toHaveClass('rounded-b-md');
+  });
+
+  it('toggles content visibility when clicked', () => {
+    render(
+      <Accordion label="Toggle Accordion">
+        <p>Accordion content</p>
+      </Accordion>
+    );
+
+    const button = screen.getByText('Toggle Accordion');
+    expect(screen.queryByText('Accordion content')).not.toBeInTheDocument();
+
+    fireEvent.click(button);
+    expect(screen.getByText('Accordion content')).toBeInTheDocument();
+
+    fireEvent.click(button);
+    expect(screen.queryByText('Accordion content')).not.toBeInTheDocument();
+  });
+
+  it('displays custom icons when provided', () => {
+    const customOpenIcon = <span data-testid="custom-open-icon">Open</span>;
+    const customCloseIcon = <span data-testid="custom-close-icon">Close</span>;
+
+    render(
+      <Accordion
+        label="Custom Icon Accordion"
+        iconAccordionOpened={customCloseIcon}
+        iconAccordionClosed={customOpenIcon}
+      />
+    );
+
+    expect(screen.getByTestId('custom-open-icon')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Custom Icon Accordion'));
+    expect(screen.getByTestId('custom-close-icon')).toBeInTheDocument();
+  });
+
+  it('applies custom classes correctly', () => {
+    render(<Accordion label="Styled Accordion" classNameContainer="custom-class" />);
+    const accordionElement = screen.getByText('Styled Accordion').closest('div');
+    expect(accordionElement).toHaveClass('custom-class');
+  });
+
+  it('passes axe accessibility tests', async () => {
+    const { container } = render(<Accordion label="Accessible Accordion" />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe('AccordionParent', () => {
+  it('renders multiple Accordion components inside AccordionParent', () => {
+    render(
+      <AccordionParent variant="default">
+        <Accordion label="Accordion 1" />
+        <Accordion label="Accordion 2" />
+      </AccordionParent>
+    );
+
+    expect(screen.getByText('Accordion 1')).toBeInTheDocument();
+    expect(screen.getByText('Accordion 2')).toBeInTheDocument();
+  });
+
+  it('allows only one Accordion to be open at a time when singleOpen is true', () => {
+    render(
+      <AccordionParent singleOpen>
+        <Accordion label="Accordion 1">
+          <p>Content 1</p>
+        </Accordion>
+        <Accordion label="Accordion 2">
+          <p>Content 2</p>
+        </Accordion>
+      </AccordionParent>
+    );
+
+    const accordion1 = screen.getByText('Accordion 1');
+    const accordion2 = screen.getByText('Accordion 2');
+
+    fireEvent.click(accordion1);
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+
+    fireEvent.click(accordion2);
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+  });
+
+  it('allows multiple Accordions to be open at the same time when singleOpen is false', () => {
+    render(
+      <AccordionParent singleOpen={false}>
+        <Accordion label="Accordion 1">
+          <p>Content 1</p>
+        </Accordion>
+        <Accordion label="Accordion 2">
+          <p>Content 2</p>
+        </Accordion>
+      </AccordionParent>
+    );
+
+    const accordion1 = screen.getByText('Accordion 1');
+    const accordion2 = screen.getByText('Accordion 2');
+
+    fireEvent.click(accordion1);
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+
+    fireEvent.click(accordion2);
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+  });
+
+  it('applies common classes to child Accordions when specified', () => {
+    render(
+      <AccordionParent classNameChildHeading="common-heading">
+        <Accordion label="Accordion 1" />
+        <Accordion label="Accordion 2" />
+      </AccordionParent>
+    );
+
+    const accordion1Button = screen.getByText('Accordion 1').closest('button');
+    const accordion2Button = screen.getByText('Accordion 2').closest('button');
+
+    expect(accordion1Button).toHaveClass('common-heading');
+    expect(accordion2Button).toHaveClass('common-heading');
+  });
+
+  it('passes axe accessibility tests', async () => {
+    const { container } = render(
+      <AccordionParent variant="default">
+        <Accordion label="Accessible Accordion 1" />
+        <Accordion label="Accessible Accordion 2" />
+      </AccordionParent>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('renders non-Accordion children without modification', () => {
+    render(
+      <AccordionParent>
+        {'Plain text child'}
+      </AccordionParent>
+    );
+
+    expect(screen.getByText('Plain text child')).toBeInTheDocument();
+  });
+
+
+});
+
+describe('Accordion Accessibility Tests', () => {
+  const renderAccordion = (props = {}) =>
+    render(<Accordion label="Accessible Accordion" {...props}>Accordion Content</Accordion>);
+
+  it('should have no accessibility violations for default Accordion', async () => {
+    const { container } = renderAccordion();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should render without accessibility violations', async () => {
+    const { container } = render(
+      <Accordion label="Accordion Label">
+        <p>Accordion Content</p>
+      </Accordion>
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should toggle aria-expanded when clicked', () => {
+    render(
+      <Accordion label="Accordion Label">
+        <p>Accordion Content</p>
+      </Accordion>
+    );
+
+    const button = screen.getByRole('button', { name: /accordion label/i });
+
+    // Initial state
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    // Toggle open
+    fireEvent.click(button);
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+
+    // Toggle closed
+    fireEvent.click(button);
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('should be keyboard navigable', () => {
+    render(
+      <Accordion label="Accordion Label">
+        <p>Accordion Content</p>
+      </Accordion>
+    );
+
+    const button = screen.getByRole('button', { name: /accordion label/i });
+
+    // Press "Enter" key
+    fireEvent.keyDown(button, { key: 'Enter' });
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+
+    // Press "Space" key
+    fireEvent.keyDown(button, { key: ' ' });
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+});
+
+describe('AccordionParent Accessibility Tests', () => {
+  const renderAccordionParent = (props = {}) =>
+    render(
+      <AccordionParent {...props}>
+        <Accordion label="Accordion 1">Content 1</Accordion>
+        <Accordion label="Accordion 2">Content 2</Accordion>
+      </AccordionParent>
+    );
+
+  it('should have no accessibility violations for AccordionParent', async () => {
+    const { container } = renderAccordionParent();
+    const results = await axe(container, {
+      rules: {
+        'color-contrast': { enabled: false },
+      },
+    });
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should render multiple accordions without accessibility violations', async () => {
+    const { container } = render(
+      <AccordionParent>
+        <Accordion label="Accordion 1">
+          <p>Content 1</p>
+        </Accordion>
+        <Accordion label="Accordion 2">
+          <p>Content 2</p>
+        </Accordion>
+      </AccordionParent>
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should only allow one accordion to be open at a time when singleOpen is true', () => {
+    render(
+      <AccordionParent singleOpen>
+        <Accordion label="Accordion 1">
+          <p>Content 1</p>
+        </Accordion>
+        <Accordion label="Accordion 2">
+          <p>Content 2</p>
+        </Accordion>
+      </AccordionParent>
+    );
+
+    const buttons = screen.getAllByRole('button');
+
+    // Open the first accordion
+    fireEvent.click(buttons[0]);
+    expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+    expect(buttons[1]).toHaveAttribute('aria-expanded', 'false');
+
+    // Open the second accordion, the first one should close
+    fireEvent.click(buttons[1]);
+    expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
+    expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('should allow multiple accordions to be open when singleOpen is false', () => {
+    render(
+      <AccordionParent singleOpen={false}>
+        <Accordion label="Accordion 1">
+          <p>Content 1</p>
+        </Accordion>
+        <Accordion label="Accordion 2">
+          <p>Content 2</p>
+        </Accordion>
+      </AccordionParent>
+    );
+
+    const buttons = screen.getAllByRole('button');
+
+    // Open the first accordion
+    fireEvent.click(buttons[0]);
+    expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+
+    // Open the second accordion, the first one should stay open
+    fireEvent.click(buttons[1]);
+    expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+    expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
+  });
+
+
+});
+
+describe('AccordionParent cloning logic', () => {
+  it('honors child.props.hr === false (no <hr>) and index=0', () => {
+    render(
+      <AccordionParent>
+        <Accordion label="No HR" hr={false}>
+          <p>Content</p>
+        </Accordion>
+      </AccordionParent>
+    );
+    // open the first (and only) accordion
+    fireEvent.click(screen.getByText('No HR'));
+
+    // The <hr> should not render
+    expect(screen.queryByRole('separator')).toBeNull();
+
+    // Check index made it into the IDs
+    const region = screen.getByRole('region');
+    expect(region).toHaveAttribute('id', 'accordion-0-content');
+    expect(screen.getByRole('button')).toHaveAttribute('id', 'accordion-0-header');
+  });
+
+  it('merges parent + child classNameHr into the <hr>', () => {
+    render(
+      <AccordionParent classNameHr="parent-hr">
+        <Accordion label="Has HR" classNameHr="child-hr">
+          <p>Content</p>
+        </Accordion>
+      </AccordionParent>
+    );
+    fireEvent.click(screen.getByText('Has HR'));
+
+    // Now an <hr> MUST be present
+    const hr = screen.getByRole('separator');
+    // The default border classes plus parent-hr and child-hr
+    expect(hr).toHaveClass('border-[#dfe1e2]', 'parent-hr', 'child-hr');
+  });
+
+  it('passes useBackground=false to child (bg-transparent + no borders)', () => {
+    render(
+      <AccordionParent>
+        <Accordion label="No BG" useBackground={false}>
+          <p>Content</p>
+        </Accordion>
+      </AccordionParent>
+    );
+    fireEvent.click(screen.getByText('No BG'));
+
+    const region = screen.getByRole('region');
+    // The contentClasses path for `useBackground===false` includes bg-transparent and border-0
+    expect(region).toHaveClass('bg-transparent', 'border-0');
+  });
+});

package/src/lib/Accordion.tsx

@@ -0,0 +1,240 @@
+// Currently Exports Accordion, AccordionProps
+import { Children, cloneElement, forwardRef, HTMLAttributes, isValidElement, ReactNode, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import plus from '../assets/img/plus-accordion.svg';
+import minus from '../assets/img/minus-accordion.svg';
+import chevronDown from '../assets/img/chevron-down.svg';
+import chevronUp from '../assets/img/chevron-up.svg';
+
+const defaultParentMarginTop = '-mt-2';
+
+interface VariantType {
+  [key: string]: string;
+}
+
+const baseClassesButton = 'flex justify-between items-center w-full py-4 px-5 text-left bg-white ' +
+  ' rounded-xs border border-[#dfe1e2] mt-2 text-[#71767a] text-lg font-bold font-["Arial"]';
+
+const baseClassesContent = 'px-6 py-4 border border-t-0 border-[#dfe1e2] text-[#71767a] bg-white ' +
+  'text-lg font-normal font-["Arial"]';
+
+const variantsButton: VariantType = {
+  default: '',
+  blank: '',
+  outline: '',
+};
+
+const variantsContent: VariantType = {
+  default: '',
+  blank: '',
+  outline: '',
+};
+
+type CallbackFunction = (open: boolean) => void;
+
+export interface AccordionProps extends HTMLAttributes<HTMLButtonElement>  {
+  label: string;
+  index?: number; // index of specific accordion in stack
+  onExpand?: (setOpen: CallbackFunction) => void;  // onExpand callback
+  variant?: string;
+  chevron?: boolean;
+  iconAccordionOpened?: ReactNode;
+  iconAccordionClosed?: ReactNode;
+  // rounded?: boolean;
+  classNameContainer?: string;
+  classNameContent?: string;
+  classNameHeading?: string;
+  children?: ReactNode;
+  singleOpen?: boolean;
+  hr?: boolean;             // uses hr when sharing background? default true
+  classNameHr?: string;     // custom css for hr element
+  useBackground?: boolean;  // content shares background w/ heading
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  ({ variant = 'default', label, classNameContainer = '', chevron = false,
+    iconAccordionOpened, iconAccordionClosed, hr = true,
+    classNameHeading = '', classNameContent = '', onExpand, singleOpen,
+    classNameHr = '', useBackground = true,
+    index, children, ...props }, ref) => {
+
+  const [open, setOpen] = useState(false);
+  const [contentClasses, setContentClasses] = useState(baseClassesContent);
+  const [headingClasses, setHeadingClasses] = useState(baseClassesButton);
+  const [hrClasses, setHrClasses] = useState('')
+  const id = `accordion-${index ?? label.replace(/\s+/g, '-').toLowerCase()}`;
+
+  const onClick = () => {
+    // Invoke the parent's onExpand handler with the close function
+    if (onExpand && singleOpen) {
+      onExpand(setOpen);
+    }
+
+    // Toggle the current accordion's open state
+    setOpen(!open);
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+      //console.log('key pressed, event.key === \'' + event.key + '\', index: ' + index + ', label: ' + label);
+    }
+  };
+
+  useEffect(() => {
+    setHrClasses(twMerge('border-[#dfe1e2] -mt-4 pt-0 mb-3', classNameHr));
+  }, [classNameHr]);
+
+  useEffect (() => {
+    if (useBackground) {
+      // setHeadingClasses(baseClassesButton);
+      setContentClasses(baseClassesContent);
+    }
+    else {
+      // setHeadingClasses(twMerge(baseClassesButton, ''))
+      setContentClasses(twMerge(baseClassesContent, 'bg-transparent border-0'));
+    }
+  }, [useBackground]);
+
+  useEffect(() => {
+    if (open && useBackground) {
+      setHeadingClasses(twMerge(baseClassesButton, 'border-b-0 rounded-t rounded-b-none'))
+    } else {  // !open && !useBackground
+      setHeadingClasses(baseClassesButton);
+    }
+  }, [open, useBackground]);
+
+  return (
+    <div ref={ref} className={classNameContainer}>
+      <button
+        className={twMerge(headingClasses, variantsButton.variant, classNameHeading)}
+          // rounded && (open ? 'rounded-t-md' : 'rounded-md'), '')}
+        aria-controls={`${id}-content`}
+        aria-expanded={open}
+        id={`${id}-header`}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        {...props}
+        >
+          <span>{label}</span>
+          <span>
+            {open ?
+              iconAccordionOpened || <img src={chevron ? chevronUp : minus} alt="Close Icon" /> :
+              iconAccordionClosed || <img src={chevron ? chevronDown : plus} alt="Open Icon" />
+            }
+          </span>
+      </button>
+
+      { open &&
+        <>
+        {/* use HR only when useBackground true */}
+
+        <div
+          className={twMerge(contentClasses, variantsContent.variant, classNameContent,
+            // rounded && useBackground && 'rounded-b-md', 'relative'
+            useBackground && 'rounded-b-md', 'relative'
+          )}
+          id={`${id}-content`}
+          role="region"
+          aria-labelledby={`${id}-header`}
+          >
+          { useBackground && hr && <hr className={hrClasses} /> }
+          {children}
+        </div>
+        </>
+      }
+    </div>
+  );
+});
+
+
+export interface AccordionParentProps extends HTMLAttributes<HTMLDivElement>  {
+  children: ReactNode;
+  variant?: string;
+  chevron?: boolean;
+  iconAccordionOpened?: ReactNode;
+  iconAccordionClosed?: ReactNode;
+  // rounded?: boolean;
+  // classNameHeading?: string;
+  // classNameContent?: string;
+  classNameContainer?: string;
+  classNameChildHeading?: string;
+  classNameChildContent?: string;
+  singleOpen?: boolean; // open one accordion at a time, default is true
+  hr?: boolean;
+  classNameHr?: string;
+  useBackground?: boolean;
+}
+
+/*
+ * This is the parent accordion component, and does the following:
+ * 1. manages state for opened and closed accordion elements, so by default only one
+ *    element is opened at a time.  If a different accordion element is opened, the
+ *    previously opened one is closed.
+ * 2. when multiple accordions are grouped together, takes in common state values
+ *    so that the same state value does not have to be specified over and over for each
+ *    separate accordion component
+*/
+export const AccordionParent = forwardRef<HTMLDivElement, AccordionParentProps>(
+  (
+    {
+      children, variant = 'default', chevron, iconAccordionOpened,
+      iconAccordionClosed,
+      // rounded,
+      classNameContainer,
+      singleOpen = true,
+      classNameChildHeading,
+      classNameChildContent,
+      hr,
+      classNameHr,
+      useBackground,
+      ...props
+    },
+    ref
+  ) => {
+
+    const [closePreviousAccordion, setClosePreviousAccordion] = useState<CallbackFunction | null>(
+      null
+    );
+
+    // Expansion handler to manage accordion open/close
+    const accordionExpansionHandler = (newSetOpen: CallbackFunction) => {
+      // Close the previously opened accordion, if any
+      if (closePreviousAccordion) {
+        closePreviousAccordion(false);
+      }
+
+      // Save the new accordion's setOpen reference
+      setClosePreviousAccordion(() => newSetOpen);
+    };
+
+    return (
+      <div ref={ref} {...props} className={twMerge(defaultParentMarginTop, classNameContainer)}>
+        {Children.map(children, (child, index) => {
+          if (isValidElement<AccordionProps>(child)) {
+            return cloneElement<AccordionProps>(child, {  // <AccordionProps> to ensure child component sees parent specification in code
+              ...child.props, // Merge existing props from the child
+              variant,
+              chevron,
+              iconAccordionOpened,
+              iconAccordionClosed,
+              // rounded,
+              classNameHeading: twMerge(classNameChildHeading, child.props.classNameHeading),  // className for child component
+              classNameContent: twMerge(classNameChildContent, child.props.classNameContent),
+              singleOpen,
+              onExpand: (newSetOpen: CallbackFunction) =>
+                accordionExpansionHandler(newSetOpen), // Pass expansion handler to child
+              // child defaults to true, so if false, use child/false value
+              hr: child.props.hr === false ? false : hr,
+              classNameHr: twMerge(classNameHr, child.props.classNameHr),
+              useBackground: child.props.useBackground === false ? false : useBackground,
+              index,
+            });
+          }
+          return child;
+        })}
+      </div>
+    );
+  }
+);